【1.0】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

Sam avatar
About Sam
专注生物信息 专注转化医学