JS 基础知识大全

1.通过javascript向文档中输出文本 
document是javascript的内置对象,代表浏览器的文档部分
document.write("Hello Javascript"); 向文档写入字符串

2.javascript都是放在script标签中的,一旦加载,就会执行 
javascript顺序执行,如果有多段script代码,会按照从上到下,顺序执行 
javascript有两种注释方式 :
单行注释 //
多行注释

3. JavaScript  调试办法
a.alert进行调试
b.使用firefox 
c.console.log() ,console.log() 只会把信息输出在console里,而不会影响用户的使用

4.基本数据类型
undefine,Boolean,Number,String,null 
undefine         声明了但未赋值        
Boolean         布尔,Boolean变量有两种值,分别是true或者false 
Number         数字,javascript中的Number可以表示十进制,八进制,十六进制整数,浮点数,科学技术法 
e.g.
<script>
  var a=10; //十进制
  var b=012;//第一位是0,表示八进制
  var c=0xA;//0x开头表示十六进制
  var d=3.14;//有小数点表示浮点数
  var e=3.14e2;//使用e的幂表示科学技术法
  document.write("十进制 10 的值: "+a);
  document.write("<br>");
  document.write("八进制 012 的值: "+b);
  document.write("<br>");
  document.write("十六进制 0xA 的值: "+c);
  document.write("<br>");
  document.write("浮点数 3.14 的值: "+d);
  document.write("<br>");
  document.write("科学技术法 3.14e2 的值: "+e);
  document.write("<br>");
</script>

String         字符串,单引号和双引号,都用来表示字符串。
var         动态类型,变量的类型是动态的,当值是整数的时候,就是Number类型,当值是字符串的时候,就是String类型 
typeof         变量类型判断,使用typeof来进行判断数据类型,正是因为变量是动态类型的,所以无法确定当前到底是哪种类型,这个时候,就可以使用typeof来进行判断 
null         空对象/对象不存在 ,null表示一个对象不存在

5.伪对象概念:javascript是一门很有意思的语言,即便是基本类型,也是伪对象,所以他们都有属性和方法。

6.无论是Number,Boolean还是String都有一个toString方法,用于转换为字符串
数字转字符串 :
Number转换为字符串的时候有默认模式和基模式两种 
e.g.
a.toString()  //默认模式,即十进制
a.toString(2)  //基模式,二进制
a.toString(8)  //基模式,八进制
a.toString(16)  //基模式,十六进制

String()和toString()的区别:
String()和toString()一样都会返回字符串,区别在于对null的处理
String()会返回字符串"null"
e.g.
把空对象转换为字符串:null

toString() 就会报错,无法执行 
e.g.
null.toString() / toString(null) 就会报错,所以后面的代码不能执行

7.转换为数字 
javascript分别提供内置函数 parseInt()和parseFloat(),转换为数字
如果被转换的字符串,同时又数字和字符构成,那么"parseInt"会一直定位数字,直到出现非字符。
e.g.
"10abc" 会被转换为 10,因为abc不是数字
"10abc8" 会被转换为 10 //判断每一位,直到发现不是数字的那一位
"hello javascript"转换为:NaN

8.转换为Boolean
当转换字符串时:非空即为true
e.g.
Boolean("")//空字符串,转换为布尔后的值:false
Boolean("hello javascript")//非空字符串,转换为布尔后的值:true

当转换数字时:非0即为true
e.g.
Boolean(0)//0,转换为布尔后的值:false
Boolean(3.14)//非0,转换为布尔后的值:true

当转换对象时:非null即为true
e.g.
Boolean(null)//空对象 null 转换为布尔后的值:false
Boolean(new Object() )//对象存在,非空对象 new Object() 转换为布尔后的值:true

9.基本算数运算符:+ - * / %(取余数) 
e.g.
10%3=1

10.自增,自减运算符
自增++在原来的基础上 ,增加 1.
需要注意的是
如果 ++放在 前面 ,就是 先运算,后取值 。
如果 ++放在 后面 ,就是 先取值,后运算。
自减 -- 是一个道理。 
e.g.
var a = 5;
a++; //先取值,再运算(先取值 ,即5)
++a; //先运算,再取值(5+1=6,取值6)
a--; //先取值,再运算(先取值 ,即5)
--a; //先运算,再取值(5-1=4,取值4)

