javascript快速入门

---

一、javascript

1.特征

• 无需编译，直接被浏览器解释执行
• 无法单独运行，必须嵌入到HTML代码中
• 执行过程由上到下依次执行

2.注意

• 没有访问系统文件的权限（安全）
• 因为无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程
• javascript与java没有任何关系

3.javascript的组成

• ECMAScript（核心）：规定了js的语法和基本对象
• DOM 文档对象模型：处理网页内容的方法和接口
• BOM 浏览器对象模型：与浏览器交互的方法和接口

4.javascript的引入方式

• 内部脚本

<script>  
		代码
</script>

• 外部引入

<script src=".js文件路径"></script>

外部引入时script标签内部不能写代码，写了也不会执行

通常script标签放在body结束语前，这样可以保证html优先展示，最后加载脚本语言，增强用户体验。当然script标签可以放在任何位置。

二.基本语法

• 注释:

单行注释

//单行注释

多行注释

/*
多行注释
*/

1.变量

• 变量的声明 var 变量名
• 变量的声明与赋值：var 变量=值
• 注意事项：
  1.变量必须以字母或下划线开头，中间可以是数字、字符、或下划线
  2.变量不能包含空格等符号
  3.不能使用关键字作为变量名
  4.严格区分大小写

2.基本数据类型

注意与java的区别

• string 字符串类型：单引号和双引号都是字符串，javascript中没有字符
• boolean 布尔类型：固定值为frue、false
• number 数字类型： 任意数字
• null 空，一个占位符
• undefined 未定义类型。该类只有一个固定值，即undefined，表明变量声明但是没有赋值

因为undefined是从null中派生出来的，所以undefined==null。
java是强类型语言，javascript是弱类型语言。在javascript中一个变量可以被不同类型的数据赋值

var s=1;  //赋值给数字
s="123"  //赋值给字符串

当不知道变量是什么类型时，可以使用typeof运算符来判别：

• 当是undefined类型返回undefined
• 当是string类型时返回string
• 当是number类型时返回number
• 当是boolean类型时返回boolean
• 当是一种引用类型或null时，返回object

3.引用数据类型

引用类型通常叫类，但是javascript中不存在编译过程，所以没有类的概念，所以处理的引用数据类型都是对象

标准创建方式：

var str=new String()  //和java相同
var str=new String     //js独有方式

4.运算符

• 比较运算符：
  == 逻辑等，仅仅对比值
  ===全等，对比值和类型

• 逻辑运算符
  && || ！
  javascript逻辑运算符没有&

5.正则对象

• RegExp的对象创建方式
  1.var reg=new RegExp(“表达式”) 该方法基本不用
  2.var reg=/^表达式$/ 直接量，开发中常用

直接量中存在边界，^代表开始，$代表结束
直接量方式中正则是表达式，不是字符串，别用引号

• 常用方法test()

var reg=/^\s$/; //0~多个空格
var flag=reg.test("  "); //true
var flag2=reg.test(" a  ");  //false

对于直接量来说，只有当全部都满足字符匹配，才返回true；检查严格，适用于表单校验

var reg=/\s+/   //1~多个空格
var flag=reg.test(" ");   //true
var flag2=reg.test(" a ");   //true

对于普通形式来说，只要存在正则字符，就返回true；适用于字符串查找，替换；

6.js数组

• 创建数组的4中方法

var arr=[1,2,3];

var arr=new Array();//数组默认长度为0


var arr=new Array(4);//创建一个长度为4的数组，初始每个为undefined

var arr=new Array(1,2); // 创建（1,2）数组

• javascript数组的注意事项

js数组可以看做java中的arrayList集合；数组中的每一个元素没有类型限制，可以存放任意类型；数组的长度可变

//没有类型限制
var arr=[1,"2",frue,null,undefined];

//长度可变
var arr=new Array(5);
arr[10]=1;    // 不会报错，arr的长度变为11；

• js数组常用的方法

var arr=[1,"2"]
//length()  设置或返回数组的元素数目
var len=arr.length();    //2

//join()  把数组的所有元素放入一个字符串，元素通过指定分隔符进行分隔
var str=arr.join("+");   //1+2    

//pop()  删除并返回数组的最后一个元素
var s=arr.pop();  // “2”

//push()     向数组的末尾添加一个或多个元素，并返回新数组的长度
var len=arr.push("1",frue);   //4

//reverse()   颠倒数组中的元素
var narr=arr.reverse();  //["2",1]

其中reverse()比较特殊，它是将下标进行颠倒，同时原数组也进行了颠倒

7.全局方法

可以理解为不需要隐式参数就可以使用的方法

• eval()函数可以计算某个字符串，并执行其中的javascript代码

