JavaScript进阶

1. js的String对象

• 创建一个String对象
  var str = "abc";
• 方法和属性：

属性：

length：字符串的长度

方法：

1. 与html有关的方法
   bold():加粗
   fontcolor():设置字符串的颜色
   fontsize():设置字体的大小
   link ():将字符串显示成超链接

str.link("hello.html");

sub() sup():下表和上标

2. 与java相似的方法
   concat():链接字符串
   charAt():返回指定位置的字符串
   如果字符不存在，则返回一个空字符串
   indexOf:返回字符串的位置
   字符不存在返回一个-1

var str = "qweewtr";
document.write(str.inderOf("w"));

split:切分字符串

var str = "a-b-c-d";
var arr = str.split("-");
document.write("length:"+arr.length);

replace:替换字符串
传递连个参数：
第一个是原始值，第二个是要替换的值

substr()和substring()截取字符串

var str = "abcdefghuiop"
document.write(str.substr(5,5));//fghui  从第五位开始，向后截取五个字符
document.write(str.substring(3,5));//de 从第几位开始，到第几位结束

---

2. js 中的Array对象

创建数组（三种）
var arr1 = [1,2,3];
var arr2 = new Array(3);//长度是3
var arr3 = new Array(1,2,3);//数组中的元素是1，2，3
var arr= [1,2,3]//创建一个空数组

• 属性： lenght：查看数组的长度

• 方法：

concat()：链接数组

arr1.concat(arr2);

join():根据指定的字符分割数组

var arr = new Array(3);
arr[0] ="a";
arr[1] = "b";
arr[2]="c";
document.write(arr);//a,b,c
document.write(arr.join("-"));//a-b-c 

push():向数组末尾添加一个新的元素，并返回一个新的长度

arr.push("zhangsan");
arr.push(arr1);//如果添加的是一个数组，那么添加进来的是一个整体数组当作一个元素

pop():删除最后一个元素，并且返回
reverse():颠倒数组中元素的顺序

---

3. js的Date 对象

获取当前时间
var data = new Data ();
date.toLocaleString();//转换为习惯的格式
getFullyear():返回四位年份
date.getFullyear();
getMouth:获取当前月的方法,返回的月份是0-11
date.getMonth()+1;
getDate()：获取当前的天，返回1-31
getDay()：获取当前星期，返回的是0-6
date.getDay()+1;
getHours:获取当前小时
getMinutes():获取当前分钟
getSeconds()：获取当前秒
getTime():获取从1970年1月1日到现在的毫秒数
应用场景：使用毫秒数来处理缓存的效果（不让缓存）

---

4. js的Math对象

里面的静态方法，不用new，直接Math.方法名
ceil(x):向上舍入
floor(x):向下舍入
round(x):四舍五入
random()：得到一个随机数从0.0-1.0的随机数
pow(x,y):次方，x的y次方

---

5. js全局函数

不属于任何一个对象，直接写名称使用
eval()：执行js代码（如果字符串是一个js代码，使用方法直接执行）

var str = "alert('1234');";
eval(str);

encodeURI()和decodeURI()：对字符进行编码和解码
encodeURIComponent()和decodeURIComponent()：对字符进行编码和解码

isNaN：判断当前数字是否是数字,返回一个true和false，不是数字返回true，是数字返回false

parseInt():类型转换

var str = "123"
document.write(parseInt(str)+1);//124

---

6. js的重载

js不存在重载，可以通过别的方法来模拟重载
调用最后一个方法，把传递的参数保存在arguments数组里面

