JS-02

js的String对象

创建String对象

var str = "abc";

属性：

length：字符串的长度。 str.length

方法：
1.与html相关的方法

    bold（）：加粗
    fontcolor（）：设置字符串的颜色
    fontsize（）：设置字体的大小
    link（）：将字符串显示成超链接
    sub（） sup（）：下标和上标
    等等（查阅文档）
    
2.与java相似的方法

    concat():连接字符串
        document.write(str1.concat(str2));
    charAt():返回指定位置的字符
        document.write(str3.charAt(2));  //2表示索引，若字符位置不存在，则返回空字符串
    indexOf():返回指定字符的索引
    split():切分字符串成数组
        var str5="a1b1c1d1";
	    var arr1=str5.split("1");
	    document.write("length:"+"<br/>"+arr1.length+"<br/>"+arr1);
	replace():替换字符串
	    var str="adf";
	    document.write(str.replace("a","n")); //把a替换为n
	substr()：从第几位开始，向后截取几位
	    document.write(str.substr(3,5));//从索引3开始，向后截取5个字符
	substring():从第几位开始，到第几位结束，截取出来.不包括后面那一位
	    document.write(str.substring(3,5)); //从索引3开始截取到索引5，但是不包括索引5，所以相当于截取到索引4

js的Array对象

js中的Array对象：

创建数组（三种）：

    1.var arr=[1,2,3];
    2.var arr = new Array(3); //长度是3
    3.var arr = new Array(1,2,3); //数组中的元素是1 2 3 
属性：
    length：查看数组长度
方法：
    concat():数组的连接、
    （待补充）

js的Date对象

在js中获取当前时间

//获取当前时间
	var date = new Date();
	document.write(date); //Thu Sep 05 2019 19:25:08 GMT+0800 (中国标准时间) 
	
	document.write("<br/>");
	//换成习惯格式
	document.write(date.toLocaleString()); //‎2019‎年‎9‎月‎5‎日‎ ‎19‎:‎27‎:‎43 

js的全局函数

由于全局函数不属于任何一个对象，直接写名称使用

eval():执行js代码（如果字符串是一个js代码，使用方法直接执行）

var str="alert('1234');";
//alert(str);    输出“alert('1234');”
eval(str);   //输出’1234‘

isNaN():判断当前字符串是否是数字。注意：是数字返回false，不是数字返回true

parseInt():类型转换
    var str="123";
    document.write(str+1);  //1231
    document.write(parseInt(str)+1); //124

js的函数重载

重载：一个类中，多个方法的方法名相同，参数不同

会调用最后一个方法

function add1(a,b){
    return a+b;
}
function add1(a,b,c){
    return a+b+c;
}
function add1(a,b,c,d){
    return a+b+c+d;
}

alert(add1(1,2));  //NaN，最后一个方法有四个参数，但是这里只有两个，下面同理
alert(add1(1,2,3));//NaN
alert(add1(1,2,3,4)); //10

js中不存在重载,会调用最后一个方法，把传递的参数保存到arguments数组里面

js的bom对象

bom：broswer object model:浏览器对象模型

有哪些对象？

navigator：获取浏览器信息
    navigator.appName;  //获取浏览器名称
screen：获取屏幕信息
location：请求url地址
    -href属性
        获取到请求的url地址，document.write(location.href);
        设置url地址：页面上安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另一个页面
            function href1{
                    location.href="hello.html";
            }
            <input type="button" value="tiaozhuan" onclick="href1()；"/>
            onclick:鼠标点击事件，格式：onclick="js的方法"
history：请求的url的历史记录
    到访问的上一个页面：history.back(); history.go(-1);
    到访问的下一个页面：history.forward(); history.go(1);
    
    