11.赋值运算符 
=,+=,-=,*=,/=,%= 
x=5 是 最基本的赋值运算符,即把右边的值,赋给左边的变量x。 
+=
x+=y, 表示 x=x+y
e.g.
x+=6  //x=x+6

-=
e.g.
x-=6  //x=x-6

*=
e.g.
x*=6  //x=x*6

/=
e.g.
x/=6  //x=x/6

%= 
e.g.
x%=6  //x=x%6

12.+运算符的多态 
+ 具备多态特征
当两边都是数字的时候 ,表现为算数运算符
当任意一边是字符串的时候,表现为字符串连接符 
e.g.
1+2=3  //两边都是数字,算数运算符
1+"2"=12  //"2"是字符串,字符串连接符

13.基本逻辑运算符:==,!=,>,>=

14.绝对等,绝对不等于 
与==进行值是否相等的判断不同 ,绝对等 ===还会进行 类型的判断
比如 数字1和 字符串‘1‘比较,值是相等的,但是类型不同
所以=会返回true,但是===会返回false
绝对不等于!=== 与上是一个道理 
e.g.
1==‘1‘: true
1===‘1‘: false

15.三相运算符 (?:)
有三个操作数
如果第一个返回true,就返回第二个操作符
否则就返回第三个操作符。
e.g.
var age=15;
age<18 ? "Yes" : "No"

16.条件语句
if...else...
if条件一定是一个Boolean类型的值,条件成立时执行
else表示当条件不成立时执行的代码

else if(多条件判断 )
e.g.
if(age<18){ }
else if(age<22){ }
else{ }

switch (多条件判断)
switch 语句与else if一样,也是进行多条件判断的
需要注意的是,每个判断结束,都要加上break;
e.g.
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
switch (day)
{
case 0:
  today="星期天";
  break;
case 1:
  today="星期一";
  break;
......
}

17. 循环语句
常用的循环语句有: for, while, do-while, for-each都是用于在满足条件的前提下,重复执行代码用的
for循环
e.g.
for(var i=0;i<5;i++){
  p(i);
}
while循环
e.g.
var i = 0;
while(i<5){
  p(i);
  i++;
}
do-while循环
e.g.
do{
p(i);
i++;
} while(i<5);
forEach是增强的for循环,主要用于遍历数组。
continue 表示放弃本次循环,进行下一次循环 
e.g.
for(i=0;i<5;i++){
  if(i==3)
    continue;
  p(i);
}
break表示终止循环,循环体结束
e.g.
for(i=0;i<5;i++){
  if(i==3)
    break;
  p(i);
}

18.错误处理
JavaScript提供了一种try catch的错误处理机制,当有错误抛出的时候,可以catch住。 
e.g.调用不存在的函数
try{
   document.write("试图调用不存在的函数f2()<br>"); 
    f2();  //调用不存在的函数f2();
}
catch(err){
   document.write("捕捉到错误产生:"); 
    document.write(err.message);
}

19. javascript 数字对象
JavaScript中的对象是有着属性和方法的一种特殊数据类型。
常见的对象有数字Number,字符串String,日期Date,数组Array等。

创建一个数字对象 :可以通过new Number()创建一个数字对象
与基本类型的数字不同,对象类型的数字,拥有更多的属性和方法
e.g.
var x = new Number(123);
document.write(‘数字对象x的类型:‘+typeof x); //通过typeof 获知这是一个object
var y = 123;
document.write(‘基本类型y的类型:‘+typeof y); //通过typeof 获知这是一个number

Number对象能够取到的最大( Number.MAX_VALUE 最大值)和最小 ( Number.MIN_VALUE 最小值)边界

NaN(Not a Number),表示不是一个数字
当通过非数字创建Number的时候,就会得到NaN.
注意: 不能通过 是否等于Number.NaN来判断 是否 “不是一个数字”,应该使用函数 isNaN() 
e.g.
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
var a = new Number("123abc"); //通过非数字创建Number对象,得到的是一个NaN
p(‘通过非数字字符串"123abc"创建出来的Number对象 a的值是:‘+a);
p(‘但是, a==Number.NaN会返回:‘+(a==Number.NaN)); //即便是一个NaN 也"不等于" Number.NaN
p(‘正确判断是否是NaN的方式是调用isNaN函数:‘+isNaN(a)); //正确的方式是通过isNaN() 函数进行判断
</script>

