JavaScript（JS）的简单使用
一、什么是js（javascript）？
javascript是一种脚本语言，被广泛用于web应用开发，常用来为网页添加各式各样的功能，为用户提供更加流畅的浏览效果。
javascript严格区分大小写。
前端三剑客：html+css+js
html:结构（房子）
css:样式（装修）
js:行为（动态的修改行为和样式：房子的结构和装修想改就改）
使用js的三种写法：
1、在标签内部完成（不常用）
例：（alert("弹窗内容")：出现一个弹窗）
<a href="javascript:alert(0);">点我啊！</a>
<p onclick="alert('来啦老弟！')">请点击我！</p>
2、在script标签中完成（注意：script标签可以写在html中的任意位置，但建议写在页面最底部，利于提高用户体验）
<script type="text/javascript">
alert("哈哈哈");
</script>
3、外连式（创建一个js文件，里边写的都是js代码，然后再html中引用）
html文件中引用js文件：
<!-- 因为ha.js文件和咱们这个html文件在同一文件夹，所以路径直接写src="ha.js" -->
<script type="text/javascript" src="ha.js"></script>
js文件（后缀为.js的文件）：
//js代码就写在这里，如下：
//当页面刷新就会弹窗以下弹框
window.onload=function(){
//alert()是一个弹窗
alert("欢迎您的到了！");
}
二、js的特性
1、js的数据类型
js中的数据类型只有三种：number,string,boolean
number：所有数字类型的统称。
string：字符串类型。
boolean:布尔类型（true/false）
2、特殊类型
nan：出现非数字
infinity：除数为0
undefined：未定义
null：空（必须主动赋值才会是null,没有赋值都为undefined）
3、运算符
==：代表普通比较
===：代表全等
" "和undefined表示没有值：null其实是一个值
||:或（注意：在java中，||返回的一定是boolean值，但在js中，返回的是第一个为true的值）
三、具体实例
1、js预编译
js的代码执行顺序是从上往下执行，但在代码执行之前js会事先大概扫描一遍，把所有变量的定义放到最前面(只是定义，不包括值)
<script type="text/javascript">
//js的代码执行顺序是从上往下执行
//但在代码执行之前js会事先大概扫描一遍，把所有变量的定义放到最前面(只是定义，不包括值)
var use="23";
console.debug(use);
//结果为23
var userna;
console.debug(userna);
//结果为undefined
console.debug(us);
var us;
//结果为undefined
console.debug(username);
var username="23";
//结果为undefined
console.debug(usern);
//直接报错,因为usern没定义
</script>
2、对象三步曲
1、创建对象
2、设置对象的属性和方法：添加，修改，删除
3、获取对象的属性和方法
<script type="text/javascript">
//1、创建对象
//var obj = new object();
var obj = {};
//2.设置对象的属性与方法（.和[]是一样的）
//添加属性方法一：
obj.name="小王"
obj.age =23;
obj.say = function(){
console.debug("过来呀！");
}
//添加属性方法二：
obj["name"]="小王";
obj["age"] =23;
obj["say"]= function(){
console.debug("过来呀！");
}
/*
for...in是用于循环与遍历数组/对象的
数组：key就是下标
对象：key就是对象的属性
*/
for(var key in obj){
//key是下标
//输出属性和属性类型
console.debug(obj[key],typeof obj[key]);
//如果obj对象的属性类型为方法，就输出
if(typeof obj[key] == "function"){
//输出属性
console.debug(obj[key]);
//调用对象中 的方法属性
obj[key]();
}
}
//修改（修改与添加设置写法是一样的）
obj.name="小李";
//删除某一个属性
delete obj.age;
//3.获取属性和方法
console.debug(obj.name);
console.debug(obj.age);
console.debug(obj.say);
obj.say();
</script>
3、arguments（获取到调用函数时传进去的所有参数）
js内置了很多对象（如：arguments ）： 内置对象(js自动为你准备好的)
arguments -> 每次调用方法都会在方法中创建这对象
arguments -> 伪数组(它里面装的就是这个方法的所有参数)
<script type="text/javascript">
/**
js中调用函数(方法)和参数无关
js内置了很多对象： 内置对象(js自动为你准备好的)
arguments -> 每次调用方法都会在方法中创建这对象
arguments -> 伪数组(它里面装的就是这个方法的所有参数)
*/
function add(){
//打印每次调用add方法时传的所有参数
console.debug(arguments)
var result = 0;
for(var i=0;i<arguments.length;i++){
//将传进add方法的参数全部加起来
result += arguments[i];
}
return result;
}
console.debug(add(5)); //5
console.debug(add(5,8)); //13
console.debug(add(5,8,2)); //15
console.debug(add(5,8,2,5)); //20
</script>
4、js中调用函数(方法)和参数无关
注意：调用函数和参数无关，如果出现相同名字的方法，根据js代码从上往下执行的原则，下面的方法会覆盖上面的方法。
返回值:想返回什么直接return 值 进行返回,如果没有return，自动返回undefined。
js中一切都是对象
函数就是方法，方法就是函数
函数:面向过程的说法 ；方法:面向对象的说法
<script type="text/javascript">
//一切都是对象
//函数就是方法，方法就是函数
// 函数:面向过程的说法 方法:面向对象的说法
function say(){
alert(0);
}
say(); //调用函数必须要加一个括号
var say = new function("a","b","return a+b;");
console.debug(say(4,6));
/**
注意：调用函数和参数无关，如果出现相同名字的方法，根据js代码从上往下运行原则，下面的方法会覆盖上边的方法
返回值:想返回什么直接return 值 进行返回,如果没有return，自动返回undefined
*/
function say(a,b){
alert(a+b);
}
console.debug(say(5,6));//控制台打印11
console.debug(say(5));//控制台打印nan，因为第二个参数为undefined
console.debug(say(5,6,7));//控制台打印11
say(4,6);
</script>
5、动态调用方法
使用.与[]是一个效果（就是说可以用.的都可以用[]）
<script type="text/javascript">
//我们拿一个对象的属性，使用.与[]是一个效果（就是说可以用.的都可以用[]）
console.debug(window.username);
console.debug(window["username"]);
//用[]调用方法，称为：动态调用（因为这样写方法名就可以随意更换了，但参数还在）
window["say"](5,5);
console.debug(window);
</script>
6、全局变量
window->我们在外部定义【全局变量:script标签里面，方法外面】的所有的变量以及方法都属于顶层对象，可以直接用window点出来
注意：定义的全局变量请不要使用如：name,close,onclick,onclose........作为名字，它们都是js中的关键字，使用了会把js原有的名字覆盖，会出问题。
查看js的关键字：console.debug(window); 这句代码会在浏览器控制台上打印出js中的关键字
<script type="text/javascript">
var username = "张三";
function say(a,b){
alert(a+b);
}
console.debug(window);
console.debug(username);
console.debug(window.username);
window.say(5,7);
</script>
7、对象的拷贝
<script type="text/javascript">
var obj01 = {
name:"小八戒",
age:34,
email:"xxx@qq.com"
}
var obj02 = {
name:"小悟空"
};
//遍历第一个对象，把它的所有属性交给第二个对象
for(var key in obj01){
//判断一个对象是否有这个属性
// hasownproperty()来判断是否已经存在这个属性
if(!obj02.hasownproperty(key)){
obj02[key]= obj01[key];
}
}
console.debug(obj01)
console.debug(obj02)
</script>
8、函数也是一个对象
函数也是一个对象，也可以创建属性，还可以在自己基础上再创建方法
<script type="text/javascript">
//函数也是一个对象
function say(){
alert(0);
}
//say()方法添加name,age,sex,hello()属性
say.name = "haha"; //name是一个只读属性
say.age = 5;
say.sex = true;
//创建hello()方法
say.hello = function(){
alert("hello...")
}
console.debug(say);
//调用say方法的属性hello()方法
say.hello();
</script>
9、this
this在js中是一个很重要，很常用的属性，谁调用，this就指向谁。
<script type="text/javascript">
var obj01 = {
name:"小张",
age:12
};
var obj02 ={
name:"小王",
age:45
}
//谁调用，this就指向谁
var say = function(a,b){
console.debug(a,b);
console.debug(this.name+","+this.age);
}
obj01.hello = say;
obj01.hello();
obj02.hello = say;
obj02.hello();
//改变this的指向
/**
call和apply都可以改变this的指向
call：是可变 参数方案，直接传参
apply：第二个参数必需是一个数组
*/
say.call(obj01,3,6);
say.apply(obj02,[4,6])
</script>
10、prototype
<script type="text/javascript">
/**
prototype:为原生对象扩展一个方法(按照自己需要的格式显示时间)
*/
date.prototype.format = function(){
console.debug(this)
//按照自己需要的格式显示时间
return this.getfullyear()+"-"+(this.getmonth()+1)+"-"+this.getdate();
}
var date = new date();
console.debug(date.getmonth())
console.debug(date.getfullyear())
console.debug(date.format());
</script>
11、回调函数
<script type="text/javascript">
/**
* 我们可以把一个函数当作另外一个函数的属性传过去，而传过去的这个函数我们把它称之为回调函数
*/
/*
var i = 0;
setinterval(function(){
console.debug(i++);
},1000);
*/
var i=0;
function haha(){
console.debug(i++)
}
//定时器:每过一秒把haha()函数当setinterval()函数的属性传回去再次执行
setinterval(haha,1000);
</script>
12、匿名函数
<script type="text/javascript">
/**
* 匿名函数就是一个没有名称的函数
它可以改变代码的作用域
jquery $
*/
(function(a,b){
console.debug(a+b)
})(3,9)
</script>
13、闭包
<script type="text/javascript">
//闭包，指的是语法。简单理解就是：函数中可以使用函数之外定义的变量。一种封装特性
var username ="王权富贵";
function say(){
//这里的函数之外的变量指的是username
console.debug(username);
}
//调用函数/方法
say();
</script>
14、计数器
<script type="text/javascript">
(function(){
var result = 0;
window.getres = function(){
result++;
return result;
}
})()
//让变量result的值只能通过方法修改，无法直接修改
console.debug(getres()); //1
console.debug(getres()); //2
console.debug(getres()); //3
console.debug(getres()); //4
console.debug(getres()); //5
</script>
15、事件监听
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件监听测试</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
//"click.qing":给这个点击事件取一个名叫qing
$("#mybtn").on("click.qing",function(){
console.debug("明天天晴！！！");
})
$("#mybtn").on("click.feng",function(){
console.debug("明天有风！！！");
})
$("#mybtn").on("click.guang",function(){
console.debug("明天逛街！！！");
})
//取消逛街这个方法
$("#mybtn").off("click.guang");
})
</script>
</head>
<body>
<button id="mybtn">点我有惊喜哦！！！</button>
</body>
</html>
16、jquery继承
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
var obj = {tel:"1836****000",sex:true};
var obj1 = {name:"达康书记",age:100};
var obj2 = {};
//把第一个对象的属性，交给第二个对象
//把后面的对象的属性，交给前面
$.extend(obj2,obj1,obj);
console.debug(obj2);
})
</script>
17、jquery自定义插件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义插件</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$.fn.changecolor = function(){
//.hover():鼠标移上来与移出去的事件
this.hover(
function(){
//鼠标移上来，class属性上再添加一个名字：youdiv
$(this).addclass("youdiv");
},
function(){
//鼠标移出去，class属性上添加的名字删除
$(this).removeclass("youdiv");
}
)
}
$(function(){
//调用自定义的插件
$("#mydiv").changecolor();
})
</script>
<style type="text/css">
.mydiv{
width:100px;
height:100px;
background: red;
}
.youdiv{
background: blue;
}
</style>
</head>
<body>
<div id="mydiv" class="mydiv"></div>
</body>
</html>
下一篇： ES6 入门系列 （三） 尾递归