参考资料:
1. http://www.w3school.com.cn/js/
2. http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
3. http://www.javascriptcn.com/
☂ 简介:
☞ Javascript是一种轻量级的解释型脚本语言。
☞ HTML中的脚本必须位于<script>与</script>标签之间。
☞ 脚本可被放置在HTML页面的<body>和<head>部分中。
☞ 引用外部.js文件的方式:
<script src="myScript.js"></script>
☞ Javascript对大小写敏感。
☞ 可在文本字符串中使用反斜杠“”对代码进行换行。
☞ Javascript拥有动态类型。
☞ 未初始化的变量的值为undefined。
☞ 重新申明变量,该变量的值不会丢失。
- 写入HTML输出
<script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); </script>
效果:
- 对事件作出反应
<button type="button" onclick="alert('Welcome!')">Click me</button>
效果:
- 改变HTML内容
<p id="demo">JavaScript 能改变 HTML 元素的内容。</p> <script> function myFunction() { x=document.getElementById("demo"); // 找到元素 x.innerHTML="Hello JavaScript!"; // 改变内容 } </script> <button type="button" onclick="myFunction()">Click me</button>
点击前:
点击后:
- 改变HTML图像
<script> function changeImage() { element=document.getElementById('myimage');
if (element.src.match("bulbon")) { element.src="bulboff.gif"; } else { element.src="bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="bulboff.gif">
点击前:
点击后:
- 改变HTML图像
<p id="demo">JavaScript 能改变 HTML 元素的样式。</p> <script> function myFunction() { x=document.getElementById("demo") // 找到元素 x.style.color="#ff0000"; // 改变样式 } </script> <button type="button" onclick="myFunction()">Click me</button>
点击前:
点击后:
- 验证输入
<input id="demo" type="text"> <script> function myFunction() { var x=document.getElementById("demo").value;
if(x==""||isNaN(x)) { alert("Not Numeric"); } } </script> <button type="button" onclick="myFunction()">Click me</button>