toFixed返回一个数字的小数表达 
e.g.
var b = new Number("3.1415926"); 
b.toFixed(3);//保留三位小数点

返回一个Number对象的科学计数法表达 
e.g.
var a = new Number("123"); 
a.toExponential ();//数字对象123通过toExponential 返回计数法表达 1.23e+2

返回一个数字对象的基本数字类型 
方法 valueOf() 返回一个基本类型的数字
e.g.
<script>
//通过typeof 判断数据类型可以发现,一种是object,一种是number
function p(s){
  document.write(s);
  document.write("<br>");
}
var a = new Number("123"); 
var b = a.valueOf();
p(‘数字对象a的类型是: ‘+typeof a); //返回object
p(‘通过valueOf()返回的值的类型是‘+typeof b); //返回number
</script>

20.字符串对象
可以通过new String()创建一个String对象

属性 length 返回字符串的长度
e.g.
var y = new String("Hello JavaScrpt");
document.write("通过.length属性获取字符串‘Hellow JavaScript‘的长度"+y.length);

charAt 返回指定位置的字符
charCodeAt 返回指定位置的字符对应的Unicode码 
e.g.
y.charAt(0);   //返回H
y.charCodeAt(0);   //返回H对应的Unicode码 72

concat用于进行字符串拼接 
e.g.
var x = new String("Hello "); 
var y = new String("Javascript");
document.write( ‘通过函数concat()把x和y连接起来: ‘ +  x.concat(y) );

indexOf 返回子字符串第一次出现的位置
lastIndexOf 返回子字符串最后一次出现的位置 
e.g.
y.indexOf ("a");
y.lastIndexOf ("a");

比较两段字符串是否相同 :localeCompare 比较两段字符串是否相同,0即表示相同,非0表示不同 
e.g.
x.localeCompare(y);

substring 截取一段子字符串
e.g.
x.substring (0,3);   //左闭右开,取得到0,取不到3

split 根据分隔符,把字符串转换为数组。
e.g.
var x = new String("Hello This Is JavaScript");
var y =  x.split(" ");  //通过空格分隔split(" "),得到数组y(Hello,This,Is,JavaScript)
var z =  x.split(" ",2);   //通过空格分隔split(" ",2),得到数组,并且只保留前两个Hello,This 
注: 第二个参数可选,表示返回数组得长度

replace(search,replacement)
找到满足条件的子字符串search,替换为replacement
e.g.
var x = new String("Hello JavaScript");
var y = x.replace("a","o");   //把x字符串里的第一个"a"替换成"o"

注: 默认情况下只替换找到的第一个子字符串,如果要所有都替换,需要写成:
x.replace(/a/g, "o");
或者
var regS = new RegExp("a","g");
x.replace(regS, "o");
e.g.
var x = new String("Hello JavaScript");
var regS = new RegExp("a","g");  
var z = x.replace(regS, "o");       //把x字符串里所有的"a"替换成"o"
或者
x.replace(/a/g, "o");   //把x字符串里所有的"a"替换成"o"

所有返回字符串类型的方法,返回的都是基本类型的String

21.创建数组对象 
创建数组对象的3种方式:
1. new Array() 创建长度是0的数组
2. new Array(5); 创建长度是5的数组,,但是其每一个元素都是undefine
3. new Array(3,1,4,1,5,9,2,6); 根据参数创建数组

22.属性length 获取一个数组的长度 
e.g.
var x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组
document.write("通过.length获取当前数组的长度:"+x.length‘);

