0
0

[JavaScript你真的以为这么简单吗]JavaScript高级

✅作者简介：大家好,我是Philosophy7？让我们一起共同进步吧！🏆 📃个人主页：Philosophy7的csdn博客
🔥系列专栏： 👑哲学语录: 承认自己的无知，乃是开启智慧的大门
💖如果觉得博主的文章还不错的话，请点赞👍+收藏⭐️+留言📝支持一下博>主哦🤞

⭐学习目标:
 -掌握script标签的具体用法
 -理解行内脚本与外部脚本的区别
 -理解文档模式对JavaScript的影响
 -ECMAScript的语法

文章目录

在这里插入图片描述

一、JavaScript初体验

1、script元素

在HTML中插入JavaScript，我们使用的是script标签。这个元素是被网景公司创造出来的，并最早在Netscape Navigator 2 中实现的。后来，这个元素被正式加入到 HTML 规范。script元素有下列八个属性，分别为:

  • async : 可选。表示立即下载脚本，但不阻止其他页面的效果。只对外部脚本有效
  • charset : 可选。使用src属性指定的代码字符集。不常用，因为大多数浏览器不在乎。
  • crossorigin : 配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。
  • defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
  • integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI， Subresource Integrity）。
  • language：废弃。最初用于表示代码块中的脚本语言（如"JavaScript"、“JavaScript 1.2” 或"VBScript"）。大多数浏览器都会忽略这个属性，不应该再使用它。
  • src：可选。表示包含要执行的代码的外部文件。
  • type：可选。代替 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）。按照惯 例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript" 都已经废弃了。

使用JavaScript方式有两种:

  1. HTML中直接使用
  2. 外部引入1. 使用 src 属性。这个属性的值是一个 URL，指向包含 JavaScript 代码的文件，比如：下面的例子2. 这个例子在页面中加载了demo.js注意:​ 使用了 src 属性的标签中再包含其他 JavaScript 代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。
<body><script>//内部使用scriptalert("Hello World")</script><!--2.外部引入Js文件--><script src="demo.js"/></body>

Js文件

document.write("Hello Alert")

浏览器的执行流程:

在有多个script标签时，浏览器会依照从上到下的顺序去解释并执行它们，前提是没有defer和async属性。

1.1 标签位置

我们可以看到有的script标签被放在head标签内，如下:

<!DOCTYPE html><html lang="en"xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>JS初体验</title><script src="demo.js"></script><script src="demo.js"></script></head><body><script>//内部使用scriptalert("Hello World")</script><!--2.外部引入Js文件--><script src="demo.js"/></body></html>

为什么这样做呢：

主要目的是把外部的 CSS 和 JavaScript 文件都集中放到一起。

不过，把所有 JavaScript 文件都放在里，也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲 染页面（页面在浏览器解析到的起始标签时开始渲染）。

对于需要很多 JavaScript 的页面，这会 导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。

为了解决这个问题，我们将script引用到了body标签内，这就表示浏览器在解释JS代码之前就完全渲染了整个页面。

1.2 废弃的语法

自 1995 年 Netscape 2 发布以来，所有浏览器都将 JavaScript 作为默认的编程语言。

type 属性使用 一个 MIME 类型字符串来标识

script

的内容 但 MIME 类型并没有跨浏览器标准化。

即使浏览器默 认使用 JavaScript，在某些情况下某个无效或无法识别的 MIME 类型也可能导致浏览器跳过（不执行） 相关代码。

在最初采用 script 元素时，它标志着开始走向与传统 HTML 解析不同的流程。对这个元素需要应 用特殊的解析规则，而这在不支持 JavaScript 的浏览器（特别是 Mosaic）中会导致问题。不支持的浏览器会把script元素的内容输出到页面中

Netscape 联合 Mosaic 拿出了一个解决方案，对不支持 JavaScript 的浏览器隐藏嵌入的 JavaScript 代 码。最终方案是把脚本代码包含在一个 HTML 注释中

<script>
<!--
    function sayHi(){
        document.write("Hi");
    }