eval("var x=10;");
alert(x);

• encodeURI() 把字符串编码为URI
• decodeURI() 解码某个编码的URI

var str="http://www.baidu.com//开始"；
var str1=encodeURI(str);   //编码
var str2=decodeURI(str1);  //解码

URI是统一资源标识符，表示资源的详细名称，例如/a.html
URL是统一资源定位器，表示资源的网络位置，例如： http://www.baidu.com;

• parseInt() 解析一个字符串并返回整数
• parseFloat() 解析一个字符串并返回浮点数

parseInt("13.9");//    13
parsetInt("12a.5")   //   12
parseInt("a12");    //NaN

如果字符串的某个字符从字面上无法转为数字，那么从该字符停止转换，仅返回前面正确的转换值
如果字符串的第一个字符就无法从字面值上转换成数字，那么将停止转换，返回NaN（一个数字类型的标识符，表示不是一个正确的数字）

8.自定义函数

函数定义格式：
function 方法名（参数列表）{
函数体
}

1.javascript函数一定有返回值，值即类型根据return决定，如果没有return具体的值，则返回undefined
2.不存在方法重载，只有方法覆盖，最后定义的函数覆盖之前的函数
3.因为javascript不存在重载，所以仅根据方法名来调用函数，即使实参与函数的形式参数不匹配，也不会影响正常调用

function getSum(a,b){
		return a+b;   //也可以不写return，返回undefined
}

9.自定义对象

• function构造函数，javascript引用数据类型都是对象，而对象在javascript中可以用函数表示

//无形参格式
function 对象名(){
		函数体
}

函数构造法是声明一个对象，还需要new出这个对象，下面是具体代码：

function Person(){
	this.name="xiaoming";    //在函数内部定义了对象属性并赋值
	this.age=18;
}

function Person2(a,b){
	this.name=a;                 //通过传递参数对对象赋值
	this.age=b;
}


//创建对象
var p=new Person();      
var p2=new Person2("xiaozhang",18);

//赋值或修改对象属性
p.name="hong";
p2.age=90;

//增加属性
p.sex="male";

• 对象直接量
  开发中可以使用一种简单的直接创建自定义的javascript对象，这种方式称为“对象直接量”（可以类比正则对象）
  格式：

var 对象名={属性名1：“属性值1”，属性名2：“属性值2”，属性名3：“属性值3”}
该方法直接创建出实例对象，无需构造函数，无需new创建示实例对象，直接使用即可

var p={name="xiaoli",age=18}  //直接创建实例对象，无需用new

//可以对属性进行增添或修改
p.name="xiaohong";
p.sex="female";

三.BOM对象

BOM（Browser Object Model）浏览器对象模型
作用：用来执行浏览器的相关操作（例如：浏览器地址、弹出消息等）
一般情况下，window代码BOM对象
window是javascript的内置对象，使用window对象调用方法可以省略window不写

• alert()
  警告框，弹出警告消息

• confirm()
  确认框，用于告知用户信息并收集用户先择

var temp=confirm("是否确定？");// true or false

• setlnterval()
  启动循环定时器 setlnterval(“调用方法”，毫秒值),返回值为当前循环定时器的id
• clearlnterval()
  关闭循环定时器clearlnterval(循环定时器的id)；

function run(){
	alert("run");
	clearlnterval(id);   //  关闭循环定时器
}

var id=setlnterval("run()",1000);  //每隔1000ms执行一次run()

• setTimeout()
  启动一次性循环定时器
• clearTimeout()
  关闭一次性循环定时器

function run(){
	alert("run");
}
var id=setTimeout("run()",1000);
clearTimeout(id);

• location对象

location对象包含浏览器、地址栏的信息

常用属性herf：设置或返回完整的URL

var str=loction.hert;  //返回当前地址信息
lcation.herf="http://www.baidu.com"; //立即跳转到百度网页

四.DOM

DOM(Document Object Model) 文档对象类型
文档：标记型文档（HTML等）
DOM是标记文档中所有内容（标签、文本、属性）都封装成对象。通过操作DOM对象的属性或方法，来达到操作或改变HTML展示效果的目的。

1.DOM树

<html>
<head>
<title>
	标题
</title>
</head>
<body>
	<a herf="" >我的链接</a>
	<h1>标题</h1>
</body>
</html>

对应的DOM如下：

根据上图：

1. 给个标签会被加载到DOM树上的一个元素节点对象
2. 每个标签属性会被加载到DOM树上的一个属性节点对象
3. 每个标签的内容会被加载到DOM树上的一个文本节点对象
4. 整个DOM树，是一个文档节点对象，即DOM对象
5. 一个HTML文档加载到内存中就会形成一个DOM对象

