前端开发第四节JavaScript

JavaScript：概要

概要：

JavaScript，是一门编程语言。浏览器就是JavaScript语言的解释器。
DOM和BOM

相当于编程语言内置的模块。
例如：Python中的re、random、time、json模块等。

jQuery

相当于是编程语言的第三方模块
例如：requests、openpyxl

1. JavaScript

1.1 代码位置

1.写在head标签内部

2.写在body结尾的内部

推荐写在body结尾的内部

原因：

1.HTML是从上往下执行，如出现输出语句，则先输出再显示页面内容

2.如JavaScript内容过多，则影响页面显示速度，影响用户体验

JS代码存在形式

存在HTML文件中
存放在JS文件中，再引入HTML

1.2 注释

HTML的注释

<!-- 注释内容 -->

CSS的注释

/* 注释内容 */

JavaScript的注释

// 注释内容
/* 注释内容 */

1.3 变量

Python，编程语言。

name = "刘备"
print(name)

JavaScript，编程语言。

<script type="text/javascript">
    var name = "刘备";
    console.log(name);  // 输出
</script>

1.4 字符串类型

// 声明
var name = "刘备";
var name = String("刘备");

// 常见功能
var name = "中国联通";
var v1 = name.length; // 获取长度
var v2 = name[0];   // 索引字符
var v3 = name.trim(); // 去除空白
var v4 = name.substring(0,2); // 前取后不取

案例：跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="txt">中国联通</span>
<script type="text/javascript">
    function show(){
        // 在HTML中找到id为txt的标签并获取他的内容
        var tag = document.getElementById("txt");
        var dataString = tag.innerText;
        // 动态起来，把文本中的第一个字符放在字符串的最后面
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length);
        var newText = otherString + firstChar;
        // 在HTML标签中更新内容
        tag.innerText = newText;
        console.log(dataString);
    }
    setInterval(show, 1000)
</script>
</body>
</html>

1.5 数组

// 定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);

var v1 = [11,22,33,44];
v1[1]
v1[0] = "刘备";
v1.push("联通");    // 尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通");   // 前部追加 ["联通",11,22,33,44]
v1.splice(索引,0,元素);
v1.splice(1,0,"中国"); // 自定义追加 [11,"中国",33,44]
v1.pop()  // 尾部删除
v1.shift()  // 头部删除
v1.splice(索引位置,1)
v1.splice(2,1)  // 索引为2的元素删除 [11,22,44]

var v1 = [11,22,33,44]; 
// 注意：循环的是索引不是元素
for(var idx in v1){
    // idx=0/1/2/3/   data=v1[idx]  
}

var v1 = [11,22,33,44]; 
for(var i=0; i<v1.length; i++){
    // i=0/1/2/3  data=v1[idx]
}

案例：动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="city">
    </ul>
<script>
    var cityList = ["北京","上海","深圳"];
    for (var idx in cityList){
        var text = cityList[idx];
        // 创建li标签
        var tag = document.createElement("li")
        // 在li标签中写入内容
        tag.innerText = text;
        // 添加到id=city标签里面
        var parentTag =  document.getElementById("city");
        parentTag.appendChild(tag)
    }
</script>
</body>
</html>

1.6 对象（字典）

info = {
  "name":"刘备"
    "age":50
}
info = {
  name:"刘备"
    age:50
}

info.age
info.name = "关羽"
delete info["age"]

info = {
    name:"刘备",
    age:18
}
for(var key in info){
    // key=name/age   data=info[key]
}

案例：动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
<!--            <tr>-->
<!--                <td>1</td>-->
<!--                <td>刘备</td>-->
<!--                <td>50</td>-->
<!--            </tr>-->
        </tbody>
    </table>
<script type="text/javascript">
    var info = {id:1, name:"刘备", age:50};
    var tr = document.createElement("tr");
    for (var key in info){
        var text = info[key];
        var td = document.createElement('td');
        td.innerText = text;
        tr.appendChild(td);
    }
    var bodyTag = document.getElementById("body");
    bodyTag.appendChild(tr);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
<!--            <tr>-->
<!--                <td>1</td>-->
<!--                <td>刘备</td>-->
<!--                <td>50</td>-->
<!--            </tr>-->
        </tbody>
    </table>
