第三章 前端开发基础Javascript

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量955 收藏 22
点赞数 18
分类专栏： 运维开发实战Web前端开发 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42434700/article/details/135289026
版权

第一章：前端开发基础：html
第二章：前端开发基础：CSS
第三章：前端开发基础：JavaScript
第四章：前端开发基础：jQuery
第五章：前端UI框架 Layui

文章目录

JavaScript介绍

JavaScript（JS）是一种高级、解释型的编程语言，通常用于在网页上添加交互性和动态功能。以下是关于JavaScript的一些主要特点和用途：

  1. 客户端脚本语言： JavaScript通常在Web浏览器中运行，作为客户端脚本语言。它可以直接嵌入HTML页面，与用户界面进行交互，改变页面的内容、样式和行为。

  2. 跨平台： JavaScript是一种跨平台的语言，几乎所有现代的Web浏览器都支持JavaScript。这使得开发者能够编写一次代码，并在不同的浏览器和操作系统上运行。

  3. 事件驱动： JavaScript是事件驱动的语言，它可以响应用户的交互，如点击、输入、鼠标移动等事件。通过事件处理程序，开发者可以定义在特定事件发生时执行的代码。

  4. 异步编程： JavaScript支持异步编程，通过使用回调函数、Promise和async/await等机制，可以处理异步操作，例如Ajax请求、定时器等。

  5. 对象导向： JavaScript是一种基于原型的面向对象语言。它使用原型链来实现对象的继承，允许开发者创建和扩展对象。

  6. 动态类型： JavaScript是一种动态类型语言，变量的类型在运行时确定。这意味着你可以在代码中更灵活地处理变量类型。

  7. 第三方库和框架： JavaScript生态系统丰富，有许多第三方库和框架，如jQuery、React、Angular、Vue等，使得开发者能够更高效地构建复杂的Web应用。

  8. 服务器端开发： 除了在客户端运行，JavaScript也可以用于服务器端开发，通过Node.js等平台，使开发者能够使用相同的语言进行前后端开发。

  9. 浏览器对象模型（DOM）： JavaScript通过DOM与网页文档进行交互。它可以通过DOM修改网页的结构、内容和样式。

  10. 数据交换格式： JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛用于前后端之间的数据传输。

JavaScript的广泛应用和强大的功能使其成为Web开发中不可或缺的一部分，同时也在其他领域，如移动应用开发和游戏开发中得到了广泛应用。

JavaScript基本使用

JavaScript的基本使用包括以下几个方面：在HTML中嵌入JavaScript代码、变量、数据类型、运算符、流程控制语句、函数、对象等。

1. 在HTML中嵌入JavaScript代码

可以在HTML文件中使用<script>标签来嵌入JavaScript代码，可以放在文档的<head>或<body>中。

<!DOCTYPE html>
<html>

<head>
    <title>基本使用</title>
    <script>
        // JavaScript代码写在这里
        alert("Hello, World!");
    </script>
</head>

<body>
    <!-- 页面内容 -->
</body>

</html>

内部方式

在<body>标签中使用

    <script type="text/javascript">
        <!-- javaScript语言 -->
    </script>
举例
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>

</head>

<body>
    <script type="text/javascript">
        var name = "hello js";
        alert(name)
    </script>
</body>

</html>

image-20231215101358410

外部方式(推荐)在head标签中使用

<script type="text/javascript" src="my.js"></script>
举例

创建js目录，并创建js.js文件

image-20231215101556684

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
    <script type="text/javascript" src="js/js.js"></script>
</head>

<body>

</body>

</html>

var name = "hello js";
alert(name)

image-20231215101624260

2. 变量

使用 var、let 或 const 关键字声明变量：

var x = 10;  // 全局变量
let y = 20;  // 块级作用域变量
const PI = 3.14;  // 常量

3. 数据类型

JavaScript有多种数据类型，包括数字、字符串、布尔、数组、对象等。

var num = 42;          // 数字
var str = "Hello";      // 字符串
var bool = true;        // 布尔
var arr = [1, 2, 3];     // 数组
var obj = { key: "value" };  // 对象

4. 运算符

JavaScript支持常见的算术、比较、逻辑运算符等。

var a = 5;
var b = 3;

var sum = a + b;      // 加法
var difference = a - b;  // 减法
var product = a * b;      // 乘法
var quotient = a / b;     // 除法
var remainder = a % b;    // 取余