23.遍历一个数组 
遍历有两种方式
1.结合for循环,通过下标遍历
e.g.
var x=new Array(3,1,4);
for(i=0;i<x.length;i++)
{
        document.write("使用普通的for循环遍历数组:"+x[i]+"\<br/>");
}
2.使用增强for in循环遍历
需要注意的是,在增强for in中,i是下标的意思。 
for(i in x)
{  //for in 循环
  p(x[i]);
}
e.g.
var x=new Array(3,1,4);
for(i in x){  //for in 循环
  document.write("使用增强for循环遍历数组"+x[i]+"\<br/>");   //.使用增强for in循环遍历
}
24.方法 concat 连接两个数组
e.g.
var x = new Array(3,1,4); 
var y = new Array(1,5,9,2,6); 
var z = x.concat(y);
document.write("使用concat连接数组x和y,数组z是:"+z);

25.方法 join 通过指定"分隔符",返回一个数组的字符串表达 
var x = new Array(3,1,4);    //x的类型是object
var y = x.join();
//join返回一个数组的字符串表达,其类型是 :string
document.write("y = x.join() 得到的是数组x的字符串表达,其值是"+y+"  其类型是 :"+(typeof y)+"\<br/>");
var z = x.join("@");  //指定"分隔符"为"@" ,而不是默认的","
document.write("z = x.join(\"@\");是x的字符串表达,不过分隔符不是默认的\",\" 而是\"@\" : "+z);

