JavaScript入门指南---（二）、创建脚本

原创文章，转载请注明出处：http://blog.youkuaiyun.com/android_zyf/article/details/62889848

一,在HTML中添加JS代码

　1. 将JS语句直接包含在HTML文件中,写在<script>标签中.

<script>
  //JS语句
</script>

　2. 将JS代码保存到单独的文件中(helloJS.js),然后利用HTML文件的<script>标签中的src(源)属性,把这个文件包含在页面中(HTML文件).

<script src='helloJS.js'>

</script>

　3. 如果.js文件与调用者(HTML文件)不在同一个文件夹中,那么需要使用相对或绝对路径.

<!-- 绝对路径真特么是绝对路径啊.... -->
<script src="/Users/zyf/Desktop/AtomProject/ProjectAndNotes/JS/第二章创建脚本/js/helloJS.js"></script>


<!-- 即使外部js文件的后缀名不是.js,也不会妨碍到浏览器,不管是什么后缀名,浏览器都会把里面的内容解释成js代码 -->
<!-- 但是规范就是将js文件的后缀名写为.js -->
<script src="/Users/zyf/Desktop/AtomProject/ProjectAndNotes/JS/第二章创建脚本/js/helloXX.xx"></script>

　4. 将JavaScript代码保存到单独的文件:
　　* 提高HTML文档代码的可读性,使得HTML代码易于维护.
　　* 能够提升一丢丢性能.浏览器会将文件缓存,当前页面或其他页面再次需要使用这个文件时可以直接从内存中读取.

　5. 注意:在.js文件中不能包含<script>标签,也不能有任何HTML标签,只能是纯粹的JS代码.
　6. 注意:JS代码既可以放在body标签中,也可以放在head标签中,一般情况下,是将js代码放在head标签中,这样能让HTML文档中的其他部分调用js中的函数.

二,JavaScript语句

　JavaScript程序(脚本)是由一些单独的指令组成的,这些指令被称为语句.
　规范格式:
　　　一行书写一条语句,并且用分号表示语句结束.
　　　语句1;
　　　语句2;
　代码注释……这就不提了….
　不过需要注意的是,一般不在js代码中使用<– 注释内容 –>这种格式.
　注:注释会增加JS源文件的大小,也就会对页面的加载时间产生一丢丢丢丢的影响,如果想要消除这种影响,可以清除JS中的所有注释,形成”运行”版本,用于实际的站点.

三,变量

　* js中变量就是一种容器,通过变量保存特定的数据.
　* 数据可以具有多种形式:整数,小数,字符串或其他数据类型.
　* 变量可以用任何方式进行命名(但是一般只是用字母,数字,美元符号$,下划线_).
　* 符合驼峰结构就可以了.

window.alert("我是外部JS文件helloJS.js中的内容");
// 将110这个整数,保存到myNumber这个变量中
myNumber=110;
// 声明urNumber变量,并将119这个值赋值给urNumber
var urNumber = 119;
// 可以看到字符串"无敌"被赋值给了urName变量
// 也就是说var只是在声明一个容器,但是容器里要装什么,它是不管的
var urName = "无敌";
// 再次对urNumber赋值
urNumber = 120;
// 通过对话框的形式,显示urName的值
window.alert(urName);

四,操作符

　1. 算术操作符: 加减乘除,自加1,自减1,与java的一样.
　2. 操作符优先级:1+2*3=7,先乘除再加减,有括号就括号有限,基本就够了
　3. 对字符串使用操作符”+”:

 "abc" + "ab" = "abcab";     
 很简单可以理解,就是对字符串做了一个拼接的操作.    
 var a = "1111";     
 var b = "2222";     
 var c = a + b;    
 结果c是等于:"11112222"

五,捕获鼠标事件

　为页面增加与用户的交互是JavaScript的基本功能一直,js中使用”事件处理器”来处理事件.

onClick事件处理器

在HTML中,给元素添加一个属性:
οnclick=”把js语句写在这里”
当该元素被点击时,会执行对应的js语句
这就是Android初级阶段设置监听时使用的方式:
在xml文件中,设置button的onclick属性为一个方法,然后在java代码中按照相应格式创建同名方法,实现点击监听.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>事件处理器示例</title>
  </head>
  <body>

    <!-- 注意,在分号中的括号中要使用单引号,这样能和外面的双引号区分开 -->
    <!-- 否则,都用双引号的话,是不好使的,无法识别的 -->
    <input type="button" onclick="alert('yes ! u has clicked this button.')"
    value="我是按钮上的文字"/>

  </body>
</html>

注意:该事件处理器为onClick,但是这里在HTML中给元素设置属性时使用的确实onclick.这是因为HTML是不区分大小写的,但是XHTML是区分大小写的,并且要求全部的HTML元素及属性名称都使用小写字母

onMouseOver和onMouseOut事件处理器

当鼠标进入某一个元素占据的区域时,会触发onMouseOver事件.
当鼠标离开某一个元素占据的区域时,会触发onMouseOut事件.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>事件处理器示例</title>
  </head>
  <body>

    <!-- 注意,在分号中的括号中要使用单引号,这样能和外面的双引号区分开 -->
    <!-- 否则,都用双引号的话,是不好使的,无法识别的 -->
    <input type="button" onclick="alert('yes ! u has clicked this button.')"
    value="我是按钮上的文字"/>

    <img src="girl.jpg" alt="下载失败时显示的提示文本"
    onMouseOver="alert('u entered the image')"
    onmouseout="alert('u out the image')"/>

  </body>
</html>

this关键字

　在java中,this关键之指代的是本类对象.
　在JavaScript中,this有多种使用方式.下面先简单介绍一种.
　做一个效果演示,当鼠标进入图像时,修改img显示的图片,鼠标移除时,再将显示的图片改回来.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>修改图片的示例</title>
  </head>
  <body>
    <img src="girl.jpg" onmouseover="this.src='dog.jpg'" onmouseout="this.src='girl.jpg'"  />

  </body>
</html>

* 当事件处理器是通过HTML元素的属性(onclick或者onmouseover等)添加到页面时,其中使用的this是指HTML元素本身.
* 这里也就是指的这个img标签,this.src指的就是这个img标签的src属性.

注意:
* 空格,制表符,空行等空白内容在JS中是被忽略的,但是可以用这些空白来调整代码布局,使代码更有层次性,可读性更好.
* 当使用<script>标签引用外部.js文件时,就不能再在该标签中包含JS语句了,并且 必须为空 .
* 可以根据需要使用多个<script>标签.