var isEqual = a == b;   // 等于
var isNotEqual = a != b;  // 不等于
var isGreater = a > b;   // 大于
var isLess = a < b;      // 小于

var andOperator = (a > 0) && (b > 0);  // 逻辑与
var orOperator = (a > 0) || (b > 0);   // 逻辑或
var notOperator = !(a > 0);             // 逻辑非

5. 流程控制语句

使用 if、else、for 等语句来实现流程控制。

// 条件语句
if (a > b) {
    console.log("a 大于 b");
} else {
    console.log("a 小于等于 b");
}

// 循环语句
for (var i = 0; i < 5; i++) {
    console.log("循环次数：" + i);
}

6. 函数

定义和调用函数：

// 函数定义
function add(x, y) {
    return x + y;
}

// 函数调用
var result = add(3, 4);
console.log("结果：" + result);

7. 对象

使用对象存储和组织数据：

// 对象定义
var person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

// 访问对象属性和方法
console.log(person.firstName);      // 输出: John
console.log(person.age);             // 输出: 30
console.log(person.fullName());      // 输出: John Doe

这些是JavaScript的一些基本使用方法，可以帮助你入门这门语言。随着学习的深入，你将掌握更多高级的特性和技术。

事件

在JavaScript中，事件是指用户在浏览器中执行的某些操作，比如点击按钮、提交表单、移动鼠标等。你可以通过JavaScript来捕捉这些事件，并在事件发生时执行相应的操作。以下是一些常见的事件和如何在JavaScript中处理它们的例子：

1. 点击事件（click）

<button id="myButton">点击我</button>

<script>
    // 获取按钮元素
    var button = document.getElementById("myButton");

    // 添加点击事件处理程序
    button.addEventListener("click", function() {
        alert("按钮被点击了！");
    });
</script>

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
</head>

<body>
    <button id="myButton">点击我</button>

    <script>
        // 获取按钮元素
        var button = document.getElementById("myButton");
    
        // 添加点击事件处理程序
        button.addEventListener("click", function() {
            alert("按钮被点击了！");
        });
    </script>
    
</body>

</html>

image-20231215103424976

image-20231215103432322

2. 鼠标移动事件（mousemove）

<div id="myDiv" style="width: 100px; height: 100px; background-color: lightblue;"></div>

<script>
    // 获取div元素
    var myDiv = document.getElementById("myDiv");

    // 添加鼠标移动事件处理程序
    myDiv.addEventListener("mousemove", function(event) {
        var x = event.clientX; // 鼠标相对于窗口的水平位置
        var y = event.clientY; // 鼠标相对于窗口的垂直位置
        console.log("鼠标位置：" + x + ", " + y);
    });
</script>

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
</head>

<body>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: lightblue;"></div>

    <script>
        // 获取div元素
        var myDiv = document.getElementById("myDiv");
    
        // 添加鼠标移动事件处理程序
        myDiv.addEventListener("mousemove", function(event) {
            var x = event.clientX; // 鼠标相对于窗口的水平位置
            var y = event.clientY; // 鼠标相对于窗口的垂直位置
            console.log("鼠标位置：" + x + ", " + y);
        });
    </script>
    
</body>

</html>

image-20231215103525760

3. 键盘按下事件（keydown）

<script>
    // 添加键盘按下事件处理程序
    document.addEventListener("keydown", function(event) {
        console.log("按下的键码：" + event.keyCode);
    });
</script>

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
</head>

<body>
    <script>
        // 添加键盘按下事件处理程序
        document.addEventListener("keydown", function(event) {
            console.log("按下的键码：" + event.keyCode);
        });
    </script>
    
</body>

</html>

image-20231215103644825

4. 表单提交事件（submit）

<form id="myForm">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <input type="submit" value="登录">
</form>

<script>
    // 获取表单元素
    var myForm = document.getElementById("myForm");

    // 添加表单提交事件处理程序
    myForm.addEventListener("submit", function(event) {
        event.preventDefault(); // 阻止表单默认提交行为
        var username = myForm.elements.username.value;
        var password = myForm.elements.password.value;
        console.log("用户名：" + username + "，密码：" + password);
    });
</script>

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
</head>

<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <input type="submit" value="登录">
    </form>
    
    <script>
        // 获取表单元素
        var myForm = document.getElementById("myForm");
    
        // 添加表单提交事件处理程序
        myForm.addEventListener("submit", function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            var username = myForm.elements.username.value;
            var password = myForm.elements.password.value;
            console.log("用户名：" + username + "，密码：" + password);
        });
    </script>
    
