Javascript 学习总结（转发版）

Javascript 学习总结（转发版）"/>

Javascript 学习总结（转发版）

1、Javascript 简介

1.1Javascript 的组成

ECMAScript + DOM + BOM

注：ECMAScript 只是一个标准

1.2 Javascript 的特点

①解释型语言：无需编译，直接运行。
②动态语言：变量可变。
③基于原型的面向对象语言。
④类似Java的语法结构：for、if、while等语法和java基本一致。
⑤严格区分大小写。

1.3 Javascript 的使用

①标签引用

    <script type="text/javascript">prompt("请输入你的年龄：");</script>

②外部引用：src属性

		 <!-- scr属性：引入外部文件 --><script type="text/javascript" src="script.js">//alert("你好");    //引入外部文件中不能在写代码（无效）</script><script type="text/javascript">alert("你好");   //写,在创一个script标签</script>

1.4 Javascript 的输出语句

①页面输出：document.write()
②控制台输出：console.log()
③窗口弹出：alert()

1.5 注释

单行：//
多行：/****/

2、Javascript 的基本语法

2.1 标识符：”厦大“ 、$

注：ECMAScript标识符采用驼峰式命名法。

2.2 字面量：常量

2.3 变量：a

变量的声明与赋值：var a=10

2.4 数据类型：5+1

五种基本类型+Object

• 字符串型（String）
• 数值型（Number）
• 布尔型 （Boolean）
• null型（Null）
• undefined型（Undefined）
  注：typeof 数据 -----用来检查一个变量的数据类型

①String 字符串：" "、‘’

②Number：整数和浮点数
Infinity：正无穷
-Infinity：负无穷
NaN：非法数字（Not A Number）
注：以上三种特殊数字也是Number类型

③Boolean：true、false

④Undefined：声明但没有初始化时，只有一个undefined

⑤Null：空对象，typeof 返回Objiect，只有一个null

2.5 强制类型转换

①转换为String类型
方法一：toString()

		<script>var a=123;c=a.toString();console.log(c);console.log(typeof c);</script>

注意：
该方法不会影响原变量，只将转换后的结果返回。
null和undefined没有该方法，调用会报错。

方法二：String()

		<script>var cc=22;cc=	String(cc);console.log(cc);console.log(typeof cc);console.log("***************");var dd=undefined;dd=	String(dd);console.log(dd);console.log(typeof dd);console.log("***************");var dd=Boolean();dd=	String(dd);console.log(dd);        //falseconsole.log(typeof dd); //string</script>

注意：
对于Number和String实际调用的还是toString方法。
null和undefined不会调用toString方法，而是直接转换为"null"和"undefined"。

方法三：任意数据类型 +

		<script>var dd=22;dd=dd+"";console.log(typeof dd)</script>

②转化为Number类型
方法一：Number()
可以用来转化

3、循环语句

4、对象

4.1 创建的对象的两种方式

第一种方式： new Object()

	<script>//第一种方式 new Object()var person=new Object();person.name="小李";person.age=24;console.log(person);</script>

第二种方式： {}

	<script>//第二种方式 {}var personTwo={name:"小郭",age:24};console.log(personTwo);</script>

4.2 两种属性访问

		<script>console.log(person.age);console.log(person["age"]);</script>

4.3 delete关键字删除属性

delete 对象.属性名

       <script>delete personTwo.namedelete personTwo["age"];</script>	

