目录

js_quickstart

JavaScript简介

为什么出现js

  • 拨号上网的年代
    • 网速很慢,数据需要提交到服务器验证
    • JavaScript出现,使浏览器可以做简单验证
  • 现在
    • 时至今日,js已经不再局限于表单的验证,而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力,js可以写客户端,还可以写服务器
    • nodejs的出现抢占了php不少市场,nodejs+mongodb

js是什么

JavaScript是一种直译式(解释型)脚本语言,是一种动态类型、弱类型(对象、数字、字符串)、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端(浏览器)的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

HelloWorld

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--JavaScript是运行在浏览器端的脚本语言需要在script标签里面编写js代码-->
    <script type="text/javascript">
        // js代码
        window.onload = function () {
            // let是es6中新增的语法,用let替代es5的var表示变量,const表示常量
            let btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("Hello JS")
            };
        }
    </script>

</head>
<body>

<button id="btn">Say Hello</button>

</body>
</html>

变量

  • 使用var关键字声明变量,声明时不需要指定类型

    5种原始类型:number string boolean null(没有声明或者声明为null) undefined(没有赋值)除了这5种外,其他都是引用类型object(包括function)

    1
    2
    3
    
    var num1 = "12";
    alert(typeof num1);
    // 会弹出string
    

    注意,null是不能typeof出来的,null本身是一个object

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

    1
    2
    3
    4
    5
    6
    
    <script type="text/javascript">
        var num1;
        num1 = 12;
        num1 = "你好";
        alert(num1);
    </script>
    

函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
    // 1.声明函数,方法不管在哪里声明,浏览器都会优先加载,变量必须先声明后使用
    // function 方法名(参数名,参数名){方法体}
    function sum(a, b) {
        alert(a + b);
    }

    // 2.调用函数
    sum(1, 2);

    // 3. 还可以将方法(本身是一个object)赋值给一个变量,方法名就是变量名
    var sum1 = function (a, b) {
        alert(a + b);
    };
    sum1(2, 3);
    // NaN not a Number, sum1(2)  相当于2+undefined
    // 在js中方法的唯一标识就是方法名,在js中没有方法重载一说,调用方法的时候参数是可以选传的。
</script>

对象

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
    // 1.创建对象的两种方式
    // 1.1
    var obj = new Object();
    // 1.2
    var obj1 = {};

    // 2.动态的向对象中添加属性
    obj.name = "猪八戒"
    // 给对象添加方法
    obj.work = function () {
        alert("我要工作");
    };
    // 3.获取属性值
    alert(obj.name);
    // 4. 调用方法
    obj.work();
    // 5. 在声明对象的时候就为对象添加属性和方法
    var obj2 = {
        name: "孙悟空",
        age: 500,
        work: function () {
            alert("保护唐三藏");
        },
        other: function () {
            alert("other");
        }
    };
    obj2.work();
    obj2.other();
</script>

其他语法

判断、循环与java用法相同

  • if-else

  • switch-case

  • for

    1
    2
    3
    4
    5
    
    <script type="text/javascript">
        for (let i = 1; i < 10; i++) {
            alert(i);
        }
    </script>
    
  • while

  • break

  • continue

  • try-catch

    1
    2
    3
    4
    5
    
    try {
        xxxx("未定义方法");
    } catch (e) {
        alert(e); // 会弹出ReferenceError: xxxx is not defined
    }
    

事件

  • 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
  • js与html交互是通过事件实现的
  • 我们可以在事件发生时执行js,比如当用户在html元素上点击时

事件种类

所有事件:http://www.w3s.com.cn/js/jsref_events.asp

http://img.cana.space/picStore/20210101200655.png

事件响应方式

  • 在标签事件属性中编写js代码
  • 动态绑定事件

示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        // onload,一张页面或一张图像完成加载,window代表整个浏览器窗口
        // 下面这种写法是因为onload 事件会在页面或图像加载完成后立即发生,所以会保证在页面加载完后再执行function里的方法,
        // 这样就可以通过getElementById找到对应元素
        window.onload = function () {
            /*第二种 动态绑定事件,推荐*/
            // 1.找到元素
            var btn = document.getElementById("btn1");
            // 2.为元素相应的事件属性(onclick、onmousemove等等)赋值一个方法
            btn.onclick = function () {
                alert("HelloWorld1");
            };
            // 3.当事件发生以后浏览器就会自动调用
        };

    </script>

</head>
<body>

<!--第一种 在标签的事件属性中编写js代码 调用方法声明变量都可以-->
<button id="btn" onclick="alert('HelloWorld')">Say Hello</button>
<button id="btn1">Say Hello1</button>

</body>
</html>

js代码的加载方式

