113WebJavaScript.docx
- 文档编号:12826393
- 上传时间:2023-06-08
- 格式:DOCX
- 页数:24
- 大小:74.14KB
113WebJavaScript.docx
《113WebJavaScript.docx》由会员分享,可在线阅读,更多相关《113WebJavaScript.docx(24页珍藏版)》请在冰点文库上搜索。
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:
alert("MyFirstJavaScript");
您无需理解上面的代码。
只需明白,浏览器会解释并执行位于之间的JavaScript。
JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。
中的JavaScript在本例中,JavaScript会在页面加载时向HTML的
写文本:DOCTYPEhtml>
document.write("
Thisisaheading
");document.write("
Thisisaparagraph
");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元素,并改变其内容: 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>
//在页面加载时生成随机数,在页面加载后,
//用户点击猜时使用这个随机数.
varran=parseInt(Math.random()*100);
functionguess(){
//获取文本框内的值
varn=document.getElementById("num").value;
//获取span
varspan=document.getElementById("result");
//判断该值是不是数字
if(isNaN(n)){
//不是,给予提示
span.innerHTML="请输入数字";
}else{
//是,开始猜
if(n>ran){
span.innerHTML="大了";
}elseif(n span.innerHTML="小了"; }else{ span.innerHTML="对了"; } } }
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文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 113 WebJavaScript