js总结

燕绥。

于 2019-01-04 10:13:33 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/weixin_42252237/article/details/85759260

版权

js总结

1. ECMAScript 的特殊语法、流程控制、常用对象

1、特殊语法（了解）

A.不加分号的情况
	在一行当中如果不加上分号，在这一行后面没有语句的情况下，不会报错，但是不建议。

B.定义变量不加var关键字（建议加上 var 关键字）
	a.不加 var 关键字是 全局变量,在<script>标签当中都可以使用
	b.加上 var 关键字是 局部变量,只能在当前的大括号里面使用

2、流程控制语句

A.常见的流程控制语句有:（语法格式和Java语法格式是一模一样的）
	if ... else
    switch
    for 循环
    while 循环
    do... while 循环

B.不同点:
    对于 switch 语句而言,在 Java 当中 小括号里面的取值有 数据类型的限定。在 JavaScript 没有数据类型限定。任何数据类型，都可以写在 switch 语句的小括号当中。

练习题：九九乘法表

<style>
    td{
        border: 1px solid #FF0000;
        width: 100px;
        background-color: #feffb0;
        padding: 5px 5px 5px 5px;
    }
    font{
        color: #ff39f8;
        size: 20px;
    }
</style>
<script>
    document.write("<table align='center'>");
    //外层for循环，控制行数
    for(var i=1;i<=9;i++){
        document.write("<tr>");
        //内层for循环，控制列数
        for(var j=1;j<=i;j++){
            document.write("<td><center><font>");
            document.write(j+"*"+i+"="+(i*j)+" ");
            document.write("</font></center></td>");
        }
        //需要换行
        document.write("</tr>");
    }
    document.write("</table>");
</script>

3、function对象

A.function对象的含义（如何理解）
	我们可以把 function 对象看做 Java 当中的"方法"。站在Java方法的角度去理解他
    
B.function对象的定义和使用格式
	a.定义和使用格式1:
    	//定义格式
        function 方法名称(参数列表){
			方法体;
             return 返回值;
        }
		//使用格式
		var 返回值 = 方法名称(参数值1,参数值2,参数值3);
	b.定义和使用格式2:
    	//定义格式
        var 方法名称 = function(参数列表){
			方法体;
             return 返回值;
        }
        //使用格式
        var 返回值 = 方法名称(参数值1,参数值2,参数值3);

C.function对象的注意事项
	a.方法名称（名称相同,前面方法失效）
		在JavaScript当中,没有方法的重载，相同名称的方法，后面的会覆盖掉前面的方法。
	b.返回值类型
		在方法定义的时候，不需要定义返回值类型(所有类型都是var，可以省略)
		如果有返回值类型,直接在方法体当中加上 return 返回值;
	c.参数列表
	 	形式参数的个数和实际参数的个数，可以不匹配。
         如果 形式参数的个数>实际参数的个数。多余的形式参数，赋值是 undefined
		如果 实际参数的个数>形式参数的个数。赋值给一个数组，数组的名称叫做 arguments （可变参数）

4、Array数组对象

A.Array数组对象的理解
	可以把数组对象 Array 看做 Java当中 ArrayList集合

B.定义数组对象的方式（三种定义）
	a. var arr1 = new Array(元素1,元素2,元素3,元素4); // var arr1 = new Array(11,4,true,'ab');
	b. var arr2 = new Array(数组长度);  // var arr2 = new Array(5); 表示数组的长度是5
	c. var arr3 = [元素1,元素2,元素3];  //  var arr1 = [11,4,true,'ab'];  （推荐使用）

C.数组的特点:(两个可变)
	a.数组的长度可变
	b.数组的元素类型可变

D.介绍了两个方法
	a.join(参数) 根据指定的分隔符,拼接数组内容.作为字符串返回.  arr1.join("-");  //11-4-true-ab
	b.push(参数) 在数组的末尾添加一个或者多个元素。相当于集合当中的 add()方法

5、Date对象

A.创建对象
	var mDate = new Date();

B.两个方法
	a.获取当前的时间  mDate.toLocaleString() 根据系统时间获取的
	b.获取当前的毫秒数 mDate.getTime()  获取的是从 1970-1-1 到现在的毫秒值

6、Math对象

A.创建对象
	Math 不需要创建对象,可以直接采用 Math.方法名称 或者 Math.属性名称

B.常用方法和属性
	a.属性:  
    	Math.PI 获取圆周率 3.14159265...
	b.方法:
		Math.random() //获取随机数,随机数的范围在 0~1 之间,包括0,不包括1的小数
		Math.ceil(数据) //向上取整
		Math.floor(数据) //向下取整
		Math.round(数据) //四舍五入

7、正则对象

A.作用:
	主要用于做表单校验.例如:判断用户名密码验证码等等是否正确
	