-->
</script>

2.行内代码与外部文件

可以直接在 HTML 文件中嵌入 JavaScript 代码，但通常认为最佳实践是尽可能将 JavaScript 代 码放在外部文件中

使用外部文件的好处:

  • 可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存 所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑 代码。
  • 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都 用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快
  • 适应未来。通过把 JavaScript 放到外部文件中，包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。

在配置浏览器请求外部文件时，要重点考虑的一点是它们会占用多少带宽。在 SPDY/HTTP2 中， 预请求的消耗已显著降低，以轻量、独立 JavaScript 组件形式向客户端送达脚本更具优势。

3.文档模式

IE5.5 发明了文档模式的概念，即可以使用 doctype 切换文档模式。

最初的文档模式有两种：混杂 模式（quirks mode）和标准模式（standards mode）。

前者让 IE 像 IE5 一样（支持一些非标准的特性）， 后者让 IE 具有兼容标准的行为。

虽然这两种模式的主要区别只体现在通过 CSS 渲染的内容方面，但对 JavaScript 也有一些关联影响，或称为副作用。

4.小结

  • 要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同 一台服务器上，也可以位于完全不同的域
  • 所有script元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的 情况下，包含在script元素中的代码必须严格按次序解释
  • 对不推迟执行的脚本，浏览器必须解释完位于script元素中的代码,才能继续渲染页面

在这里插入图片描述

二、ECMAScript语法

1、语法

ECMAScript很大程度上借鉴了Java中的语法，熟悉Java的小伙伴应该学习起来会非常的容易，并且熟悉，

而且JavaScript是一门弱类型语言，也就意味着语法的约束倒没有那么严格，可以轻松的掌握。

1.1、区分大小写

ECMAScript 中一切都区分大小写。无论是变量、函数名还是操作符，都区分大小写。

换句话说，变量 test 和变量 Test 是两个不同的变量。类似地，typeof 不能作为函数名，因
为它是一个关键字（后面会介绍）。但 Typeof 是一个完全有效的函数名。

<script>//这是两个不同的变量名var test =1;var Test =2;</script>

1.2、标识符

所谓标识符，就是变量、函数、属性或函数参数的名称。标识符的规则:

  • 第一个字符必须是字母、下划线_ 或者美元符号($)
  • 剩下的字母可以是数字、字母、美元符号下划线

按照我们熟悉的方式，ECMAScript标识符也使用了驼峰命名的规则，即第一个单词首字母小写，后面的每个单词首字母大写。

例如:

  • firstName
  • selectStudent
  • myMoney

虽然这些不做强制要求，但是为了增加我们代码的可读性，还是建议如此的去命名。

关键字、保留字、布尔类型、null不能作为标识符

1.3、注释

ECMAScript和Java中的注释一致

<script>//这是单行注释 双斜杠/*
        这是多行注释
    */</script>

1.4、严格模式

ECMAScript 5 增加了严格模式（strict mode）的概念。严格模式是一种不同的 JavaScript 解析和执
行模型，ECMAScript 3 的一些不规范写法在这种模式下会被处理，对于不安全的活动将抛出错误。

<script>//在开头就采用严格模式"use strict"//这是两个不同的变量名var test =1;var Test =2;</script>

1.5、语句

ECMAScript 中的语句以分号结尾。

加分号也便于开发者通过删除空行来压缩代码（如果没有结尾的分号，只删除空行，则会导致语法错误）。

加分号也有助于在某些情况下提升性能，因为解析器会尝试在合适的位置补上分号以纠正语法错误。

<script>var a =10//没有分号 不报错 但不推荐var b =5;//推荐加上分号</script>

1.6、关键字与保留字

这些关键字，有着独特的作用，因此，按照规定关键字和保留字不能作为标识符或属性名。

有关键字如下:
breakdointypeofcaseelseinstanceofvarcatchexportnewvoidclassextendsreturnwhildconstfinallysuperwithcontinueforswitchyielddebuggerfunctionthisthrow

2、变量