<script type="text/javascript">
    var dataList = [
        {id:1, name:"刘备", age:50},
        {id:2, name:"刘备", age:50},
        {id:3, name:"刘备", age:50},
        {id:4, name:"刘备", age:50},
        {id:5, name:"刘备", age:50},
    ];
    for (var idx in dataList){
        var info = dataList[idx]
        var tr = document.createElement("tr");
        for (var key in info){
            var text = info[key];
            var td = document.createElement('td');
            td.innerText = text;
            tr.appendChild(td);
        }
        var bodyTag = document.getElementById("body");
        bodyTag.appendChild(tr);
    }
</script>
</body>
</html>

1.7 条件语句

if(条件){
}else{
}
if(1==1){
}else{
}

if(条件){
}else if(条件){
}else if(条件){
}else{
}

1.8 函数

# python定义函数
def func():
    函数内容...
# python执行函数
func()

// javascript定义函数
function func(){
  函数内容...
}
// javascript执行函数
func()

2.DOM

DOM是一个模块，模块可以对HTML页面中的标签进行操作。

// 根据ID获取标签
var bodyTag = document.getElementById("body");
// 获取标签中的文本
tag.innerText
// 修改标签中的文本
tag.innerText = "刘备";

// 创建标签 <div></div>
var tag = document.createElement("div");
// 标签写内容  <div>刘备</div>
tag.innerText = "刘备";

例如：

<ul id="city">
</ul>
<script type="text/javascript">
    // 找到标签
  var tag = document.getElementById("city");  
    // 生成标签和内容
    var newTag = document.createElement("li");
    newTag.innerText = "北京";
    // 加入标签和内容
    tag.appendChild(newTag);
</script>

2.1 事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="点击添加" onclick="addCityInfo()">
    <ul id="city">
    </ul>
<script type="text/javascript">
    function addCityInfo(){
        var newTag = document.createElement("li");
        newTag.innerText = "联通";
        var parentTag = document.getElementById("city");
        parentTag.appendChild(newTag);
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser" />
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
</ul>
<script type="text/javascript">
    function addCityInfo(){
        // 找到输入标签
        var txtTag = document.getElementById("txtUser");
        // 获取input框中用户输入的内容
        var newString = txtTag.value;
        // 判断用户输入是否为空，只有不为空才能继续。
        if (newString.length > 0){
            // 创建标签 <li></li>
            var newTag = document.createElement("li");
            newTag.innerText = newString;
            // 标签添加到ul中
            var parentTag = document.getElementById("city");
            parentTag.appendChild(newTag);
            // 将input框内容清空
            txtTag.value = "";
        }else{
            alert("输入不能为空");
        }
    }
</script>
</body>
</html>

3. jQuery

jQuery是一个JavaScript第三方模块（第三方类库）。

基于jQuery，自己开发一个功能。
现成的工具依赖jQuery，例如：BootScript动态效果。

3.1 快速上手

下载jQuery

https://jquery.com/

应用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="txt">中国联通</h1>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
    // 利用jQuery中的功能实现某些效果
    // 1.找到id=txt的标签; 2.内容修改
    $("#txt").text("广西移动");
</script>
</body>
</html>

JavaScript笔记+案例（下）：https://developer.aliyun.com/article/1427908

JavaScript笔记+案例（上）

前端开发第四节JavaScript

JavaScript：概要

1. JavaScript

1.1 代码位置

1.2 注释

1.3 变量

1.4 字符串类型

案例：跑马灯

1.5 数组

案例：动态数据

1.6 对象（字典）

案例：动态表格

1.7 条件语句

1.8 函数

2.DOM

2.1 事件的绑定

3. jQuery

3.1 快速上手

热门文章

最新文章

相关课程

相关电子书

相关实验场景

JavaScript笔记+案例（上）

前端开发 第四节JavaScript

JavaScript：概要

1. JavaScript

1.1 代码位置

1.2 注释

1.3 变量

1.4 字符串类型

案例：跑马灯

1.5 数组

案例：动态数据

1.6 对象（字典）

案例：动态表格

1.7 条件语句

1.8 函数

2.DOM

2.1 事件的绑定

3. jQuery

3.1 快速上手

热门文章

最新文章

相关课程

相关电子书

相关实验场景

前端开发第四节JavaScript