2.获取元素对象的四种方式

<html>
<head>
<title>
	标题
</title>
</head>
<body>
	<a herf="" id=""id1 class="class1" >我的链接</a>
	<h1 value="value1">标题</h1>
	<h2 value="value1"><h2>

<script></script>
</body>
</html>

• getElementById()
  通过id获取元素对象，如果找不到，则返回null

var c=document.getElementById("id1");//获取<a>元素对象

• getElementsByName()
  通过元素的value属性获取符合要求的所有元素存放在数组中

var c=document.getElementsByName("value1"); //[<h1>对象，<h2>对象]

• getElementsByTagName()
  通过元素名获取元素对象数组

var c=document.getElementsByTagName("h1");//[<h1>]

• getElementsByClassName()
  通过class属性获取元素对象

var c=document.getElementsByClassName("class1");//[<a>]

注意：

1. 以上获取多个对象的方法，如果找不到元素，则返回空数组；获取一个对象的找不到元素返回null
2. 获取某个元素节点对象，必须保证元素节点对象先被加载到内存中，及

3.元素对象常见属性

通过DOM方法获取的对象元素，可以通过属性进行修改等

• value 获取或更改元素的value值
• className 获取或更改class属性值

var c=document.getElementById("id1");
c.value="newValue";
c.className="newClass";

• checked
  属性值为true勾选 、false未勾选

<input type="checkbox" id="hobby"  />
<script>
	var c=document.getElementById("hobby");// 获取input对象
	alert(c.checked);  //false    默认未勾选
	
</script>

• innerHTML
  元素的文本内容

var c=document.getElementById("id1");
var str=c.innerHTML;   //获取文本内容
c.innerHTML="内容"；//修改文本内容
c.innerHTML+="追加内容"； //向文本内容追加内容

五.JS事件

通常鼠标或热键的动作我们称之为事件
点击、表单提交、值发生改变、鼠标移入、鼠标移除
通过JS事件，我们可以完成页面的指定特效

1.JS事件驱动机制简述

页面上的特效，我们可以理解为在js事件驱动机制下进行的

• 事件源：专门产生事件的组件
• 事件：由事件源所产生的动作或事件
• 监听器：专门处理事件源所产生的事件
• 注册\绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理。

//以下事件源为 按钮
//事件：  点击按钮事件
//监视器：  run（）方法
// 注册监听器： οnclick="run()"
<html>
<head>
<title></title>
</head>
<body>
	<input type="button" value="点击我" onclick=“run()” />
	<script>
		function run(){
				alert("已点击");
			}
	</script>
</body>
</html>

2.常见的监听事件

• 点击事件onclick
  由鼠标或热键点击元素组件时触发
• 获取焦点事件onfocus
  当小竖线获得时，即当元素组件获得焦点时触发
• 失去焦点事件onblur
  元素组件失去焦点时触发
• 加载完毕事件onload
  当元素组件加载完毕后触发
• 表单提交事件onsubmit
  表单的提交按钮被点击时触发

该事件需要返回boolean类型的值来执行 提交/阻止 表单数据的操作
事件得到true，提交表单数据
事件得到false，阻止表单数据提交

• 键位弹起事件onkeyup
  在组合中输入某些内容时，键位谈起时触发事件
• 鼠标移入事件onmouseover
• 鼠标移出事件onmouseout

3.JS事件的两种绑定方式

• 句柄绑定 将事件以元素属性的方式写到标签内部，进而绑定对应的函数

<script>
	function run1(str){
		alert(str);
	}
	function run2(){
		alert();
}
	function run3(obj){
	alert(obj.value)
	}
</script>
<body>
<input type="text" value="1111" onclick="run("nihao")"/> //绑定无参函数
<input type="text" value="2222" onclick="run1()"/>//绑定有参函数
<input type="text" value="3333" onclick="run(this)"/>//绑定对象函数

<input type="text" value="1111" οnclick="run1(),run2(),run3()/>//句柄方式绑定多个函数
</body>

事件句柄绑定方式
优点：1.开发快捷 2.传参方面 3.可以绑定多个参数
缺点：JS和HTML代码高度柔和在一起，不利于多部门的项目开发

• DOM绑定方式 对象.事件属性

function run(){
	alert("弹窗")；
}
window.onload=run1();  
window.onload=function(){run1();run2()}   //匿名函数


通过匿名函数可以绑定多个函数
var t=document.getElementById("id1");
t.onclick=function(){
	run1();run2();
}
 

DOM绑定方式
优点：使用HTML代码和JS代码完全分离
缺点：1.不能传递参数 解决方案：匿名函数可以 2.一个事件只能绑定一个函数 解决方案：匿名函数内部可以绑定多个函数。