113WebJavaScript.docx

上传人:b****6 文档编号:12826393 上传时间:2023-06-08 格式:DOCX 页数:24 大小:74.14KB
下载 相关 举报
113WebJavaScript.docx_第1页
第1页 / 共24页
113WebJavaScript.docx_第2页
第2页 / 共24页
113WebJavaScript.docx_第3页
第3页 / 共24页
113WebJavaScript.docx_第4页
第4页 / 共24页
113WebJavaScript.docx_第5页
第5页 / 共24页
113WebJavaScript.docx_第6页
第6页 / 共24页
113WebJavaScript.docx_第7页
第7页 / 共24页
113WebJavaScript.docx_第8页
第8页 / 共24页
113WebJavaScript.docx_第9页
第9页 / 共24页
113WebJavaScript.docx_第10页
第10页 / 共24页
113WebJavaScript.docx_第11页
第11页 / 共24页
113WebJavaScript.docx_第12页
第12页 / 共24页
113WebJavaScript.docx_第13页
第13页 / 共24页
113WebJavaScript.docx_第14页
第14页 / 共24页
113WebJavaScript.docx_第15页
第15页 / 共24页
113WebJavaScript.docx_第16页
第16页 / 共24页
113WebJavaScript.docx_第17页
第17页 / 共24页
113WebJavaScript.docx_第18页
第18页 / 共24页
113WebJavaScript.docx_第19页
第19页 / 共24页
113WebJavaScript.docx_第20页
第20页 / 共24页
亲,该文档总共24页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

113WebJavaScript.docx

《113WebJavaScript.docx》由会员分享,可在线阅读,更多相关《113WebJavaScript.docx(24页珍藏版)》请在冰点文库上搜索。

113WebJavaScript.docx

113WebJavaScript

ØJavaScript简介

JavaScript是脚本语言

JavaScript是世界上最流行的编程语言

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

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

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

这门语言可用于HTML和web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

1.JavaScript:

写入HTML输出

实例