js代码主要在页面中有以下几种方式接入

  1. 将js代码写到网页头部的<script>

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
       
        <script type="text/javascript">
            /*写在script标签内,无法获取button,原因是浏览器顺序加载, 可以将script标签体放在body结束为止之前*/
            var btn = document.getElementById("btn");
            alert(btn);
        </script>
       
    </head>
    <body>
    

    缺点:无法获取元素,必须使用window.onload = function () {形式解决,保证页面被完全加载,这种做法是最推荐的做法

  2. 将js代码写成外部文件,并引入

    1
    2
    3
    4
    5
    6
    7
    8
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
       
        <!--注意这里不能使用<script /> 这种自闭合形式, 浏览器不识别-->
        <script type="text/javascript" src="demo.js"></script>
       
    </head>
    
  3. 如果是事件触发,还可以将js代码写在事件属性位置

    结构与行为耦合,不推荐

  4. 将js代码写在网页结束位置,推荐使用,但是也有缺陷,比如在前面加载一个外部图片,扫描完成但是没有加载完毕,此时后面的js代码中有引用到图片的大小信息就会报undefined等错误。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    
    <body>
       
    <!--第一种 在标签的事件属性中编写js代码 调用方法、声明变量都可以-->
    <button id="btn" onclick="alert('HelloWorld')">Say Hello</button>
    <button id="btn1">Say Hello1</button>
       
    <script type="text/javascript">
        /*写在script标签内,无法获取button,原因是浏览器顺序加载, 可以将script标签体放在body结束为止之前*/
        var btn = document.getElementById("btn");
        alert(btn);
    </script>
    </body>
    

小结

  • 写在标签的事件属性里面,不推荐

  • 写在script标签里

    • 写在head里面(推荐,但一定写在window.onload里面)

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

    • 写在body闭合之前

      可以找到元素,但是比如图片,iframe请求较长事件,可能导致下面使用img的属性的时候获取不到正确属性值

  • 引入外部文件,同上面两种形式

标签事件属性

html元素的事件属性本身就有,写js代码只是给这些原有的事件属性赋值

dom模型

dom,Document Object model文档对象模型

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

可以把DOM认为是页面上数据和结构的一个树形表示。

http://img.cana.space/picStore/20210102183506.png

注意,属性节点不参与“顺藤摸瓜”;document对象是window对象的属性,可以通过window.document获取。

节点关系

  • 节点:每一个元素都是节点
  • 父节点
  • 子节点
  • 祖先节点
  • 后代节点
  • 兄弟节点(同一个父节点)

节点分类

http://img.cana.space/picStore/20210102184409.png

  • 元素节点:HTML文档中的HTML标签
  • 属性节点:元素的属性,ele.getAttributeNode(“属性名”)
  • 文本节点:HTML标签中的文本内容,也即对象

节点属性

每个节点都含有3个属性,分别是nodeName、nodeType、nodeValue

http://img.cana.space/picStore/20210102184549.png

js中的对象

  • js本地对象和内置对象
  • Browser对象(BOM)
    • Window
    • Navigator
    • Screen
    • History
    • Location
  • HTML DOM对象

document对象

  • document是一个文档节点
  • 代表整个文档
  • 所有节点都是它的后代节点
  • 它是window对象的属性
  • 可以直接使用

获取元素节点

  • document.getElementById()

    通过id属性值获取一个元素节点对象

  • document.getElementsByTagName(),注意这个方法也可以在已找到的其他节点对象上进行使用,其他两个则不行

    通过标签名获取一组元素节点对象

  • document.getElementsByName()

    通过name属性获取一组元素节点对象,通常用来获取表单对象

获取元素节点的子节点

  • getElementsByTagName() 返回当前节点的指定标签名子节点
  • 对象.childNodes 返回对象的所有子节点
  • 对象.firstChild 获取节点的第一个子节点,lastChild 最后一个子节点
  • 对象.parentNode 返回节点的父节点
  • 对象.previousSibling 前一个兄弟节点,nextSibling 后一个兄弟节点

元素节点的属性

元素对象.属性名

  • 对象.value 获取对象的value属性值,对象.id,对象.className
  • 对象.id
  • 对象.className

设置属性值,元素对象.属性名=新的值

  • element.value=“hello”
  • element.id=“id01”
  • element.className=“newClass”

其他属性

  • nodeValue
    • 文本节点可以通过nodeValue属性获取和设置文本节点的内容
    • 获取文本值
      • 对象.innerText 获取节点内部的文本内容
      • 对象.innerHTML 获取节点内部的html代码
      • 对象.firstChild.nodeValue,文本节点是节点的第一个节点

dom增删改

API 功能
document.createElement(“标签名”) 创建元素节点并返回,但不会自动添加到文档中
document.createTextNode(“文本值”) 创建文本节点并返回,但不会自动添加到文档中
element.appendChild(ele) 将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle) 将newEle添加到targetEle前面
parentEle.replaceChild(newEle,oldEle) 用新节点替换原有的旧子节点
parentEle.removeChild(childNode) 删除指定的子节点,通过父节点删除
element.innerHTML 读写HTML代码[非W3C标准,但主流浏览器都支持],注意element一定是元素节点

使用js创建节点比较麻烦,以创建li节点为例,需要分成以下3步

http://img.cana.space/picStore/20210102204124.png

1
2
3
4
5
6
// 1. 创建子节点 文本节点
var textEle = document.createTextNode("南京");
// 2. 创建父节点 li
var liEle =  document.createElement("li");
// 3. 将子节点加入到父节点,父元素.appendChild(子元素)
liEle.append(textEle);

取消事件默认行为

比如超链接点击事件和表单提交按钮,点击后会有一个默认的行为,可以使用“return false”

1
2
3
4
5
var btn = document.getElementById("btn1");
btn.onclick = function () {
    // return false就不会进行跳转,否则执行完方法体内容后还是会跳转
    return false;
};