JS学习笔记（一） 概述

　　参考资料：

　　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>

 

posted @ 2015-09-04 16:51  motein  阅读(232)  评论(0)  编辑  收藏  举报