诺小新 | Neuerliu
0%

前端入门:(五)javascript介绍

Posted on In

  • javascript是用来为网页提供动态效果的编程语言，会涉及到一些类库(模块)，实现动态网页，浏览器就是js的解释器。

  • DOM和BOM：内置模块

  • jQuery：第三方模块

1.javascript简介

javascript就是为了让网页实现一些动态效果。

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">
    <title>Document</title>
    <style>
        .menus{
            width: 200px;
            border: 1px solid red;
        }

        .menus .header{
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="header" onclick="myFunc()">大标题</div> <!-- onclick="myFunc()" 点击事件 -->
        <!-- 注意这里需要带括号 -->
        <div class="item">内容</div>
    </div>

    <script type="text/javascript">
        function myFunc(){
            // alert('Hello world!'); //点击实现提示
            confirm('是否要继续？') // 点击实现确认框
        }
    </script>
</body>
</html>

1.1 js代码存放位置

javascript代码一般可以放在：

  • 可以放在head中style代码的后面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            ...
        </style>
        <script type='text/javascript'>
           	在这里编写js代码
        </script>
    </head>

  • 可以在body标签内部编写js代码（推荐）

    1
    2
    3
    4
    5
    6
    7
    <body>
        ...
        
        <script type='text/javascript'>
           	在这里编写js代码
        </script>
    </body>

解释器在解释代码时会按照从前到后的顺序执行，因此如果将js代码放在head中会导致浏览器先执行js代码，再显示页面，这会降低用户体验感。

  • 对于较多的js代码，可以单独写在js文件中，编写html时导入即可

1.2 注释格式

  • html注释：<!-- 注释内容 -->
  • css注释：/* 注释内容 */
  • js注释：// 注释内容

1.3 js中的变量

  • 定义变量：

    1
    2
    var name = '诺小新';
    console.log(name); //打印变量

    js中打印变量需要在浏览器中右键选择检查--->控制台(console)查看输出

1.4 字符串类型

1
var name = '小新'; //定义字符串
1
2
3
4
5
6
7
// 字符串的常见功能
var name = '中国联通';

var name_length = name.length; //获取字符串长度
var name_first_char = name[0]; // 获取字符串的第一个字符，不存在负索引，也可以通过name.charAt()访问某位置的字符
var name1 = name.trim(); //去除字符串的前后空字符。类似于python中的strip
var name2 = name.substring(0,2) //字符串切片，也遵循前取后不取

案例：跑马灯

1.5 js中的数组

1
2
3
// 定义数组
var v1 = [11, 22, 33, 44];
var v2 = Array([11, 22, 33, 44]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 操作数组
var v1 = [11, 22, 33, 44];

//索引
v1[0] //索引获取值
v1[1] = '小新' //索引更新值

//追加新值
v1.push('你好') //尾部追加
v1.unshift('nihao') //头部追加
v1.splice(索引, 0, 'hello') //在索引处插入'hello'，0表示不删除字符

//删除元素
v1.pop() //尾部删除
v1.shift() //头部删除
v1.splice(索引位置, 1) //删除索引处元素
1
2
3
4
5
6
7
8
9
10
11
//遍历数组
var v1 = [11, 22, 33, 44];

//遍历元素
for(var idx in v1){ //注意：这里是循环索引
    <操作>
}
    
for(var i=0; i<v1.length; i++){ //另一种遍历索引的方法
    <操作>
}

案例：动态数据

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul id="city">
        <!-- <li>北京</li>
        <li>上海</li>
        <li>深圳</li> -->
        <!-- 实现数据的动态创建 -->
    </ul>

    <script type="text/javascript">
        var citylist = ['北京','上海','深圳'];

        for(var idx in citylist){
            var text = citylist[idx]; //获取城市名称
            var li_tag = document.createElement('li'); //创建一个li标签
            li_tag.innerText = text; //设置li标签的内容

            //添加到id=city的标签中
            var ul_tag = document.getElementById('city');
            ul_tag.appendChild(li_tag);
        }
    </script>
</body>
</html>

1.6 javascript中的字典对象

1
2
3
4
5
6
7
8
9
10
// 定义字典对象
var info = {
    'name': '小新',
    'age': 18
}

var info = {
    name: '小新',
    age: 18
}// 键不加引号较为常用
1
2
3
4
5
6
7
8
9
10
// 访问字典中的值
info.name
info.age

// 更新字典中的值
info.name = '诺小新'
info['age'] = '诺小新'

// 删除字典中的元素
delete info['age']
1
2
3
4
// 遍历字典的键
for(var key in info){
    data = info[key]
}

案例：动态表格

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">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
            <!-- 动态创建表格数据 -->
        </tbody>
    </table>

    <script type="text/javascript">
        var data = [
            {id:1, name:'张三', age:19},
            {id:2, name:'李四', age:20},
            {id:3, name:'王五', age:21},
        ] //一般网页中的数据都是通过网络请求获取的
        for(var idx in data){
            //找到当前数据
            var info = data[idx]
            //先创建tr标签，存放数据
            var tr_tag = document.createElement('tr');
            for(var key in info){
                var text = info[key]; //获取数据
                var td_tag = document.createElement('td'); //创建一个td标签
                td_tag.innerText = text; //设置td标签的内容
                //将td放到tr中
                tr_tag.appendChild(td_tag);
                //将tr放到body中
                var body_tag = document.getElementById('body');
                body_tag.appendChild(tr_tag);
            }
        }
    </script>
</body>
</html>

1.7 javascript中的条件语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 条件语句1
if (条件) {
    ...
}else{
    ...
}

//条件语句2
if (条件1) {
    ...
}else if (条件2) {
    ...
}else{
    ...
}

1.8 javascript中的函数

1
2
3
4
5
6
// 定义函数
function func(){
	...
}
    
func() // 调用函数

2.DOM简介

DOM可以认为是一个js中的模块，文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口，可以对html页面中的标签进行操作。

  • 获取标签及其文本并修改

    1
    2
    3
    4
    5
    6
    7
    8
    // 根据ID获取标签
    var tag = document.getElementById("<ID>");

    // 获取标签中的文本
    tag.innerText

    // 修改标签中的文本
    tag.innerText = '<text>'

  • 创建标签

    1
    2
    3
    4
    5
    // 创建标签
    var tag = document.createElement('div') //创建div标签

    // 向创造的标签内写内容
    tag.innerText = '<text>'

  • 标签之间层级设置

    1
    2
    3
    4
    5
    // 创建标签
    var parent_tag = document.createElement('ul') //创建ul标签
    var child_tag = document.CreateElement('li') // 创建li标签
    child_tag.innerText = '你好'
    parent_tag.appendChild(child_tag) //将li标签放到ul标签中

2.1 事件的绑定

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 实现点击按钮，向ul标签中添加用户输入的内容 -->
    <input type="text" placeholder="请输入内容" id="userinput">
    <!--onclick表示单机，换成ondblclick实现双击触发事件-->
    <input type="button" value="点击添加" onclick="addCityInfo()"> <!--绑定一个点击事件-->
    <ul id="city">

    </ul>

    <script type="text/javascript">
        function addCityInfo(){
            //获取输入框中用户输入的数据
            var userinput_tag = document.getElementById('userinput');
            userinput_text = userinput_tag.value; //读取用户输入内容

            //创建新标签及填充其中内容
            var infotag = document.createElement('li');
            //判断用户输入内容是否为空，只有不为空才能继续
            if(userinput_text > 0){
                infotag.innerText = userinput_text;

                var ul_tag = document.getElementById('city');
                ul_tag.appendChild(infotag);

                //将input框内容清空，便于下次输入
                userinput_tag.value = '';
            }else{
                //提示用户输入不能为空
                alert('输入内容不能为空');
            }
            
        }
    </script>
</body>
</html>

实际开发中，我们并不会自己来写基于DOM的代码，而是会用jQuery实现页面效果，实际企业开发中会使用vue.js/react实现。

3.python知识点回顾

  • 编码相关

    文件存储/打开必须采用相同编码，否则会出现乱码。1字节=8比特

    字符和二进制对应关系(编码)：

    • ascii编码，256种对应关系
    • gb2312/gbk，中文和亚洲采用的编码格式，中文一般采用2字节存储
    • unicode，ucs2(2字节存储)/ucs4(4字节存储)，包括现在已发现的所有文字
    • utf-8编码：对unicode进行一定程度的压缩，其中中文一般采用3字节存储

  • python字符串格式化：3种

    • .format方法：’我是{}’.format(“诺小新”)
    • %s %d表示：’我是%s，今年%d岁’ % (‘诺小新’,22)
    • f{}方法：name=’诺小新’ age=22 f’我是{name}，今年{age}岁’

  • python中的数据类型：int/bool/str/list/dict/tuple/set/float/None

    • 空、None、0转化为布尔值为False

    • 可变数据类型：list/set/dict

      不可变数据类型：其余

    • 可哈希数据类型：字典的键/集合的元素

      不可哈希数据类型：list/set/dict

    • 功能

      • str

        • 独有功能：upper/lower/split/startswith/strip，由于不可变，执行功能不会对原str进行修改，会返回一个新的字符串
        • 公共功能：len/索引/切片/for循环/判断是否包含某字符

      • list

        • 独有功能：append/insert/remove/pop，由于可变，执行上述功能均是在原list上进行
        • 公共功能：len/索引/切片/for循环/判断是否包含某字符

      • dict

        • 独有功能：get/keys/items/values
        • 公共功能：len/索引/for循环/判断是否包含某字符