JavaScript学习笔记

目录

1 JavaScript简介

1.1 简介

1.2 浏览器执行JS简介

2 变量

2.1 JS使用var关键字声明变量，声明时不需要指定类型。

2.2 变量在使用过程种可以接受不同类型的值

3  函数（方法）

3.1 声明函数，方法不管在哪里声明，浏览器都会优先加载，和Java一样。

3.2 将方法赋值给一个变量，方法名就是变量名

4 对象

4.1 创建对象的两种方式

4.2 对象 属性

5 其他语法

6 事件

6.1  常用事件

6.2 事件响应方式

7 JS的正确加载方式

8 DOM模型

8.1 DOM模型

8.2 节点

8.2.1 节点

8.2.2 节点属性

8.3 DOM查询

8.4 DOM增删改

---

1 JavaScript简介

1.1 简介

JavaScript是一种运行在客户端的脚本语言。不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行。现在也可以基于Node.js技术进行服务器端编程。

JavaScript的作用：

  (1) 最开始用于表单动态校验，比如说不合格的信息不要送到服务器再检测，减少服务器压力

  (2) 网页特效

（3) 服务端开发（Node.js)

  (4) 桌面程序(Electron)

（5）app(Cordova)

  (6) 硬件控制=物联网(Ruff)

  (7)  游戏开发

等

1.2 浏览器执行JS简介

浏览器分成两部分：渲染引擎和JS引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome的blink

JS引擎：也成为JS解释器，用来读取网页中的JS代码，对其处理后运行，比如chrome的V8

浏览器本身不会执行JS代码，需要通过内置JS引擎来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JS归为脚本语言，会逐行解释执行。翻译一句，执行一句，翻译一句，执行一句……

2 变量

2.1 JS使用var关键字声明变量，声明时不需要指定类型。

var 变量名;

JAVA的八大类型: byte short int long float double boolean Object

JS的五种原始类型: number String boolean null undefined,剩下的都是对象 object

JS也是一种面向对象的语言。

2.2 变量在使用过程种可以接受不同类型的值

var num1;

num1 =12;

num1="你好";

alert(num1);

//判断一个变量的类型 typeof

alert(typeof num1);

注意例:如果num1=null，typeof(num1)会显示object。

var abcd; alert(abcd); 显示undefined。（声明未赋值）

变量需要先声明，再使用。

3  函数（方法）

3.1 声明函数，方法不管在哪里声明，浏览器都会优先加载，和Java一样。

x function(参数名，参数名..) {

方法体

}

如: sum function(1,2)

{

  alert(a+b);

}

调用:sum(1,2);

3.2 将方法赋值给一个变量，方法名就是变量名

方法也是一种类型，是对象。

var sum=function(a,b)

