首页IT科技javascript很难吗([JavaScript你真的以为这么简单吗]JavaScript高级)

javascript很难吗([JavaScript你真的以为这么简单吗]JavaScript高级)

时间2025-08-05 17:21:40分类IT科技浏览4659
导读:✅作者简介:大家好,我是Philosophy7?让我们一起共同进步吧!🏆 📃个人主页:Philosophy7的csdn博客...

✅作者简介:大家好,我是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方式有两种:

HTML中直接使用

外部引入

使用 src 属性                      。这个属性的值是一个 URL               ,指向包含 JavaScript 代码的文件                     ,比如:下面的例子

这个例子在页面中加载了demo.js

注意:

​ 使用了 src 属性的标签中再包含其他 JavaScript 代码              。如果两者都提供的话       ,则浏览器只会下载并执行脚本文件               ,从而忽略行内代码。

<body> <script> //内部使用script alert("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> //内部使用script alert("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              、关键字与保留字

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

有关键字如下:

break do in typeof case else instanceof var catch export new void class extends return whild const finally super with continue for switch yield debugger function this throw

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.定义一个函数 function test(){ //在函数内部使用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(typeof 30) //number //2.演示undefined let b; document.write(b + "</br>") //未声明变量的时候也会检测出undefined document.write(typeof num1) //3.Null 表示空对象指针 var car = null; document.write(typeof car) //返回的是一个对象object //4.Boolean var 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; //相加 -- 15 alert(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 所以输出0 alert(result) </script>

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

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

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

2.赋值运算符

运算符 例子 等同于 = x = y x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y <<= x <<= y x = x << y >>= x >>= y x = x >> y >>>= x >>>= y x = x >>> y &= x &= y x = x & y ^= x ^= y x = x ^ y |= x |= y x = x | y **= x **= y x = 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 = 0 do { 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){ case 5: console.log("5"); break; case 10: console.log("10"); break; } </script>
声明:本站所有文章                     ,如无特殊说明或标注              ,均为本站原创发布。任何个人或组织        ,在未征得本站同意时                      ,禁止复制       、盗用        、采集                     、发布本站内容到任何网站              、书籍等各类媒体平台                      。如若本站内容侵犯了原著者的合法权益              ,可联系我们进行处理                     。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
yolov5教程书籍PDF(yoloV5-face学习笔记)