javascript学习笔记文档格式.docx
- 文档编号:22358358
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:94
- 大小:762.12KB
javascript学习笔记文档格式.docx
《javascript学习笔记文档格式.docx》由会员分享,可在线阅读,更多相关《javascript学习笔记文档格式.docx(94页珍藏版)》请在冰豆网上搜索。
亲自试一试
代码:
!
DOCTYPEhtml>
html>
body>
JavaScript能够直接写入HTML输出流中:
script>
Thisisaparagraph.<
/script>
您只能在HTML输出流中使用<
strong>
document.write<
/strong>
。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
/body>
/html>
结果:
(如图)
提示:
您只能在HTML输出中使用document.write。
如果您在文档加载后使用该方法,会覆盖整个文档。
2、JavaScript:
对事件作出反应
buttontype="
button"
onclick="
alert('
Welcome!
'
)"
>
点击这里<
/button>
我的第一段JavaScript<
JavaScript能够对事件作出反应。
比如对按钮的点击:
alert()函数在JavaScript中并不常用,但它对于代码测试非常方便。
onclick事件只是您即将在本教程中学到的众多事件之一。
3、JavaScript:
改变HTML内容
使用JavaScript来处理HTML内容是非常强大的功能。
x=document.getElementById("
demo"
)//查找元素
x.innerHTML="
HelloJavaScript"
;
//改变内容
pid="
JavaScript能改变HTML元素的内容。
functionmyFunction(){
//找到元素
HelloJavaScript!
//改变内容
}
myFunction()"
您会经常看到document.getElementByID("
someid"
)。
这个方法是HTMLDOM中定义的。
DOM(文档对象模型)是用以访问HTML元素的正式W3C标准。
您将在本教程的多个章节中学到有关HTMLDOM的知识。
4、JavaScript:
改变HTML图像
本例会动态地改变HTML<
image>
的来源(src):
TheLightbulb
点击灯泡就可以打开或关闭这盏灯
functionchangeImage(){
element=document.getElementById('
myimage'
)
if(element.src.match("
bulbon"
)){
element.src="
/i/eg_bulboff.gif"
}
else{
/i/eg_bulbon.gif"
imgid="
myimage"
changeImage()"
src="
点击灯泡来点亮或熄灭这盏灯<
JavaScript能够改变任意HTML元素的大多数属性,而不仅仅是图片。
5、JavaScript:
改变HTML样式
改变HTML元素的样式,属于改变HTML属性的变种。
)//找到元素
x.style.color="
#ff0000"
//改变样式
JavaScript能改变HTML元素的样式。
functionmyFunction()
{
)//找到元素
//改变样式
6、JavaScript:
验证输入
JavaScript常用于验证用户的输入。
ifisNaN(x){alert("
NotNumeric"
)};
请输入数字。
如果输入值不是数字,浏览器会弹出提示框。
inputid="
type="
text"
varx=document.getElementById("
).value;
if(x=="
||isNaN(x))
{
alert("
您知道吗?
JavaScript与Java是两种完全不同的语言,无论在概念还是设计上。
Java(由Sun发明)是更复杂的编程语言。
ECMA-262是JavaScript标准的官方名称。
JavaScript由BrendanEich发明。
它于1995年出现在Netscape中(该浏览器已停止更新),并于1997年被ECMA(一个标准协会)采纳。
二、JavaScript实现
HTML中的脚本必须位于<
与<
标签之间。
脚本可被放置在HTML页面的<
和<
head>
部分中。
1、<
标签
如需在HTML页面中插入JavaScript,请使用<
标签。
会告诉JavaScript在何处开始和结束。
之间的代码行包含了JavaScript:
alert("
MyFirstJavaScript"
您无需理解上面的代码。
只需明白,浏览器会解释并执行位于<
之间的JavaScript。
那些老旧的实例可能会在<
标签中使用type="
text/javascript"
现在已经不必这样做了。
JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。
2、<
中的JavaScript
在本例中,JavaScript会在页面加载时向HTML的<
写文本:
JavaScript函数和事件
上面例子中的JavaScript语句,会在页面加载时执行。
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。
如果我们把JavaScript代码放入函数中,就可以在事件发生时调用该函数。
您将在稍后的章节学到更多有关JavaScript函数和事件的知识。
或<
您可以在HTML文档中放入不限数量的脚本。
脚本可位于HTML的<
部分中,或者同时存在于两个部分中。
通常的做法是把函数放入<
部分中,或者放在页面底部。
这样就可以把它们安置到同一处位置,不会干扰页面的内容。
3、<
中的JavaScript函数
在本例中,我们把一个JavaScript函数放置到HTML页面的<
部分。
该函数会在点击按钮时被调用:
document.getElementById("
).innerHTML="
MyFirstJavaScriptFunction"
/head>
MyWebPage<
AParagraph<
Tryit<
AParagraph.<
4、<
MyFirstWebPage<
如上一条
我们把JavaScript放到了页面代码的底部,这样就可以确保在<
元素创建之后再执行脚本。
5、外部的JavaScript
也可以把脚本保存到外部文件中。
外部文件通常包含被多个网页使用的代码。
外部JavaScript文件的文件扩展名是.js。
如需使用外部文件,请在<
标签的"
src"
属性中设置该.js文件:
scriptsrc="
myScript.js"
b>
注释:
/b>
myFunction保存在名为"
的外部文件中。
scripttype="
/js/myScript.js"
在<
中引用脚本文件都是可以的。
实际运行效果与您在<
标签中编写脚本完全一致。
外部脚本不能包含<
三、JavaScript输出
JavaScript通常用于操作HTML元素。
操作HTML元素
如需从JavaScript访问某个HTML元素,您可以使用document.getElementById(id)方法。
请使用"
id"
属性来标识HTML元素:
例子
通过指定的id来访问HTML元素,并改变其内容:
MyFirstParagraph<
MyFirstParagraph.<
JavaScript由web浏览器来执行。
在这种情况下,浏览器将访问id="
的HTML元素,并把它的内容(innerHTML)替换为"
写到文档输出
下面的例子直接把<
元素写到HTML文档输出中:
MyFirstJavaScript<
警告
请使用document.write()仅仅向文档输出写内容。
如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖:
buttononclick="
糟糕!
文档消失了。
Windows8中的JavaScript
微软支持通过JavaScript创建Windows8app。
对于因特网和视窗操作系统,JavaScript都意味着未来。
四、JavaScript语句
JavaScript语句
JavaScript语句向浏览器发出的命令。
语句的作用是告诉浏览器该做什么。
下面的JavaScript语句向id="
的HTML元素输出文本"
HelloWorld"
:
分号;
分号用于分隔JavaScript语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
您也可能看到不带有分号的案例。
在JavaScript中,用分号来结束语句是可选的。
JavaScript代码
JavaScript代码(或者只有JavaScript)是JavaScript语句的序列。
浏览器会按照编写顺序来执行每条语句。
本例将操作两个HTML元素:
myDIV"
Howareyou?
divid="
ADIV.<
/div>
JavaScript代码块
JavaScript语句通过代码块的形式进行组合。
块由左花括号开始,由右花括号结束。
块的作用是使语句序列一起执行。
JavaScript函数是将语句组合在块中的典型例子。
下面的例子将运行可操作两个HTML元素的函数:
myPar"
Iamaparagraph.<
myDiv"
Iamadiv.<
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- javascript 学习 笔记