{

   alert(a+b）；

};

调用: sum(1,2);

在JS中，方法的唯一标识就是方法名，所以无方法重载这一说。调用方法的时候参数是可以选择是否选择传递的。

4 对象

4.1 创建对象的两种方式

1 new

var obj=new Object();

2

var obj2={ };

4.2 对象 属性

1 动态的向对象中添加属性：(直接想加就加)

obj2.name=" 小瓜“；//如果本身有name就是赋值，本身没有name属性就会动态创建一个name属性

alert(obj2.name);//获取属性值，对象.属性名

//将方法赋值给属性

obj2.work=fuction()

{

  alert("工作");

}

调用: obj2.work();

2 在声明的时候就为对象添加上属性和方法 {属性名:属性值,属性名:属性值.....}

var obj3={name:"小瓜",age:50;work:function(){

alert("吃");}};

obj3.work();

 

5 其他语法

判断，循环等用法和java一样

if -else,for,while,try-catch,break,continue等

for(var i=1;i<10;i++)

{

alert(i);

}

 

try {

}catch(e){

}

6 事件

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间

JS与HTML之间的交互是通过事件实现的，我们可以在事件发生时执行JS，比如当用户在HTML元素上点击时。

6.1  常用事件

参考w3School中的HTML-DOM事件对象。

JavaScript->JS参考手册->JS对象->DOM Event

6.2 事件响应方式

1 标签的事件属性

在标签的事件属性中编写js代码

<button id='btnId" οnclick="alert('avf') ">Say</button>

(注意'avf'  ,在JS中传参单引双引都可以)

2 动态绑定事件

动态为元素绑定事件的步骤:

(1)找到元素

(2)为元素绑定相应的事件（为元素相应的事件属性赋值方法）

(3)当事件发生以后浏览器就会自动调用。

var btn=document.getElementById("bthId");

alert(btn);

<button id="btnId">say</button>

这样浏览器是找不到"btnId"的，因为浏览器是从上到下逐行解释的，

需要 window.οnlοad=function()

{

var btn=document.getElementById("btnId");

alert(btn);

}

onload 事件：一张页面或一副图像完成加载，window.onload即加载整个窗口的元素，这样就能找到btnId了（当然将<button id="btnId">say</button>写在最前面也可以找到）

window.onload=function()

{

//1 找到元素

var btn=document.getElementById("btnId");

//2为元素绑定相应的事件

btn.onclick=function()

{

alert("asss");

}

}

3 取消绑定的默认行为

如超链接，默认点击就跳转到目标页面了；提交按钮，默认提交表单
 

<a href="01.html" id="aID">我是连接</a>

var aEle=docoumet.getElementById(:aID");

aEle.onclick=function()

{

     return false;

}

或者直接写在事件属性中<a href="01.html" id="aID" οnclick="return false">我是连接</a>

绑定新的事件是没用的，之后还会显示默认行为。只有return false

7 JS的正确加载方式

1 将JS代码写到<script>标签中

    （1）写在head里   推荐，一定写在window.onload里面

             如果不用window.onload 会出现找不到元素的问题

      （2）写在body闭合之前

              可以找到元素，但是比如图片，iframe会请求较长时间，可能导致下面使用img的属性（如宽高）的时候获取不到正确属性。

2 将js代码写成外部文件，并引入 （推荐）

注意引入外部js文件后,<srcipt type="text/javascript" scr="abc.js"></script>,这对script标签李就不能再写js代码了，需要再写一对<script>标签，在里面写js代码

3 将js代码写在html标签内时间属性上 （结构与行为耦合，不推荐）

4 将js写在网页结束位置。

 

8 DOM模型

8.1 DOM模型

Document Object Model 文档对象模型

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示。浏览器把HTML页面抽象成一个对象叫document（包括页面里面的所有元素）

BOM：浏览器对象模型 （把浏览器封装成一个对象）

按照包含关系，我们可以绘制一个dom树，层级关系(查找元素）

DOM树例：

（图片：来源）

8.2 节点

8.2.1 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点（构成HTML文档最基本的单元）：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

节点主要分为3类：

-元素节点：HTML文档中的HTML标签。代表一整个元素，如<button id="btn">点击</button>

-属性节点：元素的属性 手动调用ele.getAttributeNode("属性名");可以获取，不参与层级关系。

-文本节点：HTML标签中的文本内容,不同位置的文本都会被封装为文本节点。如 <button id="btn">点击</button>里的"点击"。

--等

8.2.2 节点属性

所有的节点都有3个属性：

-nodeName

-nodeType

-nodeValue

	nodeName	nodeType	nodeValue
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

注：所有的节点的nodeType都会返回一个整数，不同的节点数值不同

8.3 DOM查询

document.getElementById(); 通过id查找元素

document.getElementByTagName();

doucument.getElementsByName();

 

ele.getElementsByTagName();   通过标签名获取元素(可以在已经查找到的元素

ele.childNodes

ele.firstChild

ele.lastChild

ele.parentNode

ele.previousSibling: 返回前一个兄弟节点

ele.nextSibling: 返回后一个兄弟节点

例：button id="btn">点击</button> 

获取元素节点某个属性的值：

varbtnEle=document.getElementById("btn");

btnEle.id   

btnEle.className

设置元素节点某个属性的值

节点.属性="新属性值";如btnEle.id="sss";

注意：innerHTML 与 innerText

         元素节点.innerHTML //获取元素里面的html代码片段

         元素节点.innerText //获取元素里面的文本

        //兼容性：innerText 很多浏览器都兼容，但是火狐不兼容，火狐用innerContent

8.4 DOM增删改

1)创建节点 

        document.createElement("标签名");     //创建一个元素节点（标签)

        document.createTextNode("文本值");     //创建一个文本节点

 2)添加节点

    //组装  父节点.appendChild(子节点);

     ele.appendChild(textEle);

  3)删除节点

     1>先要找到要删除的节点的父节点

      parentEle=xxxxx;

      2>找到要删除的节点

      childNode=xxxxx;

       3>删除节点

       parentEle.removeChild(childNode):

  4)替换节点

     1>先要找到要替换的节点的父节点

      parentEle=xxxxx;

      2>创建一个新的节点，用新的节点替换旧节点

      newEle=xxxxx;

      3>找到要替换的旧节点

      oldEle=xxxxx;

      4>替换节点

       parentEle.replaceChild(newEle,oldEle);

5)插入新节点

      1>创建要插入的新的节点

      newEle=xxxxx;

      2>找到父节点

      parentEle=xxxxx;

      3>找到要在哪个节点之前插入元素，找到目标节点

      targetEle=xxxxx;

      4>插入节点

       parentEle.insertBefore(newEle,targetEle);