Web前端开发培训Javascript教程一Word文档格式.docx
- 文档编号:19652188
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:15
- 大小:20.36KB
Web前端开发培训Javascript教程一Word文档格式.docx
《Web前端开发培训Javascript教程一Word文档格式.docx》由会员分享,可在线阅读,更多相关《Web前端开发培训Javascript教程一Word文档格式.docx(15页珍藏版)》请在冰豆网上搜索。
x=document.getElementById("
demo"
)//查找元素
x.innerHTML="
HelloJavaScript"
;
//改变内容
我们经常会看到document.getElementById("
someid"
)。
这个方法是HTMLDOM中定义的。
DOM(DocumentObjectModel)(文档对象模型)是用于访问HTML元素的正式W3C标准。
改变HTML图像
!
DOCTYPEhtml>
html>
head>
metacharset="
utf-8"
title>
菜鸟教程()<
/title>
/head>
body>
script>
functionchangeImage()
{
element=document.getElementById('
myimage'
)
if(element.src.match("
bulbon"
))
{
element.src="
/images/pic_bulboff.gif"
}
else
{
/images/pic_bulbon.gif"
}
}
/script>
imgid="
myimage"
changeImage()"
src="
width="
100"
height="
180"
点击灯泡就可以打开或关闭这盏灯<
/body>
/html>
改变HTML样式
)//找到元素
x.style.color="
#ff0000"
//改变样式
验证输入
JavaScript常用于验证用户的输入。
ifisNaN(x){alert("
不是数字"
)};
用法
HTML中的脚本必须位于<
与<
标签之间。
脚本可被放置在HTML页面的<
和<
部分中。
标签
如需在HTML页面中插入JavaScript,请使用<
标签。
会告诉JavaScript在何处开始和结束。
之间的代码行包含了JavaScript:
alert("
我的第一个JavaScript"
您无需理解上面的代码。
只需明白,浏览器会解释并执行位于<
之间的JavaScript代码
中的JavaScript
在本例中,JavaScript会在页面加载时向HTML的<
写文本:
.
这是一个段落<
JavaScript函数和事件
上面例子中的JavaScript语句,会在页面加载时执行。
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。
如果我们把JavaScript代码放入函数中,就可以在事件发生时调用该函数。
您将在稍后的章节学到更多有关JavaScript函数和事件的知识。
在<
或者<
的JavaScript
您可以在HTML文档中放入不限数量的脚本。
脚本可位于HTML的<
或<
部分中,或者同时存在于两个部分中。
通常的做法是把函数放入<
部分中,或者放在页面底部。
这样就可以把它们安置到同一处位置,不会干扰页面的内容。
中的JavaScript函数
在本例中,我们把一个JavaScript函数放置到HTML页面的<
部分。
该函数会在点击按钮时被调用:
functionmyFunction()
document.getElementById("
).innerHTML="
我的第一个JavaScript函数"
我的Web页面<
pid="
一个段落<
myFunction()"
尝试一下<
外部的JavaScript
也可以把脚本保存到外部文件中。
外部文件通常包含被多个网页使用的代码。
外部JavaScript文件的文件扩展名是.js。
如需使用外部文件,请在<
标签的"
src"
属性中设置该.js文件:
scriptsrc="
myScript.js"
你可以将脚本放置于<
中实际运行效果与您在<
标签中编写脚本完全一致。
myScript.js文件代码如下:
JavaScript输出
avaScript没有任何打印或者输出的函数。
JavaScript显示数据
JavaScript可以通过不同的方式来输出数据:
使用window.alert()弹出警告框。
使用document.write()方法将内容写到HTML文档中。
使用innerHTML写入到HTML元素。
使用console.log()写入到浏览器的控制台。
使用window.alert()
你可以弹出警告框来显示数据:
我的第一个页面<
我的第一个段落。
window.alert(5+6);
操作HTML元素
如需从JavaScript访问某个HTML元素,您可以使用document.getElementById(id)方法。
请使用"
id"
属性来标识HTML元素,并innerHTML来获取或插入元素内容:
我的第一个Web页面<
我的第一个段落<
document.getElementById("
).innerHTML="
段落已修改。
以上JavaScript语句(在<
标签中)可以在web浏览器中执行:
)是使用id属性来查找HTML元素的JavaScript代码。
innerHTML="
是用于修改元素的HTML内容(innerHTML)的JavaScript代码。
写到HTML文档
出于测试目的,您可以将JavaScript直接写在HTML文档中:
document.write(Date());
请使用document.write()仅仅向文档输出写内容。
如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖。
buttononclick="
点我<
functionmyFunction(){
document.write(Date());
写到控制台
如果您的浏览器支持调试,你可以使用console.log()方法在浏览器中显示JavaScript值。
浏览器中使用F12来启用调试模式,在调试窗口中点击"
Console"
菜单。
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使用赋值运算符给变量赋值:
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:
};
//Object通过对象字面量赋值
数据类型的概念
编程语言中,数据类型是一个非常重要的内容。
为了可以操作变量,了解数据类型的概念非常重要。
如果没有使用数据类型,以下实例将无法执行:
16+"
16加上"
是如何计算呢?
以上会产生一个错误还是输出以下结果呢?
16Volvo"
你可以在浏览器尝试执行以上代码查看效果。
JavaScript函数
JavaScript语句可以写在函数内,函数可以重复引用:
引用一个函数=调用函数(执行函数内的语句)。
functionmyFunction(a,b){
returna*b;
//返回a乘于b的结果
JavaScript字母大小写
JavaScript对大小写是敏感的。
当编写JavaScript语句时,请留意是否关闭大小写切换键。
函数getElementById与getElementbyID是不同的。
同样,变量myVariable与MyVariable也是不同的。
JavaScript字符集
JavaScript使用Unicode字符集。
Unicode覆盖了所有的字符,包含标点等字符。
JavaScript语句向浏览器发出的命令。
语句的作用是告诉浏览器该做什么。
JavaScript语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
你好Dolly"
分号;
分号用于分隔JavaScript语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
以上实例也可以这么写:
b=6;
c=a+b;
avaScript代码
JavaScript代码是JavaScript语句的序列。
浏览器按照编写顺序依次执行每条语句。
myDIV"
你最近怎么样?
JavaScript代码块
JavaScript可以分批地组合起来。
代码块以左花括号开始,以右花括号结束。
代码块的作用是一并地执行语句序列。
你好Dolly"
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="
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。
下面的例子会正确地显示:
你好\
世界!
不过,您不能像这样折行:
document.write\
("
你好世界!
JavaScript不会执行注释。
我们可以添加注释来对JavaScript进行解释,或者提高代码的可读性。
单行注释以//开头。
//输出标题:
myH1"
欢迎来到我的主页"
//输出段落:
myP"
这是我的第一个段落。
JavaScript多行注释
多行注释以/*开始,以*/结尾。
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
使用注释来阻止执行
在下面的例子中,注释用于阻止其中一条代码行的执行(可用于调试):
实例
//document.getElementById("
尝试一下»
在下面的例子中,注释用于阻止代码块的执行(可用于调试):
在行末使用注释
在下面的例子中,我们把注释放到代码行的结尾处:
varx=5;
//声明x并把5赋值给它
vary=x+2;
//声明y并把x+2赋值给它
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 前端 开发 培训 Javascript 教程