26. 分别在"最后的位置"插入数据和获取数据(获取后删除,就像先入后出的栈一样 
方法push在最后的位置插入数据
e.g.
var x = new Array(3,1,4);
x.push(5);  //插入数据"5"
document.write("向x中push 5,得到:"+ x);   //得到:3,1,4,5

方法pop在最后的位置获取数据(获取后删除) 
e.g.
var x = new Array(3,1,4); 
var e = x.pop();
document.write("从x中pop一个值出来,其值是:"+ e);  //方法pop获取数据,获取后删除数据的最后一个
document.write("<br/>");
document.write("pop之后,x数组的值是:"+ x);  //x数组的值3,1

27.分别在"最开始的位置"插入数据和获取数据(获取后删除) 
方法unshift在最开始的位置插入数据
e.g.
var x = new Array(3,1,4);
x.unshift(5);
document.write("对数组 unshift 值5(在最前面加),数组变为:"+ x); //数组变为5,3,1,4

方法shift在最开始的位置获取数据(获取后删除) 
e.g.
var x = new Array(3,1,4);
var e = x.shift ();
document.write("从数组中 shift 一个数(从最前面取),其值是:"+ e);  //即3
document.write("<br>");
document.write("shift之后,数组变为:"+x);  //数组变为1,4

28.方法 sort对数组的内容进行排序 
e.g.
var x = new Array(3,1,4,1,5,9,2,6);
x.sort();
document.write("使用sort排序后的数组x是:"+x);  //数组x是:1,1,2,3,4,5,6,9

29.自定义排序算法 
sort()默认采用正排序,即小的数排在前面。 如果需要采用自定义排序的算法,就把比较器函数作为参数传递给sort()。
比较器函数:
function comparator(v1,v2){
   return v2-v1;  //v2-v1表示大的放前面,小的放后面
}
调用sort函数的时候,把这个比较器函数comparator作为参数传递进去即可
e.g.
function comparator(v1,v2){
   return v2-v1;

var x = new Array(3,1,4,1,5,9,2,6); 
x.sort(comparator);
document.write("使用sort 进行自定义倒排序后的数组x是:"+x);  //进行自定义倒排序后的数组x是:9,6,5,4,3,2,1,1

自定义一个函数,对数组进行排序,要求排序后数组中无重复数据 
function check(value,a){//检查数组里是否有相同的值
  for(i in a){
    if(value==a[i])
       return true;
  }
  return false;
}
function removeDuplicate(a){//移除相同的值
var result =new Array();  //新建一个数组result
while(a.length!=0){//当数组里有相同的值时,删除它后一个相同的值
   var v = a.pop();
   console.log(v);  //web控制台输出v
   if( !check(v,a) ){ //当数组里没有相同的值时(即check()如果返回false),!号就是"取非"
     result.push(v); //往数组result最后的位置插入数据
   }
}
return result;
}
var x = new Array(1,3,4,5,7,7,4,5,6,7,7); 
x = removeDuplicate(x);
x.sort();
document.write("使用sort排序后的无重复数据的数组x是:"+x);  //得到无重复数据的数组x是:1,3,4,5,6,7

30.方法 reverse,对数组的内容进行反转
e.g.
var x = new Array(3,1,4,1,5,9,2,6); 
x.reverse();
document.write("使用reverse()函数进行反转后的值是:"+x);  //函数进行反转后的值是:6,2,9,5,1,4,1,3

31.方法 slice 获取子数组
e.g.
var x = new Array(3,1,4,1,5,9,2,6); 
var y = x.slice(1);
document.write("x.slice(1)获取的子数组是:"+y); //1,4,1,5,9,2,6即数组位置为1后面的所有数包括位置1
document.write("<br>");
var z = x.slice(1,3);
document.write("x.slice(1,3)获取的子数组是:"+z);  //获取的子数组是:1,4  
//注意:第二个参数取不到(即取得到数组位置为1至数组位置为3之间的数但不包括位置3)

32.方法 splice (不是 slice) 用于删除数组中的元素,奇葩的是 ,它还能用于向数组中插入元素 
e.g.
var x = new Array(3,1,4,1,5,9,2,6);
x.splice (3,2);//从位置3开始 ,删除2个元素
document.write("x.splice (3,2) 表示从位置3开始 ,删除2个元素:"+x);  //得到3,1,4,9,2,6
document.write("<br/>");
x.splice(3,0,1,5); //从位置3开始,删除0个元素,但是插入1和5
document.write("x.splice(3,0,1,5) 从位置3开始,删除0个元素,但是插入1和5,最后得到:"+x); //得到3,1,4,1,5,9,2,6

33.通过new Date创建一个日期对象,这个对象就表示当前日期(现在) 
e.g.
var d = new Date();
document.write(‘new Date():‘+d);

34.分别获取年/月/日,需要注意的是,getMonth()返回的月数,是基零的,0代表1月份 
e.g.
  var d = new Date();
  document.write(‘分别获取年月日: ‘);
  document.write(d.getFullYear());  //获取年份
  document.write("/");
  document.write(d.getMonth()+1);  //获取月份
  document.write("/");
  document.write(d.getDate());  //获取日

35.获取时:分:秒:毫秒 
e.g.
  var d = new Date();
  document.write("分别获取时:分:秒:毫秒 ");
  document.write(d.getHours());  //时
  document.write(":");
  document.write(d.getMinutes());  //分
  document.write(":");
  document.write(d.getSeconds());  //秒
  document.write(":");
  document.write(d.getMilliseconds());  //毫秒

36.通过getDay()获取,今天是本周的第几天,与getMonth()一样,返回值是基0的。 
e.g.
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var weeks = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
document.write("今天是 : "+weeks[day]);

37.获取从1970/1/1 08:00:00 至今的毫秒数 
e.g.
var time = new Date().getTime();
document.write("从1970/1/1 08:00:00 到今天的毫秒数: "+ time);

38.修改日期和时间 
e.g.
var d=new Date();  //当前日期
d.setFullYear(2012); //修改年份
d.setMonth(11); //月份时基0的,所以11表示12月
d.setDate(12);   //日
d.setHours(0);   //时
d.setMinutes(0);  //分
d.setSeconds(0); //秒
document.write(d);  //把日期对象设置为2012/12/12 00:00:00

39.javascript Math对象详解
a. 自然对数和圆周率 
属性E和PI,分别表示自然对数和圆周率PI 
e.g.
document.write(Math.E);
document.write("<br>");
document.write(Math.PI);

b.方法 abs 取绝对值
e.g.
document.write(Math.abs(-1));

c.方法 min和max 分别取最小值,最大值 
e.g.
document.write(Math.min(1,100));
document.write("<br>");
document.write(Math.max(1,100));

d.方法 pow 求一个数的n次方 (求幂 )
e.g.
document.write(Math.pow(3,3)); //3的立方,即27

e.方法 round,小数四舍五入取整 
e.g.
document.write(Math.round(3.4));
document.write("<br>");
document.write(Math.round(3.5));

f.方法 random 取0-1之间的随机数
e.g. 
document.write(Math.random()); //0-1 之间的随机数
document.write(Math.round(Math.random() *5)+5 ); //5-10之间的随机整数,(0~1)*5=0~5,(0~5)+5=5~10
取十个 5-10 之间的随机数
for(i=0;i<10;i++){
document.write(Math.round(Math.random() *5)+5 ); //5-10之间的随机整数
}
40.javascript 设计自定义对象
a.通过new Object()创建一个对象 
var hero = new Object();
hero.name = "盖伦"; //定义一个属性name,并且赋值
hero.kill = new function(){
  document.write(hero.name + " 正在杀敌" ); //定义一个函数kill
}
hero.kill(); //调用函数kill

b.通过function设计一个对象 
通过new Object创建对象有个问题,就是每创建一个对象,都得重新定义属性和函数。这样代码的重用性不好
那么,才用另一种方式,通过function设计一种对象。 然后实例化它 。
这种思路很像Java里的设计一种类,但是 javascript没有类,只有对象,所以我们叫设计一种对象
e.g.
function Hero(name){
  this.name = name;
  this.kill = function(){
     document.write(this.name + "正在杀敌<br>");
  }
}
var gareen = new Hero("盖伦");
gareen.kill();
var teemo = new Hero("提莫");
teemo.kill();

c.为已经存在的对象,增加新的方法 
对设计好的Hero对象追加一个新的方法keng(),需要通过prototype实现这一点 
e.g.
function Hero(name){
  this.name = name;
  this.kill = function(){
     document.write(this.name + "正在杀敌<br>");
  }
}
var gareen = new Hero("盖伦");
gareen.kill();  
var teemo = new Hero("提莫");
teemo.kill();
Hero.prototype.keng = function(){
  document.write(this.name + "正在坑队友<br>");
}
gareen.keng();
teemo.keng();

41.BOM即 浏览器对象模型(Brower Object Model)
浏览器对象包括:
Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)

42.Window对象 
a.获取文档显示区域的高度和宽度 
一旦页面加载,就会自动创建window对象,所以无需手动创建window对象。
通过window对象可以获取文档显示区域的高度和宽度 
e.g.
document.write("文档显示区域的宽度"+window.innerWidth);
document.write("<br>");
document.write("文档显示区域的高度"+window.innerHeight);

b.获取外部窗体的宽度和高度 
所谓的外部窗体即浏览器,可能用的是360,火狐,IE, Chrome等等。 
document.write("浏览器的宽度:"+window.outerWidth);
document.write("<br>");
document.write("浏览器的高度:"+window.outerHeight);

c.打开一个新的窗口 
碰到一些网站会自动打开另一个网站,那么是怎么做到的呢?
就是通过window的open方法做到的
但不建议使用,如果需要打开一个新的网站,应该通过超级链接等方式让用户主动打开,在没有告知用户的前提下就打开一个新的网站会影响用户的体验 
e.g.
<script>
function openNewWindow(){
  myWindow=window.open("/");
}
</script>
<button onclick="openNewWindow()">打开一个新的窗口</button>

43.Navigator对象(即浏览器对象,提供浏览器相关的信息 )
打印浏览器相关信息 
e.g.
document.write("<p>浏览器产品名称:");
document.write(navigator.appName + "</p>");

document.write("<p>浏览器版本号:");
document.write(navigator.appVersion + "</p>");

document.write("<p>浏览器内部代码:");
document.write(navigator.appCodeName + "</p>");

document.write("<p>操作系统:");
document.write(navigator.platform + "</p>");

document.write("<p>是否启用Cookies:");
document.write(navigator.cookieEnabled + "</p>");

document.write("<p>浏览器的用户代理报头:");
document.write(navigator.userAgent + "</p>");

44.Screen对象(表示用户的屏幕相关信息 )
返回用户的屏幕大小,以及可用屏幕大小 
如果是在台式电脑上,通常看到的可用区域的高度会比屏幕高度小一点,因为有任务栏的存在。
e.g.
document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height);
document.write("<br />");
document.write("可用区域大小: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br />");

