javascipt学习笔记

1.javascript是什么?
是网景(Netscape)开发的一种与页面进行交互的编程语言
javascript程序在浏览器端执行.javascript程序可以写在.js为后缀的文件中.
Netscape Navigator Javascript
微软       IE 1           Jscript
97,ECMA指定规范ECMAScript
--引入方式
内部:
<script></script>
外部:
<script type="text/javascript" src="js文件路径"/>
2.javascript作用:
1)前端验证.
2)ajax核心技术之一.
3)与页面进行交互,生成动态效果.
4)获得浏览器的相关信息(当前浏览器是什么,分辨率等)
3.javascript的组成部分:
  1)ECMAScript:语法基础(已经标准化)
  2)DOM:文档对象模型(部分标准化)
  3)BOM:浏览器对象模型(没有标准化,但是大部分浏览器都支持window,location,history等)




4.语法基础
4.1 数据基本类型
number:数字类型
string:字符串类型
boolean：布尔类型
null：空类型
undefined： 未定义类型
注意:
1)undefined
a.定义一个变量,如果没有赋值,那么这个变量就是undefined
b.如果没有定义变量,直接使用的类型是undefined
2)null
1.null类型的值为null.typeof显示类型为object
2.javascript函数没有提供返回值,函数的返回值是null.
3)boolean
以下几种情况,boolean值为true.
a.字符串,只要不是空字符串
b.数字非0
c.对象
null,undefined为false
4)NaN :Not a Number 不是一个数字
但NaN这个值属于number类型
4.2 对象类型
Function Object String Math Array Date

 --使用变量时,javascript的特性:
  a.javascript允许定义多个重名变量,变量的值以最后的变量赋值为准.
  b.javascript允许命令结束后不写";"
  c.javascript允许定义变量不使用关键字"var",所定义的变量叫做全局变量.
  局部变量:指的是函数内部的变量,且使用"var"定义.作用域范围从声明到函数结束.
 
--Java是强数据类型语言:定义变量时,必须定义变量的类型.
  javascript是弱数据类型语言:定义变量时不须确定变量的类型,但数据本身有类型.
  4.3 运算符
  1)算术运算符 + - * / ++ -- += *= /=
  注意:
  如果在进行非"+"操作时,javascript会把字符串(只含数字)变成数字后再运算.
  parseInt()
  parseFloat() //最多精确到小数点后14位
  2)比较运算符< > >= <= != == ===
  ==:对比的是数据的值
  ===:比较数据值的同时比较数据类型
  3)逻辑运算符 && || !
  4)三目运算符 (a==b)?true:false
  5)赋值运算符 =
  4.4 流程控制
  1)条件
  if(){}else if(){}else{}
  2)循环
  do{}while();
  while(){};
 
  java:for(int i=0;i<length;i++){}    for(Object o:list){}
  java:for(var i=0;i<length;i++){}    foreach(之后讲)
  4.5 对象数据类型
  1)Function 函数 --->类似Java中的方法
  Java:定义方法
  修饰符 返回值类型 方法名(参数列表) 异常表{}
  public int add(int i,int j){return i+j;}
  js:定义函数
  a. 方式一(推荐)
  function add(i,j){return i+j;}
  add(1,2);
  b. 不推荐使用,因为函数体书写可读性不强
  var fun = new Function("i","j","return i+j;");
  fun(2,2);
  c.匿名函数
  var fun = function(i,j){return i+j;}
  fun(3,2);
  注意:
  a.js中函数没有重载的概念,函数调用优先变量的定义,之后以最后一次定义为准.(和参数列表无关)
  b.函数内部有一个隐藏对象(内置对象)
  arguments:函数被调用时所传入的参数.
  c.函数的参数可以是另一个函数变量
  function fun1(){alert("fun1");}
function fun2(){alert("fun2"); }
function fun3(f){alert("fun3");f(); }
fun3(fun1); 
  2)Object对象
  java Student类 Student student = new Student();
  js:没有类的概念
  a.通过构造函数创建对象
  var student = new Object();