</body>

</html>

image-20231215103741732

这些例子展示了如何使用addEventListener方法为不同的事件添加事件处理程序。在实际开发中，你可以根据需要监听不同的事件，并在事件触发时执行相应的JavaScript代码。

通过选择器查找元素

想操作元素，必须先找到元素，主要通过以下三种方法：

• 通过id（常用，上方事件按钮的就是）

• 通过类名

• 通过标签名

通过标签名

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
</head>

<body>
    <!-- 一个包含标题和三个段落的 div 元素 -->
    <div id="abc">
        <h1>这是一个标题</h1>
        <p>这是第一段话</p>
        <p>这是第二段话</p>
        <p>这是第三段话</p>
    </div>

    <script type="text/javascript">
        // 通过 ID 获取元素
        var container = document.getElementById("abc");

        // 通过标签名称获取所有的 p 元素
        var paragraphs = container.getElementsByTagName("p");

        // 使用 document.write 输出第一个 p 元素的内容（这会覆盖整个文档）
        document.write(paragraphs[0].innerHTML);

        // 使用 document.write 输出第二个 p 元素的内容
        document.write(paragraphs[1].innerHTML);

        // 使用 document.write 输出第三个 p 元素的内容
        document.write(paragraphs[2].innerHTML);

        // 使用 alert 弹出第一个 p 元素的内容
        alert(paragraphs[0].innerHTML);
    </script>
</body>

</html>

image-20231215105656881

刷新

image-20231215105716096

JS操作HTML

插入内容：

document.write(“<p>这是JS写入的段落</p>”); //向文档写入HTML内容

x = document.getElementById(‘demo’); //获取id为demo的元素

x.innerHTML=“Hello” //向元素插入HTML内容

改变标签属性：

document.getElementById(“image”).src=“b.jpg“ //修改img标签src属性值

改变标签样式：

x = document.getElementById(“p”) //获取id为p的元素

x.style.color=“blue” //字体颜色

获取输入的值：

var x = document.getElementById(“input”); //获取id为input的元素

var y = document.getElementById(“p”) //获取id为p的元素

y.innerHTML = x.value //设置y元素的内容是input的值

添加元素：

var p = document.createElement("p"); //创建p标签

var t = document.createTextNode("这是第三个段落。"); //创建添加的文本

p.appendChild(t); //向创建的p标签追加文本

var e = document.getElementById("main"); //获取添加的标签父元素

e.appendChild(p) //向父元素添加新创建的p标签

删除元素：

var p = document.getElementById(“main”)

p.remove(); //删除元素

举例1

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
</head>

<body>
    <!-- 一个按钮 -->
    <button type="button" id="bbb">按钮</button>

    <!-- 一个包含标题和三个段落的 div 元素 -->
    <div id="abc">
        <h1>这是一个标题</h1>
        <p>这是第一段话</p>
        <p>这是第二段话</p>
        <p>这是第三段话</p>
    </div>

    <!-- 用于显示信息的 p 元素 -->
    <p id="demo"></p>

    <!-- 一个图像元素 -->
    <img src="img/tupian.jpeg" alt="" id="image">

    <script type="text/javascript">
        // 获取按钮元素
        var buttonElement = document.getElementById("bbb");

        // 添加点击事件处理函数
        buttonElement.onclick = function () {
            // 获取用于显示信息的 p 元素
            var demoElement = document.getElementById("demo");
            // 修改 p 元素的内容
            demoElement.innerHTML = "hello js";

            // 获取图像元素
            var imageElement = document.getElementById("image");
            // 修改图像的 src 属性
            imageElement.src = "img/zuanjie.jpeg";
        };

        // 获取 div 元素下所有的 p 元素
        var paragraphs = document.getElementById("abc").getElementsByTagName("p");
        // 修改第一个 p 元素的颜色为红色
        paragraphs[0].style.color = "red";
    </script>
</body>

</html>

image-20231215111109443

点击按钮

image-20231215111141649

举例2

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
</head>

