JavaScript概述
- 全称JavaScript,简称JS.
- JS是一门基于对象和事件驱动的脚本语言，专门为网页交互而设计，主要应用在客户端（浏览器）。
1.JavaScript特点
- 解释执行，没有编译过程
- 基于对象：JS没有编译过程，也没有类的概念，但可以通过一些机制模拟面向对象
- 事件驱动: 在JS中, 很多地方都是通过事件触发来驱动函数执行, 从而实现某些功能.
- 弱类型（var）
2.HTML中引入JS方式
- 直接将JS代码写入HTML元素上
- 第二种引入方式: 通过script标签
- 第三种方式: 引入外部的JS文件
3.JavaScript语法
-
数据类型
1.基本数据类型
数值类型（number）：在JS中, 数值类型底层只有一种, 就是浮点型.
在需要的时候,JS会在浮点型和整型之间自动的进行转换
3.4+2.6=6;
特殊值：
Infinity:正无穷大
NaN: 表示非数字,NaN和任何值都不相等, 包括它本身.
字符串类型（string）:在JS中, 字符串属于基本数据类型.JS中的字符串常量可以使用双引号或者单引号引起来.
var str1 = "Hello JS";
var str2 = 'Hello JS';
布尔类型（boolean）:布尔类型的值分为true和false.
var Bool = true;
undefined:表示变量未定义(其实是变量声明了但是没有赋值。
null:空值
2.复杂数据类型
对象（函数/数组/对象）
var app = function(){
alert("This is a function");
}
-
变量和运算符
1.变量的定义：在JS中, 是通过 var 关键字来声明变量
var str = "Hello JS"; //声明字符串
var num = 100; //声明数值
//声明函数
var f = function([参数列表]){
//函数体
}
var arr = [100,"hello",true]; //声明数组
var date1 = new Date(); //声明对象
在JS中, 通过var 声明的变量本身是不区分类型. 变量可以指向任意的数据类型.
var x = "abc";
x = 100;
x = true;
2.运算符：JS中的运算符和Java中的运算符大致相同
算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: == ，!= ，=== ，!== ，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: ? :
其他运算符: typeof, delete
1.== 和===的区别？
(1) 如果在比较时, 比较的两个值属于同一种数据类型, 此时, == 和===没有区别, 比较的结果是一样的!
(100+23) == 123; //true
(100+23) === 123; //true
(2)如果在比较时, 比较的两个值不属于同一种数据类型, 此时, ===不予比较,直接返回false.==是先将两个值转成同一种数据类型, 再比较是否相等.
"123" == 123; //true
"123" === 123; //false
2.typeof运算符：用于返回变量或者表达式的数据类型
var x = 123;
document.write(typeof x +"
");//number
x = "123";
document.write(typeof x +"
");//string
x = true;
document.write(typeof x +"
");//boolean
document.write(typeof 123+"abc"+"
");//numberabc
document.write(typeof (123+"abc"));//string
-
语句
JS中的语句和Java中的大致相同
在JS中, 判断条件或者循环条件即使不是布尔类型, 也可以执行, 是先转成布尔类型再进行判断
1.if...else
var x = 123;
if( x = 100){//如果判断条件不是布尔类型,先转成布尔类型再判断
console.log("yes");
}else{
console.log("no");
}
2.switch
var day = 3;
switch(day){
case 1: console.log("周一");break;
case 2: console.log("周二");break;
case 3: console.log("周三");break;
case 4: console.log("周四");break;
case 5: console.log("周五");break;
default:
console.log("周末");
}
3.循环
for(var i = 0;i<5;i++){
console.log("这是第"+(i+1)+"次循环！");
}
-
数组
1.声明方式
通过Array函数声明数组
var arr1 = new Array();//声明一个空数组
var arr2 = new Array(true,"abc",123);
//声明一个具有初始值的数组
var arr3 = new Array(10);
console.log( "arr1:"+arr1 );
console.log( "arr2:"+arr2 );
console.log( "arr3:"+arr3 );
通过数组直接量声明数组
var arr4 = [];//声明空数组
var arr5 = ["hello",123,true];//声明有初始值的数组
2.常见属性及方法
length属性 – 用于返回数组的长度
var arr6 = ["hello", true, "abc", 123];
console.log("数组的length:"+ arr6.length );//4
pop/shift 方法-- 删除数组中最后一个(或第一个)位置的元素并返回该元素
var arr6 = ["hello", true, "abc", 123];
console.log("pop:"+ arr6.pop() );//123
-
函数
函数其实是一个具有功能的代码块, 可以反复调用
1.声明方式
//声明方式1：
//无参
function fun1(){
alert("fun1函数执行啦！");
}
fun1();
//有参
function fun2(name,nickname){
alert(name+":"+nickname);
}
fun2("张三","三子");
JS函数的细节: 在JS中调用函数时, 函数的参数多传或者少传也可以调用函数, 但是可能会引发一些问题或者错误!
//声明方式2：
var fn3 = function(name,age){
alert(name+":"+age);
}
fn3("李四",18);
-
对象
1.JS自定义对象
声明方式
//================== 方式1 ==================//
function Person(){}
var p1 = new Person();
//动态为对象添加属性的方法
p1.name = "李四";
p1.age = 18;
p1.run = function() {
// body...
console.log(this.name+":"+this.age);
}
//访问p1对象上的属性和方法
console.log(p1.name);
console.log(p1.age);
p1.run();
//=========
function Person(name, age){
this.name = name;
this.age = age;
this.run = function(){
console.log(this.name+":"+this.age);
}
}
var p2 = new Person("张三",20);
console.log(p2.name);
console.log(p2.age);
p2.run();
//================= 方式2 (类JSON)=================//
var p3 = {
"name": "王五",
"age" : 35,
"run" : function(){
console.log(this.name+":"+this.age);
}
};
console.log(p3.name);
console.log(p3.age);
p3.run();
2.JS内置对象
(1).String对象
var str1 = new String("abc"); //对象
var str2 = new "abc"; //基本数据类型string
alert(typeof str1); //object
alert(typeof str2); //string
//string类型在需要时会自动转化成对应的包装对象
alert(str2.toString());
- 常见属性和方法
var str = "Hello JavaScript...Java";
//（01）length属性 -- 返回字符串的长度
console.log(str.length); //23
//（02）charAt方法 -- 返回指定索引处的字符
console.log(str.charAt(2)); //"1"
//（03）indexOf方法 -- 根据子字符串到字符串进行查找, 返回子字符串第一次出现的位置.
console.log(str.indexOf("Java")); //6
//（04）lastIndexOf方法 --根据子字符串到字符串进行查找, 返回子字符串最后一处的位置.
console.log(str.lastIndexOf("Java"))); //19
//======================================//
//i -- ingroeCase忽略大小写
//g -- global全局检索
//======================================//
//（05）match方法 -- 根据正则表达式到字符串中进行匹配, 返回包含所有符合正则表达式的子字符串的数组
var str3 = "Hello JavaScript...Java";
var reg = /Java/g;
alert(str3.match(reg)); //Java, Java
// (06) repace方法
alert(st3.replace(reg2,"C++")); //Hello C++Script...C++
//（07）search方法 -- 根据正则表达式到字符串中进行匹配, 返回第一次出现的位置.
alert(st3.search(reg3));//6
//（08）split方法 -- 根据指定的字符切割字符串,返回一个数组
alert(str3.spilt("...")) //["Hello JavaScript", "Java"]
//（09）slice方法 -- 从start开始截取,截取到end这个位置.(包含start, 不包含end)
alert(str3.slice(6.10)); //Java
//（10）substr方法 -- 从start开始截取,截取指定长度的字符串
alert(str3.substr(6,4)); //Java
//（11）toLowerCase -- 转小写，示例略。
//（12）toUpperCase -- 转大写，示例略。
(2).Array对象
(3).Date对象
- 声明方式
//（1）声明方式一
var date1 = new Date();//表示当前时间
alert(date1.toLocaleString());
//（2）声明方式二
var date2 = new Date(1000*3600);//1970-1-1
alert(date2.toLocaleString());
//（3）声明方式三
//月份是从零开始, 0表示1月, 11表示12月
var date3 = new Date(2017,10,11);
alert(date3.toLocaleString());
- 方法
| 方法 | 相关描述 |
|---|---|
| getFullYear() | 年份 |
| getMonth() | 月份 |
| getDate() | 天 |
| getDay() | 星期几 |
(4).Math对象
| 方法 | 相关描述 |
|---|---|
| Math.PI | 返回圆周率 |
| Math.ceill | 向上取整 |
| Math.round | 四舍五入 |
| Math.floor | 向下取整 |
| Math.random | 获取一个伪随机数(0~1之间的浮点数) |
(5).Global对象
Global表示全局对象, 可以直接调用其属性或方法(不需要加对象点);
| 方法 | 相关描述 |
|---|---|
| parseInt() | 将传入的值转成整数 |
| parseFloat() | 将传入的值转成浮点数 |
| isNaN | 判断一个值是否是非数字 |
| eval | 将一段字符串按照JS代码来解释执行 |
(6).RegExp对象
(1)声明方式
//方式一
var reg1 = new RegExp(“^\\w+@\\w+(\\.\\w+)+$”);
//方式二
var reg2 = /^\w+@\w+(\.\w+)+$/;
(2)test方法：用来检测字符串是否符合该正则表达式, 符合返回true, 不符合返回false
//======= 简单的邮箱验证 =========//
var email = "[email protected]";
var reg2 = /^\w+@\w+(\.\w+)+$/
//^和$是开始和结束标记, 表示整个字符串都符合该正则表达式时才会返回true
alert(reg2.test(email));
标识符
i -> ignoreCase 忽略大小写
g -> global 全局检索