document.write("

Thisisaheading

");

document.write("

Thisisaparagraph

");

2.JavaScript:

对事件作出反应

alert()函数在JavaScript中并不常用,但它对于代码测试非常方便。

onclick单击事件。

3.JavaScript:

改变HTML内容

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

x=document.getElementById("demo")//查找元素

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

您会经常看到document.getElementByID("someid")。

这个方法是HTMLDOM中定义的。

DOM(文档对象模型)是用以访问HTML元素的正式W3C标准。

4.JavaScript:

改变HTML图像

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

JavaScript:

改变HTML样式

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

x=document.getElementById("demo")//找到元素

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

5.JavaScript:

验证输入

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

ifisNaN(x){alert("NotNumeric")};

6.提示:

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

Java(由Sun发明)是更复杂的编程语言。

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

JavaScript由BrendanEich发明。

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

ØJavaScript使用

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

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

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

之间的代码行包含了JavaScript:

您无需理解上面的代码。

只需明白,浏览器会解释并执行位于之间的JavaScript。

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

中的JavaScript

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

DOCTYPEhtml>

2.JavaScript函数和事件

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

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

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

或中的JavaScript

提示:

我们把JavaScript放到了页面代码的底部,这样就可以确保在

元素创建之后再执行脚本。

3.外部的JavaScript

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

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

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

如需使用外部文件,请在

--3.文件调用式:

在独立的js文件中写js.-->

--script标签不能同时引入js和书写js.-->

--

事件:

是用户的操作(动作),是JS调用的时机.

如:

单击事件,双击事件...

-->

--1.事件定义式:

在定义事件时直接写JS.-->

onclick="alert('苍老师');"/>

onclick="f2();"/>

onclick="f3();"/>

ØJavaScript输出

JavaScript通常用于操作HTML元素。

如需从JavaScript访问某个HTML元素,您可以使用document.getElementById(id)方法。

请使用"id"属性来标识HTML元素:

通过指定的id来访问HTML元素,并改变其内容:

MyFirstParagraph

document.getElementById("demo").innerHTML="MyFirstJavaScript";

JavaScript由web浏览器来执行。

在这种情况下,浏览器将访问id="demo"的HTML元素,并把它的内容(innerHTML)替换为"MyFirstJavaScript"。

警告

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

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

Windows8中的JavaScript

提示:

微软支持通过JavaScript创建Windows8app。

对于因特网和视窗操作系统,JavaScript都意味着未来。

ØJavaScript语句

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

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

下面的JavaScript语句向id="demo"的HTML元素输出文本"HelloWorld":

document.getElementById("demo").innerHTML="HelloWorld";

分号;分号用于分隔JavaScript语句。

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

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

在JavaScript中,用分号来结束语句是可选的。

1.JavaScript代码

JavaScript代码(或者只有JavaScript)是JavaScript语句的序列。

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

本例将操作两个HTML元素:

document.getElementById("demo").innerHTML="HelloWorld";

document.getElementById("myDIV").innerHTML="Howareyou?

";

2.JavaScript代码块

JavaScript语句通过代码块的形式进行组合。

块由左花括号开始,由右花括号结束。

块的作用是使语句序列一起执行。

JavaScript函数是将语句组合在块中的典型例子。

下面的例子将运行可操作两个HTML元素的函数:

实例

functionmyFunction(){

document.getElementById("demo").innerHTML="HelloWorld";

document.getElementById("myDIV").innerHTML="Howareyou?

";

}

3.JavaScript对大小写敏感。

JavaScript对大小写是敏感的。

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

空格

JavaScript会忽略多余的空格。

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

对代码行进行折行

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

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

document.write("Hello\World!

");

提示:

JavaScript是脚本语言。

浏览器会在读取代码时,逐行地执行脚本代码。

而对于传统编程来说,会在执行前对所有代码进行编译。

ØJavaScript注释

JavaScript不会执行注释。

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

单行注释以//开头。

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

ØJavaScript变量

变量是存储信息的容器。

我们使用var关键词来声明变量:

varcarname;

变量声明之后,该变量是空的(它没有值)。

如需向变量赋值,请使用等号:

carname="Volvo";

提示:

一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。

1.一条语句,多个变量

您可以在一条语句中声明很多变量。

该语句以var开头,并使用逗号分隔变量即可:

varname="Gates",age=56,job="CEO";

声明也可横跨多行:

varname="Gates",

age=56,

job="CEO";

Value=undefined

在计算机程序中,经常会声明无值的变量。

未使用值来声明的变量,其值实际上是undefined。

在执行过以下语句后,变量carname的值将是undefined:

varcarname;

2.重新声明JavaScript变量

如果重新声明JavaScript变量,该变量的值不会丢失:

在以下两条语句执行后,变量carname的值依然是"Volvo":

varcarname="Volvo";

varcarname;

JS对象

字符串、数字、布尔、数组、对象、Null、Undefined

3.JavaScript拥有动态类型

JavaScript拥有动态类型。

这意味着相同的变量可用作不同的类型:

实例

varx//x为undefined

varx=6;//x为数字

varx="Bill";//x为字符串

JavaScript字符串

字符串是存储字符(比如"BillGates")的变量。

字符串可以是引号中的任意文本。

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

4.JavaScript数字

JavaScript只有一种数字类型。

数字可以带小数点,也可以不带:

实例

varx1=34.00;//使用小数点来写

varx2=34;//不使用小数点来写

极大或极小的数字可以通过科学(指数)计数法来书写:

实例

vary=123e5;//12300000

varz=123e-5;//0.00123

JavaScript布尔

5.布尔(逻辑)只能有两个值:

true或false。

varx=true

vary=false

6.JavaScript数组

下面的代码创建名为cars的数组:

varcars=newArray();

cars[0]="Audi";

cars[1]="BMW";

cars[2]="Volvo";

或者(condensedarray):

varcars=newArray("Audi","BMW","Volvo");

或者(literalarray):

实例

varcars=["Audi","BMW","Volvo"];

数组下标是基于零的,所以第一个项目是[0],第二个是[1],以此类推。

7.JavaScript对象

对象由花括号分隔。

在括号内部,对象的属性以名称和值对的形式(name:

value)来定义。

属性由逗号分隔:

varperson={firstname:

"Bill",lastname:

"Gates",id:

5566};

上面例子中的对象(person)有三个属性:

firstname、lastname以及id。

空格和折行无关紧要。

声明可横跨多行:

varperson={

firstname:

"Bill",

lastname:

"Gates",

id:

5566

};

8对象属性有两种寻址方式:

实例

name=person.lastname;

name=person["lastname"];

9.Undefined和Null

Undefined这个值表示变量不含有值。

可以通过将变量的值设置为null来清空变量。

实例

cars=null;

person=null;

10.声明变量类型

当您声明新变量时,可以使用关键词"new"来声明其类型:

varcarname=newString;

varx=newNumber;

vary=newBoolean;

varcars=newArray;

varperson=newObject;

JavaScript变量均为对象。

当您声明一个变量时,就创建了一个新的对象。

ØJavaScript函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

1.JavaScript函数语法

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

functionfunctionname(){

这里是要执行的代码

}

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由JavaScript在任何位置进行调用。

提示:

JavaScript对大小写敏感。

关键词function必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数

在调用函数时,您可以向其传递值,这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数,由逗号(,)分隔:

myFunction(argument1,argument2)

当您声明函数时,请把参数作为变量来声明:

functionmyFunction(var1,var2){

这里是要执行的代码

}

变量和参数必须以一致的顺序出现。

第一个变量就是第一个被传递的参数的给定的值,以此类推。

函数很灵活,您可以使用不同的参数来调用该函数,这样就会给出不同的消息:

带有返回值的函数

有时,我们会希望函数将值返回调用它的地方。

通过使用return语句就可以实现。

在使用return语句时,函数会停止执行,并返回指定的值。

语法

functionmyFunction(){

varx=5;

returnx;

}

上面的函数会返回值5。

注释:

整个JavaScript并不会停止执行,仅仅是函数。

JavaScript将继续执行代码,从调用函数的地方。

函数调用将被返回值取代:

varmyVar=myFunction();

myVar变量的值是5,也就是函数"myFunction()"所返回的值。

即使不把它保存为变量,您也可以使用返回值:

document.getElementById("demo").innerHTML=myFunction();

"demo"元素的innerHTML将成为5,也就是函数"myFunction()"所返回的值。

您可以使返回值基于传递到函数中的参数:

实例

计算两个数字的乘积,并返回结果:

functionmyFunction(a,b){

returna*b;

}

document.getElementById("demo").innerHTML=myFunction(4,3);

"demo"元素的innerHTML将是:

12

在您仅仅希望退出函数时,也可使用return语句。

返回值是可选的:

functionmyFunction(a,b){

if(a>b){

return;

}

x=a+b

}

如果a大于b,则上面的代码将退出函数,并不会计算a和b的总和。

2.局部JavaScript变量

在JavaScript函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问它。

(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕,本地变量就会被删除。

3.全局JavaScript变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

4.JavaScript变量的生存期

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的JavaScript变量来分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

这条语句:

carname="Volvo";

将声明一个全局变量carname,即使它在函数内执行。

◆示例:

猜数字

DOCTYPEhtml>

Inserttitlehere

onclick="guess();"/>

ØJavaScript内置对象

JavaScript对象

JavaScript中的所有事物都是对象:

字符串、数值、数组、函数...

此外,JavaScript允许自定义对象。

JavaScript提供多个内建对象,比如String、Date、Array等等。

1.属性和方法

属性是与对象相关的值。

方法是能够在对象上执行的动作。

举例:

汽车就是现实生活中的对象。

汽车的属性:

car.name=Fiat

汽车的方法:

car.start()

2.JavaScript中的对象

在JavaScript中,对象是数据(变量),拥有属性和方法。

当您像这样声明一个JavaScript变量时:

vartxt="Hello";

您实际上已经创建了一个JavaScript字符串对象。

字符串对象拥有内建的属性length。

对于上面的字符串来说,length的值是5。

字符串对象同时拥有若干个内建的方法。

属性:

txt.length=5

方法:

txt.indexOf()

txt.replace()

txt.search()

提示:

在面向对象的语言中,属性和方法常被称为对象的成员。

3.创建JavaScript对象

JavaScript中的几乎所有事务都是对象:

字符串、数字、数组、日期、函数,等等。

你也可以创建自己的对象。

创建新JavaScript对象有很多不同的方法,并且您还可以向已存在的对象添加属性和方法。

4.访问对象的属性

访问对象属性的语法是:

objectName.propertyName

本例使用String对象的length属性来查找字符串的长度:

varmessage="HelloWorld!

";

varx=message.length;

5.访问对象的方法

您可以通过下面的语法调用方法:

objectName.methodName()

这个例子使用String对象的toUpperCase()方法来把文本转换为大写:

varmessage="Helloworld!

";

varx

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > PPT模板 > 商务科技

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2