JavaScript学习笔记：一些全局函数和触发器的整理

开始写JavaScript吧

• JavaScript 即使有一行错了还是可以运行，比较坑，但可以借助chrome浏览器的F12->source看到出错的地方，还好。

• 所有JavaScript代码都要放在html文件下的 标签之间，否则浏览器是不会解释的。

• 也可以在外部写好JavaScript，然后导入到html文件:

  <script type="text/javascript" src="js/out.js"></script>
  

• 被导入的JavaScript文件就跟在script标签下写的一样，有执行语句就马上执行，只有方法就先不会执行。

• JavaScript在html文件中是从上而下执行的，所以当一个html元素处于JavaScript标签下面，执行JavaScript时是不能操作这个元素的。因为执行时还没载入这个元素。

• chrome中的调试模式跟IDEA差不多。

• 点入document，打开structre页面，可以看到很多onXxx()方法，慢慢试呗。

• control+j 可以快速插入标签。

JavaScript变量的特点

• JavaScript是弱类型语言，一个变量可以赋值为不同的数据类型，统统用var来声明就行。而且重复声明也没有问题！

  var i=2; //ok
  var i="is it ok？"; //虽然被重复声明了也没关系！
  var i=null;  //还是ok的
  

• JavaScript变量的生命周期一般是全局的，声明了就之后都可以用，当然要在scripte标签中用:

  <script>
      var i =10;
  </script>
  <script>
       document.write(i + "
  "); //10
   </script>
  

• 只有一种情况下变量生命周期是局部的：在方法内，并且声明时加上了var

  <script>
  function fun(){
  	var i=20;	//出了这个方法就用不了了。
  }
  </script>
  

  • 总之如果不是在方法内的，尽量还是加上var比较好，在方法内的变量则视情况加var。

• JavaScript的5种数据类型，通过typeOf(变量名) 方法可以得到变量类型的String：

  类型	示例	转换结果
  Number	3/3.14	隐：数字本身，显：数字本身
  Boolean	true/false	隐 / 显 ：true为1，false为0
  String	“abc”,“12a”	隐：全数字得数字，否则得NAN 显："123"得123，"23bbb"得23，"bbb"得NAN
  Object	new Date() / null	隐 / 显：null得0 ， 其他得NAN ps:有一些object能转成number的*(像Date)*，但我找不到规律
  undefined	var i;	都得NAN

• 当执行四则运算、比较运算时，所有变量都会被隐式转换成Number，再进行计算和比较。最后返回一个Number或者Boolean

• 只有两种情况不会进行隐式转换

  • String/object + 其他类型 会把String / Object对象 与另一个类型拼接成一个String，而不会计算。（所以可以看做所有类型都可以转成String)
  • String >、<、== String 会把两个String按照字符串的逻辑进行比较，而不会变成数字再比较。

• 隐式转换的结果如上表所示，当NAN参与四则运算，只会得到NAN。NAN参与逻辑比较，永远获得false。

JavaScript函数的特点

JavaScript的函数类似java中的方法，但有点不一样。

两种定义函数的方法：

// 命名函数定义：
founction afun(a,b){
    var sum=a+b;
    return sum;
}
// 不用声明返回值类型，参数不用加类型
var sum=afun(2,3);
// 可以用名字来调用

// 匿名函数定义：
var afun=function(a,b){
    var multi = a*b;
    return multi;
}
var mutlti=afun(2,3);
// 一般不会用变量装着的，一般直接赋值给HTMLElement的onXxx属性。

• 在 中定义函数，如果不调用，是永远不会执行的。

  • 就像是局部内部类，只是定义局部内部类，而不new，以及执行方法，是没用的。

• afun(3,5); 这种形式才叫调用，有function开头的都属于定义而不是调用。

• 函数能直接用之前声明的变量。

• 函数的局部变量如果不加var，也是会变成全局的。而函数外部的所有变量，无论是否加var，都是全局的。

• JavaScript的函数没有重载，后面的函数会覆盖前面的同名函数，调用时传入的实参和函数的形参没有关系的，那只是一个快捷方式。

• 所有传入的变量，无论是否在形参中有声明，统一都放在一个隐形变量arguments[]中,我们可以直接arguments[0] 这样拿到参数，也可以通过形参来获得参数。一样的。

  • arguments[]是一个数组，javaScript的数组是没有类型的，啥都能传进去。
  • 如果数组元素没有传入任何参数就被访问，会获得undefined。

• 我们可以把JavaScript中的函数看成是接受可变参数的方法:

function sum(Object... arguments){
    //其他方法
}

