JavaScript概述，建议收藏

一、JavaScript概述

1.学习JavaScript的原因

a. 客户端表单验证

在网站中常见的会员注册页面中，我们填写注册信息时，如果某项信息格式输入错误（如密码长度不够等)，表单页面将及时给出错误提示。这些错误在没有提交到服务器前，在客户端提前进行验证，称为客户端表单验证。这样，用户得到了即时的交互（反馈填写情况），同时也减轻了网站服务器端的压力，这是JavaScript最常用的场合。

b. 实现页面交互

在JavaScript中，可以编写响应鼠标单击等事件的代码，创建动态页面特效，从而高效地控制页面的内容等，可以在有限的页面空间里展现更多的内容，从而增加客户端的体验，进而使网站更加有动感、有魅力，吸引更多的浏览者，具体常见的客户端页面交互特效请参考学土后学习平台“静态网页技术”课程的《JavaScript语法》专题中的相关视频。

二、什么是JavaScript

JavaScript是一种描述语言，也是一种基于对象(Object)和事件驱动(Event Driven)的、安全性好的脚本语言。它运行在客户端，从而减轻服务器端的负担，总结其特点如下：

a. JavaScript主要用来向HTML页面中添加交互行为。

b. JavaScript是一种脚本语言，语法和Java类似。

c. JavaScript一般用来编写客户端脚本。

d. JavaScript是一种解释性语言，边执行边解释。

三、JavaScript和ECMAScript的关系

JavaScript 是由美国网景通讯公司的Netscape 发明的，Microsoft 公司随后模仿JavaScript 推出JScript 脚本语言，欧洲计算机制造商协会(ECMA)基于这两者制定了ECMAScript标准。简而言之，ECMAScript 是脚本程序设计语言的 Web 标准，JavaScript 和 JScript都只是遵循ECMAScript标准的一种实现。

四、JavaScript的组成

一个完整的JavaScript是由核心语法(ECMAScript)、浏监器对象模型（BOM)、文档对象模型（DOM)3个不同部分组成的。

JavaScript中必须掌握的基本知识

一.简介

JavaScript（JS）是一门高级的、解释型的动态编程语言。用于 HTML或web应用，可被浏览器直接执行。

完整的JavaScript包括以下几个部分：

  1. ECMAScript，描述了该语言的语法和基本对象
  2. 文档对象模型（DOM），描述处理网页内容的方法和接口
  3. 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

JavaScript的基本特点：

  • 是一种解释性脚本语言（代码不进行预编译）。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务：

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息
  • 控制cookies，包括创建和修改等

二.用法

1.嵌入HTML

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

如果 <script> 放在 body 中，建议放在底部。因为浏览器会按照代码在文件中的顺序解析 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。所以，要将 JavaScript 代码放在 body 中，应置于 HTML 页面底部。

2.外部js脚本

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。外部文件不使用 <script> 标签，直接写 javascript 代码。

如需使用外部文件，请在 <script> 标签的 \”src\” 属性中设置该 .js 文件：

3.在console调试

可以进入浏览器中console，如chrome F12 进入console，以命令行的形式输入js命令

4.事件触发

把 JavaScript 代码放入函数中，在事件发生时调用该函数。

三.变量

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值

也可以使用let,const来定义，这三者的区别是：var与let涉及块级作用域，let 命令只在所在的代码块 {} 内有效，具体参考；const定义一个只读常量

一般用var即可，let更推荐

注意: 在JavaScript中，所有代码指令都会以分号结尾 (;)

JavaScript中数据类型主要有:

算数运算符主要有:

比较运算符主要有:

在常规的比较中，数据类型是被忽略的

四.基本语法

1.条件语句

if 语句只有当指定条件为 true 时，该语句才会执行代码。

使用 if….else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

使用 if….else if…else 语句来选择多个代码块之一来执行。

三目运算

2.循环语句

JavaScript 支持不同类型的循环：

  • for – 循环代码块一定的次数
  • for/in – 循环遍历对象的属性
  • while – 当指定的条件为 true 时循环指定的代码块
  • do/while – 同样当指定的条件为 true 时循环指定的代码块

for 循环

for/in遍历

while 循环会在指定条件为真时循环执行代码块。

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

3.函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

加上形参

匿名函数，函数存储在变量中，不需要函数名称，通常通过变量名来调用。

4.异常判断

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

在浏览器中，页面被加载的时候，会自动生成这个页面的DOM对象（document）

DOM对象是一个树模型

可以通过这个对象：

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

1.查找HTML元素

通过id查找

通过标签查找

通过类名查找

因为查找返回的元素也是对象，所以可以对它再进行查找

2.修改HTML元素

改变HTML输出流

修改 HTML 内容

改变 HTML 元素的属性

3.DOM事件

事件可以是浏览器行为，也可以是用户行为，当事件触发时，可以执行对应的js代码

常见事件

HTML 元素中可以添加事件属性，并添加 JavaScript 代码，当此元素的事件被触发时，就会触发执行js代码

<button onclick=\”getElementById(\’demo\’).innerHTML=Date()\”>现在的时间是?</button><p id=\”demo\”></p>

也可以由DOM对象分配事件，因为事件也是html的一个属性

addEventListener() 方法

语法为

第一个参数是事件的类型 (如 \”click\” 或 \”mousedown\”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

详细的事件类型参考https://developer.mozilla.org/zh-CN/docs/Web/Events,注意与在元素属性中的事件是不同的

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科