45.History对象(用于记录访问历史 )
a.返回"上一次"的访问 
e.g.
function goBack()
  {
     history.back();
  }

b.返回"上上次"的访问 
e.g.
function goBack()
  {
     history.go(-2); //-1表示上次,-2表示上上次,以次类推
  }

46. Location对象(表示浏览器中的地址栏 )
a.reload方法刷新当前页面 
e.g.
<span>当前时间:</span>
<script>
  var d = new Date();
  document.write(d.getHours());
  document.write(":");
  document.write(d.getMinutes());
  document.write(":");
  document.write(d.getSeconds());
  document.write(":");
  document.write(d.getMilliseconds());

function refresh(){
  location.reload();    //刷新当前页面
}
</script>
<br>
<button onclick="refresh()">刷新当前页面</button>

b.跳转到另一个页面 
e.g.
<script>
function jump(){
  //方法1
  //location="/";

//方法2
  location.assign("/");
   
}
</script>
<br>
<button onclick="jump()">跳转到首页</button>

c.Location的其他属性 
e.g.
document.write("协议 location.protocol:"+location.protocol);
document.write("主机名 location.hostname:"+location.hostname);
document.write("端口号 (默认是80,没有即表示80端口)location.port:"+location.port);
document.write("主机加端口号 location.host:"+location.host);
document.write("访问的路径  location.pathname:"+location.pathname);
document.write("锚点 location.hash:"+location.hash);
document.write("参数列表 location.search"+location.search);

