JavaScript入门知识点简单总结-CSDN博客

本文链接：https://blog.csdn.net/m0_74484441/article/details/137518329

学习来源：B站up主罗大富Bigrich

相关视频：【3小时前端入门教程（HTML+CSS+JS）】

网址： https://www.bilibili.com/video/BV1BT4y1W7Aw/?share_source=copy_web&vd_source=9efdad29078e1a84ebec03582c7d2b9f

学习成果：

JS学习记录：

1.什么是JavaScript

JavaScript是一种轻量级，解释型，面向对象的脚本语言。

主要用于在网页上实现动态效果，增加用户与网页的交互性。

JS使得网页不再是静态的，可以根据用户的操作动态变化的。

2.JavaScript的作用

3.JS导入方式

1.在<head></head>中，或在<body></body>中创建<script></script>标签

2.外联样式，导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log('Hello,head的内联样式')
    </script>
    <script src="./JS/js外联样式.js"></script>
</head>
<body>
    <script>
        console.log('Hello,body的内联样式')
        alert("你好，内联样式弹窗")
    </script>
</body>
</html>

4.JS变量与数据类型

const 常量

var 变量，具有函数作用域，避免使用

let 变量，具有块级作用域，更安全灵活

var x;

let y=5;

const PI=3.14;

null和undefined不一样

undefined 变量已经被声明，但尚未赋值，或者一个对象属性不存在

null 变量被赋予为空

条件语句

循环语句

5.函数

function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function hello(){
            console.log('你好啊');
        }
        hello();

        function hello_back(){
            return "今晚一起去跑步吧"
        }
        let a=hello_back();
        console.log(a);
        console.log(hello_back());

        function hello_params(name){
            console.log('谁要去跑步：'+name)
        }
        hello_params("小明")
    </script>
</body>
</html>

作用域

6.JS事件处理

事件是文档或浏览器窗口中发生的特定瞬间，例如用户的电机，键盘的按下，页面的加载等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>

7.DOM

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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');
        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>';

        //DOM属性绑定事件
        var button_element = document.getElementsByTagName('button')[0];
        console.log(button_element);

        button_element.onclick = function(){
            alert('DOM属性案件触发');
        }
           
    </script>
</body>
</html>

1. DOM节点数，DOM的作用就是为JS操作提供api接口（DOM中的一切都是节点）

元素节点：html head body h1 a div link title等等都是元素节点，表示HTML文档中的元素
属性节点：标签对应的属性被称为属性节点，class id name for redio等等属性
文本节点：title a h1 双标签基本都有文本节点，表示文本内容

-----------------------------------------------------------------------------------
2. 在JS中使用元素节点，需要使用DOM API提供的一些方法，来获取文档中的元素

document.getElementById()                    通过 ID 获取元素，是唯一的
document.getElementsByClassName()[0]         通过 类名 获取元素，带有s的获取到的是数组
document.getElementsByName()                 通过 标签名 获取元素
document.getElementsByTagName()              通过 ID 获取元素
document.getElementsByTagNameNS()            通过 ID 获取元素

函数获取到元素后，赋值给一个变量：
var  element_id=document.getElementById('box1');
console.log(element_id);

----------------------------------------------------------------------------------
3. 在JS中对DOM中的元素做修改，对文本修改，对样式修改

innerHTML是一个属性，返回文本，并且以HTML的语言解析文本，即超链接可以被解析
innerText是一个属性，返回纯文本，忽略HTML标记，不会解析

element_id.innerHTML="修改id选择器的的文本内容"
element_class.innerText="修改后的类选择器文本内容"

element_is.style.color="red";
element_is.style.fontsize='20px';
----------------------------------------------------------------------------------
4. DOM 属性绑定事件 对onclick属性赋值一个匿名函数

var button_element=document.getElementsByTagName('button')[0]

******4.1 属性绑定
button_element.onclick=function(){
    alert("对DOM 属性onclick 绑定一个函数 ，当onclick发生时。函数也随之发生");
}

******4.2 函数传递参数绑定（匿名函数）
button_element.addEventListener('click',function(){
    alert("通过元素节点的addEventListener函数，传递两个参数后触发第二个参数的实现");
})

******4.3 函数传递参数绑定（重命名一个函数）

button_element.addEventListener('click',click_event)
function click_event(){
    alert("通过元素节点的addEventListener函数，传递两个参数后触发第二个参数的实现");
}




方法=函数=功能