JavaScript

JavaScript通常简称JS，由网景(NetScape)公司推出。

是一门面向对象的、轻量级、弱类型的解释性脚本语言。

弱类型：没有数据类型的限制，变量甚至可以不用定义就能使用。

解释性：无需编译，通过解释器解释运行。浏览器就是一个JS解释器。

script脚本：按指令顺序执行。

JS的作用

HTML用来定义页面中的内容

CSS用于控制HTML元素的外观样式

JS用来操作HTML元素

HTML+CSS+JS组成前端基本三要素。

  • 可以在页面中控制任意元素
  • 可以在页面中动态嵌入元素
  • 可以操作浏览器
  • 可以与用户进行数据交互
  • 。。。

JS写在哪里

1、写在某个标签的某个事件中

事件如鼠标单击onclick、鼠标移入onmouseenter等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
		<!-- 通过提示框输出alert('输出内容') -->
		<button οnclick="alert('Hello JS')">点击</button>
		<!-- 通过控制台输出console.log('输出内容') -->
		<button οnclick="console.log('Hello JS!')">点击2</button>
		<!-- 通过新页面输出document.write('输出内容') -->
		<button οnclick="document.write('Hello JS!')">点击3</button>
		
	</body>
</html>

2、写在

该标签是一个双标签，可以放在页面的任何位置，通常放在head标签中或body标签结束的位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 可以将js代码写在这里 -->
		<script>
        	//js代码
            </script>
	</head>
	<body>
		<!-- 建议将js代码写在这里 -->
		<script>
        	//js代码
        </script>
	</body>
</html>

3、可以写在一个独立的.js文件中，再通过script标签导入

JS中的输出语句

1、弹警告框

alert(字符串或变量)

2、控制台输出

console.log(字符串或变量)

3、打印在新页面中

document.write(字符串或变量)

JS中的注释

//单行注释
/*
	多行注释
*/

JS的组成

1、ECMAScript

简称ES，是JS的标准，也是JS核心语法

包含了数据类型、定义变量、控制流程语句等语法。

2、BOM

浏览器对象模型

3、DOM

文档对象模型

ECMAScript核心语法

数据类型

原始类型：

JS中的原数类型

说明

数值型number

整数、小数都称为数值型

字符串String

用单引号或双引号引起来的都是

布尔型boolean

true/false

空null

某个引用类型变量通过null设置为空

未定义undefined

当某个变量没有声明或没有值时

引用类型

如对象、数组、函数等都是引用类型

定义变量

var/let 变量名:
var name;
var age;
let sex;

标识符的命名规则

  • 由字母、数字、下划线和$符号组成
  • 不能以数字开头
  • 不能使用js中的关键字

变量的初始化

var name;
name = "Tom";
var age = 22;
//可以不用var定义，但不建议			
sex = "男";
//都可以正常输出
console.log("name:"+name+",age:"+age+",sex:"+sex);

运算符

js中的boolean类型，0表示false，非0都是true。

默认true为1，所以可以用true或false当做数字使用。

所以可以用true或false当做数字来运算。

  • 算术运算符
+ - * / %
+ 两端如果有一端是字符串作为拼接使用
+ 两端如果都是数值，作为相加使用

除+外，其余符号都可以计算数字字符串
  • 关系
> < >= <=
用法同java，结果为boolean类型
==
比较显示的内容相同，不比较数据类型，如“123”==123，结果为true
===
比较的是内容与数据类型，都相同结果才为true
!=
比较值是否不同，如"123"!=123;结果为false
!==
同时比较值和数据类型是否不同，如"123" !== 123结果为true
  • 逻辑
&& || !
用法同Java
  • 赋值和复合赋值
= += -+ *= /+ %=

a*=b+c相当于a=a*(b+c)
符号两端当做整体运算后赋值给符号左边变量
  • 自增自减
++ --
符号在前，先+1或-1后使用
符号在后，先使用后+1或-1

如果独立成行，都+1或-1
var 1=10;
var res=i-- - --i;
//res为10-8=2，i最终为8
  • 条件
表达式1?表达式2:表达式3
判断表达式1，结果为true执行表达式2，结果为false执行表达式3

条件语句

if语句

js中的if语句条件可以是boolean值也可以是一个数字(0false,非0true)

//单分支
if(){
   
   }
