开发 python开发-JavaScript

python开发-JavaScript

js使用语法累积

js支持字符串和数字直接相加，自动将数字转换成字符串

iNum++

iNum+=1

javascript的定义

JavaScript是运行在浏览器端的脚本语言, 是由浏览器解释执行的, 简称js, 它能够让网页和用户有交互功能, 增加良好的用户体验效果。

前端开发三大块 1、HTML：负责网页结构 2、CSS：负责网页样式 3、JavaScript：负责网页行为

javascript的使用方式

和css的使用方式很像。

行内式

内嵌式

外链式

文件后缀.js

css的后缀是.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式 -->
    <script>
        alert("我是内嵌的js代码！")
    </script>
    <!-- 外链式 -->
    <script src="./../js/main.js">

    </script>
</head>
<body>
    <!-- 行内式 -->
    <input type="button" value="按钮" onclick="alert('你点击了我!')">
</body>
</html>
1
2
// main.js
alert("我是外链式的js代码！")

注释

1
2
3
//

/*xxx */

变量和数据类型

定义变量

JavaScript 是一种弱类型语言，也就是说不需要指定变量的类型，JavaScript的变量类型由它的值来决定， 定义变量需要用关键字 ‘var’, 一条JavaScript语句应该以“;”结尾(其实很多时候不加分号也不会报错)

1
2
3
4
var num = 10;
var str = 'dkhjkd'
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var num=15,str='sdf';

数据类型

1
2
3
4
5
6
7
8
9
10
11
js中有六种数据类型，包括五种基本数据类型和一种复杂数据类型(object)。

5种基本数据类型：
1、number 数字类型(整数、浮点)
2、string 字符串类型(单引号或者单引号都可以)
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：
1、object 后面学习的数组、函数和JavaScript对象都属于复合类型

变量命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler

案例
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 数字型变量
        var iNum = 10;
        var fNum = 2.52;
        // 字符串
        var sStr1 = "this is a String!";
        // 布尔值
        var bTrueOrFalse = true;
        // 未定义Undefined类型
        var unData;
        // 定义空对象
        // 由于js历史原因，设计之前没有null类型，nul1值归属于object类型，后续js语言迭代后也没进行修改
        // 对于大家类型null值属于null类型
        var oData = null;

        // 定义javascript对象类型
        var oPerson = {
            name:"王五",
            age:20
        }

        // 查看数据类型用typeof
        alert(typeof(iNum)); // number
        alert(typeof(fNum)); // number
        alert(typeof(sStr1)); // string
        alert(typeof(bTrueOrFalse)); // boolean
        alert(typeof(unData)); // undefined
        alert(typeof(oData)); // object
        alert(typeof(oPerson)); // object
        alert(typeof(oPerson.age)); // number
        alert(typeof(oPerson.name)); // string
        // 输出结果到控制台
        console.log(oPerson);
        console.log(oPerson.name);
        

    </script>
</head>
<body>
    
</body>
</html>

变量的作用域

局部变量

在函数内定义

全局变量

在函数外定义

案例
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
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 这里定义了一个包含局部变量的函数，后面函数外使用该变量，在浏览器检查里面能看到错误
        function fnTest(){
            var iNum = 20;
            alert(iNum);
        }
        fnTest()
        // 有下面这行取局部变量值的代码时，浏览器直接报错
        // alert(iNum) 

        // 全局变量:在函数外定义的变量叫做全局变量，可以在不同函数内使用，并且不同函数内可以共享全局变量
        var iGlobalNum = 100
        function fnModify(){
            alert(iGlobalNum)
            iGlobalNum += 10
            alert(iGlobalNum)
        }

        fnModify()
        // js支持字符串和数字相加，将数字转换成字符串
        alert("最后访问全局变量，可以发现值是修改后的值："+iGlobalNum)


    </script>
</head>
<body>
    
</body>
</html>

字符串拼接

使用+号

说明：

数字和字符串拼接会自动进行类型转换(隐士类型转换)，把数字类型转成字符串类型进行拼接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var sName = "ty"
        var iAge = 20
        var sSex = "male"
        console.log(sName+sSex)
        // 隐式转换
        console.log(sName+iAge)
        // +=
        console.log(sName+=sSex)
    </script>
