Web前端（JS）

Best丶飞

已于 2024-04-08 15:33:47 修改

阅读量555

点赞数 17

文章标签：前端 javascript 开发语言

于 2024-04-02 15:59:14 首次发布

本文链接：https://blog.csdn.net/m0_75186037/article/details/137271603

版权

1.JavaScript简介及其导入方式

什么是JavaScript？JavaScript简称JS。

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

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

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

JavaScript的作用

JavaScript在前端开发中扮演着重要的角色，其应用领域包括但不限于：

客户端脚本：用于在用户浏览器中执行，实现动态效果和用户交互。

网页开发：与HTML和CSS协同工作，使得网页具有更强的交互性和动态性。

后端开发：使用Node.js，JavaScript也可以在服务器端运行，实现服务器端应用的开发。

<!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>
    <!-- 1.内联式 -->
    <h1>JavaScrip的导入方式</h1>
    <script>
        console.log('Hello,body标签的内联样式');
        alert('你好，内联样式弹窗');
    </script>
    <!-- 2.外部引入：把JS代码保存在单独的外部文件中，通过script标签的src属性引入 -->
</body>
</html>

单独的外部文件：

console.log('Hello,外联样式');

在浏览器中使用F12调出。

2. JavaScript基本语法

有其他语言基础，语法基本一致。

<!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;
        // #var声明的变量是具有函数作用域  undefined表示一个变量已被声明，但尚未被赋值，或者是一个对象属性不存在，当函数没有返回值的时候，默认返回的也是undefined
        // undefined表示变量可能将来被赋值或者表示某个值还未被算出，而null明确表示没有对象值
        // #let声明的变量是具有块级作用域，更安全更灵活
        // #const常量
        console.log(x,y,PI);

        let name='如花';
        console.log(name);

        let empty_value=null;
        console.log(empty_value);
        // null表示一个变量被明确赋值为空或者不存在了，它是一个被赋予的值，表示一个空对象引用或者没有对象值
    

        // JS控制语句
        let age = 17;

        if (age >18){
            console.log('你已经成年了');
        } else{
            console.log('未成年');
        }


        // let time = 20;
        // if(time<12){
        //     alert('上午好');
        // }else if(time<18){
        //     alert('下午好');
        // }else{
        //     alert('晚上好');
        // }
        // 条件语句

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

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

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

3. JavaScript函数

“函数”是一段可重复使用的代码块，它接受输入（参数）、执行特定任务，并返回输出。

例：

<!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);
        console.log(hello_with_return());

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

        hello_with_params('如花')
        hello_with_params('Alice')

        // 作用域

        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>

受作用域限制，不可以全局打印局部变量

4. JavaScript事件

事件是文档或浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载等。通过事件可以让HTML/CSS/JS建立起来关系。常见的事件如下：

<!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>
    <button onclick="click_event()">这是一个点击事件按钮</button>
    <input type="text" onfocus="focus_event()" onblur="blur_event()">


    <script>
        // 点击事件
        function click_event(){
            alert('点击事件触发了');
        }

        // 聚焦事件
        function focus_event(){
            console.log('获取焦点');
        }

        // 失去焦点事件
        function blur_event(){
            console.log('失去焦点');
        }
    </script>
</body>
</html>

5. JavaScript DOM

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

每个HTML或XML文档都可以被视为一个文档树，文档树是整个文档的层次结构表示。

文档节点是整个文档树的根节点。

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

<!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];// ('box2')返回的是一个数组 
        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>';//innerText会忽略掉HTML标记，把修改后的内容当成纯文本处理，不会解析；而innerHTML会解析HTML标记，把修改后的内容当成HTML代码处理。


        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',click_event);

        function click_event(){
            alert('通过addEventListener触发按键');
        }
        
    </script>
</body>
</html>

innerText会忽略掉HTML标记，把修改后的内容当成纯文本处理，不会解析；

而innerHTML会解析HTML标记，把修改后的内容当成HTML代码处理。

Best丶飞

关注

17
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Web前端（JS）

什么是JavaScript？JavaScript简称JS。JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。作为一种客户端脚本语言，JavaScript可以直接嵌入HTML，并在浏览器中执行。与HTML和CSS不同，JavaScript使得网页不再是静态的，而是可以根据用户的操作动态变化的。JavaScript在前端开发中扮演着重要的角色，其应用领域包括但不限于：客户端脚本：用于在用户浏览器中执行，实现动态效果和用户交互。
复制链接

扫一扫