[笔记]前端初了解

喜欢ヅ旅行 2023-09-28 11:07 122阅读 0赞

#### W3C标准：网页主要由三部分组成 ####

*  结构：**HTML**
 *  表现：**CSS**
 *  行为：**JavaScript**

> **JavaScript心得**

JavaScript和Java是完全不同的语言，无论是概念还是设计，但是基础语法类似。

JavaScript是一种脚本语言，用来控制网页行为，它能使得网页可交互，无需编译，浏览器可以直接通过源代码解析并运行

JavaScript能改变HTML页面内容

![378c180d36ad4f91a9b7a0b4ee57b4f4.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
        <script>
            alert("hello JS~");//警告框
    
        </script>
    <body>
    
    
    </body>
    </html>

![6d17cead30694e48b5d95205d0a39f2b.png][]

在HTML文档可以放置任意位置和数量的<script>

一般把脚本设置于<body>元素的底部，可以改善显示速度，脚本的执行会拖慢显示速度

> **JavaScript的基础语法**

**输出语句**

![f3d74a5c6fd24c9d8670f34a768cde46.png][]

**变量**

JavaScript是弱类型语言，变量可以存放不同类型的值

使用 var 关键字来声明变量（variable），此时变量为全局变量且允许重复定义

![a3a031942e5f42469057b2ba6e67dae2.png][]

![9711edf5ec7c4354a4566dd71f14f636.png][]

![3dfbb67c7be14f72b3d6a7881868a9dd.png][]

**运算符**

大致与Java用法一致

但存在一个特殊的运算符“===”（全等于）

==：

1.  判断类型是否一样，如果不一样，则进行类型转换
2.  再去比较其值

===：

1.  判断类型是否一样，如果不一样，直接返回false
2.  再去比较其值

**流程控制语句**

![e363dfb8fdb04545961fa7c9ed4bdcfb.png][]

大致与Java用法一致

**函数**

JavaScript函数通过“function”关键字定义

function functionName (a,b) {
    return a + b ; //形参和返回值都不需要定义数据类型
    }

**对象**

**Array**相当于Java中集合，变长变类型

**String**对象

字符串变量可以用双引号或者单引号包裹

特殊方法：trim()

可以去除字符串前后的空白字符（常用）

自定义对象

![87d7be30f71f4c9f9aea488f43008850.png][]

BOM对象

浏览器对象模型

![c289449e69dc4d56a7e7cb7458c9abac.png][]

DOM对象

文档对象模型

![54cb9267f3344cddaecf1678e7407f1d.png][]

**事件监听**

![39dbb091f863479aaa62fe0c93756683.png][]

**正则表达式**

大致与Java的方法相同，区别是以'^'开始，'$'结束

JavaScript中的正则表达式有test()方法判断所传入字符串是否满足正则表达式

![f45584d5b03a4e85be2b5111f8ccb73e.png][]

学习来源：[w3school 在线教程][w3school]

[378c180d36ad4f91a9b7a0b4ee57b4f4.png]: https://img-blog.csdnimg.cn/378c180d36ad4f91a9b7a0b4ee57b4f4.png
[6d17cead30694e48b5d95205d0a39f2b.png]: https://img-blog.csdnimg.cn/6d17cead30694e48b5d95205d0a39f2b.png
[f3d74a5c6fd24c9d8670f34a768cde46.png]: https://img-blog.csdnimg.cn/f3d74a5c6fd24c9d8670f34a768cde46.png
[a3a031942e5f42469057b2ba6e67dae2.png]: https://img-blog.csdnimg.cn/a3a031942e5f42469057b2ba6e67dae2.png
[9711edf5ec7c4354a4566dd71f14f636.png]: https://img-blog.csdnimg.cn/9711edf5ec7c4354a4566dd71f14f636.png
[3dfbb67c7be14f72b3d6a7881868a9dd.png]: https://img-blog.csdnimg.cn/3dfbb67c7be14f72b3d6a7881868a9dd.png
[e363dfb8fdb04545961fa7c9ed4bdcfb.png]: https://img-blog.csdnimg.cn/e363dfb8fdb04545961fa7c9ed4bdcfb.png
[87d7be30f71f4c9f9aea488f43008850.png]: https://img-blog.csdnimg.cn/87d7be30f71f4c9f9aea488f43008850.png
[c289449e69dc4d56a7e7cb7458c9abac.png]: https://img-blog.csdnimg.cn/c289449e69dc4d56a7e7cb7458c9abac.png
[54cb9267f3344cddaecf1678e7407f1d.png]: https://img-blog.csdnimg.cn/54cb9267f3344cddaecf1678e7407f1d.png
[39dbb091f863479aaa62fe0c93756683.png]: https://img-blog.csdnimg.cn/39dbb091f863479aaa62fe0c93756683.png
[f45584d5b03a4e85be2b5111f8ccb73e.png]: https://img-blog.csdnimg.cn/f45584d5b03a4e85be2b5111f8ccb73e.png
[w3school]: https://www.w3school.com.cn/