【1.0】JavaScript简介

JavaScript 阅读量：次

JavaScript (简称JS，和Java没任何关系)

  • 一种轻量级的脚本型编程语言
  • 为Web增加了交互、动态效果和行为功能,被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
  • JS由浏览器执行，访问时会被下载到本地
  • JS可以写在HTML文件中，也可以单独为.js文件

一、JavaScript：写入 HTML 输出

实例：

document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

二、JavaScript：对事件作出反应

实例

<button type="button" onclick="alert('Welcome!')">点击这里</button>

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

三、 JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容

您会经常看到 document.getElementByID(“some id”)。这个方法是 HTML DOM 中定义的。

DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。

四、 JavaScript：改变 HTML 图像

本例会动态地改变 HTML <image> 的来源 (src)：

The Light bulb

点击灯泡就可以打开或关闭这盏灯

<!DOCTYPE html>
<html>
<<span style="color: #333333; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 13px; font-style: normal; line-height: 1.5;">ript></span>

function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
 {
 element.src="/i/eg_bulboff.gif";
 }
else
 {
 element.src="/i/eg_bulbon.gif";
 }
}
</script>
<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
<p>点击灯泡来点亮或熄灭这盏灯</p>
</body>

<span style="color: #333333; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 13px; font-style: normal; line-height: 1.5;"></html></span>body>
<sc

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

五、 JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

实例

x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式

六、JavaScript：验证输入

JavaScript 常用于验证用户的输入。

实例

if isNaN(x) {alert("Not Numeric")};

更多例子，请参见W3School

参考资料：

W3School****

药企，独角兽，苏州。团队长期招人，感兴趣的都可以发邮件聊聊：tiehan@sina.cn
个人公众号，比较懒，很少更新，可以在上面提问题，如果回复不及时，可发邮件给我： tiehan@sina.cn