student.name = "rose";
student.age = 25;
student.getName = function(){return this.name;}
//2.json创建对象(推荐)
var student = {name:"jack",age:24, getName:function(){ return this.name;} }
3)Array数组
a.通过构造函数创建数组
var arr = new Array();//new Array;
b.json创建数组
var arr = [1,2,"jack"];
--java 中数组特点:
int[] arr = new int[10];
i.长度不可变
ii.一种类型的数组只能存储同种类型的数据
--js中数组特点:
i.长度可变
ii.可以存储任意类型的数据
c.数组常用API:
length:属性,返回数组长度
toString:返回数组的字符串表示
concat():用于连接两个数组 ,返回一个新数组
join(";"):用于将数组中的各个元素以";"号连接成字符串
reverse():将数组反转.返回一个原数组,没有形成新的数组
slice(m,n):用于截取数组的一部分[m,n),并以数组形式返回

--数组作为堆栈使用
push():压入
pop():弹出
--数组作为队列使用

  shift():删除并返回数组的第一个元素

   
--数组排序
sort():以字符串方式比较

数组排序自定义：
比较数字大小：
sort(function(a,b){
return a-b;//升序
return b-a;//降序
});
比较字符长度：
sort(function(a,b){
return a.length-b.length;//升序
return b.length-a.length;//降序
});
4)String
java: String s = new String("jack");  String s = "jack";
js: var s = new String("jack"); var s = "jack"; s = 'jack';
常用API:
length属性:返回字符串的长度（java 中 Str.length()）
charAt(index):返回指定位置的字符
substring(from,to):返回子字符串（区间左闭右开）
indexOf(str):指定字符串在原字符串中第一次出现的位置，找不到返回-1
match(regex):返回匹配指定正则表达式的字符串，返回的结果是一个数组
var reg = /[0-9]+/g;//global 搜索全局
var arr = s.match(reg);

var reg = /^$/;
reg.test(tel):判断字符串tel是否按照正则表达式的规范

replace（reg,""）:替换符合正则表达式的字符串
toLowerCase()/toUpperCase():返回小写/大写形式
search（reg）:返回按照正则表达式检索的字符串位置
split(","):以","分割字符串，返回数组

练习：
var arr=["aa34bb12","cc2dd5","qq1ww33"];
找到数组arr中所有的数字，弹出框显示所有数字的升序排列
5)Date
java:java.util.Date
java.sql.Date
java.sql.Timestamp
js: var d = new Date()
d.toLocaleString():按照当前国家显示日期的习惯来显示日期

2010 10 1 13：14
显示特定某天日期
var l = Date.UTC(2010,9,1,5,15);//月份从0开始，小时加时区
var d = new Date(l);

常用API:
getYear():距离1900年相差多少年
getFullYear():实际年份
getMonth():月份（从0开始）
getTime():距离1970年的毫秒数
getDay()：星期几
getDate():当月的几号
getHours(): 时
getMinutes():分
getSeconds():秒

6)Math
处理算术运算

Math.round():四舍五入
Math.ceil():对于小数，向上升值
Math.floor():截取掉小数数据，取整数有效位
Math.random():0~1的随机数

js:foreach
a.遍历数组
for(idx in arr)//idx 迭代数组的下标值

b.遍历对象的属性
for(prop in student)//prop 迭代对象的属性名

5.事件监听
事件是可以被javascript监测到的行为。

1）一般性事件
几乎适用于全部的可显示标签
onclick：单击
ondblclick: 双击
onmouseover:鼠标移上
onmouseout: 鼠标移出
onmousedown: 鼠标左键按下
onmouseup: 鼠标左键松开

2）页面相关事件（body标签中）
onload:页面加载之后触发
onscroll:页面滚动时触发

3)表单相关事件
onblur：当前元素失去焦点时触发<input>
onchange: 用户改变域的内容<select>
onfocus:获得焦点时触发
onsubmit:提交按钮被点击时触发<form>
return true|false 为true就提交表单，反之不提交
注意：
浏览器对某些html标签产生的事件有默认的行为
比如：
表单提交数据
点击链接,会跳转到href指向的地址。
阻止链接跳转：
<a href="#|javascript:void(0);">