</head>
<body>
    
</body>
</html>

函数

函数的定义

使用关键字 function 定义函数

无参数
有参数
有返回值

用关键字return

函数的调用

实例

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 花括号后面有误分号;都可以。其实很多情况下不加分号并不会报错
        // 无参数、无返回值的函数
        function fnShow(){
            alert("这是一个无参数无返回值的函数！")
        }

        fnShow();

        // 有参数有返回值的函数，return之后的代码不会执行
        function fnNum(iNum1,iNum2){
            var iResult = iNum1+iNum2;
            alert(iResult);
            return iResult
            alert("测试，这一行不执行")
        }

        fnNum(5,7)
    </script>
</head>
<body>
    
</body>
</html>

条件语句

if

if…else…

if…else if…else…

比较运算符

在js里面如果数字和字符串进行比较(==、>、<、>=、<=、!=)，会自动把字符串转成数字类型然后再进行比较

1
2
3
4
5
6
7
==：只比较值是否相同，类型是否相同不管(如"5"==5为true)
===：值相同且类型相同才为true(如"5"==5为false)
>
<
!=
>=
<=

案例

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
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var sNum = "100";
        var iNum = 100;
        if(sNum==iNum){
            alert("条件成立")
        }
        if(sNum>=iNum){
            alert("条件成立")
        }else{
            alert("条件不成立")
        }

        var iScore = 61;
        if(iScore>=90){
            alert("优")
        }else if(iScore>=70){
            alert("良")
        }
        else if(iScore>=60){
            alert("及格")
        }else{
            alert("差")
        }
    </script>
</head>
<body>
    
</body>
</html>

逻辑运算符

&&：与，两边都为true才为true

||：或，一边为true就为true

!：非，对结果取反

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
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var iNum1 = 1;
        var iNum2 = 2;
        if(iNum1>=0 && iNum2<=2){
            alert("条件成立");
        }else{
            alert("条件不成立");
        };

        if(iNum1>=0 || iNum2<2){
            alert("条件成立");
        }else{
            alert("条件不成立");
        };

        if(!(iNum1<0 || iNum2<2)){
            alert("条件成立");
        }else{
            alert("条件不成立");
        };

    </script>
</head>
<body>
    
</body>
</html>

获取标签元素

document.getElementById(‘标签id’);

可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它赋值给一个变量

设置页面加载完成执行的函数，在执行函数里面获取标签元素。

说明:window.onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数

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
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 现在这种写法获取不到未初始化完成的后方代码，alert结果为null -->
    <!-- <script>
        // js的内置对象，html的文档对象
        // 如果获取的对象是null，表示标签没有获取成功
        var oP = document.getElementById("p1")
        alert(oP)
    </script> -->
     
    <!-- 法二、这个函数后续其它地方用不到，还不够简洁 -->
    <!-- <script>
        function fnLoad(){
            var oP = document.getElementById("p1");
            alert(oP)
        }
        window.onload = fnLoad;
    </script> -->

    <!-- 法三、这个函数后续其它地方用不到，还不够简洁，可以使用匿名函数 -->
     <!-- 页面标签和数据都加载完成以后会触发onload事件 -->
    <script>
        window.onload = function(){
            var oP = document.getElementById("p1");
            alert(oP)
        };
    </script>
</head>
<body>
    <p id="p1">我是一个p标签</p>  
</body>
</html>

<!-- 法一、这种写法，不推荐，知道即可，就是等标签初始化完成再获取 -->
<!-- <script>
        // js的内置对象，html的文档对象
        // 如果获取的对象是null，表示标签没有获取成功
        var oP = document.getElementById("p1")
        alert(oP)
</script> -->

操作标签元素的属性

首先获取到页面标签元素，然后可以对属性进行读取和修改

属性名在js中的写法

  1. html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”
  2. “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btnstyle{
            background: yellow;
            font-size: 30px;
        }
    </style>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1")
            // 获取属性
            alert(oBtn.type)
            alert(oBtn.value)
            // 设置属性
            oBtn.name = "uername"
            // 设置css样式，行内式
            // oBtn.style.background = "red";
            // oBtn.style.fontSize = "30px"
            // 设置css样式，内嵌式
            oBtn.className = "btnstyle"
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1">
</body>
</html>