ECMAScript 变量是松散类型的，意思是变量可以用于保存任何类型的数据。每个变量只不过是一个用于保存任意值的命名占位符。

有 3 个关键字可以声明变量：

var、const 和 let。

其中，var 在ECMAScript 的所有版本中都可以使用，而 const 和 let 只能在 ECMAScript 6 及更晚的版本中使用。

<script>//1.定义变量的语法: var 变量名 = 初始化值;var name ="张三";//注意:在我们不初始化的时候，值会显示undefined var age;alert(age)</script>

2.1、var关键字作用域

定义变量格式: var 变量名 = 初始化值

<script>//1.定义一个函数functiontest(){//在函数内部使用var修饰变量，意味着该变量会在函数退出时被销毁。var a  =10;//局部变量}test();
    consolo.log(a)//打印到控制台 报错:Uncaught ReferenceError: consolo is not defined</script>

当我们省略var关键字在函数内部定义变量，这个变量就是全局变量

去掉之前的var关键字定义变量，然后调用一次test()方法 我们就可以访问到变量a中的值了；

注意: 虽然通过省略var操作符定义全局变量，但不推荐这么操作。

因为在严格模式下，像这样没有初始化值，就会抛出异常 ReferenceError: a is not defined

<script>//严格模式"use strict"//1.变量a
 a;
console.log(a)</script>

2.2、let关键字

let 跟 var 的作用差不多，但有着非常重要的区别。最明显的区别是，let 声明的范围是块作用域， 而 var 声明的范围是函数作用域。

下面演示区别:

使用let修饰的变量age不能被if块外部访问，因为它的作用域仅限于内部。块作用域属于函数作用域的子集，因此适用于var的作用域限制同样也适用于let。

简单来说就是:

自上向下，可兼容，自下向上不可能。