//双分支
if(){
   
   }else{
    
}
//多分支
if(){
   
   }else if(){
            
   }
//嵌套
if(){
   if(){
    
	}
}

多分支if语句中，如果有一个条件满足则不再判断后续的条件，所以将范围最小的情况写在最前。

switch语句

//可以是任意类型
var op;
switch(op){
    case "":
        break;
    case 123:
        break;
    case true:
        break;
    default:
        
}

与java中不同的是，小括号中没有数据类型的限制，不同的case后可以写不同类型的数据。

没有break，会继续执行后续case后的内容，知道break或没有代码，如果没有任何case满足，执行default。

循环

while循环

while(循环条件){
    循环体
}

先判断后执行，有可能一次都不执行

do-while循环

do{
    循环体
}while(循环条件);

先执行一次，再判断，至少执行一次。

for循环

for(定义循环变量;判断循环条件;更新循环变量){
    循环体
}

continue和break

continue停止本次循环，执行下一次循环。

break停止所有循环。

JS中的本地对象

数组Array

JS中的数组类似于java中的ArrayList，

可以保存不同类型的数据，数组大小可变。

定义数组

var 数组名 = new Array();
var 数组名 = [];

数组使用

//定义数组
//1、默认没有给某个位置赋值时，是undefined
//2、最大下标决定了数组长度
//3、可以保存不同类型的数据
var list1= new Array();
list1[0]=123;
list1[3]="hello";
list1[10]=true;

数组遍历

// length属性可以获取数组长度
//循环所有下标，没有赋值元素的输出undefined
for(var i=0;i<list1.length;i++){
    console.log(list1[i]);
}
// 增强for循环，获取保存了数据的下标9
for(var index in list1){
    // 通过下标获取元素
    console.log(list1[index]);
}

数组初始化

var 数组名 = new Array(元素1，元素2，...)
var 数组名 = [元素1，元素2，...]

常用方法

方法名

作用

返回值

sort()

对数组中的元素进行升序排序

排序后的数组

reverse()

对数组中的元素进行倒序

倒序后的数组

pop()

移除最后一个元素

被移除的元素

push()

添加元素到数组末尾

最新的数组长度

shift()

删除数组中的第一个元素

被移除的元素

unshift()

添加元素到数组开头

最新的数组长度

fill(元素)

使用指定元素填充数组

填充后的数组

splice(index)

从指定索引开始分割数组，方法调用后，数组为剩余元素数组

返回截取到的元素数组

splice(index,length)

从指定索引开始截取指定长度的数组，方法调用后，数组为剩余元素数组

截取到的元素

以上方法在调用后，都会影响原数组

方法名

indexOf(元素)

得到某个元素第一次出现的索引

索引

lastIndexOf(元素)

得到某元素最后一次出现的索引

索引

concat(元素)

将指定元素添加到原数组末尾

添加后的数组

join(字符)

使用指定符号将数组元素拼接成一个字符串

拼接后的字符串

slice(start,end)

截取指定下标为[a,b)范围内的元素

截取后的数组

slice(index)

截取从index开始至末尾的元素

截取后的数组

Map(方法名)

让数组中的元素都执行指定方法

执行方法后的新数组

日期Date

创建Date对象

var now = new Date();

常用方法

// 获取当前日期时间
var now = new Date();

// 年
document.write(now.getFullYear()+"<br>");
//0-11,表示1-12
document.write(now.getMonth()+"<br>");
// 日期
document.write(now.getDate()+"<br>");
// 一周中的第几天 0-6表示周天到周六
document.write(now.getDay()+"<br>");

document.write(now.getHours()+"<br>");

document.write(now.getMinutes()+"<br>");

document.write(now.getSeconds()+"<br>");
//获取从1979/1/1日起经过的毫秒数
document.write(now.getTime()+"<br>");

//以上方法都有对应的set方法用于设定指定值

// 获取日期时间字符串
document.write(now.toString()+"<br>");
//获取日期部分字符串
document.write(now.toDateString()+"<br>");
//获取时间部分字符串
document.write(now.toTimeString()+"<br>");

// 以当前环境输出日期时间字符串
document.write(now.toLocaleString()+"<br>");
// 以当前环境输出日期字符串
document.write(now.toLocaleDateString()+"<br>");
// 以当前环境输出时间字符串
document.write(now.toLocaleTimeString()+"<br>");