B.常见的正则表达式
	a.查看API文档
	b.查看川哥CHM格式笔记"A开篇说明 -> 03附录 -> 03常见正则表达式"
	c.网络搜索常见正则表达式
	
C.使用方式
	a.创建对象
		方式1: var reg = new RegExp("正则表达式");
		方式2: var reg = /正则表达式/;
	b.调用函数
		reg.test(参数);  //如果匹配成功,返回true。匹配失败,返回false

8、全局对象

A.编码和解码（了解）
	a.编码 encode()
	b.解码 decode()

B.转换为数字类型的方法
	parseInt(数据)
	逐一判断前面的是否是数字，直到不是数字为止，将前面的转换为数字
    例如: var number = parseInt("2019年1月"); //最终的 number = 2019
	如果刚开始的时候,第一个不是数字,变成 NaN

C.将字符串作为js脚本运行
	eval("字符串作为js脚本运行")

2. 简单的DOM入门

1、获取标签的对象

var html标签对象 = document.getElementById("html标签的id");

2、设置属性和内容的方法

A.设置属性的方法
	html标签对象.src = "路径";  //设置路径
	html标签对象.width = 10;  //设置宽度
	html标签对象.height = 10;  //设置高度

B.修改HTML里面的内容
	html标签对象.innerHTML = "需要修改的内容";

课堂案例

<body>
	<!-- 定义的HTML标签 -->
	<a href="http://www.baidu.com" target="_blank" id="aid"> 点我,跳转到百度首页 </a>
</body>
<script>
    //弹出对话框
    alert("对话框,消失之后.会重置内容")
    //[1]可以获取上面的标签对象,通过id获取
    var biaoqianA = document.getElementById("aid");
    //[2]修改,设置 相关的内容信息
    // 修改原始的属性值
    biaoqianA.href = "http://www.itcast.cn";
    // 修改HTML 网站当中的内容
    biaoqianA.innerHTML = "传智官方网站";
</script>

3、事件的简单学习

事件的绑定方式

	a.方式1:
		//在HTML代码当中
		<img src="路径" id="xx" onclick="函数名称(参数)"/>
		//在JS代码当中
		function 函数名称(参数){
			.......
		}

	b.方式2（推荐使用）
		//在HTML代码当中
		<img src="路径" id="xx"/>
		//在JS代码当中
		function 函数名称(参数){
			.......
		}
		var HTML的标签 = document.getElementById("xx");
		HTML的标签.onclick = 函数名称;

3.BOM浏览器对象模型

1、BOM概述

A.含义:
	BOM浏览器对象模型
	
B.组成部分
	a.Window：窗口对象
	b.Naigator：浏览器对象(了解即可)
	c.Sceen：显示器屏幕对象(了解即可)
	d.Hitory：历史记录对象
	e.Loation：地址栏对象

2、Window 窗口对象

A.弹出的方法
	a. alter("警告框");  //警告框
	b. confirm();  //确认取消框(掌握)
	c. prompt(); //输入框 参数:提示语,返回值:输入框的内容
	
B.打开关闭窗口的方法
	a.打开窗口
		var 新窗口的对象 = open("要开启的网址");
	b.关闭窗口
		新窗口的对象.close();  //如果不写新窗口的对象,关闭的是自己

3、定时器

A.一次性定时器
	a.开启方式
		var id值 = setTimeout(函数名称,毫秒值);
	b.取消方式
		clearTimeout(id值);
		
B.循环定时器
	a.开启方式
		var id值 = setInterval(函数名称,毫秒值);
	b.取消方式
		clearInterval(id值);

定时器案例（画鸭子）

<body>

<img src="../img/1.png" id="huayazi"/> <br>
<font size="5" id="zi">运行10次之后停下来</font>

<script>
    //定义计数器
    var count = 0;
    //定义定时器的ID
    var dingshiqiID;
    //[1]通过id获取到img的对象
    var yazi = document.getElementById("huayazi");
    var shuzi = document.getElementById("zi");
    //[2]定义脚标值,1,2,3,4,5...
    var index = 0;
    //[3]定义函数,准备赋值给定时器,循环执行
    function startGame() {
        //计数器累加
        count++;
        //A.累加的操作
        index++;
        //B.判断是否达到了最大值5.超过5要回来
        if (index > 5) {
            index = 1;
        }
        //C.重新设置图片img
        yazi.src = "../img/" + index + ".png";
        shuzi.innerHTML = "当前的次数是:" + count;
        //当次数达到10次的时候,停下来
        if (count >= 10) {
            //取消定时器
            clearInterval(dingshiqiID);
            shuzi.innerHTML = "BOOM~~~~~~";
        }
    }
    //[4]开启循环定时器
    dingshiqiID = setInterval(startGame, 200);
</script>
</body>