迦南地
所有文章 标签 分类 实验室 关于
迦南地

目录

js_quickstart

 收录于 技术
   约 3890 字   预计阅读 8 分钟    次阅读  

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;
};
更新于 2021-01-01
 css
返回 | 主页