47.javascript 弹出框
浏览器上常见的弹出框有
警告框,确认框,提示框 这些都是通过调用window的方法实现的。
比如警告框用的是window.alert("警告内容"),因为很常用,所以就把window省略掉,直接使用alert 
a.警告框 
警告框 alert,常用于消息提示,比如注册成功等等 
e.g.
function register(){
   alert("注册成功");
}

b.确认框 
确认框 confirm,常用于危险性操作的确认提示。 比如删除一条记录的时候,弹出确认框
conform返回基本类型的Boolean true或者false 
e.g.
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
}

c. 输入框 
输入框 prompt,用于弹出一个输入框,供用户输入相关信息。 因为弹出的界面并不好看,很有可能和网站的风格不一致,所以很少会在实际工作中用到。
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}

48. javascript 计时器
a.计时器只执行一次 
函数setTimeout(functionname, 距离开始时间毫秒数 );
通过setTimeout在制定的毫秒数时间后,执行一次 函数functionname 
e.g.
<script>
function printTime(){  //打印当前时间
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;  //document.getElementById 获取id=time的div元素 ,.innerHTML 修改该元素的内容 
}
function showTimeIn3Seconds(){//在3秒钟后,打印当前时间并且只显示一次
   setTimeout(printTime,3000);  
}
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button>

b. 计时器不停地重复执行 
函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
通过setInterval重复执行同一个函数,重复的时间间隔由第二个参数指定 
e.g.
<p>每隔1秒钟,打印当前时间</p>
<div id="time"></div>  
<script>  
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
   

var t = setInterval(printTime,1000); 
</script>

c.终止重复执行 
通过clearInterval终止一个不断重复的任务
e.g.当秒是5的倍数的时候,就停止执行
<p>每隔1秒钟,打印当前时间</p>   
<div id="time"></div> 
<script>
var t = setInterval(printTime,1000);
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  if(s%5==0)
     clearInterval(t);

</script>

d. 不要在setInterval调用的函数中使用document.write(); 
注:部分浏览器,比如firefox有这个问题,其他浏览器没这个问题。
假设setInterval调用的函数是printTime, 在printTime中调用document.write();  只能看到一次打印时间的效果。
这是因为document.write,会创建一个新的文档,而新的文档里,只有打印出来的时间字符串,并没有setInterval这些javascript调用,所以只会看到执行一次的效果。 
e.g.
<p>每隔1秒钟,通过document.write打印当前时间</p>
<script>
function printTime(){
  var d = new Date();
  document.write(d.getHours());
  document.write(":");
  document.write(d.getMinutes());
  document.write(":");
  document.write(d.getSeconds());
  document.close();
}
var t = setInterval(printTime,1000); 
</script>

时间: 2024-10-25 18:48:47

JS 基础知识大全的相关文章

JS基础知识大全

JS基础知识 基本语法*switch循环(设置表达式 x(通常是一个变量) 随后表达式的值会与结构中的每个 case 的值做比较.如果存在匹配,则与该 case 关联的代码块会被执行.请使用 break 来阻止代码自动地向下一个 case 运行) 不进行类型转换 var x; switch(x){ case true:console.log("x类型转换") ; default:console.log("x没有发生类型转换"); }//case没有发生类型转换 sw

