JAVA WEB从入门到精通day04 javascript学习（2）

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 505 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了JavaScript中的核心对象，包括String、Array、Date、Math、全局对象、BOM及DOM对象的基本属性和常用方法，帮助读者更好地理解和使用这些对象。

本节思维导图

这里写图片描述

js的string对象

-属性：js的string对象
-属性：length，返回字符串的长度
-常用方法：
<script>
        var str="hello world";
        var str1="i'm coming"
        document.write(str.bold());//使用粗体显示字符串
        document.write("<br>");
        document.write(str.charAt(0));//返回指定位置的字符
        document.write("<br>");
        document.write(str.concat(str1));//连接两个字符串
        document.write("<br>");
        document.write(str.indexOf("wor"));//返回指定字符串的位置，找不到返回-1
        document.write("<br>");
        document.write(str.link("注册页面.html"));//把字符串设置为超链接，里面的参数为链接到的地址
        document.write("<br>");
        document.write(str.replace("hello","hi"));//把字符串里面的子串替换
        document.write("<br>");
        document.write(str.slice(1,5));//返回指定索引之间的字符串
        document.write("<br>");
        var arr=str.split(" ");//切割字符串
        document.write(arr);
        document.write("<br>");
        document.write(str.substring(1,5));//返回指定索引之间的字符串
        document.write("<br>");
</script>

js的Array对象

   属性：length，返回数组的长度
   常用方法：
   <script>
        var arr1=[1,2,3];
        var arr2=[4,5,6];
        document.write(arr1.concat(arr2));//连接两个或者更多的数组
        document.write("<br>");
        var arr=["zhangsan","lisi","wangwu"];
        document.write(arr.join("-"));//把数组的所有元素放入一个字符串，元素通过制定的分隔符进行分割
        document.write("<br>");
        document.write(arr.push("zhaoliu"));//向数组的末尾添加一个或者更多元素，并返回数组新的长度
        document.write("<br>");
        document.write(arr.pop());//删除并返回数组的最后一个元素
        document.write("<br>");
        document.write(arr.reverse());//逆序排列数组中的元素
        document.write("<br>");
        document.write(arr.sort());//对数组的元素进行排序
        document.write("<br>");
        document.write(arr.toString());//把数组转换成字符串，并返回结果
    </script>

js的Date对象

    表示时间和日期的对象。
    常用方法：
    <script>
        var date=new Date();//获得日期对象
        document.write(date);//输出当前日期

        document.write("<hr>");
        document.write(date.toLocaleString());//根据本地时间格式，把Date对象转换成字符串

        document.write("<hr>");
        document.write("年份："+date.getFullYear());//返回年份

        document.write("<hr>");
        document.write("月份："+date.getMonth());//返回月份（0-11）

        document.write("<hr>");
        document.write("星期:"+date.getDay());//返回星期（0-6），0为星期日

        document.write("<hr>");
        document.write("日:"+date.getDate());//返回天

        document.write("<hr>");
        document.write("小时："+date.getHours());//返回小时

        document.write("<hr>");
        document.write("分钟"+date.getMinutes());//返回分钟

        document.write("<hr>");
        document.write("秒："+date.getSeconds());//返回秒数

        document.write("<hr>");
        document.write("从1970.1.1至今的毫秒数："+date.getTime());//返回从1970.1.1至今的毫秒数
    </script>

js的Math对象

    Math对象里面的方法都是静态方法。
    属性：PI：圆周率  
    常用方法：
    <script>
        var num=9.6;
        document.write("原数值:"+num);
        document.write("<hr>");

        document.write("ceil方法:"+Math.ceil(num));//ceil方法，进行向上舍入
        document.write("<hr>");

        document.write("floor方法:"+Math.floor(num));//floor方法，进行向下舍入
        document.write("<hr>");

        document.write("round方法:"+Math.round(num));//四舍五入
        document.write("<hr>");

        document.write("random方法:"+Math.random());//生成0到1的伪随机数
    </script>

js的全局对象

全局属性：
NaN：指示某个值是不是数字值
undefined：指示未定义的值

全局方法：不属于任何对象，可以直接使用
<script>
        var str="测试字符串";
        document.write("对字符串进行编码"+escape(str));//escape()对字符串进行编码
        document.write("<br>");
        document.write("对字符串进行解码"+unescape(str));//unescape()对字符串进行解码
        document.write("<hr>");         
        document.write(isNaN(str));         //判断某个值是否是数字
        document.write(parseInt(str));//把字符串转换成整数
</script>

面试题目：js中是否存在重载？

（1）js中不存在重载
（2）但是js中可以通过其他方式模拟重载 （通过arguments，arguments是一个数组，保存了调用方给该函数的所有参数）

js的BOM对象

BOM：browser object model（浏览器对象模型）

BOM有Window，Navigator，Screen，History，Location五个对象

-Navigator对象：获取包含有关浏览器的信息

属性：
appName：返回浏览器的名称
appVersion：返回浏览器的平台和版本信息
    <script>
        document.write(navigator.appName);
        document.write("<hr>");
        document.write(navigator.appVersion);   
    </script>

-Screen对象：获取客户端屏幕的信息

属性：
width:返回显示器屏幕的宽度
height：返回显示器屏幕的高度
    <script>
        document.write(screen.height);
        document.write("<hr>");
        document.write(screen.width);   
    </script>

-History对象：包含用户访问过的URL，可以实现返回到前一个页面和后一个页面的效果

属性：
length:返回浏览器历史列表中的URL数量
方法：
back（） ：加载history列表中的前一个URL
forward（）：加载history列表中的下一个URL
go（）：加载history列表中的某个具体页面

Location对象：包含当前的URL的信息

属性：
href：设置或返回完整的URL
port：设置或返回当前URL的端口号

    <script>
        document.write(location.href);
    </script>

Window对象：表示浏览器中打开的窗口

方法：
alert（）：显示带有信息和确认按钮的警告框
            window.alert("警告");
close():关闭浏览器窗口
            window.close();
confirm（）：显示带有信息和确认以及取消两个按钮的对话框
            如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false
            window.confirm("你确定删除");
open（）：打开一个新的窗口
        window.open("URL地址",“一般省略不写”,“窗口特征，比如长宽等”,“一般不写”)

prompt()：显示一个可以输入的对话框

用作定时器的两个方法:
setInterval("js代码",时间):每隔一定时间就调用js代码
        window.setInterval("alert('123');",3000);

setTimeout("js代码",时间):在指定的时间后调用js代码，只执行一次

clearInterval()和clearTimeout()：取消相对应的定时器。

js的DOM对象

DOM：文档对象模型（Document Object Model）
当html被加载时，会创建页面的文档对象模型，这个文档对象在内存中被加载成一个树形结构
例如
        <html>
            <head>
                <title>标题</title>
            </head>
            <body>
                <span id="first">hello,world</span>
            </body>
        </html>
在内存中就会加载成树形结构，如下图

这里写图片描述

DOM对象：

docunment对象:整个html文档是document对象

element对象：每个标签都是element对象 

属性对象：标签的属性也是对象 

文本对象 

Node对象：节点对象，是上面所以对象的父对象，因为上面所以对象都是节点

DHTML：Dynamic html简称，就是动态的html。不是新的语言，只是一种集成。
集成了
html，css，dom，javascript等技术，来创建出动态的html页面。

Document对象：

方法：
getElementById() 返回对拥有指定id的第一个对象的引用
getElementsByName() 返回带有指定名称的对象集合
getElementsByTagName() 返回带有指定标签名称的对象集合