JS 从入门到精通

Posted 2021-02-01 himpq

javascript.输出

JavaScript向网页的输出方式是通过document对象的write方法:

document.write(something);

或者带有换行的

document.writeln(something);

JS输出内带有变量的:

d = "Hello World!";

document.write(d+"!!");

JS输出内也可以带有函数

function a(){return "Hello World!";}

document.write(a); //Hello World!

 

Javascript.函数

JS函数分为匿名函数与带有名字的函数。

匿名函数通常是自执行，有名函数是通过函数名使用。

匿名函数：

(function(){

 document.write("Hello World!");

}()); //大括号结尾的()就代表自执行

带有名字的函数:

function a(){

 document.write("Hello World!");

}

a(); //使用函数名执行

函数也可以存在一个变量当中

例如:

var a = function(){ //匿名函数

 document.write("Hello World!");

};

a();

使用变量中的函数也可以使用变量名+();来使用。

 

Javascript.变量

变量就是存放字符串或者函数、对象、数组等的容器

就好比你把字写在纸上，并且使用一个瓶子（相当于变量）来装

变量的声明:

var a;

多变量声明:

var a,b,c,d...;

变量声明（函数内）不使用var就表明他是局部变量，函数外无法访问

例如

(function(){

 a=10;

 var b=20;

}()); //a=undefined | b=20

函数内不可以这样声明：

a,b,c,d,e...;

正确为a=""; b="";...

变量的增加

如果这个变量是一个数字，可以使用++。

a=1;

a++; //2

如果是一个字符串，你想要在尾部增加:

a="Hello ";

a=a+"World!"; //Hello World!

更简单的方法:

a="Hello ";

a+="World!"; //Hello World!

变量未声明前与声明后没有赋值的值都是undefined或者null

 

Javascript.替换html中的内容

假设有一个p标签，id为abc，你想替换他的内容:

document.getElementById(‘abc‘).innerHTML=something;

使用了document对象的getElementById方法，再将innerHTML的值替换为其他的。

替换css

document.getElementById(‘abc‘).style.color=‘red‘;

将css字体颜色替换为红色

总结：

替换css:

document.getElementById(ID).style.[styleName] = [Value];

替换内容:

document.getElementById(ID).innerHTML = [Value];

 

Javascript.数字、数组、字符串

数字大家都知道，就是阿拉伯数字，而中国汉字的数字类型只能为字符串

字符串表示一段字符，比如你的习作，转移到js来就是一长段字符串。

数字也有最大，js使用了Number对象中的无限?来表示无限

数组可以分为键与值(Key=>Value)

数组的声明:

a=[];

a=new Array();//new Array(这里可以写数组的大小或内容)

a.length; //数组的长度

数组如果你不声明键名他会自动为0-...

例如

a=[‘Hello‘,‘Hi‘];//Hello键名为0，Hi键名为1

使用方法:

document.write(a[0]+a[1]); //HelloHi

当你想要知道数组里所有的变量，请使用for

for有两种形式：

1.0-数组结尾遍历法

for(i=0; i < x.length; i++){

 //x[i]代表值，i代表键名

}

这种方法只能使用于键名为数字的数组，通用方法为

for(key in x){

 //x[key]代表值，key代表键名

}

这样一来，数组就可以变为字符串

但是字符串怎么变成数字？

使用split方法！

a="1,2,3,4,5";

arr=a.split(",");//以“,”为分割线，如果分割失败则返回该字符串

成功后:[1,2,3,4,5];

变成了一个数组，如果split("");将会把字符串每一个字都分割下来

 

Javascript.对象

对象可以指任何一个事物，对象和数组一样可以存放东西，也有键与值。

比如我们经常用的document、navigator都是对象。

对象的创建:

a = new Object();

或者

a = {};

对象内可以包含函数，比如

a={

 myName : function(){

  alert("my Name is a");

 }

};

a.myName(); //my Name is a

对象内也可以包含字符串以及数组、数字、布尔值:

a={

 a:true,b:123,c:"String",d:["1","2","3"]

}; //a.a = true || a.b = 123 || a.c = "String" || d = ["1","2","3"]

访问对象内的变量使用

a[键名];

或者

a.键名

当监控是一个变量时只能使用第一种方法

你还可以通过其他方法给对象赋值:

a={};

a[‘name‘] = ‘jerry‘; //数组的赋值方法

a.name = ‘jerry‘; //第二种赋值方法

如果你想将对象化成字符串，可以使用对象JSON提供的方法:stringify

a={name:‘jerry‘,age:20};

b=JSON.stringify(a); //‘{"name":"jerry","age":20}‘

如果你想将JSON字符串化成对象，还可以使用JSON提供的方法:parse

a=‘{"name":"jerry","age":20}‘;

b=JSON.parse(a); //[Object object]

除此之外，还有一个构建对象的方法——使用函数构建

function a(name,age){

 this.name = name;

 this.age = age;

 this.say = function(){alert(‘我叫‘+this.name+‘，今年‘+this.ahe);};

}

pepole = new a("Jerry",20);

people.say(); //我叫Jerry，今年20

这个类似于IE的Ajax构建方法(new XMLHttpRequest();)

 

Javascript.Ajax

Ajax是一个...额...怎么说呢，相当于一个抓取网页内容的插件

每一个浏览器都自带Ajax

比如a.html输出“<h1>你好世界</h1>”，b.html通过Ajax抓取a.html的内容，

也会显示“<h1>你好世界</h1>”

下面来讲Ajax的用法：

因为每个浏览器构建Ajax的方法不同，所以要分两步构建

try{ //Safari，火狐等

 xmlHttp = new XMLHttpRequest();

}catch(e){ //IE构建方法，好像也有360浏览器

 try{

  xmlHttp = new ActiveXObjex(‘Msxml2.XMLHTTP‘);

 }catch(e){

  try{//新版IE

   xmlHttp = new ActiveXObject(‘Microsoft.XMLHTTP‘);

  }catch(e){alert(‘您的浏览器需要更新！ 错误：不支持AJAX的浏览器‘); return;}//实在找不到了

 }

}

现在xmlHttp对象已经创建好了，接下来是设置函数

xmlHttp.onreadystatechange = function(){ //当已经得到了信息后的反应

 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ //确认Ajax成功获取信息

  //然后就是你自己写了，返回的信息在"xmlHttp.responseText"

 }

};

xmlHttp.open(传送方式,要获取信息的链接,true);

xmlHttp.send();//发送

传送方式可以为POST或者GET

如果是链接要加http://

如果你熟知了Ajax你可以写一个在线的聊天系统

 

Javascript.计时器与倒计时

计时器: setInterval(匿名函数或者"xxx()",隔几秒执行);

计时器会返回一个专属ID，可以使用clearInterval删除计时器

例如:

function x(){

alert(‘三秒‘);

}

a = setInterval("x()",3000); //3000指的是三千毫秒，以毫秒为单位

clearInterval(a); //删除计时器

倒计时: setTimeout(匿名函数或者"xxx()",隔几秒执行);

同样，参数2也是以毫秒为单位

function s(){

 alert(‘三秒‘);

}

setTimeout(‘s()‘,3000);

//三秒后执行弹框“三秒”，只执行一次