为什么学习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);
//以上就是一个基本的流程