JavaScript教案Word格式文档下载.docx

JavaScript教案Word格式文档下载.docx

《JavaScript教案Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《JavaScript教案Word格式文档下载.docx（15页珍藏版）》请在冰豆网上搜索。

改变HTML内容

使用JavaScript来处理HTML内容是非常强大的功能。

x=document.getElementById（"

demo"

） 

//查找元素

x.innerHTML="

HelloJavaScript"

;

//改变内容

您会经常看到 

document.getElementById（"

someid"

）。

这个方法是HTMLDOM中定义的。

DOM（Document 

Object 

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

您将在本教程的多个章节中学到有关HTMLDOM的知识。

改变HTML图像

本例会动态地改变HTML<

image>

的来源（src）：

点亮灯泡

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

JavaScript能够改变任意HTML元素的大多数属性，而不仅仅是图片。

改变HTML样式

改变HTML元素的样式，属于改变HTML属性的变种。

//找到元素 

x.style.color="

#ff0000"

//改变样式

验证输入

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

ifisNaN（x）{alert（"

不是数字"

）};

您知道吗？

JavaScript与Java是两种完全不同的语言，无论在概念上还是设计上。

Java（由Sun发明）是更复杂的编程语言。

ECMA-262是JavaScript标准的官方名称。

JavaScript由BrendanEich发明。

它于1995年出现在Netscape中（该浏览器已停止更新），并于1997年被ECMA（一个标准协会）采纳。

用法

HTML中的脚本必须位于<

script>

与<

/script>

标签之间。

脚本可被放置在HTML页面的<

body>

和<

head>

部分中。

标签

如需在HTML页面中插入JavaScript，请使用<

标签。

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

之间的代码行包含了JavaScript:

alert（"

我的第一个JavaScript"

您无需理解上面的代码。

只需明白，浏览器会解释并执行位于<

之间的JavaScript代码 

那些老旧的实例可能会在<

标签中使用type="

text/javascript"

。

现在已经不必这样做了。

JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。

中的JavaScript

在本例中，JavaScript会在页面加载时向HTML的<

写文本：

!

DOCTYPEhtml>

html>

.

这是一个段落<

/body>

/html>

JavaScript函数和事件

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

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

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

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

在<

或者<

的JavaScript

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

脚本可位于HTML的<

或<

部分中，或者同时存在于两个部分中。

通常的做法是把函数放入<

部分中，或者放在页面底部。

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

中的JavaScript函数

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

部分。

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

functionmyFunction（）

{

）.innerHTML="

我的第一个JavaScript函数"

}

/head>

我的Web页面<

pid="

一个段落<

onclick="

myFunction（）"

尝试一下<

外部的JavaScript

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

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

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

如需使用外部文件，请在<

标签的"

src"

属性中设置该.js文件：

scriptsrc="

myScript.js"

你可以将脚本放置于<

中实际运行效果与您在<

标签中编写脚本完全一致。

外部脚本不能包含<

输出

JavaScript没有任何打印或者输出的函数。

在HTML中，JavaScript通常用于操作HTML元素。

操作HTML元素

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

请使用"

id"

属性来标识HTML元素，并innerHTML来获取或插入元素内容：

DOCTYPE 

我的第一个Web页面<

p 

id="

我的第一个段落<

）.innerHTML="

段落已修改。

以上JavaScript语句（在<

标签中）可以在web浏览器中执行：

是使用id属性来查找HTML元素的JavaScript代码。

innerHTML="

Paragraphchanged."

是用于修改元素的HTML内容（innerHTML）的JavaScript代码。

在本教程中

在大多数情况下，在本教程中，我们将使用上面描述的方法来输出：

下面的例子直接把id="

的<

元素写到HTML文档输出中：

写到HTML文档

出于测试目的，您可以将JavaScript直接写在HTML文档中：

我的第一个段落。

document.write（Date（））;

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

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

button 

点我<

functionmyFunction（）{

document.write（Date（））;

写到控制台

如果您的浏览器支持调试，你可以使用 

console.log（） 

方法在浏览器中显示JavaScript值。

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

Console"

菜单。

a=5;

b=6;

c=a+b;

console.log（c）;

您知道吗?

程序中调试是测试，查找及减少bug（错误）的过程。

语法

JavaScript是一个程序语言。

语法规则定义了语言结构。

JavaScript语法

JavaScript是一个脚本语言。

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

JavaScript字面量

在编程语言中，一个字面量是一个常量，如3.14。

数字（Number）字面量 

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

3.14

1001

123e5

字符串（String）字面量 

可以使用单引号或双引号bewrittenwithdoubleorsinglequotes:

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使用赋值运算符给变量赋值：

y=6

z=（x+y）*10

JavaScript语言有多种类型的运算符：

Type

描述

赋值，算术和位运算符

= 

+ 

- 

* 

/

在JS运算符中描述

条件，比较及逻辑运算符

== 

!

=<

>

在JS比较运算符中描述

JavaScript语句

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

语句是用分号分隔：

x=5+6;

y=x*10;

JavaScript关键词

JavaScript语句通常于关键词为开头。

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

varx=5+6;

vary=x*10;

JavaScript标识符

和其他任何编程语言一样，JavaScript保留了一些标识符为自己所用。

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

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

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

以下是JavaScript中最​​重要的保留字（按字母顺序）：

abstract

else

instanceof

super

boolean

enum

int

switch

break

export

interface

synchronized

byte

extends

let

this

case

false

long

throw

catch

final

native

throws

char

finally

new

transient

class

float

null

true

const

for

package

try

continue

function

private

typeof

debugger

goto

protected

var

default

if

public

void

delete

implements

return

volatile

do

import

short

while

double

in

static

with

JavaScript注释

不是所有的JavaScript语句都是"

命令"

双斜杠 

// 

后的内容将会被浏览器忽略：

//我不会执行

JavaScript数据类型

JavaScript有多种数据类型：

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

varlength=16;

//Number通过数字字面量赋值 

varpoints=x*10;

//Number通过表达式字面量赋值

varlastName="

Johnson"

//String通过字符串字面量赋值

varcars=["

Saab"

"

Volvo"

BMW"

];

//Array 

通过数组字面量赋值

varperson={firstName:

};

//Object通过对象字面量赋值

数据类型的概念

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

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

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

16+"

16加上"

是如何计算呢?

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

16Volvo"

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

在接下来的章节中你将学到更多关于数据类型的知识。

JavaScript函数

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

引用一个函数 

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

functionmyFunction（a,b）{

returna*b;

//返回a乘于b的结果

JavaScript对大小写敏感。

JavaScript对大小写是敏感的。

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

函数 

getElementById 

与 

getElementbyID 

是不同的。

同样，变量 

myVariable 

MyVariable 

也是不同的。

JavaScript字符集

JavaScript使用Unicode字符集。

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

如需进一步了解，请学习我们的 

完整Unicode参考手册。

JavaScript中，常见的是驼峰法的命名规则，如lastName（而不是lastname）。