function add{
  if(arguments.length == 2){
    return arguments[0]+ arguments[1];
}
  else if(arguments.length == 2){
    return arguments[0]+ arguments[1]+arguments[2];
}
 else if(arguments.length == 3){
    return arguments[0]+ arguments[1]+arguments[2]+arguments[3];
}
  else{
    return 0;
}
alert(add(1,2,));//3
alert(add(1,2,3));//6
alert(add(1,2,3,4));//10
alert(add(1,2,3,4,5));//0

---

7. js的bom 对象

• bom broswer object model:浏览器对象模型
• 有哪些对象？

navigator：获取客户机的信息（浏览器的信息）
navigator.appName;//得到浏览器的名称
screen:获取屏幕的信息
screen.width;//屏幕的宽
screen.height;//屏幕的高
location:请求url地址
(1). href属性：
获取当前请求的URL地址：
document.write(location.href);
(2).设置url地址：
页面上安置一个按钮，按钮上绑定一个事件，当点击这个按钮的时候，页面可以跳转至另一个页面

<input type = "button" value = "tiaozhuan" onclick="href();"/>//鼠标点击事件 onclick="js方法;"
location.href = "hello.html";

history:请求url的历史记录
到访问的上一个页面：histroy.back();
history.go(-1);
到访问的下一个页面：history.forward();
history.go(1);

window:窗口对象，顶层对象（所用的bom对象都是在window里面操作的）

• 方法
  window.alert():页面中弹出一个框显示内容
  confirm()：确认框

var flag = window.confirm("显示的内容");
if(flag==true)alert("删除成功");
else alert("删除失败");

prompt():输入对话框，
window.prompt("显示的内容","输入框显示的默认的值");

open():打开一个新的窗口
open（"打开的新窗口的地址url","名称","窗口特征，比如窗口的宽度和高度”）
close()关闭当前窗口

• 做定时器

setInterval("js代码",毫秒数);1000毫秒等于1秒

window.setInterval("alert('123');",3000);

setTimeout():在毫秒数之后执行，只会执行一次

window.setTimeout("alert('abc');",4000);//四秒之后执行js代码一次

clearInterval():清除setInterval设置的定时器
var id1 = setInterval("alert("123");",3000);//通过setInterval方法会有一个返回值
clearInterval(id1);

clearTimeout():清除setTimeout设置的定时器
var id2 = setTimeout("alert("123");",3000);//通过setTimeout方法会有一个返回值
clearInterval(id2);

---

8. js的dom对象

• dom: document object model:文本对象模型
  文档：超文本标记文档，html、xml
  对象：提供了属性和方法
  模型：使用属性和方法操作超文本标记型文档
  可以使用js里面的dom里面提供的对象，使用这行属性和方法，对标记文档进行操作

屏幕快照 2019-04-09 下午6.38.59.png

根据html的层级结构，在内存中分配一个树形结构，需要对标记型文档所有内容封装成对象
document对象：整个html对象
element对象：标签对象
属性对象
Node节点对象：是这些对象的父对象，如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

DHTML是很多技术的简称：Html封装数据 、css设置样式、dom操作html文档、javascript专门指的是js的语法和语句（ECMAScript）

9. Document对象

每个载入浏览器的html都会生成document对象

• 常用方法
  write():在页面上输出变量、在页面输出html代码
  getElementById():通过id得到元素（标签）

<input type = "text" id = "nameid" value="aaaa" name="aaa"/>
<script>
var input = document.getElementById("nameid");//传递的参数是标签的id的值
//得到input里value的值
alert(input.value);
//得到input里name的值
alert(input.value);
//向input里面设置一个值value
input.value = "bbbb";
</script>

getElementsByName():通过标签的name的属性值得到标签,得到的是一个数组
getElementsByTagName():通过标签的标签得到标签,得到的是一个数组

10. window 弹窗案例
    创建一个页面：有两个输入项和一个按钮、按钮弹出一个新窗口的事件 用open
    创建弹出的也买呢：表格：每一行都有一个编号和姓名；按钮：把当前的编号赋值到第一个页面相应的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TanChuang</title>
</head>
<body>
编号：<input type="text" id="numid"/><br/>
姓名：<input type="text" id="nameid"/><br/>
<input type="button" value="选择" onclick="open1()">
<script type="text/javascript">
    //实现弹出窗口1
    function open1() {
        //open方法
        window.open("user.html","","width=250,height=150;")
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>user</title>
</head>
<body>
<table border="1">
    <tr>
        <td>操作</td>
        <td>编号</td>
        <td>姓名</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s1('100','何欣燎');"></td>
        <td>100</td>
        <td>何欣燎</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s1('101','何欣');"></td>
        <td>101</td>
        <td>何欣</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s1('102','何');"></td>
        <td>102</td>
        <td>何</td>
    </tr>
</table>
<script type="text/javascript">
    //实现s1方法
    //跨页面实现 opener:得到常见窗口的窗口
    function s1(num1,name1) {
        var pwin = window.opener;
        pwin.document.getElementById("numid").value=num1;
        pwin.document.getElementById("nameid").value=name1;
        window.close();
    }
</script>
</body>
</html>

⚠️注意：由于我们访问的是本地文件，js安全性，不允许访问本地文件，实际开发中没有这样的问题，实际上不可能访问本地文件