Web前端开发培训Javascript教程一.docx

《Web前端开发培训Javascript教程一.docx》由会员分享，可在线阅读，更多相关《Web前端开发培训Javascript教程一.docx（18页珍藏版）》请在冰点文库上搜索。

Web前端开发培训Javascript教程一

Web前端开发培训Javascript学习阶段一

热点：

易莱胜官网

百读易莱胜官网

上海易莱胜

上海百读易莱胜

JavaScript 简介

javaScript为网页的脚本语言，可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

javascript的特点：

javaScript是一种轻量级的编程语言。

JavaScript是可插入HTML页面的编程代码。

JavaScript插入HTML页面后，可由所有的现代浏览器执行。

javascript可以写html输出流

document.write（"

这是一个标题

document.write（"

这是一个段落。

JavaScript：

对事件的反应

'）">点我!

alert（）函数在JavaScript中一般是用来测试的。

onclick事件元素。

JavaScript：

改变HTML内容

x=document.getElementById（"demo"）//查找元素

x.innerHTML="HelloJavaScript";//改变内容

我们经常会看到document.getElementById（"someid"）。

这个方法是HTMLDOM中定义的。

DOM（DocumentObjectModel）（文档对象模型）是用于访问HTML元素的正式W3C标准。

JavaScript：

改变HTML图像

DOCTYPEhtml>

src="/images/pic_bulboff.gif"width="100"height="180">

点击灯泡就可以打开或关闭这盏灯

JavaScript：

改变HTML样式

x=document.getElementById（"demo"）//找到元素

x.style.color="#ff0000";//改变样式

JavaScript：

验证输入

JavaScript常用于验证用户的输入。

ifisNaN（x）{alert（"不是数字"）};

JavaScript 用法

HTML中的脚本必须位于标签之间。

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

会告诉JavaScript在何处开始和结束。

之间的代码行包含了JavaScript:

您无需理解上面的代码。

只需明白，浏览器会解释并执行位于之间的JavaScript代码

中的JavaScript

在本例中，JavaScript会在页面加载时向HTML的写文本：

DOCTYPEhtml>

.

.

.

.

JavaScript函数和事件

上面例子中的JavaScript语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把JavaScript代码放入函数中，就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关JavaScript函数和事件的知识。

在或者的JavaScript

您可以在HTML文档中放入不限数量的脚本。

脚本可位于HTML的或部分中，或者同时存在于两个部分中。

通常的做法是把函数放入部分中，或者放在页面底部。

这样就可以把它们安置到同一处位置，不会干扰页面的内容。

中的JavaScript函数

在本例中，我们把一个JavaScript函数放置到HTML页面的部分。

该函数会在点击按钮时被调用：

DOCTYPEhtml>

我的Web页面

一个段落

尝试一下

中的JavaScript函数

在本例中，我们把一个JavaScript函数放置到HTML页面的部分。

该函数会在点击按钮时被调用：

DOCTYPEhtml>

我的Web页面

一个段落

尝试一下

外部的JavaScript

也可以把脚本保存到外部文件中。

外部文件通常包含被多个网页使用的代码。

外部JavaScript文件的文件扩展名是.js。

如需使用外部文件，请在

你可以将脚本放置于或者中实际运行效果与您在

操作HTML元素

如需从JavaScript访问某个HTML元素，您可以使用document.getElementById（id）方法。

请使用"id"属性来标识HTML元素，并innerHTML来获取或插入元素内容：

DOCTYPEhtml>

我的第一个Web页面

我的第一个段落

以上JavaScript语句（在

请使用document.write（）仅仅向文档输出写内容。

如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖。

DOCTYPEhtml>

我的第一个Web页面

我的第一个段落。

点我

写到控制台

如果您的浏览器支持调试，你可以使用console.log（）方法在浏览器中显示JavaScript值。

浏览器中使用F12来启用调试模式，在调试窗口中点击"Console"菜单。

DOCTYPEhtml>

我的第一个Web页面

JavaScript语法

JavaScript是一个脚本语言。

它是一个轻量级，但功能强大的编程语言。

JavaScript字面量

在编程语言中，一般固定值称为字面量，如3.14。

数字（Number）字面量可以是整数或者是小数，或者是科学计数（e）。

3.14

1001

123e5

字符串（String）字面量可以使用单引号或双引号:

"JohnDoe"

'JohnDoe'

达式字面量用于计算：

5+6

5*10

数组（Array）字面量定义一个数组：

[40,100,1,5,25,10]

对象（Object）字面量定义一个对象：

{firstName:

"John",lastName:

"Doe",age:

50,eyeColor:

"blue"}

函数（Function）字面量定义一个函数：

functionmyFunction（a,b）{returna*b;}

JavaScript变量

在编程语言中，变量用于存储数据值。

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

varx,length

x=5

length=6

变量可以通过变量名访问。

在指令式语言中，变量通常是可变的。

字面量是一个恒定的值。

变量是一个名称。

字面量是一个值。

JavaScript操作符

JavaScript使用算术运算符来计算值:

（5+6）*10

JavaScript使用赋值运算符给变量赋值：

x=5

y=6

z=（x+y）*10

JavaScript语句

在HTML中，JavaScript语句向浏览器发出的命令。

语句是用分号分隔：

x=5+6;

y=x*10;

JavaScript关键字

