JavaScript的基本使用
JavaScript用于网页和用户之间的交互,比如提交的时候,进行用户名是否为空的判断。完整的javascript由语言基础、BOM和DOM组成
一、Hello JavaScript
1、通过javascript向文档中输出文本
document是javascript的内置对象,代表浏览器的文档部分;document.write("Hello Javascript"); 向文档写入字符串
<script>
document.write("Hello Javascript");
</script>
2、javascript和dom结合的简单例子
onclick="..." 表示点击button之后做的事情
document.getElementById 根据id获取指定的元素
.style.display='none' 隐藏
.style.display='block' 显示(准确的讲,以block的形式显示)
onclick,getElementById,style.display 这些内容,是HTML DOM 应该到才会用到的知识和概念
<button onclick="document.getElementById('text').style.display='none'">隐藏文本</button>
<button onclick="document.getElementById('text').style.display='block'">显示文本</button>
<p id="text"> 这个是一段可以被javascript隐藏的文本</p>
二、Script标签
javascript代码必须放在script标签中,script标签可以放在html的任何地方,一般建议放在head标签里
1、script标签
<html>
<head>
<script>
document.write("这是 javascript");
</script>
</head>
</html>
2、javascript顺序执行
<script>
document.write("第一段javascript");
</script>
<script>
document.write("第二段javascript");
</script>
3、使用外部js文件
//js:
document.write("hello javascript ");
//html:
<html>
<script src="https://how2j.cn/study/hello.js"></script>
</html>
三、注释
单行注释://
多行注释:/**/
四、变量
1、使用var声明一个变量
<script>
var x = 10;
document.write("变量x的值:"+x);
</script>
2、不使用var声明一个变量
<script>
x = 10;
document.write("没有用var声明的变量x的值:"+x);
</script>
3、变量命名规则:开头可以用 _$和字母,其他部分可以用 $ _ 字母或者数字
五、调试办法
1、alert进行调试:使用alert(1)进行调试,会弹出一个对话框,里面的内容是1。换句话说,如果弹出了1,这个位置以上的代码,都是可以运行的。
你不停的把alert(1)向下移动,当移动到某一行之后,就不再弹出,那么就证明那一行运行有问题。 这样就把问题的范围缩小了,就很容易通过肉眼观察法来定位真正问题所在。
<script>
x = 10;
//alert(1);
document.write("没有用var声明的变量x的值:"+x);
//alert(2);
</script>
2、使用浏览器的调试功能:F12(开发者模式)——>console(控制台)
//错误代码:
这是一段故意写错的write方法的javascript代码
<script>
x = 10;
document.write1("这是一段故意写错的write方法的javascript代码");
</script>
//console中的提示:
Uncaught TypeError: document.write1 is not a function
3、console.log:类似于alert,但是不会出现弹窗,而是把信息输入到console中,不影响用户使用
<script>
x = 10;
console.log("x="+x);
document.write("没有用var声明的变量x的值:"+x);
console.log("end");
</script>
六、基本数据类型
关键字 | 简介 | |
---|---|---|
1 | undefined | 声明了但未赋值 |
2 | Boolean | 布尔 |
3 | Number | 数字 |
4 | String | 字符串 |
5 | var | 动态类型 |
6 | typeof | 变量类型判断 |
7 | null | 空对象/对象不存在 |
1、声明了但未赋值:undefined
当一个变量被声明了,却没有赋值的时候,叫做 undefined
<script>
var x; //声明了变量x,但是没有赋值
document.write('声明了,但是没有赋值的变量 x: '+x);
</script>
2、布尔:true/false
<script>
var x=true;
var y=false;
document.write("布尔值:"+x);
document.write("<br>");
document.write("布尔值:"+y);
</script>
3、数字
十进制,八进制,十六进制整数,浮点数,科学记数法
<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>
4、字符串
js只有字符串,没有字符。所以单引号和双引号,都用来表示字符串。
<script>
var x='hello '; //单引号
var y="javascript"; //双引号
document.write("单引号的字符串:"+x);
document.write("<br>");
document.write("双引号的字符串:"+y);
</script>
5、动态类型
变量的类型是动态的,当值是整数的时候,就是Number类型,当值是字符串的时候,就是String类型
<script>
var x=10; //Number类型
document.write("此时 x的值是 "+x+" 类型是数字");
document.write("<br>");
x = "hello javascript"; //String类型
document.write("此时 x的值是 "+x+" 类型是字符串");
</script>
6、变量类型判断
使用typeof来进行判断数据类型
<script>
var x;
document.write('声明了但是未赋值的时候,类型是: '+typeof x);
document.write("<br>");
x=5;
document.write('赋值为5之后,类型是: '+typeof x);
document.write("<br>");
x=5.1;
document.write('赋值为5.1之后,类型是: '+typeof x);
document.write("<br>");
x=true;
document.write('赋值为true之后,类型是: '+typeof x);
document.write("<br>");
x="hello";
document.write('赋值为hello之后,类型是: '+typeof x);
</script>
7、空对象/对象不存在
null表示一个对象不存在,因为本节讲的都是基本类型,而null是和对象相关的,
七、类型转换
1、伪对象
javascript是一门很有意思的语言,即便是基本类型,也是伪对象,所以他们都有属性和方法。
//变量a的类型是字符串string,通过调用其伪对象的属性length获取其长度16
<script>
var a="hello javascript";
document.write("变量a的类型是:"+(typeof a));
document.write("<br>");
document.write("变量a的长度是:"+a.length);
</script>
2、转换为字符串
无论是Number,Boolean还是String都有一个toString()方法,用于转换为字符串。String()也可以用于转换为字符串
<script>
var a=10;
document.write("数字 "+a+" 转换为字符串"+a.toString());
document.write("<br>");
</script>
String()和toString()一样都会返回字符串,区别在于对null的处理。String()会返回字符串"null",toString() 就会报错,无法执行
<script>
var a = null;
document.write('String(null) 把空对象转换为字符串:'+String(a));
document.write("<br>");
document.write('null.toString() 就会报错,所以后面的代码不能执行');
document.write(a.toString());
document.write("因为第5行报错,所以这一段文字不会显示");
</script>
3、数字转字符串
Number转换为字符串的时候有默认模式和基模式两种。基模式即转换为对应进制的字符串
<script>
var a=10;
document.write('默认模式下,数字10转换为十进制的'+a.toString()); //默认模式,即十进制
document.write("<br>");
document.write('基模式下,数字10转换为二进制的'+a.toString(2)); //基模式,二进制
document.write("<br>");
document.write('基模式下,数字10转换为八进制的'+a.toString(8)); //基模式,八进制
document.write("<br>");
document.write('基模式下,数字10转换为十六进制的'+a.toString(16)); //基模式,十六进制
document.write("<br>");
</script>
4、转换为数字
javascript分别提供内置函数 parseInt()和parseFloat(),转换为数字。Number也可以用于转换为数字。
注:如果被转换的字符串,同时由数字和字符构成,那么parseInt会一直定位数字,直到出现非字符。 所以"10abc" 会被转换为 10
<script>
document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数
document.write("<br>");
document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("3.14"));//转换浮点数
document.write("<br>");
document.write("字符串的\"10abc\"转换为数字的:"+parseInt("10abc")); //判断每一位,直到发现不是数字的那一位
document.write("<br>");
document.write("字符串的\"hello javascript\"转换为数字的:"+parseInt("hello javascript")); //如果完全不包含数字,则返回NaN - Not a Number
document.write("<br>");
</script>
Number()和parseInt()一样,都可以用来进行数字的转换,区别在于,当转换的内容包含非数字的时候,Number() 会返回NaN(Not a Number)
parseInt() 要看情况,如果以数字开头,就会返回开头的合法数字部分,如果以非数字开头,则返回NaN。
<script>
document.write("通过Number() 函数转换字符串'123' 后得到的数字:"+Number("123")); //正常的
document.write("<br>");
document.write("通过Number() 函数转换字符串'123abc' 后得到的数字:"+Number("123abc")); //包含非数字
document.write("<br>");
document.write("通过Number() 函数转换字符串'abc123' 后得到的数字:"+Number("abc123")); //包含非数字
document.write("<br>");
document.write("通过parseInt() 函数转换字符串'123' 后得到的数字:"+parseInt("123")); //正常的
document.write("<br>");
document.write("通过parseInt() 函数转换字符串'123abc' 后得到的数字:"+parseInt("123abc")); //包含非数字,返回开头的合法数字部分
document.write("<br>");
document.write("通过parseInt() 函数转换字符串'abc123' 后得到的数字:"+parseInt("abc123")); //包含非数字,以非数字开头,返回NaN
document.write("<br>");
</script>
5、转换为Boolean
使用内置函数Boolean() 转换为Boolean值。当转换字符串时:非空即为true;当转换数字时:非0即为true;当转换对象时:非null即为true
<script>
document.write("空字符串''转换为布尔后的值:"+Boolean("")); //空字符串
document.write("<br>");
document.write("非空字符'hello javascript '串转换为布尔后的值:"+Boolean("hello javascript")); //非空字符串
document.write("<br>");
document.write("数字 0 转换为布尔后的值:"+Boolean(0)); //0
document.write("<br>");
document.write("数字 3.14 转换为布尔后的值:"+Boolean(3.14)); //非0
document.write("<br>");
document.write("空对象 null 转换为布尔后的值:"+Boolean(null)); //null
document.write("<br>");
document.write("非空对象 new Object() 转换为布尔后的值:"+Boolean(new Object())); //对象存在
document.write("<br>");
</script>
八、函数
<script>
//函数定义
function print(){
document.write("这一句话是由一个自定义函数打印");
}
//调用函数
print();
</script>
带参数的函数和带返回值的函数:
<script>
function print(message){
document.write(message);
}
function calc(x,y){
return x+y;
}
var sum = calc(500,20);
print(sum);
</script>
九、事件
事件是javascript允许html与用户交互的行为。 用户任何对网页的操作,都会产生一个事件。
事件有很多种,比如鼠标移动,鼠标点击,键盘点击等等。
本例演示当一个按钮被点击的时候,弹出一个对话框
<script>
function showHello(){
alert("Hello JavaScript");
}
</script>
<button onclick="showHello()">点击一下</button>
十、算术运算符
基本算数运算符、自增自减运算符、赋值运算符,+运算符的多态。
+ 具备多态特征:当两边都是数字的时候 ,表现为算数运算符,当任意一边是字符串的时候,表现为字符串连接符
<script>
document.write('当+两边都是数字的时候,+就是加法运算符,所以1+2='+(1+2));
document.write("<br>");
document.write('当+任意一边是字符串的时候,+就是字符串连接符,所以1+\"2\"='+ (1+"2"));
</script>
十一、逻辑运算符
基本逻辑运算符、绝对等,绝对不等于、三目运算符 ? : 。
绝对等===:除了值相等,类型也必须相等;绝对不等!==:同理
<script>
function p(s){
document.write(s);
document.write("<br>");
}
//true
p("1=='1': "+(1=='1'));
//false
p("1==='1': "+(1==='1'));
</script>
十二、条件语句
1、if-else语句
<script>
var age = 20;
if(age<18){
document.write("小于18就看 卡通");
}
else if(age<22){
document.write("大于等于18,并且小于22,就看 你懂的");
}
else{
document.write("大于等于22就看 新闻联播");
}
</script>
2、switch语句
<script>
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var today;
switch (day)
{
case 0:
today="星期天";
break;
case 1:
today="星期一";
break;
case 2:
today="星期二";
break;
case 3:
today="星期三";
break;
case 4:
today="星期四";
break;
case 5:
today="星期五";
break;
case 6:
today="星期六";
break;
}
document.write("今天是 : "+today);
</script>
十三、循环语句
常用的循环语句有: for, while, do-while, for-each(常用于数组中)
<script>
function p(s){
document.write(s);
document.write("<br>");
}
document.write("使用for循环打印 0 到 4<br>");
for(var i=0;i<5;i++){
p(i);
}
</script>
十四、错误处理
try-catch:抓住错误,使后续的代码,可以继续执行。
<script>
function f1(){
//函数f1是存在的
}
try{
document.write("试图调用不存在的函数f2()<br>");
f2(); //调用不存在的函数f2();
}
catch(err){
document.write("捕捉到错误产生:");
document.write(err.message);
}
document.write("<p>因为错误被捕捉了,所以后续的代码能够继续执行</p>");
</script>
十五、JavaScript 对象
JavaScript中的对象是有着属性和方法的一种特殊数据类型。常见的对象有数字Number,字符串String,日期Date,数组Array等。
1、数字对象
对象Number,和基本数据类型中的基本类型Number是不一样的Number。对象拥有更多的属性和方法。
1、新建一个数字对象:new Number() / typeof查看类型
<script>
var x = new Number(123);
document.write('数字对象x的值:'+x);
document.write("<br>");
document.write('数字对象x的类型:'+typeof x); //通过typeof 获知这是一个object
document.write("<br>");
var y = 123;
document.write('基本类型y的值:'+y);
document.write("<br>");
document.write('基本类型y的类型:'+typeof y); //通过typeof 获知这是一个number
</script>
2、最小值最大值
<script>
document.write('Number对象的最小值:'+Number.MIN_VALUE);
document.write("<br>");
document.write('Number对象的最大值:'+Number.MAX_VALUE);
</script>
3、表示不是一个数字:isNaN()
<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>
4、返回一个数字的小数表达:toFixed()
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var a = new Number("123");
p("数字对象123通过toFixed(2) 保留两位小数:"+a.toFixed(2)); //保留两位小数点
var b = new Number("3.1415926");
p("PI 通过toFixed(3) 保留三位小数:"+b.toFixed(3));//保留三位小数点
</script>
5、返回一个数字的科学计数法表达:toExponential()
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var a = new Number("123");
p("数字对象123通过toExponential 返回计数法表达 "+a.toExponential ());
var b = new Number("3.1415926");
p("数字对象3.1415926通过toExponential 返回计数法表达 "+b.toExponential ());
</script>
6、返回一个数字对象的基本数字类型:valuedof()
<script>
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>
2、字符串对象
关键字 | 简介 |
---|---|
new String() | 创建字符串对象 |
属性 length | 字符串长度 |
方法 charAt charCodeAt | 返回指定位置的字符(返回指定位置的字符对应的Unicode码) |
方法 concat | 字符串拼接 |
方法 indexOf lastIndexOf | 子字符串出现的位置(第一次 最后一次) |
方法 localeCompare | 比较两段字符串是否相同(此处0表示相同,1 表示字母顺序靠后,-1 表示字母顺序靠前) |
方法 substring | 截取一段子字符串(此处两个参数表示起始位置和结束位置,左闭右开,右边取不到) |
方法 split | 根据分隔符,把字符串转换为数组(此处第二个参数可选,表示返回数组的长度) |
方法 replace | 替换子字符串(默认情况下只替换找到的第一个子字符串) |
方法 charAt 方法 concat 方法 substring | 返回基本类型 |
1、创建字符串对象
<script>
var x = "5";
var y = new String(x);
document.write("变量x的值是:"+x);
document.write("<br>");
//string
document.write("变量x的类型是:"+(typeof x));
document.write("<br>");
document.write("变量y的值是:"+y);
document.write("<br>");
//object
document.write("变量y的类型是:"+(typeof y));
document.write("<br>");
</script>
2、字符串长度
<script>
var y = new String("Hello JavaScript");
document.write("通过.length属性获取字符串'Hello JavaScript'的长度"+y.length);
</script>
3、返回指定位置的字符
<script>
var y = new String("Hello JavaScrpt");
document.write("字符串y的值:"+y);
document.write("<br>");
document.write('通过 charAt(0)获取位置0的字符串: '+y.charAt(0)); //返回H
document.write("<br>");
document.write('通过 charCodeAt(0)获取位置0的字符的 Unicode码 :'+y.charCodeAt(0)); //返回H对应的Unicode码 72
</script>
4、字符串拼接
<script>
var x = new String("Hello ");
var y = new String("Javascript");
document.write( '字符串x的值: '+x);
document.write('<br>');
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write( '通过函数concat()把x和y连接起来: ' + x.concat(y) );
</script>
5、子字符串出现的位置
<script>
var y = new String("Hello JavaScript");
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write('通过 indexOf ("a")获取子字符"a" 第一次出现的位置 '+y.indexOf ("a"));
document.write('<br>');
document.write('通过 lastIndexOf ("a")获取子字符"a" 最后出现的位置 '+y.lastIndexOf ("a"));
</script>
6、比较两段字符串是否相等
<script>
var x = new String("Hello");
var y = new String("Hello");
var z = new String("aloha");
document.write( '字符串x的值: '+x);
document.write('<br>');
document.write( '字符串y的值: '+y);
document.write('<br>');
document.write( '字符串z的值: '+z);
document.write('<br>');
document.write('通过 localeCompare()判断 x和y是否相等 '+x.localeCompare(y));//返回0
document.write('<br>');
document.write('通过 localeCompare()判断 x和z是否相等 '+x.localeCompare(z));//返回1
document.write('<br>');
document.write('0 表示相等<br>');
document.write('1 表示字母顺序靠后<br>');
document.write('-1 表示字母顺序靠前<br>');
</script>
7、截取一段子字符串
<script>
var x = new String("Hello JavaScript");
document.write( '字符串x的值: '+x);
document.write('<br>');
document.write('x.substring (0,3) 获取位0到3的字符串: '+x.substring (0,3) );
document.write('<br>');
document.write('左闭右开,取得到0,取不到3');
</script>
8、根据分隔符,把字符串转换为数组
<script>
var x = new String("Hello This Is JavaScript");
document.write( '字符串x的值: '+x);
document.write('<br>');
var y = x.split(" ");
document.write('通过空格分隔split(" "),得到数组'+y);
document.write("<br>");
var z = x.split(" ",2);
document.write('通过空格分隔split(" ",2),得到数组,并且只保留前两个'+z);
</script>
9、替换子字符串
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new String("Hello JavaScript");
p('这个是原字符串: '+x);
var y = x.replace("a","o");
p('只替换第一个 a: '+y);
var regS = new RegExp("a","g");
var z = x.replace(regS, "o");
p('替换掉所有的 a: '+z);
</script>
替换掉所有的a
x.replace(/a/g, "o");
或者
var regS = new RegExp("a","g");
x.replace(regS, "o");
10、返回基本类型
所有返回字符串类型的方法,返回的都是基本类型的String
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new String("Hello JavaScript");
var temp = x.charAt(0);
p('charAt返回的值'+temp);
p('其类型是'+ typeof temp );
var temp = x.concat("!!!");
p('concat返回的值'+temp);
p('其类型是'+ typeof temp );
var temp = x.substring(0,5);
p('substring返回的值'+temp);
p('其类型是'+ typeof temp );
</script>
3、数组对象
javascript中的数组是动态的,即长度是可以发生变化的。
关键字 | 简介 |
---|---|
new Array | 创建数组对象 |
属性 length | 数组长度 |
for for in | 遍历一个数组 |
方法 concat | 连接数组 |
方法 join | 通过指定分隔符,返回一个数组的字符串表达 |
方法 push pop | 分别在最后的位置插入数据和获取数据(获取后删除) |
方法 unshift shift | 分别在最开始的位置插入数据和获取数据(获取后删除) |
方法 sort | 对数组的内容进行排序 |
方法 sort(comparator) | 自定义排序算法 |
方法 reverse | 对数组的内容进行反转 |
方法 slice | 获取子数组 |
方法 splice | 删除和插入元素 |
1、创建数组对象:三种方式,空数组/指定长度/指定初值
<script>
function p(s,v){
document.write(s+' '+v);
document.write("<br>");
}
var x = new Array(); //创建长度是0的数组
p('通过 new Array()创建一个空数组:',x);
x = new Array(5); //创建长度是5的数组,,但是其每一个元素都是undefine
p('通过 new Array(5)创建一个长度是5的数组:',x);
p('像new Array(5) 这样没有赋初值的方式创建的数组,每个元素的值都是:',x[0]);
x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组
p('创建有初值的数组new Array(3,1,4,1,5,9,2,6) :',x);
</script>
2、数组长度
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组
p('当前数组是:'+x);
p('通过.length获取当前数组的长度:'+x.length);
</script>
3、遍历一个数组:普通for循环和增强for循环
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
p('当前数组是:'+x);
p("使用普通的for循环遍历数组");
for(i=0;i<x.length;i++){ //普通for循环
p(x[i]);
}
//注意此处i是下标不是元素
p("使用增强for循环遍历数组");
for(i in x){ //for in 循环
p(x[i]);
}
</script>
4、连接数组
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
var y = new Array(1,5,9,2,6);
p('数组x是:'+x);
p('数组y是:'+y);
var z = x.concat(y);
p('使用concat连接数组x和y');
p('数组z是:'+z);
</script>
5、通过指定分隔符,返回一个数组的字符串表达
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
p('数组x是:'+x);
var y = x.join();
//y是3,1,4
p('y = x.join() 得到的是数组x的字符串表达,其值是'+y+" 其类型是 :" +(typeof y));
var z = x.join("@");
//z是3@1@4
p('z = x.join("@");是x的字符串表达,不过分隔符不是默认的"," 而是"@" : '+z);
</script>
6、分别在最后的位置插入数据和获取数据(获取后删除)
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
p('数组x是:'+x);
x.push(5);
p('向x中push 5,得到 ' + x);
var e = x.pop();
p('从x中pop一个值出来,其值是 ' + e);
p('pop之后,x数组的值是:'+x);
</script>
7、分别在最开始的位置插入数据和获取数据(获取后删除)
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4);
p('数组x是:'+x);
x.unshift (5);
p('对数组 unshift 值5(在最前面加),数组变为:' + x);
var e = x.shift ();
p('从数组中 shift 一个数(从最前面取),其值是:' + e);
p('shift之后,数组变为:' + x);
</script>
8、对数组的内容进行排序 :默认从小到大
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
x.sort();
p('使用sort排序后的数组x是:'+x);
</script>
9、自定义排序算法:此处是从大到小
<script>
function p(s){
document.write(s);
document.write("<br>");
}
function comparator(v1,v2){
return v2-v1;
}
var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
x.sort(comparator);
p('使用sort 进行自定义倒排序后的数组x是:'+x);
</script>
10、对数组的内容进行反转
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
x.reverse();
p('使用reverse()函数进行反转后的值是:'+x);
</script>
11、获取子数组
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
var y = x.slice(1);
//返回1,4,1,5,9,2,6
p('x.slice(1)获取的子数组是:'+y);
var z = x.slice(1,3);
//返回1,4,第二个参数取不到
p('x.slice(1,3)获取的子数组是:'+z);
p('第二个参数取不到');
</script>
12、删除和插入元素:splice(),不是slice()
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var x = new Array(3,1,4,1,5,9,2,6);
p('数组x是:'+x);
x.splice (3,2);//从位置3开始 ,删除2个元素
p('x.splice (3,2) 表示从位置3开始 ,删除2个元素:'+x);
x.splice(3,0,1,5);
p('x.splice(3,0,1,5) 从位置3开始,删除0个元素,但是插入1和5,最后得到:'+x);
</script>
4、日期对象
关键字 | 简介 |
---|---|
new Date | 创建日期对象 |
getFullYear getMonth getDate | 年/月/日 |
getHours getMinutes getSeconds getMilliseconds | 时:分:秒:毫秒 |
getDay | 一周的第几天 |
getTime | 经历的毫秒数 |
setFullYear setMonth setDate setHours setMinutes setSeconds | 修改日期和时间 |
1、创建日期对象
运行效果:new Date():Wed Apr 20 2022 08:40:25 GMT+0800 (中国标准时间)
<script>
var d = new Date();
document.write('new Date():'+d);
</script>
2、年\月\日
运行效果:分别获取年月日: 2022/4/20
<script>
var d = new Date();
document.write('分别获取年月日: ');
document.write(d.getFullYear());
document.write("/");
document.write(d.getMonth()+1);
document.write("/");
document.write(d.getDate());
</script>
3、 时:分:秒:毫秒
运行效果:分别获取时:分:秒:毫秒 8:40:25:776
<script>
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());
</script>
4、一周的第几天
通过getDay()获取,今天是本周的第几天;与getMonth()一样,返回值是基0的。
<script>
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var weeks = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
document.write("今天是 : "+weeks[day]);
</script>
5、经历的毫秒数
运行效果:从1970/1/1 08:00:00 到今天的毫秒数: 1650415225791
<script>
var time = new Date().getTime();
document.write("从1970/1/1 08:00:00 到今天的毫秒数: "+ time);
</script>
6、修改日期和时间
运行效果:修改日期对象的值为世界末日:
Wed Dec 12 2012 00:00:00 GMT+0800 (中国标准时间)
<script>
var d=new Date();
document.write("修改日期对象的值为世界末日:<br>");
d.setFullYear(2012);
d.setMonth(11); //月份是基0的,所以11表示12月
d.setDate(12);
d.setHours(0);
d.setMinutes(0);
d.setSeconds(0);
document.write(d);
</script>
5、Math对象
关键字 | 简介 |
---|---|
属性E PI | 自然对数和圆周率 |
方法 abs | 绝对值 |
方法 min max | 最小最大 |
方法 pow | 求幂 |
方法 round | 四舍五入 |
方法 random | 随机数:0到1之间 |
1、自然对数和圆周率
<script>
document.write(Math.E);
document.write("<br>");
document.write(Math.PI);
</script>
2、绝对值
<script>
document.write(Math.abs(-1));
</script>
3、最小最大
<script>
document.write(Math.min(1,100));
document.write("<br>");
document.write(Math.max(1,100));
</script>
4、求幂
<script>
document.write(Math.pow(3,3)); //3的立方,即27
</script>
5、四舍五入
<script>
document.write(Math.round(3.4));
document.write("<br>");
document.write(Math.round(3.5));
</script>
6、随机数
<script>
document.write("一个 0-1 之间的随机数 : Math.random():");
document.write("<br>");
document.write(Math.random());
document.write("<br>");
document.write("十个 5-10 之间的随机数 : Math.round(Math.random() *5)+5 ");
document.write("<br>");
for(i=0;i<10;i++){
document.write(Math.round(Math.random() *5)+5 ); //5-10之间的随机整数
document.write("<br>");
}
</script>
6、自定义对象
在JavaScript中可以自定义对象,添加新的属性,添加新的方法
1、通过new object创建对象
<script>
var hero = new Object();
hero.name = "盖伦"; //定义一个属性name,并且赋值
hero.kill = function(){
document.write(hero.name + " 正在杀敌" ); //定义一个函数kill
}
hero.kill(); //调用函数kill
</script>
2、通过function设计一个对象,然后实例化它
这种思路很像Java里的设计一种类,但是 javascript没有类,只有对象,所以我们叫设计一种对象。
与通过new object()创建对象不同的是:通过new Object创建对象有个问题,就是每创建一个对象,都得重新定义属性和函数。这样代码的重用性不好
<script>
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();
</script>
3、为已经存在的对象,增加新的方法:prototype
<script>
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();
//此处追加一个新的方法keng()
Hero.prototype.keng = function(){
document.write(this.name + "正在坑队友<br>");
}
gareen.keng();
teemo.keng();
</script>
十六、BOM
BOM即 浏览器对象模型(Browser Object Model)
浏览器对象包括:Window(窗口)、Navigator(浏览器)、Screen (客户端屏幕)、History(访问历史)、Location(浏览器地址)
1、Window
一旦页面加载,就会自动创建window对象,所以无需手动创建window对象。
1、获取文档显示区域的高度和宽度
<script>
document.write("文档内容");
document.write("文档显示区域的宽度"+window.innerWidth);
document.write("<br>");
document.write("文档显示区域的高度"+window.innerHeight);
</script>
2、获取外部窗体的宽度和高度
外部窗体即浏览器,可能用的是Edge,火狐,IE, Chrome等等。
<script>
document.write("浏览器的宽度:"+window.outerWidth);
document.write("<br>");
document.write("浏览器的高度:"+window.outerHeight);
</script>
3、打开一个新的窗口
不建议使用,如果需要打开一个新的网站,应该通过超级链接等方式让用户主动打开,在没有告知用户的前提下就打开一个新的网站会影响用户的体验
<script>
function openNewWindow(){
myWindow=window.open("/");
}
</script>
<button onclick="openNewWindow()">打开一个新的窗口</button>
2、Navigator
打印浏览器相关信息:
浏览器产品名称:Netscape
浏览器版本号:5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36 Edg/100.0.1185.44
浏览器内部代码:Mozilla
操作系统:Win32
是否启用Cookies:true
浏览器的用户代理报头:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36 Edg/100.0.1185.44
<script type="text/javascript">
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>");
</script>
3、Screen
返回用户的屏幕大小,以及可用屏幕大小(可用屏幕会略小,因为任务栏的存在)
<html>
<body>
<script type="text/javascript">
document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("可用区域大小: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
</script>
</body>
</html>
4、History
1、返回上一次的访问
<script>
function goBack()
{
history.back();
}
</script>
<button onclick="goBack()">返回</button>
2、返回上上一次的访问
<script>
function goBack()
{
history.go(-2); //-1表示上次,-2表示上上次,以次类推
}
</script>
<button onclick="goBack()">返回上上次</button>
5、Location
表示浏览器中的地址栏
1、刷新当前页面
<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>
2、跳转到另一个页面
<script>
function jump(){
//方法1
//location="/";
//方法2
location.assign("/");
}
</script>
<br>
<button onclick="jump()">跳转到首页</button>
3、Location的其他属性
运行效果:
协议 location.protocol:https:
主机名 location.hostname:how2j.cn
端口号 (默认是80,没有即表示80端口)location.port:
主机加端口号 location.host: how2j.cn
访问的路径 location.pathname: /k/javascript/javascript-bom-location/451.html
锚点 location.hash:
参数列表 location.search:
<script>
function p(s){
document.write(s);
document.write("<br>");
}
p("协议 location.protocol:"+location.protocol);
p("主机名 location.hostname:"+location.hostname);
p("端口号 (默认是80,没有即表示80端口)location.port:"+location.port);
p("主机加端口号 location.host: "+location.host);
p("访问的路径 location.pathname: "+location.pathname);
p("锚点 location.hash: "+location.hash);
p("参数列表 location.search: "+location.search);
</script>
6、弹出框
浏览器上常见的弹出框有:警告框,确认框,提示框 这些都是通过调用window的方法实现的。
比如警告框用的是window.alert("警告内容"),因为很常用,所以就把window省略掉,直接使用alert
关键字 | 简介 |
---|---|
alert | 警告框 |
confirm | 确认框 |
prompt | 输入框 |
1、警告框
<script>
function register(){
alert("注册成功");
}
</script>
<br>
<button onclick="register()">注册</button>
2、确认框
<script>
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
}
</script>
<br>
<button onclick="del()">删除</button>
3、输入框
输入框 prompt,用于弹出一个输入框,供用户输入相关信息。 因为弹出的界面并不好看,很有可能和网站的风格不一致,所以很少会在实际工作中用到。
<script>
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}
</script>
<br>
<button onclick="p()">请输入用户名</button>
7、计时器
关键字 | 简介 |
---|---|
setTimeout | 只执行一次函数 setTimeout(functionname, 距离开始时间毫秒数 ):在制定的毫秒数时间后,执行一次函数functionname |
setInterval | 不停地重复执行 setInterval(函数名, 重复执行的时间间隔毫秒数 ) |
clearInterval | 终止重复执行 |
document.write() | 不要在setInterval调用的函数中使用document.write(); |
1、只执行一次
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
//document.getElementById 获取id=time的div元素, .innerHTML修改该元素的内容
document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
function showTimeIn3Seconds(){
setTimeout(printTime,3000);
}
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button>
2、不停的重复执行
<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>
<br><br>
3、终止重复执行:通过clearInterval终止一个不断重复的任务
<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>
<br>
4、不要在setInterval调用的函数中使用document.write()
注:该情况只能看到一次打印的结果(针对部分浏览器)
这是因为document.write,会创建一个新的文档,而新的文档里,只有打印出来的时间字符串,并没有setInterval这些javascript调用,所以只会看到执行一次的效果。?
<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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!