window(重点):窗口对象，是js的顶层对象（所用的bom对象都是在window里面操作的）
    方法：
        window.alert():页面弹出一个框，显示内容，简写alert()
        confirm():确认框。 有返回值，true/false
            window.confirm("是否删除？（可更改）")；
        prompt():输入对话框
            window.prompt("请输入","0"); //第一个参数表示显示的内容，第二参数表示输入框的默认值
        open():打开一个新窗口
            open("打开的新窗口的地址url"，“”，“窗口的特征，比如窗口的宽度和高度”)
            window.open("hello.html","","width=200,height=100");
            
        close():关闭窗口。（浏览器兼容性差）
        
        用来做定时器的方法（重要）：
            setInterval("js代码",毫秒数):
                window.setInterval("alert('123');",3000); //没三秒运行一次alert("123");
            setTimeout("js代码"，毫秒数)：表示在多少毫秒之后执行js代码，但是只执行一次
            
            clearInterval():清除setInterval设置的定时器
                var id1= setInterval("alert('123');",3000); //setInterval会有一个返回值
                clearInterval(id1);
            clearTimeout():清除setTimeout设置的定时器

js的dom对象

dom:document object model :文档对象模型
文档：超文本文档（超文本标记文档） html，xml
对象：提供了属性和方法
模型：使用属性和方法操作超文本标记型文档

可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

要对标记型文档进行操作，受限需要对标记型文档里面的所有内容封装成对象
    -需要吧html里面的标签、属性、文本内容都封装成对象
    
要想对标记型文档进行操作，解析标记型文档
    画图分析，如果使用dom解析html

解析过程：
    根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象
        document对象:整个文档
        element对象:标签对象
        属性对象
        文本对象
        Node节点对象：这个对象是这些对象的父对象
            如果在对象里找不到想要的方法，这个时候到Node对象里面找
            
DHTML：是很多技术的简称
    html:封装数据
    css：使用属性和属性值设置样式
    dom：操作html文档（标记型文档）
    javascript:专门指的是js的语法语句（ECMAScript）

document对象

表示整个文档

常用方法：
    wirte():向页面输出变量（值）；向页面输出html代码
    
    getElementById():通过id得到元素（标签）
        <input type="text" id="nameid" name="name1"/>
        //使用getElementById方法得到input标签
    	var input1 = document.getElementById("nameid"); //传递的参数是标签里面的id的值
	    //得到input里面的name值
	    alert(input1.name);
	    //向input里面设置一个值value
    	input1.value="aaa";
    	
    getElementsByName():通过标签的name的属性值得到标签，返回的是一个集合（数组） 
        <input type="text" name="name1" value="aaa"/><br/>
	    <input type="text" name="name1" value="bbbb"/><br/>
	    <input type="text" name="name1" value="ccc"/><br/>
	    <input type="text" name="name1" value="dddd"/><br/>
    	<script type="text/javascript">
	    //使用getElementsByName得到input标签
	    var inputs = document.getElementsByName("name1"); //传递的参数是标签里面name的值
	    alert(inputs.length);//输出4.
	    for(var i=0;i<inputs.length;i++){
	    	var input1= inputs[i];
		    alert(input1.value);
	    }
	    </script>
	    
	getElementsByTagName("标签名称")：通过标签名称得到元素
	    <input type="text" name="name1" value="aaa"/><br/>
	    <input type="text" name="name1" value="bbbb"/><br/>
	    <input type="text" name="name1" value="ccc"/><br/>
	    <input type="text" name="name1" value="dddd"/><br/>
	    <script type="text/javascript">
		//演示getElementsByTagName
		var inputs1 = document.getElementsByTagName("input");
		//alert(inputs1.length);

		for(var m=0;m<inputs1.length;m++){
			var input1 = inputs1[m];
			alert(input1.value);  //依次输出value值
		}

案例：window弹窗案例
实现过程：
1.创建一个页面
有两个输入项和一个按钮
按钮上面有一个事件：弹出一个新窗口
2.创建弹出页面
表格
每一个有一个按钮和编号和姓名
按钮上有一个事件：把当前的编号和姓名，赋值到第一个页面相应的位置