一.简介

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

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

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

JavaScript的基本特点:

JavaScript常用来完成以下任务:

二.用法

1.嵌入HTML

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

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

<!DOCTYPE html> <html> <head> <script> document.write("hello world"); </script> </head> <body> . <script> document.write("hello world"); </script> . </body> </html>

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

2.外部js脚本

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

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

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

<!DOCTYPE html> <html> <body> <script src="xx.js"></script> </body> </html>

3.在console调试

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

有关javascript的知识(JavaScript中必须掌握的基本知识)(1)

4.事件触发

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

<button type="button" onclick="myFunction()">按钮</button> <script> function myFunction() { alert("hello"); } </script>

三.变量

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

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

一般用var即可,let更推荐

var a; //声明 var a = 10; //初始化 a = 20 ; //赋值

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

JavaScript中数据类型主要有:

变量

解释

示例

String

字符串(一串文本)。字符串的值必须将用引号(单双均可,必须成对)扩起来。

var name = "John";

字符访问:name[0] name[1]

Number

数字。JavaScript 只有一种数字类型。数字可以带小数点,也可以不带

let x1=34.00; let x2=34;

Boolean

布尔值(真 / 假)。 true/false 是 JS 里的特殊关键字,无需引号。

let x=true;let y=false;

Array

数组,用于在单一引用中存储多个值的结构。

let cars=["Saab","Volvo","BMW"];

元素引用方法:cars[0],cars[1]

Object

对象,JavaScript 里一切皆对象,一切皆可储存在变量里。

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

let person={firstname:"John", lastname:"Doe", id:5566};

let newObject = document.querySelector('h1');

对象属性访问:object.AttributesName object[''AttributesName'']

算数运算符主要有:

加法

- 减法

* 乘法

/ 除法

% 取模

自增

--自减

比较运算符主要有:

==等于

=== 绝对等于(值和类型均相等)

!= 不等于

!== 不绝对等于(值和类型有一个不相等,或两个都不相等)

> 大于

< 小于

>= 大于或等于

<= 小于或等于

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

var x = 10; var y = "10"; if (x == y) //返回true,所以要用===

四.基本语法

1.条件语句

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

if (condition) { 当条件为 true 时执行的代码 }

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

if (condition) { 当条件为 true 时执行的代码 } else { 当条件不为 true 时执行的代码 }

有关javascript的知识(JavaScript中必须掌握的基本知识)(2)

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

if (condition1) { 当条件 1 为 true 时执行的代码 } else if (condition2) { 当条件 2 为 true 时执行的代码 } else { 当条件 1 和 条件 2 都不为 true 时执行的代码 }

三目运算

let variablename = (condition)?value1:value2 condition成立则variablename = value1 否则value2

2.循环语句

JavaScript 支持不同类型的循环:

for 循环

for (语句 1; 语句 2; 语句 3) { 被执行的代码块 } //语句 1 (代码块)开始前执行 //语句 2 定义运行循环(代码块)的条件 //语句 3 在循环(代码块)已被执行之后执行

有关javascript的知识(JavaScript中必须掌握的基本知识)(3)

for/in遍历

for (x in 可遍历对象) // x 为属性名 { 执行代码块 }

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

while (条件) { 需要执行的代码 }

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

do { 需要执行的代码 } while (条件);

3.函数语法

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

function functionname() { // 执行代码 }

加上形参

function myFunction(var1,var2) { 代码 return var3 //使用 return 语句时,函数会停止执行,并返回指定的值 }

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

var x = function (a, b) {return a * b}; var z = x(4, 3);

4.异常判断

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

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

JavaScript 语句 trycatch 是成对出现的。

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

try { ... //异常的抛出 } catch(e) { ... //异常的捕获与处理 } finally { ... //结束处理 }

五.DOM对象

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

DOM对象是一个树模型

可以通过这个对象:

1.查找HTML元素

通过id查找

var x=document.getElementById("intro"); //如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。 //如果未找到该元素,则 x 将包含 null。

通过标签查找

var y=document.getElementsByTagName("div"); //如果有多个同类标签,则返回多个对象的数组

通过类名查找

var x=document.getElementsByClassName("intro");

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

var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); //本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素

2.修改HTML元素

改变HTML输出流

document.write(); //如果在文档(DOM)加载完成之后使用则会覆盖该文档

修改 HTML 内容

document.getElementById(id).innerHTML=新的 HTML内容

改变 HTML 元素的属性

document.getElementById(id).attribute=新属性值

3.DOM事件

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

常见事件

事件

描述

onchange

HTML 元素改变

onclick

用户点击 HTML 元素

onmouseover

用户在一个HTML元素上移动鼠标

onmouseout

用户从一个HTML元素上移开鼠标

onkeydown

用户按下键盘按键

onload

浏览器已完成页面的加载

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

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

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

<script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script>

addEventListener() 方法

element.addEventListener("click", function(){ alert("Hello World!"); });

语法为

element.addEventListener(event, function, useCapture);

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

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

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

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

,