<body>
    <!-- 一个包含标题和三个段落的 div 元素 -->
    <div id="abc">
        <h1>这是一个标题</h1>
        <p>这是第一段话</p>
        <p>这是第二段话</p>
        <p>这是第三段话</p>
    </div>
    <div id="ccc">阿嘎</div>
    请输入：<input type="text" id="input">
    <button type="submit" onclick="myfunc()">查看</button>
    <!-- 用于显示信息的 p 元素 -->
    <p id="demo"></p>

    

    <script type="text/javascript">

        function myfunc () {
            var x = document.getElementById("input")
            var y = document.getElementById("demo")
            y.innerHTML = x.value

            // 删除元素
            var remove = document.getElementById("ccc");
            remove.remove()
        }
        // 动态添加一个新的段落元素
        var newParagraph = document.createElement("p");
        var newText = document.createTextNode("这是第四段JS");
        newParagraph.appendChild(newText);

        // 获取 div 元素并将新的段落元素添加到其中
        var container = document.getElementById("abc");
        container.appendChild(newParagraph);
    

    </script>
</body>

</html>

image-20231215112516476

点击查看

元素被删除

数据类型

JavaScript 中有多种数据类型，它们可以分为两大类：基本数据类型和复杂数据类型。

1. 基本数据类型（原始数据类型）

  1. String（字符串）： 表示文本数据，用单引号或双引号括起来。

    var name = "John";

  2. Number（数字）： 表示数值，可以是整数或浮点数。

    var age = 25;
var height = 1.75;

  3. Boolean（布尔）： 表示逻辑值，只有两个值：true 或 false。

    var isStudent = true;

  4. Null（空值）： 表示一个空值或不存在的对象。

    var data = null;

  5. Undefined（未定义）： 表示声明但未初始化的变量，或者不存在的属性。

    var x;

  6. Symbol（符号）： 表示唯一的标识符，通常用于对象属性的唯一键。

    var id = Symbol("uniqueId");

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
</head>

<body>
    <script type="text/javascript">
        // 创建一个字符串变量
        var s = "hello js";

        // 使用 console.log 输出字符串的长度
        console.log("字符串长度：" + s.length);

        // 使用 console.log 输出字符串的第一个字符
        console.log("第一个字符：" + s[0]);

        // 使用 console.log 输出替换字符串中的 "js" 为 "JS"
        console.log("替换字符串：" + s.replace("js", "JS"));

        // 使用 console.log 输出将字符串按空格分割为数组
        console.log("字符串分割：" + s.split(" "));

        // 使用 console.log 输出字符串拼接
        console.log("字符串拼接：" + "hello" + "js");
    </script>
</body>

</html>

image-20231215113559681

2. 复杂数据类型

  1. Object（对象）： 表示一个集合，包含键值对。键是字符串或 Symbol，值可以是任意类型。

    var person = {
  name: "Alice",
  age: 30,
  isStudent: false
};

  2. Array（数组）： 表示有序集合，其中的元素可以是任意类型。

    var colors = ["red", "green", "blue"];

  3. Function（函数）： 表示可执行的代码块，可以被调用。

    function add(a, b) {
  return a + b;
}

  4. Date（日期）： 表示日期和时间。

    var currentDate = new Date();

  5. RegExp（正则表达式）： 表示文本模式的对象，用于字符串的匹配和搜索。

    var pattern = /[a-z]/;

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
</head>

<body>
    <script type="text/javascript">
        // 创建一个空数组
        var computer = [];

        // 向数组中添加元素
        computer[0] = "主机";
        computer[1] = "显示器";
        computer[2] = "键盘";

        // 使用 console.log 输出整个数组
        console.log("计算机配件数组：" + computer);

        // 使用 push 方法向数组末尾添加新元素
        computer.push("鼠标");

        // 使用 console.log 输出数组的第三个元素
        console.log("第三个配件：" + computer[2]);

        // 创建一个对象
        var person = {
            name: "Alice",
            age: 30,
            isStudent: false
        };

        // 使用 console.log 输出整个对象
        console.log("个人信息对象：" + JSON.stringify(person));

        // 使用 console.log 输出对象的 name 属性（两种方式）
        console.log("姓名：" + person.name);
        console.log("姓名：" + person["name"]);

        // 修改对象的 age 属性和添加新属性
        person.age = 88;
        person["shengao"] = "180cm";

        // 使用 console.log 输出修改后的对象
        console.log("修改后的个人信息对象：" + JSON.stringify(person));
    </script>
</body>

</html>

image-20231215114248253

操作符

**操作符：**一个特定的符号，用它与其他数据类型连接起来组成一个表达式。常用于条件判断，根据表达式返回True/False采取动作

