Javascript学习笔记（持续补充更新）

前言

一.含义

JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运
行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加Web互动、加强用户体验度等。

二．JavaScript特点

松散性
JavaScript 语言核心与C、C++、Java 相似，比如条件判断、循环、运算符等。但，它却是一种松散类型的语言，也就是说，它的变量不必具有一个明确的类型。
对象属性
JavaScript 中的对象把属性名映射为任意的属性值。它的这种方式很像哈希表或关联数组，而不像C 中的结构体或者C++、Java 中的对象。
继承机制
JavaScript 中的面向对象继承机制是基于原型的，这和另外一种不太为人所知的Self 语言很像，而和C++以及Java 中的继承大不相同。

三.组成

ECMAScript:JavaScript的语法标准
DOM文档对象模型:JavaScript操作网页上的元素的API
BOM浏览器对象模型：JavaScript操作浏览器的部分功能的API，如·弹窗、前进、后退等+

语法、关键保留字及变量

变量、函数名和操作符都是区分大小写的。例如：text 和Text 表示两种不同的变量
标识符
1.第一字符必须是一个字母、下划线(_)或一个美元符号($)。2.其他字符可以是字母、下划线、美元符号或数字。3.不能把关键字、保留字、true、false 和null 作为标识符。
变量
只用var声明变量，没进行初始化，得到的值是undefined（表示未定义）
可以使用一条语句定义多个变量，只要把每个变量(初始化或者不初始化均可)用逗号分隔开即可，为了可读性，每个变量，最好另起一行，并且第二变量和第一变量对齐(PS：这
些都不是必须的)。
var box= '李炎恢',
age = 28,

height;

数据类型

