JavaScript 基础知识-优快云博客

本文链接：https://blog.youkuaiyun.com/rebirth557/article/details/145215722

介绍

JavaScrit是一种轻量级 \ 解释性 \ 面向对象的脚本语言.它主要被设计用于网页上上实现动态效果,增加用户与网页的交互性.

作为一种客户端脚本语言,JavaScript可以直接嵌入HTML,并在浏览器中执行.

与HTML和CSS不同,JavaScript使得网页不再是静态的,而是可以根据用户的操作动态改变的.

JavaScript的作用:

JavaScript在前端开发中扮演着重要的角色,其应用领域包括但不限于以下三种:

客户端脚本 : 用于在用户浏览器中执行,实现动态效果和用于交互.
网页开发 : 与HTML和CSS协同工作,使得网页具有更强的交互性和动态性
后端开发 : 使用Node.js , JavaScript也可以在服务器段运行,实现服务器端应用的开发

JavaScript的导入方式

在网页开发中，JavaScript 可以通过多种方式导入到 HTML 文档中。以下是几种常见的 JavaScript 导入方式：

内联方式（Inline）：在 HTML 文件中直接嵌入 JavaScript 代码，放置在 <script> 标签内，通常位于文档的 <head> 或 <body> 部分
外部引入方式（External）：将 JavaScript 代码保存在独立的外部文件中，通过 <script> 标签的 src 属性引入。

导入使用示例:

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS导入方式 学习</title>
    <script>
      console.log("Hello,head标签的内联样式")
    </script>

    <script src="./js/myscript.js"></script>
 </head>
 <body>
    <h1>JavaScript 的导入方式</h1>
    <script>
      console.log("Hello,body标签的内联样式")
      alert("你好,内联样式弹窗");
    </script>
 </body>
 </html>

JS 基本语法

(1)变量

在 JavaScript 中，使用 var、let 或 const 这三个关键字声明变量：

var x; // 声明一个变量x
let y = 5; // 声明一个变量y并初始化为5
const PI = 3.14; // 声明一个常量PI，并初始化为3.14

(2)数据类型

JavaScript 有一些基本的数据类型：

字符串（String）：用于表示文本。
数字（Number）：用于表示数值。
布尔值（Boolean）：用于表示真（true）或假（false）。
未定义（Undefined）：表示变量声明但未初始化。
空值（Null）：表示空或无值。

var greeting = "Hello, World!";
var age = 25;
var logic = true;
var z;
var empty_value = null;

(3)条件语句

条件语句是编程中常用的结构，用于基于不同的条件执行不同的代码块。在 JavaScript 中，条件语句主要包括 if、else if 和 else。下面详细讲解条件语句的使用：

if 语句：用于执行一个代码块，当指定的条件为真（true）时执行。语法如下:

if (condition) {
    // 如果条件为真，执行这里的代码
}

// 示例
// 这个例子中，如果 age 大于或等于 18，就会输出 "你已经成年了。"。
var age = 18;

if (age >= 18) {
    console.log("你已经成年了。");
}

else 语句：用于在上一个 if 和所有的 else if 都为假时执行的代码块。语法如下：

if (condition) {
    // 如果条件为真，执行这里的代码
} else {
    // 如果条件为假，执行这里的代码
}


// 示例
// 在这个例子中，如果 is_raining 为真，输出 "记得带伞！"，否则输出 "天气不错，无需带伞。"。

var is_raining = true;

if (is_raining) {
    console.log("记得带伞！");
} else {
    console.log("天气不错，无需带伞。");
}

else if 语句：用于在上一个 if 语句条件为假时，检查另一个条件。可以有多个 else if 语句。语法如下：

if (condition1) {
    // 如果条件1为真，执行这里的代码
} else if (condition2) {
    // 如果条件2为真，执行这里的代码
} else {
    // 如果以上条件都为假，执行这里的代码
}

// 示例
// 在这个例子中，根据不同的时间，会输出不同的问候语。

var time = 14;

if (time < 12) {
    console.log("上午好！");
} else if (time < 18) {
    console.log("下午好！");
} else {
    console.log("晚上好！");
}

(4)循环语句

循环语句用于重复执行一段代码，直到指定的条件不再满足为止。在 JavaScript 中，常见的循环语句有 for 循环、while 循环和 do...while 循环。下面详细讲解这些循环语句的使用：

