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>

posted @ 2022-06-01 18:10 代码生财阅读(71) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· HTML的基本使用

· HTML DOM的基本使用

· JavaScript学习

· JavaScript基础看这一篇就够了

· JavaScript基础

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

公告

昵称：代码生财
园龄： 4年7个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

leo_lai

atomic coding