Web前端 - JavaScript - 基础知识

一、组成

核心语法
DOM：文档对象模型，包括操作HTML和XML节点的API
BOM：浏览器对象模型，操作窗口对象

二、部分语法

1. 注释

单行注释：//
多行注释：/**/

2. js文件加载

加载本地js脚本：在<script>标签中编辑

<!DOCTYPE html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write('<h1>Hello</h1>');
    </script>
</body>
</html>

延迟加载外部js脚本：等到页面解析完才执行，<script>标签的src和defer属性

<!DOCTYPE html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="test.js" defer></script>
    <h1>你好小明</h1>
    <p id="p"></p>
</body>
</html>

document.getElementById('p').innerHTML = 'Hello';

异步加载外部js脚本：同步进行，<script>标签的src和async属性

<!DOCTYPE html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="test.js" async></script>
    <h1>你好小明</h1>
</body>
</html>

window.alert('hello');

3. 函数

函数区分大小写

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

4. 变量

允许重复声明

<!DOCTYPE html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var name = '小明';
        var name = '小红';
        console.log(name);
    </script>
</body>
</html>

允许在函数中直接使用外部变量

<!DOCTYPE html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var name = '小明';
        function sayName() {
            console.log('我的名字叫' + name);
        }
        sayName();
    </script>
</body>
</html>

ES6支持块作用域

<!DOCTYPE html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        {let name = '小红';}
        console.log(name);
        var age =18;
        console.log(age);
    </script>
</body>
</html>

5. 字符串

字符串拼接

<!DOCTYPE html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var name = '小明';
        function sayName() {
            console.log('我的名字叫' + name);
        }
        sayName();
    </script>
</body>
</html>

三、课程总结

今天学习了 JavaScript 的基础，通过上课认真听讲和认真完成老师布置的作业，使得我对 JavaScript 的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了JS和PHP的区别以及JS的基本语法。

Web前端 - JavaScript - 基础知识

Web前端 - JavaScript - 基础知识

一、组成

二、部分语法

1. 注释

2. js文件加载

3. 函数

4. 变量

5. 字符串

三、课程总结

相关文章