4.4 for…in 遍历对象

      <script>var personThree={person:"哈哈",name:16,hobby: "看电影"}for(var per in personThree){var person=personThree[per];console.log(per +":"+person);  // person:哈哈   name:16  hobby:看电影}console.log(person);    //看电影</script>	

5、函数

5.1 函数的概念

函数是一连串语句的集合，只有调用才会运行。
函数也是对象，用typeof检查时返回一个function。

5.2 创建对象的方式

第一种：使用函数对象的方式创建（不用）
格式：new Function(" ")

   <script>var fun=new Function('console.log("函数对象--创建函数");')fun();</script>	

第二种：使用函数声明来创建（常用）
格式：new Function(" ")

   <script>function fun2(){console.log("函数声明--创建函数");}fun2();</script>	

第三种：使用函数表达式来创建（常用）
用函数表达式创建的函数也叫匿名函数。
格式：new Function(" ")

   <script>var fun3=function(){console.log("函数表达式--创建函数");	}fun3();</script>	

5.3 函数的调用

多的参数不会赋值，少了就undefined。

   <script>var fun4=function(num1,num2){var result=num1+num2;console.log(result);}fun4(5,5);</script>	

5.4 return 函数的返回值

   <script>var fun5=function(num1,num2){var result=num1+num2;return result;}var sum=fun5(5,10);console.log(sum);</script>	

5.5 立即执行函数 ()()

立即执行函数只执行一次。

   <script>(function() {console.log("小李，小李");})();</script>	

5.6 对象中的函数

如果一个函数作为一个对象的属性保存，那么就称这个函数为这个对象的方法。即函数在对象中叫方法。

   <script>var person={name:"小李",age:24,sayHello:function(){console.log(name+"hello");}}person.sayHello(); //hello</script>	

6、JavaScript 常用的对象

6.1 数组

数组：同类元素的有序集合，从索引0开始读取。
数组也是对象的一种，用typeof检查时返回object。

6.1.1 创建数组方式

第一种方式：对象创建数组 new Array()

		<script>var arr=new Array();arr[0]=1;arr[1]=3;arr[2]=5;arr[3]=7;arr[4]=9;arr[5]=11;for(var i=0;i<arr.length;i++){document.write(arr[i]);}</script>

第二种方式：字面量创建数组 [ ]

		<script>var arr2=[1,"2","3",4,5,"7",9,"55"];for(var i=0;i<arr2.length;i++){document.write(arr2[i]);}</script>

6.1.2 数组的方法

①添加元素：push() 、unshift()

		<script>//尾部添加 push("小李")var arr=["小兰","大白","中中"];arr.push("小李","张张");console.log(arr);//首部添加  unshift("小李")var arr2=["小兰","大白","中中"];arr.unshift("小李","张张");console.log(arr);</script>

②删除元素：pop() 、shift()

		<script>//尾部删除 pop()var arr2=["小兰","大白","中中"];arr2.pop();console.log(arr2);//首部删除  shift()var arr3=["小兰","大白","中中"];var result=arr3.shift();console.log(result);console.log(arr2);</script>

③遍历数组：forEach
forEach方法中的function回调有三个参数：
第一个参数是遍历的当前元素 （必需），
第二个参数是当前元素的索引值（可选），
第三个参数是当前元素所属的数组对象（可选）。

		<script>var arr4=["小兰","大白","中中"];arr4.forEach(function(value){console.log(value);    //小兰 大白 中中});var arr5=["小兰","大白","中中"];arr5.forEach(function(value,index){console.log(value+"***"+index);    //小兰***0   大白***1   中中***2});var arr6=["小兰","大白","中中"];arr6.forEach(function(value,index,obj){console.log(value+"****"+index+"****"+obj);//小兰****0****小兰,大白,中中//大白****1****小兰,大白,中中//中中****2****小兰,大白,中中});</script>

④元素提取：slice()
从数组中提取指定元素封装到一个新数组中，不改原来元素数组。

		<script>var arr7=["小兰","大白","中中","小明","哈哈"];var result=arr7.slice(1,3); console.log(result);  //"大白","中中"var result=arr7.slice(3);console.log(result);  //"小明","哈哈"var result=arr7.slice(1,-1);console.log(result);  //"大白","中中","小明"var result=arr7.slice(-1); //"哈哈"console.log(result); //原数组console.log(arr7); //"小兰","大白","中中","小明","哈哈"</script>

⑤删除数组中指定的元素：splice()
从数组中删除指定元素，会影响原数组。

		<script>var arr8=["小兰","大白","中中","小明","哈哈"];var result=arr8.splice(1,2);console.log(result);  //"大白","中中"var result=arr8.splice(1,1,"红红","晃晃");console.log(arr8);  //['小兰', '红红', '晃晃', 哈哈']</script>

⑥数组连接：concat()

		<script>var arr7=["小兰","大白","中中"];var arr8=["一一","二二","三三"];var result=arr7.concat(arr8);   //连接作用console.log(result);</script>

⑦数组转为字符串：join()
在join()中可以指定一个字符串作为参数，这个参数将成为数组元素的连接符，且不会对原数组产生影响。

		<script>var arr9=["一一","二二","三三"];var result=arr9.join("@");console.log(result);//一一@二二@三三</script>

⑧数组反转：reverse()
数组反转，会影响原数组。

		<script>var arr10=["一一","二二","三三"];var result=arr10.reverse();console.log(result);  // "三三" "二二"  "一一"</script>

⑨数组排序：sort()
数组安州Unicode编码排序，会影响原数组。

		<script>var arr10=[7,3,8,2,6,4];var result=arr10.sort();  //2 3 4  6 7 8console.log(result);  </script>

6.2 函数对象

6.2.1 call() 和apply()

call() 和apply()都是函数对象的方法，需要通过函数对象来调用，
call() 方法可以将实参在对象之后依次传递。
apply()方法需要将实参封装到一个数组中统一传递。

fun.call(obj,2,3);

<script>function fun(a,b){console.log(a);console.log(b);console.log(this);}var obj={name:"obj",sayName:function(){console.log(this.name);}};fun(2,3);fun.call(obj,2,3);console.log("-------------------");</script>

fun.apply(obj,[2,3])

<script>function fun(a,b){console.log(a);console.log(b);console.log(this);}var obj={name:"obj",sayName:function(){console.log(this.name);}};fun(2,3);fun.apply(obj,[2,3]);</script>

6.2.2 arguments 参数

arguments是一个类数组对象，它通过索引来操作数据。

<script>function fun(a,b){console.log(arguments[0]);console.log(arguments[1]);console.log(arguments.length);console.log(arguments.callee); console.log(arguments.callee==fun);  //true}fun("hello","world");</script>

6.3 Date对象

封装当前代码执行的时间。

		<script>var date=new Date();console.log(date); //2022 22:17:47 console.log(date.getFullYear()); //2022console.log(date.getMonth()); //4 (0-11)console.log(date.getDate()); //6console.log(date.getHours());//22   (0-23)console.log(date.getMinutes()); //22  (0-59)console.log(date.getSeconds());  //29  (0-59)console.log(date.getMilliseconds()); //761 (0-999)</script>

7、DOM 和BOM

7.1 DOM 对象

7.1.1 概念

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
Javascript 能操作Html和CSS中的元素和属性。

7.1.2 查找Html元素的方法

文档对象代表网页,，如果要访问 HTML 页面中的任何元素，就从访问 document 对象开始。

• document.getElementById(id) | 通过元素 id 来查找元素
• document.getElementsByTagName(name) | 通过标签名来查找元素。
• document.getElementsByClassName(name) | 通过类名来查找元素。
• document.querySelector(CSS选择器) | 通过CSS选择器选择一个元素。
• document.querySelectorAll(CSS选择器)| 通过CSS选择器选择多个元素。

7.1.3 获取 HTML 的值

• 元素节点.innerText：获取 HTML 元素的 inner Text。
• 元素节点.innerHTML： 获取 HTML 元素的 inner HTML。
• 元素节点.属性： 获取 HTML 元素的属性值。
• 元素节点.getAttribute(attribute)： 获取 HTML 元素的属性值。
• 元素节点.style.样式： 获取 HTML 元素的行内样式值。

7.1.4 改变 HTML 的值

• 元素节点.innerText = new text content ：改变元素的 inner Text。
• 元素节点.innerHTML = new html content：改变元素的 inner HTML。
• 元素节点.属性 = new value：改变 HTML 元素的属性值。
• 元素节点.setAttribute(attribute, value)： 改变 HTML 元素的属性值。
• 元素节点.style.样式 = new style： 改变 HTML 元素的行内样式值。

<body><button id="btn">我是按钮</button><div id="box"></div><a id="a" href="">打开百度，你就知道！</a><script>var btn = document.getElementById("btn");btn.innerText = "我是JavaScript的按钮";var box = document.getElementById("box");box.innerHTML = "<h1>我是Box中的大标题</h1>";var a = document.getElementById("a");a.href="";var a = document.getElementById("a");a.setAttribute("href", "");</script></body>

7.2 DOM文档事件

7.2.1 概念

HTML事件可以**触发浏览器中的行为，**比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

7.2.2 窗口事件

• onblur 当窗口失去焦点时运行脚本。
• onfocus 当窗口获得焦点时运行脚本。
• onload 当文档加载之后运行脚本。
• onresize 当调整窗口大小时运行脚本。
• onstorage 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。

<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>window.onblur = function () {console.log("窗口失去焦点");};window.onfocus = function () {console.log("窗口获取焦点");};window.onload = function () {console.log("Hello,World");};window.onresize = function () {console.log("窗口大小正在改变");};</script>
</body>

7.2.2 表单事件

在HTML表单中触发。

• onblur 当元素失去焦点时运行脚本。
• onfocus 当元素获得焦点时运行脚本。
• onchange 当元素改变时运行脚本。
• oninput 当元素获得用户输入时运行脚本。
• oninvalid 当元素无效时运行脚本。
• onselect 当选取元素时运行脚本。
• onsubmit 当提交表单时运行脚本。

<body>
<form><input type="text" id="text">
</form><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var textInput = document.getElementById("text");/* 当文本框获取焦点，文本框背景为红色 */textInput.onfocus = function () {this.style.background = "red";};/* 当文本框失去焦点，文本框背景为绿色 */textInput.onblur = function () {this.style.background = "green";};/* 当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台 */textInput.onchange = function () {console.log(this.value);};/* 当文本框内容改变时，立即将改变的内容输出到控制台 */textInput.oninput = function () {console.log(this.value);};/* 当选中文本框的内容时，输出“您已经选择了文本框内容！” */textInput.onselect = function () {console.log("您已经选择了文本框内容！");};/* 当提交表单的时候，在控制台输出“表单提交” */myform.onsubmit = function () {console.log("表单提交");return false;/* 用来阻止表单提交的，你不写它会跳转请求 */};</script>
</body>

7.2.3 键盘事件

通过键盘触发事件。

• onkeydown： 当按下按键时运行脚本。
• onkeyup： 当松开按键时运行脚本。
• onkeypress： 当按下并松开按键时运行脚本。

7.2.4 鼠标事件

通过鼠标触发事件。

• onclick： 当单击鼠标时运行脚本。
• ondblclick： 当双击鼠标时运行脚本。
• onmousedown： 当按下鼠标按钮时运行脚本。、
• onmouseup： 当松开鼠标按钮时运行脚本。
• onmousemove： 当鼠标指针移动时运行脚本。
• onmouseover： 当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。
• onmouseout： 当鼠标指针移出元素时运行脚本，不可以阻止冒泡。
• onmouseenter： 当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
• onmouseleave： 当鼠标指针移出元素时运行脚本，可以阻止冒泡。
• onmousewheel： 当转动鼠标滚轮时运行脚本。
• onscroll： 当滚动元素的滚动条时运行脚本。

<body>
<div id="box" style="width: 100px;height: 100px;background: black;"></div><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var box = document.getElementById("box");/* 当鼠标移入div，背景颜色变为红色 */box.onmouseenter = function () {this.style.background = "red";};/* 当鼠标移出div，背景颜色变为绿色 */box.onmouseleave = function () {this.style.background = "green";};
</script>
</body>