for 循环：是一种常见的循环结构，用于按照指定的条件重复执行代码块。语法如下：

for (初始化表达式; 循环条件; 迭代器) {
    // 循环体，执行这里的代码
}

// 示例
// 在这个例子中，var i = 0 是初始化表达式，
// i < 5 是循环条件，i++ 是迭代器。循环体中的代码会被执行5次，输出0到4。
for (var i = 0; i < 5; i++) {
    console.log(i); // 输出 0 到 4
}

while 循环会在指定的条件为真时执行代码块。语法如下：

while (循环条件) {
    // 循环体，执行这里的代码
}

// 示例
// 在这个例子中，i < 5 是循环条件，
// 循环体中的代码会在每次循环时执行，输出0到4。
var i = 0;

while (i < 5) {
    console.log(i); // 输出 0 到 4
    i++;
}

do...while 循环会先执行一次代码块，然后检查指定的条件是否为真，如果为真，则重复执行。语法如下：

do {
    // 循环体，执行这里的代码
} while (循环条件);


// 示例
// 在这个例子中，循环体中的代码会至少执行一次，
// 然后在每次循环时检查条件是否为真，如果为真，则继续执行。
var i = 0;

do {
    console.log(i); // 输出 0 到 4
    i++;
} while (i < 5);

在循环中，可以使用 break 和 continue 来控制循环的流程：

break 用于跳出循环，结束循环的执行。
continue 用于跳过当前循环中的剩余代码，继续下一次循环。

for (var i = 0; i < 5; i++) {
    if (i === 2) {
        continue; // 跳过 i 等于 2 的情况
    }
    if (i === 4) {
        break; // 结束循环，跳出循环体
    }
    console.log(i);
}

上述基本语法使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 基本语法 练习</title>
</head>
<body>
    <script>
        var x;
        let y = 5;
        const PI = 3.14;
        console.log(x,y,PI);
        let text = '坤年';
        console.log(text);
        let empty_value = null;
        console.log(empty_value);
        
        let age = 18;
        if(age > 18) {
            console.log('你已经成年了');
        } else {
            console.log('未成年');
        }

        // let time = 12;
        // if(time < 12) {
        //     alert('good morning');
        // } else if(time < 18) {
        //     alert('good afternoon');
        // } else {
        //     alert('good evening');
        // }

        console.log('for 循环');
        for (let i = 0;i < 10;i++) {
            console.log(i+1);
            
        }
        console.log('while 循环');
        
        let count = 1;
        while(count <= 10) {
            console.log(count);
            count++;
        }

        console.log('循环关键字');
        for (var i = 0;i < 5;i++) {
            if (i == 2) {
                continue;
            }
            if (i == 4) {
                break;
            }
            console.log(i);
        }
    </script>
</body>
</html>

(5)函数

函数是一段可重复使用的代码块，它接受输入（参数）、执行特定任务，并返回输出。在 JavaScript 中，函数是一等公民，可以被赋值给变量，作为参数传递给其他函数，也可以作为其他函数的返回值。

使用 function 关键字声明一个函数，语法如下:

function function_name(参数) { // 参数可以不写，表示不传参
    // 函数体，执行这里的代码
    return 返回值; // 可选，返回值
}

// 示例
function greet() {
    console.log("Hello, world!");
}

// 有返回值的函数
function greet_with_return() {
    return "Hello, world!";
}

通过函数名和括号调用函数，将参数传递给函数：

greet();

var a = greet_with_return()
console.log(a);

函数可以接受零个或多个参数，参数是函数在执行时的输入。参数由逗号分隔，定义在函数声明中。示例：

function greet(name) {
    return "Hello, " + name + "!";
}

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

匿名函数 是没有函数名的函数，通常用于作为函数表达式，或在函数内定义一个函数。示例：

var square = function (x) {
    return x * x;
};

JavaScript 中的作用域分为 全局作用域 和 局部作用域。在函数内部声明的变量具有函数作用域，而在函数外部声明的变量具有全局作用域。

var globalVar = "I am global";

function example() {
    var localVar = "I am local";
    console.log(globalVar); // 可访问全局变量
    console.log(localVar); // 可访问局部变量
}

example();
console.log(globalVar); // 输出：I am global
console.log(localVar); // 报错，局部变量不可在函数外部访问