5 种简单数据类型：Undefined、Null、Boolean、Number 和String。还有一种复杂数据类型——Object。内容复杂，详见pdf
1.typeof 操作符
使用typeof 来区分function 和object 是非常有必要的
2.Undefined 类型
Undefined 类型只有一个值，即特殊的undefined。在使用var 声明变量，但没有对其初始化时，这个变量的值就是undefined。
3.Null 类型
Null 类型是一个只有一个值的数据类型，即特殊的值null。它表示一个空对象引用(指针)，而typeof 操作符检测null 会返回object。
4.Boolean 类型
转型函数Boolean()属于强制性转换。而实际应用中，还有一种隐式转换
5.Number 类型
6.String 类型
字符串可以由双引号(")或单引号(')表示。
7.Object 类型
对象可以通过执行new 操作符后跟要创建的对象类型的名称来创建。var box = new Object();

函数

函数声明
function box() { //没有参数的函数
alert('只有函数被调用，我才会被之执行');
}
function box(name, age) //带参数的函数
argument对象
函数体内可以通过arguments 对象来接收传递进来的参数。
function box() {
return arguments[0]+' | '+arguments[1]; //得到每次参数的值
}
alert(box(1,2,3,4,5,6)); //传递参数
arguments 对象的length 属性可以得到参数的数量。
function box() {
return arguments.length; //得到6
}
alert(box(1,2,3,4,5,6));

我们可以利用length 这个属性，来智能的判断有多少参数，然后把参数进行合理的应用

Object 类型

var box = new Object(); //new 关键字是可以省略的
使用字面量方式    var box = {};
给对象创建方法
var box = {
‘name’:'yunyun';
run : function () { //对象中的方法
return '运行';
}
}
alert(box.run()); //调用对象中的方法,调用方法如果没有圆括号会打印代码
使用delete 删除对象属性  delete box.name;

Array类型

创建Array 类型有两种方式：第一种是new 运算符，第二种是字面量。
1.使用new 关键字创建数组
var box = new Array(); //创建了一个数组
var box = new Array(10); //创建一个包含10 个元素的数组
var box = new Array('李炎恢',28,'教师','盐城'); //创建一个数组并分配好了元素
2.使用字面量方式创建数组
var box = []; //创建一个空的数组
var box = ['李炎恢',28,'教师','盐城']; //创建包含元素的数组
3.转换方法
对象或数组都具有toLocaleString()、toLocaleString()、toString()和valueOf()方法。其中toString()和valueOf()无论重写了谁，都会返回相同的值。数组会讲每个值进行字符串形式的拼接，以逗号隔开。
如果使用join()方法，则可以使用不同的分
隔符来构建这个字符串。
var box = ['李炎恢', 28, '计算机编程'];
alert(box.join('|')); //李炎恢|28|计算机编程         1.只有js时 单引号和双引号均可，但行内式只能用单引号
        2.页内式的script标签一般放在body标签中的最后位置

输出方式：
方式一：使用alert在网页中弹出显示框，显示信息
方式二：在控制台console输出消息，一般用来调试程序
方式三：在网页中弹出输出框prompt，一般用于接收用户输入的信息
方式四：在网页中弹出提示框confirm，显示信息，该方法一般与if判断语句结合使用
书写规范和注释
1.编写js注意语法规范，一行代码结束后必须在代码后面加上；如果不写分号，浏览器会自动添加，但是会消耗一些系统资源

 2.字符串类型中，单引号和双引号必须成对出现，相同引号不能嵌套，不同引号可以嵌套

JS与DOM的关系：

     js需要解析引擎来解析。

     DOM是源代码在浏览器中解析的对象，body，div等节点树看成是一个对象。

     BOM对象：包含DOM对象，把浏览器的地址栏，历史记录和DOM等装在一个对象。

javascript引入：

    ①直接<script>标签包裹，在head和body的任意处都可以写，但一般都写在后面， 后加载

           getElementById("p")在body之前函数外面没效果，因为DOM对象还没建立

    ②外部引入：<script src="${base!}/assets/js/json2.js"></script>

js的命名 ：下划线，字母，数字，$组成，且数字不能开头

js中，拼接运算符“+”

      2+3   5

      ‘hello’+‘ ’+'world'   hello world

      2+3+4+'haha'+5+6   9haha56   一旦碰到非法数字后，后面的一律理解为拼接

js内置对象参见手册

BOM：

       浏览器window对象，是浏览器的宿主对象，供js使用

          几个常用方法： alert、confirm（很少用，一般弹出个div，其他部分变暗）、

                                  setInterval、clearInterval、setTimeout、clearTimeout

          其中小对象navigator：浏览器信息

                          location地址栏对象

                          history历史记录

                          screen屏幕对象

                          document HTML文档对象

找对象：根据id、标签名，类名，名字来找

           用id查询，返回值是“对象”

           用标签来查询，返回值是“对象的集合”，即使只找到一个对象，也包装成对象集合返回

           对于表单元素，可以用name来查询，返回值是对象集合

           按照类名查找，返回对象集合。

           获得子节点用children属性   获取父节点parentNode属性

普通属性可以通过对象.标签属性来访问

          绝大多数的属性都是一一对应的，但是class属性 要通过 obj.className来获得

CSS属性通过对象.style属性.来访问

           如果CSS中的属性带有横线，如border-top-style，则把横线去掉，横线后的字母大写

获取style标签里的属性

     getComputedStyle(obj,null）[attr]  (可以百度到兼容浏览器的三元运算符表示法)

     这只是获取属性，那么真正改属性时还是要用，div.style.属性

节点的操作

    删除对象：①找到对象②找到父对象③ parentChild.removeChild(子对象)

                var  li= document.getElementsByTagName("li");
 		var lastli = li[li.length-1];
 		lastli.parentNode.removeChild(lastli);}

  创建节点：①创建节点②找到父对象parentobj③父对象添加子节点

                var li = document.createElement("li");
 		var text = document.createTextNode("添加啦");
 		li.appendChild(text);
 		document.getElementsByTagName("ul")[0].appendChild(li);

暴力操作节点
  innerHTML，代表节点内的内容，能读能写

                var ul = document.getElementsByTagName("ul")[0];
   		ul.innerHTML+='<li>春</li>';

联动案例：

    function ch(){
        var area=[['昌平',['朝阳']],['合肥','淮南']];
         var sel = document.getElementById("prov");
         var city=document.getElementById("city");
         var opt=" ";
         for(var i=0;i<area[sel.value].length;i++){
              opt+="<option value='"+i+"'>"+area[sel.value][i]+"<option>";
              
         }
         city.innerHTML=opt;
    }

定时器：

  window.setTimeOut("语句",毫秒),指定毫秒后执行一次语句

  window.setInterval("语句",毫秒),每毫秒执行一次语句

取消定时器

       clearInterval  clearTimeOut

事件：onclick点击 omfocus获得焦点  onblur失去焦点  onmouseover 鼠标经过 onsubmit（form表单事件） onsubimt="return submit()" 表单内容不会出现在地址栏了

            onload页面加载完毕，这些事件用在js中可以表示成对象的属性， obj.οnlοad=fun1;(这里没有括号，有括号就变成了获取函数的返回值)