innerHTML

innerHTML可以读取或者设置标签包裹的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1")
            // 获取标签的内容
            alert(oDiv.innerHTML)
            // 修改标签内容
            oDiv.innerHTML = "<a href='http://www.baidu.com'>百度</a>"
            alert(oDiv.innerHTML)
        }
    </script>
</head>
<body>
    <div id="div1">这是一个div标签 </div>
</body>
</html>

数组

javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表(就python叫列表，其它语言都叫数组)。

定义列表

1
2
3
4
5
// 实例化对象方式创建
var aList = new Array(1,2,3);

// 字面量方式创建，推荐使用
var aList2 = [1,2,3,'asd'];

多维列表

1
var aList = [[1,2,3],['a','b','c']];

操作列表

长度
根据下标取值
从数组最后添加和删除数据
根据下标添加和删除元素

arr.splice(start,num,element1,…..,elementN)

参数解析：

  1. start：必需，开始删除的索引。
  2. num：可选，删除数组元素的个数。
  3. elementN：可选，在start索引位置要插入的新元素。
案例
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
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 定义数组
        var aArray1 = new Array(1,2,3)
        console.log(aArray1)
        // 字面变量方式创建，相当于直接赋值一个数组，数组的表现形式是一对中括号
        var aArray2 = [4,5,6]
        console.log(aArray2)
        // 多维数组
        aArray3 = [[1,2,3],[4,5,6]]
        console.log(aArray3)
        // 数组相关操作
        // 根据下标取值，不支持负值
        alert(aArray3[0][2])
        alert(aArray3.length)
        // 根据下标修改值
        aArray2[0] = 100
        console.log(aArray2)
        // 追加数据
        aArray2.push("hello")
        console.log(aArray2)
        // 使用pop删除最后一个数据，不支持指定下标
        aArray2.pop()
        console.log(aArray2)
        // 使用splice插入1个数据
        aArray2.splice(1,0,"yes")
        console.log(aArray2)
        // 使用splice插入多个数据
        aArray2.splice(1,0,"yes","NO")
        console.log(aArray2)
        // 使用splice删除数据
        aArray2.splice(1,2)
        console.log(aArray2)

    </script>
</head>
<body>
    
</body>
</html>

循环语句

for(最常用)

while

do..while：先执行再判断条件，一定会执行一次

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var aArray = [1,2,3];
        // for(var index = 0; index<aArray.length;index++){
        //     alert(aArray[index]);
        // }

        // var index = 0;
        // while(index<aArray.length){
        //     alert(aArray[index]);
        //     index++;
        // }
         
        var index = 0
        do{
            alert(aArray[index])
            index++
        }while(index<aArray.length)

    </script>
</head>
<body>
    
</body>
</html>

定时器

介绍

定时器就是在一段特定的时间后执行某段程序代码

使用

js 定时器有两种创建方式：

  1. setTimeout(func[, delay, param1, param2, …]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
  2. setInterval(func[, delay, param1, param2, …]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

setTimeout函数的参数说明:

  • 第一个参数 func , 表示定时器要执行的函数名
  • 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
  • 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

setInterval函数的参数说明:

  • 第一个参数 func , 表示定时器要执行的函数名
  • 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
  • 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。
清除定时器

使用完定时器需要清除释放定时器，使用clearTimeout和clearInterval，参数为前面两个创建定时器方法返回的定时器id

案例

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
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // function fnTest(name,age){
        //     alert(name+age)
        //     alert(tid)
        //     // 销毁定时器
        //     clearTimeout(tid)
        // }
        // // 延时执行，只执行一次
        // // 1.定时器要执行的函数
        // // 2.时间间隔
        // // 3.参数，多个参数使用逗号进行分割
        // // 返回值表示创建定时器返回的id，通俗理解就是创建的第几个定时器
        // var tid = setTimeout(fnTest,1000,'ty',60)

        // 定时执行，执行多次
        function fnStop(){
            clearInterval(tid)
        }

        function fnPrint(name,age){
            alert(name,age)
        }
        var tid = setInterval(fnPrint,3000,"ty",80)

    </script>
</head>
<body>
    <input type="button" value="按钮" onclick="fnStop();">
</body>
</html>