类型操作符
比较操作符• == 等于
• != 不等于
• > 大于
• < 小于
• >= 大于等于
• <= 小于等于
算术操作符• + 加法
• - 减法
• * 乘法
• / 除法
• % 取余
• ++ 自增，自动+1
• -- 自减，自动-1
逻辑操作符• && 与
• || 或
• !() 结果取反
赋值运算符• = 赋值
• += 加法赋值
• -= 减法赋值
• *= 乘法赋值
• /= 除法赋值
• %= 取余赋值

在 JavaScript 中，操作符是用于在变量或值之间执行操作的符号。以下是常见的 JavaScript 操作符的分类：

1. 算术操作符

  • 加法操作符 +： 将两个值相加。

    var sum = 5 + 3; // 结果为 8

  • 减法操作符 -： 从左操作数中减去右操作数。

    var difference = 10 - 4; // 结果为 6

  • 乘法操作符 *： 将两个值相乘。

    var product = 2 * 6; // 结果为 12

  • 除法操作符 /： 将左操作数除以右操作数。

    var quotient = 8 / 2; // 结果为 4

  • 取余操作符 %： 返回除法操作的余数。

    var remainder = 9 % 4; // 结果为 1

2. 比较操作符

  • 相等操作符 ==： 检查两个值是否相等，类型转换会发生。

    var isEqual = 5 == '5'; // 结果为 true

  • 严格相等操作符 ===： 检查两个值是否相等，不进行类型转换。

    var isStrictEqual = 5 === '5'; // 结果为 false

  • 不等操作符 != 和 !==： 与相等操作符相反。

  • 大于 >、小于 <、大于等于 >=、小于等于 <=： 用于比较两个值的大小。

3. 逻辑操作符

  • 逻辑与 &&： 如果两个操作数都为真，则结果为真。

    var result = true && false; // 结果为 false

  • 逻辑或 ||： 如果至少有一个操作数为真，则结果为真。

    var result = true || false; // 结果为 true

  • 逻辑非 !： 对操作数取反。

    var result = !true; // 结果为 false

4. 赋值操作符

  • 赋值 =： 将右侧的值赋给左侧的变量。

    var x = 10;

  • 复合赋值操作符 +=、-=、*=、/=： 将变量与右侧的值进行运算，并将结果赋给变量。

    var y = 5;
y += 3; // 相当于 y = y + 3;

5. 其他操作符

  • 三元条件操作符 ? :： 根据条件的真假返回不同的值。

    var age = 18;
var status = (age >= 18) ? '成年人' : '未成年人';

  • 逗号操作符 ,： 用于在一条语句中执行多个操作，返回最后一个表达式的值。

    var a = 1, b = 2, c = 3;

流程控制

条件判断

Created with Raphaël 2.3.0 开始 表达式 代码块 结束 yes no

1.1 if 语句

javascriptCopy codevar condition = true;

if (condition) {
    // 当条件为真时执行这里的代码块
} else {
    // 当条件为假时执行这里的代码块
}

1.2 else if

javascriptCopy codevar score = 75;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 70) {
    console.log("良好");
} else {
    console.log("不及格");
}

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS演示</title>
</head>

<body>
    请输入年龄: <input type="text" id="nianling">
    <button type="submit" onclick="checkAge()">提交</button>

    <p id="demo"></p>
    
    <script type="text/javascript">
        function checkAge() {
            // 获取输入框中的年龄值
            var age = document.getElementById("nianling").value;

            // 将字符串类型的年龄转换为整数类型
            age = parseInt(age);

            // 获取用于显示提示信息的 p 元素
            var demoParagraph = document.getElementById("demo");

            // 判断用户的年龄范围并显示不同的提示信息
            if (age < 18) {
                demoParagraph.textContent = "你还未成年，不能参加某些活动。";
            } else if (age >= 18 && age < 60) {
                demoParagraph.textContent = "你已经成年，可以参加各种活动。";
            } else {
                demoParagraph.textContent = "你已经是个老朋友了，欢迎参加活动。";
            }
        }
    </script>
</body>

</html>

image-20231215134421514

image-20231215134430953

image-20231215134440776

循环

image-20231215131403074

for 循环

javascriptCopy codefor (var i = 0; i < 5; i++) {
    // 循环体，执行 5 次
    console.log(i);
}

while 循环

javascriptCopy codevar i = 0;