JavaScript关键字用于标识要执行的操作。

和其他任何编程语言一样，JavaScript保留了一些关键字为自己所用。

var关键字告诉浏览器创建一个新的变量：

varx=5+6;

vary=x*10;

JavaScript同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后JavaScript扩展中会用到。

JavaScript关键字必须以字母、下划线（_）或美元符（$）开始。

后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便JavaScript可以轻易区分开关键字和数字）。

JavaScript注释

不是所有的JavaScript语句都是"命令"。

双斜杠//后的内容将会被浏览器忽略：

//我不会执行

JavaScript数据类型

JavaScript有多种数据类型：

数字，字符串，数组，对象等等：

varlength=16;//Number通过数字字面量赋值

varpoints=x*10;//Number通过表达式字面量赋值

varlastName="Johnson";//String通过字符串字面量赋值

varcars=["Saab","Volvo","BMW"];//Array通过数组字面量赋值

varperson={firstName:

"John",lastName:

"Doe"};//Object通过对象字面量赋值

数据类型的概念

编程语言中，数据类型是一个非常重要的内容。

为了可以操作变量，了解数据类型的概念非常重要。

如果没有使用数据类型，以下实例将无法执行：

16+"Volvo"

16加上"Volvo"是如何计算呢?

以上会产生一个错误还是输出以下结果呢？

"16Volvo"

你可以在浏览器尝试执行以上代码查看效果。

JavaScript函数

JavaScript语句可以写在函数内，函数可以重复引用：

引用一个函数=调用函数（执行函数内的语句）。

functionmyFunction（a,b）{

returna*b;//返回a乘于b的结果

}

JavaScript字母大小写

JavaScript对大小写是敏感的。

当编写JavaScript语句时，请留意是否关闭大小写切换键。

函数getElementById与getElementbyID是不同的。

同样，变量myVariable与MyVariable也是不同的。

JavaScript字符集

JavaScript使用Unicode字符集。

Unicode覆盖了所有的字符，包含标点等字符。

JavaScript语句

JavaScript语句向浏览器发出的命令。

语句的作用是告诉浏览器该做什么。

JavaScript语句

JavaScript语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

document.getElementById（"demo"）.innerHTML="你好Dolly";

分号;

分号用于分隔JavaScript语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

a=5;

b=6;

c=a+b;

以上实例也可以这么写:

a=5;b=6;c=a+b;

avaScript代码

JavaScript代码是JavaScript语句的序列。

浏览器按照编写顺序依次执行每条语句。

document.getElementById（"demo"）.innerHTML="你好Dolly";

document.getElementById（"myDIV"）.innerHTML="你最近怎么样?

";

JavaScript代码块

JavaScript可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

functionmyFunction（）

{

document.getElementById（"demo"）.innerHTML="你好Dolly";

document.getElementById（"myDIV"）.innerHTML="你最近怎么样?

";

}

avaScript语句标识符

JavaScript语句通常以一个语句标识符为开始，并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了JavaScript语句标识符（关键字）：

语句描述

break用于跳出循环。

catch语句块，在try语句块执行出错时执行catch语句块。

continue跳过循环中的一个迭代。

do...while执行一个语句块，在条件语句为true时继续执行该语句块。

for在条件语句为true时，可以将代码块执行指定的次数。

for...in用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。

function定义一个函数

if...else用于基于不同的条件来执行不同的动作。

return退出函数

switch用于基于不同的条件来执行不同的动作。

throw抛出（生成）错误。

try实现错误处理，与catch一同使用。

var声明一个变量。

while当条件语句为true时，执行语句块。

空格

JavaScript会忽略多余的空格。

您可以向脚本添加空格，来提高其可读性。

下面的两行代码是等效的：

varperson="Hege";

varperson="Hege";

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。

下面的例子会正确地显示：

document.write（"你好\

世界!

"）;

不过，您不能像这样折行：

document.write\

（"你好世界!

"）;

JavaScript注释

JavaScript不会执行注释。

我们可以添加注释来对JavaScript进行解释，或者提高代码的可读性。

单行注释以//开头。

//输出标题：

document.getElementById（"myH1"）.innerHTML="欢迎来到我的主页";

//输出段落：

document.getElementById（"myP"）.innerHTML="这是我的第一个段落。

";

JavaScript多行注释

多行注释以/*开始，以*/结尾。

/*

下面的这些代码会输出

一个标题和一个段落

并将代表主页的开始

*/

document.getElementById（"myH1"）.innerHTML="欢迎来到我的主页";

document.getElementById（"myP"）.innerHTML="这是我的第一个段落。

";

使用注释来阻止执行

在下面的例子中，注释用于阻止其中一条代码行的执行（可用于调试）：

实例

//document.getElementById（"myH1"）.innerHTML="欢迎来到我的主页";

document.getElementById（"myP"）.innerHTML="这是我的第一个段落。

";

尝试一下»

在下面的例子中，注释用于阻止代码块的执行（可用于调试）：

实例

/*

document.getElementById（"myH1"）.innerHTML="欢迎来到我的主页";

document.getElementById（"myP"）.innerHTML="这是我的第一个段落。

";

*/

在行末使用注释

在下面的例子中，我们把注释放到代码行的结尾处：

实例

varx=5;//声明x并把5赋值给它

vary=x+2;//声明y并把x+2赋值给它