JS基础知识回顾:引用类型(一)

在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起,而对象时引用类型的一个实例. 尽管ECMAScript从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构,所以虽然说引用类型与类看起来想死,但他们并不是相同的概念. 不过引用类型有的时候也可以被称为对象定义,因为他们描述的是一类对象所具有的属性和方法. 新对象是使用new操作符后跟一个构造函数来实现的,构造函数本身就是一个函数,只不过该函数时处于创建新对象的目的而定义的. ECMASc

NodeJs&gt;-------&gt;&gt;第三章:Node.js基础知识

第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 1 console.log("this is a test string."); 1 node app1.js 1> info.log 1 console.log("This is a test String ."); 2 3 //从第二个参数开始,依序输出所有的字符串 4 console.log("%s","

JS 基础知识4 运算符

JS的运算符一般含有: 1 算术运算符 2 相等运算符 3 关系运算符 4 字符串运算符 5逻辑运算符 6位运算符 7 赋值运算符 首先看算术运算符,它一般有(+,-,*,/,%,++,--) 这里,%模运算符,其实也就是取余的意思,比如,5%2=1: 这里要特别说一下++,与--(这里只列了++,--是一样的道理). 1 var i = 1; 2 var j = ++i; //实际相当于 i+=1;j=i; 3 alert(i + " " + j); 4 5 var m = 1; 6

JS 基础知识2 传值和传址

要知道传址跟传址,首先我们先了解下数据值的操作. 1复制:可以把它赋值给一个新的变量 2传递:可以将他传递给一个函数或者方法 3比较:可以与另外一个值比较,判断是否相等 简要介绍下传值: 当一个数据是通过值被操作的,那么关系到的是数据的值,在赋值的过程中,是对实际值进行了COPY,储存在一个变量或者属性或数组中,copy的值与原数据是相互独立的. 当数据通过值传递给一个函数时,数据的一份传递给这个函数,如果函数体修改了这个值,只在函数体受影响,函数外的原数据不受影响. 当一个数据通过值和另外一个

JS 基础知识3 变量

变量和数值相关,它储存了那个值,有了变量就可以储存操作数据了. js与其他语言不同,它是非类型的.就是变量可以存放任何类型的值,而其他语言需要存放特定类型的值. var i=5; i="fdsfad"; 这是合法的. 变量的声明一般是由VAR 关键字声明的 var i,sum; //一次声明两个变量,   若变量没有给定初始值,则值为“undefined” 在JS中多次声明同一个变量,是不会出错的,仅仅是给变量赋值的性质. 还有一种,不用var关键字声明变量,则JS会隐式的声明该变量,

JS基础知识回顾:在HTML中使用JavaScript

想HTML页面中插入JavaScript的主要方法就是使用<script>元素. HTML4.01当中为<script>元素定义了下列6个属性: language(已废弃):原来用于表示编写代码使用的脚本语言,如JavaScript.JavaScript1.2.VBScript等,由于大多数浏览器会忽略此属性,因此就没有必要再用了: type(可选):可以看成是language的替代属性,表示编写代码使用的脚本语言的内容类型,也被称作MIME类型,在未指定此属性的情况下会被默认为t

JS基础知识回顾:ECMAScript的语法(一)

任何语言的核心都必然会描述这门语言最基本的工作原理,而描述的内容通常都要涉及这门语言的语法.操作符.数据类型.内置功能等用于构建复杂解决方案的基本概念. ECMAScript中的一切变量.函数名.操作符都区分大小写. ECMAScript的标识符要符合下列规则:第一个字符必须是字母.下划线或美元符号:其他字符可以是字母.下划线.美元符号或数字. 标识符中的字母也可以包含扩展的ASCII或Unicode字母字符,但是并不推荐. 按照惯例,ECMAScript标识符采用驼峰大小写的格式来书写,尽管没

JS基础知识回顾:引用类型(四)

每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法. 由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定. 函数的声明有以下三种形式: function sum(num1,num2){return num1+num2;}//利用函数声明语法定义 var sum=function(num1,num2){return num1+num2;}//利用函数表达式定义 var sum=new Function("num1","nu