<script>if(true){var name ="张三";
        document.write(name)//张三}
    document.write(name)//张三if(true){//let修饰let age =20;
        document.write(age)//20}
    document.write(age)//没有访问到age</script>

2.3、const关键字

const 的行为与 let 基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且尝试修改const 声明的变量会导致运行时

错误。

<script>const age =26;
    age =36;//TypeError//不允许重复声明const name ="s";const name ="zhangsan";// Identifier 'name' has already been declared//const作用域也是块if(true){const a =10;}
    console.log(a)//无法访问到变量a并抛出异常</script>

3、数据类型

ECMA中的数据类型有6种,分别为:

  • undefined : 值未定义的
  • Null : 表示空
  • Boolean : 布尔值，true false
  • Number : 数值
  • String : 字符串
  • Symbol : 值是符号

注意:

undefined

即使未初始化的变量会被自动赋予 undefined 值，但我们仍然建议在声明变量的 同时进行初始化。这样，当 typeof 返回"undefined"时，你就会知道那是因为给定的变 量尚未声明，而不是声明了但未初始化。

数值转换:

3 个函数可以将非数值转换为数值：

Number()、parseInt()和 parseFloat()。

后两个函数主要用于将字符串转换为数值。

  • Number()函数基于如下规则转换:
  • 布尔值 ture == 1 false == 2
  • null 返回 0
  • undifined 返回 NaN
  • 字符串的规则较多: - 如果字符串包含数值字符 包括数组前面带－号的情况，则 转换为十进制数字- 如果是空字符串 则返回 0- 如果字符串包含浮点数值 则会转换为响应的浮点数- 如果字符串是一个十六进制的格式 就会转换为十进制整数值- 如果上述情况都不存在 则返回NaN
<script>var flag =true//true == 1  false == 2
    document.write(Number(flag))var num =10;//数值直接返回
    document.write(Number(num)+"</br>")var age;//undefined 返回 NaN
    document.write(Number(age))//返回NaN</script>

<script>//1.使用typeof 检查数据类型var a ="张三";
    document.write(typeof(a))//string
    document.write(typeof30)//number//2.演示undefinedlet b;
    document.write(b +"</br>")//未声明变量的时候也会检测出undefined
    document.write(typeof num1)//3.Null 表示空对象指针var car =null;
    document.write(typeof car)//返回的是一个对象object//4.Booleanvar flag =true//5.Number -- 有趣的数据类型var num1 =10;//整数var num2 =0xA;//十六进制10/*
        存储浮点值使用的内存空间是存储整数值的两倍，
        所以 ECMAScript 总是想方设法把值转换为整数。
     */var num3 =1.1;//浮点值var num4 =.1;//有效 但不推荐/*
        值的范围:
            内存是有限制的，ECMAScript 可以表示的最小数值保存在 Number.MIN_VALUE
            最大数值 Number.MAX_VALUE
     */var result  = Number.MIN_VALUE+ Number.MAX_VALUE
    document.write(result)//1.7976931348623157e+308//NaN not a number 不是一个数字
    document.write(0/0)//如果分子或分母为0 就会返回NAN//String 字符串var name2 ="法外狂徒张三";</script>

3.1、深入字符串

字符串的特点:

​ 不可变的，一旦创建，它们的值就无法改变。要修改的话，必须销毁原来的字符串。

字符出的转换:

​ 有两种方式把一个值转换为字符串。首先是使用几乎所有值都有的 toString()方法。这个方法唯 一的用途就是返回当前值的字符串等价物。比如：

<script>var age =20;var newString = age.toString();//字符串20
    document.write(typeof(newString))//除了null 和 undefined没有tostring方法其他数据类型都有</script>

字符串的字面量

字面量含义\n换行\t制表符\b退格\r回车\f换页\\ 反斜杠’单引号

3.2、Symbol 类型(了解即可)

Symbol（符号）是 ECMAScript 6 新增的数据类型。符号是原始值，且符号实例是唯一、不可变的。

符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险。

尽管听起来跟私有属性有点类似，但符号并不是为了提供私有属性的行为才增加的（尤其是因为 Object API 提供了方法，可以更方便地发现符号属性）。

相反，符号就是用来创建唯一记号，进而用作非 字符串形式的对象属性。

3.3、Object类型

在后续的对象会有更深的讲解，在这里介绍对象的基本用法，以及定义格式

<script>//创建一个对象var student =Object();//如果没有参数的话 可以胜率括号var student = Object;</script>

每个Object实例都有如下属性和方法:

  • constructor：用于创建当前对象的函数。在前面的例子中，这个属性的值就是 Object() 函数
  • hasOwnProperty(propertyName)：用于判断当前对象实例（不是原型）上是否存在给定的属 性。要检查的属性名必须是字符串（如 o.hasOwnProperty(“name”)）或符号。
  • isPrototypeOf(object)：用于判断当前对象是否为另一个对象的原型。（后续将详细介绍 原型。）
  • propertyIsEnumerable(propertyName)：用于判断给定的属性是否可以使用（本章稍后讨 论的）for-in 语句枚举。与 hasOwnProperty()一样，属性名必须是字符串。
  • toLocaleString()：返回对象的字符串表示，该字符串反映对象所在的本地化执行环境。
  • toString()：返回对象的字符串表示。
  • valueOf()：返回对象对应的字符串、数值或布尔值表示。通常与 toString()的返回值相同。 因为在 ECMAScript 中 Object 是所有对象的基类，所以任何对象都有这些属性和方法。在接下来我们将介绍对象间的继承机制。

4.运算符

1.算数运算符

算数运算符用于对数字执行算数运算：
运算符描述+加法-减法*乘法/除法%取模（余数）++递加–递减

<script>//加法运算var a =10;var b =5;var result = a + b;//相加 -- 15alert(result)</script>

减法

<script>//减法操作var a =10;var b =5;var result = a - b;//相减 -- 5</script>

乘法

<script>//乘法操作var a =10;var b =5;var result = a * b;//相乘 -- 50</script>

除法

<script>//除法操作var a =10;var b =5;var result = a / b;//2</script>

取余

<script>//取余操作var a =10;var b =5;var result = a % b;// 10 除以 5 == 商为2 余数为0 所以输出0alert(result)</script>

介绍完了算术运算的常用操作，在这介绍一下优先级。

在小学我们就知道加减乘除的优先级关系了 : 

先乘除，后加减

括号括起来的优先级是最高的

2.赋值运算符

运算符例子等同于=x = yx = y+=x += yx = x + y-=x -= yx = x - y*=x = yx = x * y/=x /= yx = x / y%=x %= yx = x % y<<=x <<= yx = x << y>>=x >>= yx = x >> y>>>=x >>>= yx = x >>> y&=x &= yx = x & y^=x ^= yx = x ^ y|=x |= yx = x | y*=x **= yx = x ** y

这里就不一一演示了，大家可以亲自去测试。

5.语句

ECMA-262 描述了一些语句（也称为流控制语句），而 ECMAScript 中的大部分语法都体现在语句中。

我们首先来看 ECMA 是什么。ECMA，读音类似“埃科妈”，是欧洲计算机制造商协会（European Computer Manufacturers Association）的简称，是一家国际性会员制度的信息和电信标准组织。

后面的-xxx数字 代表的就是ECMAScript采用的标准

1.if语句

条件判断语句，在我们的代码中会多次频繁的出现，现在就来介绍它们的语法以及基本使用。

定义格式:if (条件){

​ 返回true 执行的代码块

}else{

​ 返回false 执行的代码块

}

<script>var a =10;var b =20;if(a > b){
        document.write("确实大于B")}else{
        document.write("a 怎么能大于 B ?")}</script>

2.do-while

这是一种后测试语句，也就是说循环体中的代码执行完之后才会进行判断求值。

下述这个例子 只要a < 10 就会一直循环。 a从0开始 每次递增2

<script>var a =0do{
        a +=2}while(a <10);</script>

3.while

有后测试语句，就有先测试语句，while就是先测试语句

<script>var a =0;while(a <10){
        a +=2;}//每次循环递增2 只要a不小于10了 循环就结束了</script>

4.for

for 语句也是先测试语句，只不过增加了进入循环之前的初始化代码，以及循环执行后要执行的表达式。

与Java中的for循环写法几乎保持一致。

<script>for(var i =0; i <10; i++){
        document.write(i +"</br>")}</script>

5.for-in

这是一种严格迭代语句，用于枚举对象中。

//循环显示了BOM对象window里面的所有属性 每次都会给propName变量赋值 直到window对象所有属性遍历完之后 循环就结束了for(const propName in window){
    document.write(propName);}

