JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
(1)简述:
1.JavaScript 是脚本语言 2.JavaScript 是一种轻量级的编程语言。 3.JavaScript 是可插入 HTML 页面的编程代码。 4.JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。 5.JavaScript 很容易学习。
(2)js能实现的功能:
1)写入html输出流:
<!DOCTYPE html> <html> <head> <title>示例8.1(1)</title> </head> <body> <!--测试JavaScript的功能--> <p><b>JavaScript 能够直接写入 HTML 输出流中:</b></p> <script> document.write("用js输出我的签名:"); document.write("<pre><font size=5>是是非非终为假,<br/>云淡风轻总是真!</font></pre>"); </script> <p>提醒:<br/> 您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。 </p> </body> </html>
<!DOCTYPE html> <html> <head> <title>示例8.1(2)</title> <script> function myFunc(){ document.write("用js输出我的签名:"); document.write("<pre><font size=5>是是非非终为假,<br/>云淡风轻总是真!</font></pre>"); } </script> </head> <body onload="myFunc()"> <!--测试JavaScript的功能--> <p><b>JavaScript 能够直接写入 HTML 输出流中:</b></p> <p>提醒:<br/> 您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。 </p> </body> </html>
<!DOCTYPE html> <html> <head> <title>示例8.1(3)</title> <script> function myFunc(){ document.write("用js输出我的签名:"); document.write("<pre><font size=5>是是非非终为假,<br/>云淡风轻总是真!</font></pre>"); } window.onload=myFunc; </script> </head> <body> <!--测试JavaScript的功能--> <p><b>JavaScript 能够直接写入 HTML 输出流中:</b></p> <p>提醒:<br/> 您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。 </p> </body> </html>
2)对事件的反应:
<!DOCTYPE html> <html> <head> <title>示例8.2</title> <script> function myFunc(){ alert("My name is MenAngel!") } </script> </head> <body> <!--测试JavaScript的功能--> <p><b>JavaScript 能够对事件进行响应:</b></p> <!--这里,函数要带括号--> <input type="button" value="弹出对话框" onclick="myFunc()"> </body> </html>
3)改变 HTML 内容:
<!DOCTYPE html> <html> <head> <title>示例8.3</title> <script> function changeContent(){ x=document.getElementById("demo"); x.innerHTML="My name is sunjimeng!"; } </script> </head> <body> <!--测试JavaScript的功能--> <p><b>JavaScript 能够对动态改变html元素的内容:</b></p> <!--这里,函数要带括号--> <input type="button" value="改变文本内容" onclick="changeContent()"> <p id="demo">My name is MenAngel!<p> </body> </html>
document.getElementById("some id")。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。
4)改变图片元素的内容:
<!DOCTYPE html> <html> <head> <title>示例8.4</title> <script> function changeImg(){ b_element=document.getElementById("bumb"); s_element=document.getElementById("switch"); if(b_element.src.match("bulbon_on")){ b_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_off.png"; s_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_off.png"; }else{ b_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_on.png"; s_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_on.png"; } } </script> <style> img{ margin-left:50px; margin-top:18px; } </style> </head> <body> <!--测试JavaScript的功能--> <p><b>JavaScript 能够动态改变图片元素的内容:</b></p> <div style="background-color:black;250px;height:300px;" > <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_off.png" id="bumb" width="150" height="200"/> <img onclick="changeImg()" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_off.png" id="switch" width="150" height="50"/> <div> </body> </html>
5)改变元素的样式:
<!DOCTYPE html> <html> <head> <title>示例8.5</title> <script> function changeColor(){ element=document.getElementById("div_main"); element.style.background="red"; } </script> <style> #div_main{ height:200px; width:200px; background-color:black; } </style> </head> <body> <!--测试JavaScript的功能--> <p><b>JavaScript 能够动态改变元素的样式:</b></p> <input value="改变背景颜色" type="button" onclick="changeColor()"/> <div id="div_main" "> </div> </body> </html>
6)验证输入:
<!DOCTYPE html> <html> <head> <title>示例8.6</title> <script> function myFunction() { var x=document.getElementById("demo").value; if(x==""||isNaN(x)) { alert("不是数字"); } } </script> </head> <body> <!--测试JavaScript的功能--> <p><b>JavaScript 验证数据类型:</b></p> <input type="text" value="" " id="demo"> <button onclick="myFunction()">点一下</button></input> </body> </html>
(3)拓展:
JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。 Java(由 Sun 发明)是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。 Java(由 Sun 发明)是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。