while (i < 5) {
    // 循环体，执行 5 次
    console.log(i);
    i++;
}

do while 循环

javascriptCopy codevar i = 0;

do {
    // 循环体，至少执行一次
    console.log(i);
    i++;
} while (i < 5);

switch 语句

javascriptCopy codevar day = "Monday";

switch (day) {
    case "Monday":
        console.log("星期一");
        break;
    case "Tuesday":
        console.log("星期二");
        break;
    // ... 其他情况
    default:
        console.log("未知");
}

跳出循环

break
javascriptCopy codefor (var i = 0; i < 10; i++) {
    if (i === 5) {
        break; // 当 i 等于 5 时跳出循环
    }
    console.log(i);
}
continue
javascriptCopy codefor (var i = 0; i < 10; i++) {
    if (i === 5) {
        continue; // 当 i 等于 5 时跳过本次循环，进入下一次循环
    }
    console.log(i);
}

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>循环演示</title>
</head>

<body>

    <script type="text/javascript">
        // 获取用于显示内容的 p 元素
        var resultParagraph = document.createElement("p");
        document.body.appendChild(resultParagraph);

        // 使用 for 循环输出数字
        for (var i = 1; i <= 5; i++) {
            // 创建文本节点
            var textNode = document.createTextNode("数字 " + i);

            // 将文本节点添加到 p 元素中
            resultParagraph.appendChild(textNode);

            // 添加换行符
            resultParagraph.appendChild(document.createElement("br"));
        }

        resultParagraph.appendChild(document.createElement("br"));

        // 使用 for-in 循环遍历数组
        var computer = ['主机', '显示器', '鼠标', '键盘'];
        for (var i in computer) {
            var textNode = document.createTextNode(computer[i]);
            resultParagraph.appendChild(textNode);
            resultParagraph.appendChild(document.createElement("br"));
        }

        resultParagraph.appendChild(document.createElement("br"));

        // 使用 for-in 循环遍历对象的属性
        var user = { name: 'aaaa', sex: 'nan', age: '18' };
        for (var k in user) {
            var textNode = document.createTextNode(user[k]);
            resultParagraph.appendChild(textNode);
            resultParagraph.appendChild(document.createElement("br"));
        }

        resultParagraph.appendChild(document.createElement("br"));

        // 使用 Object.keys 和 forEach 遍历对象的属性
        Object.keys(user).forEach(function (k) {
            var textNode = document.createTextNode(user[k]);
            resultParagraph.appendChild(textNode);
            resultParagraph.appendChild(document.createElement("br"));
        });

        resultParagraph.appendChild(document.createElement("br"));

        // 使用 continue 跳过数组中的某一项
        for (var i in computer) {
            if (i == "2") {
                continue;
            } else {
                var textNode = document.createTextNode(computer[i]);
                resultParagraph.appendChild(textNode);
                resultParagraph.appendChild(document.createElement("br"));
            }
        }

        resultParagraph.appendChild(document.createElement("br"));

        // 使用 break 终止循环
        for (var i in computer) {
            if (i == "2") {
                break;
            } else {
                var textNode = document.createTextNode(computer[i]);
                resultParagraph.appendChild(textNode);
                resultParagraph.appendChild(document.createElement("br"));
            }
        }
    </script>

</body>

</html>

image-20231215135536682

函数

函数是一段可重复执行的代码块，它接受输入（参数）、执行一系列操作，并返回输出（结果）。在JavaScript中，函数是一等公民，意味着它们可以像变量一样被传递、赋值和作为参数传递给其他函数。以下是JavaScript函数的一些基本概念和用法：

1. 函数的声明和调用

// 函数声明
function greet(name) {
    return "Hello, " + name + "!";
}

// 函数调用
var greeting = greet("Alice");
console.log(greeting); // 输出: Hello, Alice!

2. 参数和返回值

函数可以接受零个或多个参数，执行一些操作，并返回一个值。

// 函数接受两个参数，并返回它们的和
function add(a, b) {
    return a + b;
}

// 调用函数
var sum = add(3, 5);
console.log(sum); // 输出: 8

3. 默认参数

可以为函数的参数设置默认值，当调用时未提供参数时，将使用默认值。

function greetWithDefault(name = "Guest") {
    return "Hello, " + name + "!";
}

console.log(greetWithDefault()); // 输出: Hello, Guest!

4. 匿名函数

可以创建没有名称的匿名函数，并将其赋值给变量。

