JavaScript学习小结

为什么学习js

前端之大体框架

JavaScript基础
变量

函数
lambda表达式

generate

分支条件
if else

switch case

循环

string 数组 set 对象

正则表达式

JSON

对象深入

继承

操作DOM

查询节点

创建节点

插入节点

更改节点的属性

AJAX

为什么学习js

作为一个JavaWeb程序员，不会前端简直寸步难行，不说以后工作和其他人的交流问题，单说学习JavaWeb，你不得做个小网站啥的，如果不会前端界面简直不要太丑。综上所述前端必须要学，不说非常擅长，最起码要了解，要能自己撸出简单的界面效果。所以本文就是这样一个定位，不求精通，只求了解。

前端之大体框架

一个牛逼的页面，需要有骨架（HTML），衣服（CSS），以及肌肉（JavaScript）。前端的基础就是这些。

JavaScript基础

html以及css先暂且放到一边，以后再表。且说这js，Brendan Eich这位大犇花了一周完成的，虽说Eich功力深厚，但是一周时间做出来的产品还是各种奇葩问题的，在此先打个预防针，希望下面遇到的时候不要太骂娘。另外下面的所有代码都是在Chrome上，或者用Nodejs测试的

变量

js是一个动态类型的语言，所以定义变量的时候不需要指定类型。

var name="dhairoot"; //这样就定义了一个string类型的name，并且他的值为dhairoot
age = 12;//定义了一个int类型的全局变量，他的类型为age

函数

函数的定义：

//一个标准的函数
function fun(arg1,arg2){

}

var fun = function(arg1,arg2){};//定义一个匿名函数，把函数赋值给fun
function(arg1,arg2){}(arg1,arg2); //定义一个匿名函数，并且立即执行

函数的参数比较奇特，你可以定义的时候指定两个参数，但是调用的时候使用三个参数，或者一个参数，也就是说可以多于，也可以少于。

function fun(arg1,arg2,...rest){
//这个rest代表了多余的参数
//函数内部还可以使用arguments这个数组来获取全部的参数
}

另外需要关注的就是函数的返回值，函数默认返回值（ps:就是没有制定return语句）是undefined,指定了return就会返回所指定的类型。函数体的声明中是不体现返回值的

最后要知道函数也是一个对象，函数也可以当做一个参数传入到另外一个变量函数中，也可以作为返回值return回来的。

lambda表达式

lambda表达式就是简化版的函数,格式如下

(arg1,arg2)=>{}

//如果只有一个参数的时候可以省略参数外边的括号
arg=>{}
//函数体只有一句话的时候可以省略函数体外面的大括号
x=>x*x

一些例子：

var fun = (a,b)=>{
if(a>0 && b>0){
return a-b;
}else{
return b-a;
}
};
alert(fun(12,43));

generate

分支条件

(if else)

if(condition){
//todo
}else{
//todo
}

if(conditionA){

}else if(conditionB){

}else{

}

需要注意的是 == 和 ===的区别

== 在比较是否相等之前如果不是同一类型，首先会把两边转化为同一个类型然后比较

=== 直接比较，不是同一个类型就不相等

(switch case)

和Java的switch case完全一样

循环

js中有很多循环

for(var i=0;i<10;i++){}
//循环之后还可以访问到i
for(let j = 0;j<10;j++){}
//循环之后访问不到j,这种循环和Java中的是一致的
var array = [1,2,3,4,'dhairoot'];
for(var item in  array){}
//这种循环访问到的是属性，而不是属性值，数组的属性是下表，所以这种循环的item会是0 1 2 3 4 ，而不是 1 2 3 4 'dhairoot'
//而且这种使用var来声明的item在结束for循环之后还是可以被访问到
for(let item of array){}
//for of这种循环才是真正的访问数组的内容
//并且let声明的item在结束之后不可已被访问到

//另外一中循环 forEach
array.forEach(function(value,key,itself){

});

while(){}
do{}while()
//和Java一致

string 数组 set 对象

string对象，以及常用方法

方法名	描述
toUpperCase	转为大写
toLowerCase	转为小写
indexOf	查询某个字符串的位置
substring	截取子串

string对象可以用 + 连接

var str_1 = "hello ":
var str_2 = "world!";
var str = str_1+str_1;

模板string ：

var name = "dhairoot";
var age = 18;
var str = `我的名字是：${name},我今年${age}岁`;//当运行时age name改变了，并不会影响str

正则表达式

正则表达式用 /正则表达式/ 表达

var regexp = /(\d+)/;
regexp.test('123'); // true
regexp.exec('123'); // 匹配组

JSON

var obj = {
'name':'dhairoot',
'age':18,
'job':'Programmer'
};
var str = JSON.stringify(obj);//这样就把一个对象JSON化了
var ano_obj = JSON.parse(str);//这样就把一个json字符串转化为一个对象了

//更多高级用法自己google

对象深入

//这就是一个对象，是的就是这么简单粗暴
var obj = {
'name':'
'dhairoot',
'age':18,
'job':'Programmer'
};

//还可以用函数来定义类
function Student(){
this.name="dhairoot";
this.age = 18;
this.job="Programmer";
//other code
}
var stu = new Student();

function Person(){
this.name="tom";
this.age=18;
this.say=function(){
return function(){
console.log(this.age);
};
}
}

var person = new Person();
person.say()();//并不能正确的输出18，为什么呢，因为闭包里面的this已经不再指向person了。
//解决方法如下
/*
function Person(){
this.name="tom";
this.age=18;
this.say=function(){
var that =this;
return function(){
console.log(that.age);
};
}
}
*/

继承

//todo

操作DOM

操作DOM主要就是，怎么查询到节点，怎么创建节点，怎么更改节点的属性。

查询节点

方法	简介
document.getElementById()	返回的是一个节点对象
document.getElementByTagName()	返回的是一个HTMMLCollection
documment.getElementByClassName()	返回的也是一个HTMLCollection
document.querySelector()	返回一个节点对象
document.querySelectorAll()	返回一个NodeList对象

创建节点

document.createElement(“tag name”)

插入节点

可以直接设置该节点的innerHTML，写html代码

也可以创建一个节点，然后使用如下方法

方法名	描述
parentElement.appendChild(newNode)	添加节点
parentElement.insertBefore(newNode,referenceNode)	插入到referenceNode之前

更改节点的属性

想要动态更改css属性可以直接更改这个节点的style：

var node = documment.getElementById("#id");
node.style.fontSize="24px";
node.style.backgroundColor="#fff";
//...

AJAX

XMLHttpRequest

var request = new XMLHttpRequest();
request.onreadystatechange=function(){}
request.open("GET","URL",true/false);// true代表异步
request.setContentHeader("key","value");
request.send(null);
//以上就是一个基本的流程