6.break-continue语句

break

语句用于立即退出循环，而

continue

语句也一样。

但是continue会跳过本次循环 执行下一次的循环

<script>for(var i =0; i <10; i++){if(i ==5){break;}
        document.write(i +"</br>")//当 i = 5的时候 这个循环就终止了 被break语句所终止。}</script><script>for(var i =0; i <10; i++){if(i ==5){continue;}
        document.write(i +"</br>")//当 i = 5的时候 跳过本次循环，继续判断下一次是否满足条件}</script>

7.switch

switch语句跟if语句紧密相连。

基本语句如下:

<script>var a =10;switch(a){case5:
            console.log("5");break;case10:
            console.log("10");break;}</script>
标签： javascript 前端 html
本文转载自: https://blog.csdn.net/ChengXuTeng/article/details/124676392
版权归原作者 Philosophy7 所有， 如有侵权，请联系我们删除。
登录后发布评论

“[JavaScript你真的以为这么简单吗]JavaScript高级”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

公司文件防止泄密的方式有哪些？记住这七个措施，保护文档安全！

Selenium的下载及chrome环境搭建

IDEA 2024.3 版本预览：这几个新特性吊炸天了都

OpenWebUI系列之 如何通过docker自动将其更新到OpenWebUI最新版本

在Visual Studio Code(VS Code)中使用Gitee进行代码版本管理(一)

Prometheus通过注册中心nacos、Eureka 实现服务注册自动发现监控

大数据-231 离线数仓 - DWS 层、ADS 层的创建 Hive 执行脚本

文章导航