var multiply = function (a, b) {
    return a * b;
};

console.log(multiply(2, 3)); // 输出: 6

5. 箭头函数

ES6 引入的箭头函数是一种更简洁的函数语法，尤其适用于一些简单的函数。

const square = (x) => x * x;
console.log(square(4)); // 输出: 16

6. 闭包

函数可以形成闭包，它可以访问其声明外部的变量。

function outerFunction() {
    var outerVariable = "I am outer!";

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

var closure = outerFunction();
closure(); // 输出: I am outer!

举例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Functions Example</title>
</head>

<body>
    <script>
        // 1. 函数的声明和调用
        function greet(name) {
            return "Hello, " + name + "!";
        }

        var greeting = greet("Alice");
        console.log(greeting); // 输出: Hello, Alice!

        // 2. 参数和返回值
        function add(a, b) {
            return a + b;
        }

        var sum = add(3, 5);
        console.log(sum); // 输出: 8

        // 3. 默认参数
        function greetWithDefault(name = "Guest") {
            return "Hello, " + name + "!";
        }

        console.log(greetWithDefault()); // 输出: Hello, Guest!

        // 4. 匿名函数
        var multiply = function (a, b) {
            return a * b;
        };

        console.log(multiply(2, 3)); // 输出: 6

        // 5. 箭头函数
        const square = (x) => x * x;
        console.log(square(4)); // 输出: 16

        // 6. 闭包
        function outerFunction() {
            var outerVariable = "I am outer!";

            function innerFunction() {
                console.log(outerVariable);
            }

            return innerFunction;
        }

        var closure = outerFunction();
        closure(); // 输出: I am outer!
    </script>
</body>

</html>

image-20231215140606792

windows对象

属性

Window 对象表示浏览器中打开的窗口

windows对象属性描述
document每个载入浏览器的 HTML 文档都会成为 Document 对象
innerheight返回窗口的文档显示区的高度
innerwidth返回窗口的文档显示区的宽度
locationLocation 对象包含有关当前 URL 的信息
NavigatorNavigator 对象包含有关浏览器的信息
ScreenScreen 对象包含有关客户端显示屏幕的信息
historyHistory 对象包含用户（在浏览器窗口中）访问过的 URL
windowwindow 包含对窗口自身的引用 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Functions Example</title>
</head>
<button type="button" onclick="location.reload()">刷新当前页面</button>
<button type="button" onclick="location.href=location.href">重新请求当前页面</button>
<button type="button" onclick="location.href='http://www.baidu.com'">请求别的页面</button>

<body>

</body>

</html>

image-20231215143158762

可以自行实验下，点击请求别的页面，就跳到baidu了

方法

windows对象方法描述
alert()显示带有一段消息和一个确认按钮的警告框
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval()取消由 setInterval() 设置的 timeout
setTimeout()在指定的毫秒数后调用函数或计算表达式。（类似于休眠）
clearTimeout()取消由 setTimeout() 方法设置的 timeout
typeof()查看数据类型

举例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Functions Example</title>
</head>

<body>
    <p style="color: red;" id="dt"></p>
    <button type="button" onclick="start()">开始刷新</button>
    <button type="button" onclick="stop()">关闭函数</button>
    <script type="text/JavaScript">
        var interval; // 声明一个全局变量用于存储定时器

        function refresh() {
            var x = document.getElementById("dt");
            var y = document
            x.innerHTML = new Date();
        }

        function start() {
            interval = setInterval(refresh, 1000);
        }

        function stop() {
            console.log(interval);
            clearInterval(interval);
        }
    </script>
</body>

</html>

image-20231215144424942

XMYX-0
关注
  • 18
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端开发基础（3）—JavaScript
2301_77162163的博客
06-12 1390
1.什么是JavaScriptJavaScript是一种广泛用于Web开发的编程语言，它可以实现动态网页效果、交互式用户界面和数据验证等功能。JavaScript是一种解释型语言，不需要编译器，而是由浏览器直接解释执行。JavaScript最初由Netscape公司的Brendan Eich于1995年创建，当时它被称为LiveScript。后来，它被重命名为JavaScript，并在1996年被提交给ECMA（欧洲计算机制造商协会）进行标准化。
前端开发——Javascript知识（介绍）
qq_64552181的博客
03-29 1409
JavaScript的基础知识、直接写在html或者写在js文件中、注释、直接量
《JavaScript前端开发案例教程》------第3章数组课后练习
homoiotheymy的博客
07-14 4433
一、填空题 1. 34 2. -1 二、判断题 1. 对。 2. 错。 3. 对。 三、选择题 1. D 2. C 3. C 四、编程题 1. <script> // 创建数组 var arr = [1,2,3,4,2,5,6,2,7,2]; // index表示新数组newarr的下标，默认为0 var index = 0,newarr = []; // 遍历数组 for(var i in arr){ // 数组元素不全等于2,则将其保存到newarr中 if(arr[
Web前端基础——Javascript(JS)
weixin_40013461的博客
09-06 1342
针对JavaScript简单做了解，熟悉基础使用方式。
前端之JavaScript
qq_774952435的博客
05-08 3367
JS基本用法
Web前端开发笔记——第一章 Web前端概论
小宇y的博客
08-17 1200
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门： HTML 定义了网页的内容 CSS 描述了网页的布局 JavaScript 控制了网页的行为
第一章，Web前端设计基础
m0_62460019的博客
06-16 1287
了解是我们学习很多课程非常重要的方法。Web应用项目本身是一种软件系统，它也是具有自身结构的，即系统体系结构。有一门课程《软件体系结构》会专门研究这个问题。系统体系结构是一个综合各种观点的模型，用来完整描述整个系统，通过系统体系结构就能够了解一个软件系统的基本架构。常见的系统体系结构有C/S结构和B/S结构。首先，了解一下C/S的工作流程，Server端存储了各种资源，我们在Client端通过网络发送资源请求，接收并显示Server端响应的内容。
前端之JavaScript第一步
weixin_46372074的博客
03-15 1865
前端之JavaScript第一步JavaScript是什么promptJavaScript可以做什么API浏览器 API第三方 API ----------------------------------------------------------------------------------------------------牢记初心，砥砺前行 JavaScript是什么 HTML是一种标记语言，用来结构化我们的网页内容; CSS 是一种样式规则语; JavaScript 是一种脚本，一门编程语言，
第五次网页前端培训笔记（javascript基础内容）
qq_66148728的博客
02-09 319
一、JavaScript主要内容 二、 JavaScript简介内容
Web前端开发基础：使用JavaScript进行客户端数据验证.ppt
06-06
顺序结构的应用 分支结构的应用 循环结构的应用 常用系统 函数的应用 自定义函数的应用 综合应用 顺序结构是程序设计中最常用的一种程序结构，是按照语句出现的顺序，从第一条语句开始一步一步逐条执行，直至最后一...
JavaScript前端开发案例教程-PPT(3).rar
04-29
《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程，涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。
Web前端框架应用：第3章 Vue开发基础-组件进阶.pptx
06-06
第3章 Vue开发基础（下） 全局API 全局配置 实例属性 组件进阶 学习目标 目录 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 实例属性 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 组件进阶 知识架构 ...
Web前端框架应用：第3章 Vue开发基础-API.pptx
06-06
第3章 Vue开发基础（下）;学习目标;目录;知识架构;知识架构;知识架构;知识架构;知识架构;Vue.directive：用来注册自定义指令，对低级DOM元素进行访问，为DOM元素添加新的特性。;案例展示：自定义注册指令v-focus。;...
Web前端框架应用：第3章 Vue开发基础-全局配置.pptx
06-06
第3章 Vue开发基础（下） 全局API 全局配置 实例属性 组件进阶 学习目标 目录 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 实例属性 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 组件进阶 知识架构 ...
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 371
注释很详细，直接上代码……
bpmn-js推荐几款常用的插件
飞云先生
04-30 157
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
遍历JavaScript对象（字典）
weixin_45596561的博客
05-01 352
遍历JavaScript对象（字典）是编程中常见的需求。for...in循环提供了最直接的方式，但在某些情况下可能需要额外的检查。与forEach结合使用提供了另一种遍历方式，特别是在您使用现代JavaScript版本时。根据您的具体需求和偏好，可以选择最适合您的遍历方法。
表格隔行变色
weixin_54339833的博客
05-02 410
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
javascript前端开发程序设计教程(微课版
09-14
4. AJAX与API调用：介绍如何使用JavaScript中的AJAX技术与后台服务器进行数据交互，并探讨如何调用第三方API来获取数据，以实现更丰富的功能和交互效果。 5. 响应式设计与移动端适配：教授如何使用JavaScript和CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

XMYX-0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值