闭包是指一个函数能够访问并记住其词法作用域，即使该函数在当前词法作用域之外执行。

闭包使得函数可以保持对其创建时的作用域的引用。示例：

function outer() {
    var outerVar = "I am outer";

    function inner() {
        console.log(outerVar); // 访问了外部函数的变量
    }

    return inner;
}

var closureFunc = outer();
closureFunc(); // 输出：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>JS 函数 练习</title>
</head>
<body>
    <script>
        function hello() {
            console.log('hello,world');
        }
        hello();

        function hello_with_return() {
            return 'hello,world - 返回值'
        }
        let a = hello_with_return();
        console.log(a);

        function hello_with_params(name) {
            console.log('hello,' + name);
        }
        hello_with_params('xb')

        //作用域
        let global_var = '全局变量';
        function local_var_function() {
            let local_var = '局部变量';
            console.log('函数内打印全局变量: ' + global_var);
            console.log('函数内打印局部变量: ' + local_var);
        }
        local_var_function();
        console.log('全局打印全局变量: ' + global_var);
        //console.log('全局打印局部变量: ' + local_var);
    </script>
</body>
</html>

事件

JavaScript 中的事件处理是前端开发中至关重要的一部分，它允许你对用户的交互做出响应，例如点击、鼠标移动、键盘输入等。

事件是文档或浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载等。常见的事件如下:

事件	描述
onClick	点击事件
onMouseOver	鼠标经过
onMouseOver	鼠标移出
onChange	文本内容改变事件
onSelect	文本框选中
onFocus	光标聚集
onBlur	移开光标
onLoad	网页加载
onUnload	关闭网页

事件处理程序是与特定事件相关联的函数。

当事件发生时，关联的事件处理程序将被调用。

事件绑定使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理 练习</title>
</head>
<body>
    <button οnclick="click_event()">这是一个点击事件按钮</button>
    <input type="text" οnfοcus="focus_event()" οnblur="blur_event()">
    <script>
        // 点击事件
        function click_event () {
            alert('点击事件触发了!');
        }
        // 聚焦事件
        function focus_event () {
            console.log('获取焦点');
        }
        // 失去焦点事件
        function blur_event () {
            console.log('失去焦点');
        }
    </script>
</body>
</html>

JavaScript中绑定事件的方法有三种:

HTML 属性：

<button οnclick="myFunction()">Click me</button>

DOM 属性：

var button = document.getElementById('myButton');
button.onclick = function () {
    alert('Button clicked!');
};

addEventListener 方法：

var button = document.getElementById('myButton');
button.addEventListener('click', function () {
    alert('Button clicked!');
});

DOM操作

JavaScript 中的 DOM（文档对象模型），它操作允许开发者通过 JavaScript 与 HTML 文档交互，动态地改变文档的结构、样式和内容。

当网页被加载时，浏览器会创建页面的文档对象模型，也就是 DOM（Document Object Model）。

如果你不理解什么是对象也没关系，你只需要知道对象的作用就是让函数和变量之前建立关系，对象中的属性就是变量，方法就是函数。与普通的变量、函数相比，区别就是在调用的使用前面需要加对象名.

在 Web 开发中，DOM 通常与 JavaScript 一起使用。

每个 HTML 或 XML 文档都可以被视为一个文档树，文档树是整个文档的层次结构表示。每个节点都有父节点、子节点和同级节点。

文档节点是整个文档树的根节点，而其他节点则分布在树的不同层次上。

DOM 为这个文档树提供了一个编程接口，开发者可以使用 JavaScript 来操作这个树状结构.

DOM 中的一切都是节点。文档本身是一个文档节点，而文档中的元素、属性和文本都是不同类型的节点。主要的节点类型包括：

元素节点（Element Nodes）：表示 HTML 或 XML 文档中的元素，如 <div>、<p> 等。

属性节点（Attribute Nodes）：表示元素的属性，如 class、id 等。

文本节点（Text Nodes）：表示元素的文本内容。

想要在 JavaScript 中获取 HTML、CSS 节点，也就是元素，就需要使用一些 DOM API 提供的方法来获取文档中的元素。

常见的方法包括：

getElementById：通过元素的 ID 获取元素。

var element = document.getElementById('myElement');

getElementsByClassName：通过类名获取元素。

var elements = document.getElementsByClassName('myClass');

getElementsByTagName：通过标签名获取元素。