JavaScript的语法

Switch的另一种功能

• switch 在JavaScript中有另一种用法：

  switch(true){
      case 判断语句1:
          执行语句;
          break;
      case 判断语句2:
          执行语句;
          break;
      default:
          执行语句;
          break;
  }
  

  可以用来代替if(){}else if(){} 算是JavaScript为数不多的比java优胜的地方了。

一些全局函数

全局函数就像是java的库静态方法，直接调用就可以。现有的全局函数如下：

• Number parseInt(String) 显式地把String转化成int，一开始就没有数字则返回NAN，否则能转化多少算多少。

  • Number parseFloat(String) 也是一样，只是转成double而已

• boolean isNan(number) 接收一个number类型，返回他是否为NAN，如果传入其他类型，则会隐式转换成number再判断

• String window.prompt("提示信息","默认值") 让浏览器弹出个框，接受String信息，点取消会返回Null，window可以省略。非常阻碍用户体验，只在开发时用得比较多

• void window.alter("提示信息") 弹出个框，告知用户信息，要非常重要的信息才能弹这种框。

• HTMLElement|null document.getElementById(String id) 根据id获得HTML的元素，方便改变元素的属性。这是HTML和JavaScript之间的桥梁了！

  注意！要在HTMLElement下面调用这个方法，才能获得HTMLElement，否则会获得null。

• number window.setInterval(Handler handler,number time) 设置每隔一段时间执行一次handler的参数，time要求是毫秒值的。

• void document.write(String[]) 把String数组写到document中，方法可以处理数组，所以可以传入多个参数:document.write("hello"," world"," is"," ok!")

  注意！这个方法会覆盖我们自己写的html的。

用事件来驱动函数：

函数一般是用事件来驱动的。有两种把函数跟事件绑定在一起的方法：

<input type="button" id="btn" value="点我一下">
<input type="button" id="btn_2" value="再点我一下！" onclick=aa(this)>
<script>
    // 方法1：匿名函数绑定
    document.getElementById("btn").onclick =function (ev) {
        this.value="哎呀！";
    }

    // 方法2：命名函数绑定
    function aa(obj) {
        obj.value="ooooooo!";
    }
script>

• 通过直接把function(参数){}传给对应的触发器(onclick参数) 可以绑定，这种绑定可以送function一个指向激活function的HTMLElement的引用。还有一个触发的event作为参数。可惜只能用一次。

• 还可以在HTML中定义标签时通过函数名传给触发器。但是这次指向HTMLElement的引用要自己手动传，不会赠送的。而且不会传mouseEven作为参数。但优势是一个函数可以多次调用。

• 两种方法各有优劣，到时候自己选吧。

• 注意匿名函数绑定时，如果对应的HTMLElement还没加载，就会绑定失败的。而命名函数绑定则不会。

常用的触发器如下：

随便点进去一个这种参数，可以在GlobalEventHandlers 接口中看到更多触发器，逐个去试试吧。

• onload : 当页面或元素完成加载，就会触发赋值给该参数的函数。window.function(){}; 可以用来在页面全部加载完成后给所有元素所有绑定函数。因为只有所有元素都加载完成，window才算加载完成。

• onclick 鼠标单击

• ondbclick 鼠标双击

• onmouseover: 当元素有鼠标移入时就会触发赋值给该参数的函数。

• onmouseout 当鼠标移除。

• onfocus 得到焦点，元素被选中，或者通过table得到光标

• onblur 失去焦点，元素失去光标

• onchange 元素的内容发生改变，包括value,name等属性的内容。

  • element.innerHTML / element.innerText 可以改变子标签/子文本内容，而不是属性。
  • 只有
    标签的子元素才有value属性的，其他元素只能用这个方法改子标签/子文本内容

• 标签时不能触发事件的。

JavaScript的数组

JavaScript的数组就像是java中的集合了，但是是不限定类型的！

数组的创建：

new Array() 创建长度为0的数组

new Array(2) 创建长度为2的数组

new Array(3,5,"abc",7) 创建包括了括号元素的数组

[2,3,5,"abc",7] 同上。

数组的一些方法：

JavaScript的数组可以不同元素，可以变化长度，还有很多方法

• a1.concat(a2) 同 list_1.addall(list_2)

• a3.reverse(); 同 Collections.reverse(a3)

• a4.join(String sperator);

  • 同 String.join(String sperator,List) 但不限泛型。
  • 又像Arrays.toString(a4)但可以定义分隔符。

• a4.sort(); 同list.sort(null);

  • 他也是可以接受比较器的，但比较器是个function。