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>
菜鸟教程()functionchangeImage()
{
element=document.getElementById('myimage')
if(element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
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:
alert("我的第一个JavaScript");
您无需理解上面的代码。
只需明白,浏览器会解释并执行位于之间的JavaScript代码
中的JavaScript
在本例中,JavaScript会在页面加载时向HTML的
写文本:
DOCTYPEhtml>
.
.
document.write("
这是一个标题
");
document.write("
这是一个段落
");
.
.
JavaScript函数和事件
上面例子中的JavaScript语句,会在页面加载时执行。
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。
如果我们把JavaScript代码放入函数中,就可以在事件发生时调用该函数。
您将在稍后的章节学到更多有关JavaScript函数和事件的知识。
在
或者的JavaScript
您可以在HTML文档中放入不限数量的脚本。
脚本可位于HTML的
或部分中,或者同时存在于两个部分中。
通常的做法是把函数放入
部分中,或者放在页面底部。
这样就可以把它们安置到同一处位置,不会干扰页面的内容。
中的JavaScript函数
在本例中,我们把一个JavaScript函数放置到HTML页面的
部分。
该函数会在点击按钮时被调用:
DOCTYPEhtml>
functionmyFunction()
{
document.getElementById("demo").innerHTML="我的第一个JavaScript函数";
}
我的Web页面
一个段落
尝试一下
中的JavaScript函数
在本例中,我们把一个JavaScript函数放置到HTML页面的
部分。
该函数会在点击按钮时被调用:
DOCTYPEhtml>
我的Web页面
一个段落
尝试一下
functionmyFunction()
{
document.getElementById("demo").innerHTML="我的第一个JavaScript函数";
}
外部的JavaScript
也可以把脚本保存到外部文件中。
外部文件通常包含被多个网页使用的代码。
外部JavaScript文件的文件扩展名是.js。
如需使用外部文件,请在
你可以将脚本放置于
或者中实际运行效果与您在
操作HTML元素
如需从JavaScript访问某个HTML元素,您可以使用document.getElementById(id)方法。
请使用"id"属性来标识HTML元素,并innerHTML来获取或插入元素内容:
DOCTYPEhtml>
我的第一个Web页面
我的第一个段落
document.getElementById("demo").innerHTML="段落已修改。
";
以上JavaScript语句(在
请使用document.write()仅仅向文档输出写内容。
如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖。
DOCTYPEhtml>
我的第一个Web页面
我的第一个段落。
点我
functionmyFunction(){
document.write(Date());
}
写到控制台
如果您的浏览器支持调试,你可以使用console.log()方法在浏览器中显示JavaScript值。
浏览器中使用F12来启用调试模式,在调试窗口中点击"Console"菜单。
DOCTYPEhtml>
我的第一个Web页面
a=5;
b=6;
c=a+b;
console.log(c);
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赋值给它