var paragraphs = document.getElementsByTag

一旦获取了元素，你就可以通过 DOM 提供的方法来操作它。

例如，你可以改变元素的样式、修改其文本内容、添加或删除子元素等。

// 修改元素文本内容
element.innerHTML = '新的文本内容';

// 添加新的子元素
var newElement = document.createElement('div');
element.appendChild(newElement);

// 移除子元素
var childElement = element.firstChild;
element.removeChild(childElement);

常用的DOM对象方法:

方法	描述
getElementById()	返回带有指定ID的元素
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)
getElementByClassName()	返回包含带有指定类名的所有元素的节点列表
appendChild()	把新的子节点日俺家到指定节点
removeChild()	删除子节点
replaceChild()	替换子节点
insertBefore()	在指定的子节点前面插入新的子节点
createAttribute()	创建属性节点
createElement()	创建元素节点
createTextNode()	创建文本节点
getAttribute()	返回指定的属性值
setAttribute()	把指定属性设置或修改为指定的值

通过 DOM 修改元素的样式，例如改变颜色、大小等,如:

// 修改元素样式
element.style.color = 'red';
element.style.fontSize = '20px';

通过 DOM，你可以监听和响应用户的交互事件，例如点击、输入等。这使得你能够创建交互性更强的页面。

// 监听点击事件
element.addEventListener('click', function () {
    console.log('元素被点击了！');
});

JS DOM 基础内容的使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS DOM 练习</title>
</head>
<body>
    <div id="box1">这是一个ID选择器标签</div>
    <div class="box2">这是一个类选择器标签</div>
    <div>普通的div标签</div>
    <button>点击按钮</button>
    <script>
        var element_id = document.getElementById('box1');
        console.log(element_id);

        var element_class = document.getElementsByClassName('box2')[0];
        console.log(element_class);
        var element_tag = document.getElementsByTagName('div')[2   ];
        console.log(element_tag);

        element_id.innerHTML = '<a href="#">跳转链接</a>';//返回纯文本并能解析文本中的语义
        element_class.innerText = '<a href="#">跳转链接</a>';//返回纯文本但不能解析文本内容
        
        element_tag.style.color = 'red';
        element_tag.style.fontSize = '20px';

        //DOM属性绑定事件
        var button_element = document.getElementsByTagName('button')[0];
        console.log(button_element);
        // button_element.onclick = function() {
        //     alert('DOM 属性 按键触发');
        // }
        button_element.addEventListener('click', function() {
            alert('通过addEventListener 触发按键');
        })
    </script>
</body>
</html>

表格增删查改操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的增删查改</title>

    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,td {
            border: 1px solid #ddd;
            border-collapse:collapse;
            text-align: center;
            padding: 8px;
        }
        th {
            background-color: #ddd;
        }
        button {
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">表格的增删改查</h1>
    <button οnclick="addRow()">新增数据</button>
    <table id="table">
        <tr>
            <th>姓名</th>
            <th>联系方式</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>蕉太狼</td>
            <td>12345</td>
            <td>
                <button οnclick="editRow(this)">编辑</button><button οnclick="deleteRow(this)">删除</button>
            </td>
        </tr>
    </table>
    <script src="./js/table.js">

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

table.js文件内容:

//新增数据函数
function addRow() {
    var table = document.getElementById('table');
    //console.log(table);
    //获取插入的位置
    var length = table.rows.length;
    //插入行节点
    var newRow = table.insertRow(length);
    //插入列节点对象
    var nameCol = newRow.insertCell(0);
    var phoneCol = newRow.insertCell(1);
    var actionCol = newRow.insertCell(2);

    //修改节点文本内容
    nameCol.innerHTML = '未命名';
    phoneCol.innerHTML = '无联系方式';
    actionCol.innerHTML = '<button οnclick="editRow(this)">编辑</button><button οnclick="deleteRow(this)">删除</button>';
}

//删除数据函数
function deleteRow(button) {
    var row = button.parentNode.parentNode;
    row.parentNode.removeChild(row);
}

//编辑数据函数
function editRow(button) {
    var row = button.parentNode.parentNode;
    var name = row.cells[0];
    var phone = row.cells[1];

    var inputName = prompt("请输入名字:");
    var inputPhone = prompt("请输入联系方式:");
    
    name.innerHTML = inputName;
    phone.innerHTML = inputPhone;
}