JavaScript基础
简介
JavaScript是一种基于对象的、事件驱动型的、解释型的脚本语言,简称JS
1. 基于对象:(区别于面向对象),JavaScript和Java语言一样可以通过对象调用方法obj.fn()
2. 事件驱动:网页文档中的HTML标签事件触发JavaScript代码执行
3. 解释型:边解释边执行(不会先对网页进行编译生成中间文件)
4. 脚本语言:JavaScript不会独立运行,依赖于网页文件(HTML文档)存在(通俗的理解为js要写在网页中)
JS是一种嵌入在网页中的脚本语言,网页是通过浏览器加载并显示的,因此JS的执行是在浏览器中完成的;对于浏览器而言,它能够执行JS代码,在浏览器中内置了JavaScript解释器(JavaScript引擎)
作用
1.可以动态改变网页中HTML标签的属性
2.可以动态改变网页中HTML标签的样式
3.可以对用户输入的数据进行合法性校验(格式检查)
4.可以动态操作(新增HTML标签、删除HTML标签、修改HTML标签)网页中的HTML标签
5.可以实现页面数据的异步通信
书写位置
方式1: 在script标签中书写
方式2: 在js文件中书写,通过script标签进行引入,注意一个script标签只能引入一个js文件,不能既引入又在其内容区域编写js代码
注释
单行注释
语法: //注释内容
多行注释
语法: /*注释内容*/
数据类型
基本数据类型
Undefined - - (未定义)
Null- - (空的)因为从逻辑的角度null指向空对象指针,所以使用typeof关键字得到的数据类型为object
Number - - (数字)
Boolean- - (布尔值)
String- - (字符串)
引用数据类型
Object- - (对象)
包含但不限于array(数组),function(函数),date(时间)
JavaScript是弱类型语言
变量无论存储什么类型的值,一律使用 var 进行变量类型声明
一个变量可以设置不同类型的值
变量声明使用统一var类型,但是变量中存储的值是有类型的
typeof 变量名/值
作用:获取该变量或值的数据类型
特殊值:
null:空
undefined:未定义
NaN:是not a number的缩写,表示不是一个合法的数字,其类型为number
所有基本数据类型的数据都可以作为boolean型使用
0,null,undefined,""对应的boolean型为false
变量
语法:
声明:var 变量名;
赋值:变量名 = 值;
声明并赋值:var 变量名 = 值;
运算符
算术运算符
+,-,*,/,%,++,--
赋值运算符
=,+=,-=,*=,/=,%=
字符串连接符
+
关系运算符
<、>、>=、<=
==: 判断值相等
!=: 判断值不相等
===: 全等, 值和类型都相等
逻辑运算符
&&,||,!
当使用&&逻辑,全部为true时,将返回最后一个值
当使用&&逻辑,中间有false时,将返回该false对应的值
当使用||逻辑,有true时,返回true对应的值
当使用||逻辑,全为false时,返回最后一个值
三目运算符
var 变量名 = 条件表达式?值1:值2;
if、switch、while、do while、for、break、continue等的用法与java一致
错误处理
与java类似
示例1:
try{
var c = new Array(9999999999);//会产生RangeError
}catch(e){
console.log("超出范围")
}finally{
console.log("必须执行的代码");
}
示例2:
try{
var a = 10;
var b = 0;
if(b == 0){
throw "除0了";
}else{
var c = a/b;
}
}catch(e){
console.log(e);
}finally{
console.log("必须执行的代码");
}
函数
函数定义:
语法1:
funcation 方法名(形参列表){
方法体
}
示例:
function method01(a,b){
return a+b;
}
语法2:
var 变量名 = funcation(形参列表){
方法体
}
示例:
var method02 = function(a,b){
return a-b;
}
函数调用:
语法:
方法名(实参列表);
var 变量名 = 方法名(实参列表);
示例:
method01(10,2);
var a = method02(10,2);
数组
数组的定义
方式1: var 数组名 = [];
方式2: var 数组名 = new Array();
取值语法: 数组名[下标]
改值语法: 数组名[下标] = 值;
尾部添加: 数组名.push(值或其他数组);
删除值: delete 数组名[下标];
获取长度: var 变量名 = 数组名.length;
对象
方式1:直接创建对象 {}
语法:
var 对象名 = {"属性名/方法名1":值1,"属性名/方法名2":值2,"属性名/方法名3":值3,....};
方式2:先创建构建器,在通过构建器创建对象
语法:
funcation 类名(形参列表){
this.属性名1 = 值1;
this.属性名2 = 值2;
...
this.方法名 = 方法;
....
}
var 对象名 = new 类名(实参列表);
对象的使用:
对象调用属性
获取属性值:对象名.属性名;
设置属性值:对象名.属性名 = 值;
对象调用方法
对象名.方法名(实参列表);
示例1:
var obj01 = {
"name":"张三",
"age":18,
"sex":"女",
"eat":function(){
console.log(this.name+"吃饭");
}
}
示例2:
function Student(num,name){
//1-1.定义属性
this.stuNum = num;
this.stuName = name;
//1-2.定义方法
this.method1 = function(a){
console.log("Student---method1:"+a);
}
this.method2 = myMethod2;
}
function myMethod2(){
console.log("Student---method2");
}
//创建对象
var s1 = new Student("1001","张三");
var s2 = new Student("1002","李四");
添加属性或方法
示例1:
var stu01 = {"name":"张三","age":18};
stu01.sex = "男";
stu01.eat = function(){
console.log(this.name+this.sex+"干饭");
}
stu01.eat();
示例2:
function Student(name,age){
this.name = name;
this.age = age;
}
Student.prototype.sex="男";
Student.prototype.eat = function(){
console.log(this.name+this.sex+"吃饭");
};
var stu = new Student("李四",18);
stu.eat();
var stu2 = new Student("王五",18);
stu2.eat();
内置对象
类似于jdk提供的类
String
//1.创建String对象
var str1 = "www.jd.com";
var str2 = new String("www.TAOBAO.com");
//2.属性
// length属性获取当前字符串的长度
var len = str1.length;
//3.常用函数
// charAt : 获取str1中索引为3的字符(索引从0开始)
var c = str1.charAt(3);
// indexOf: 获取str1中第一次出现"jd"的索引
var i = str1.indexOf("jd");
// lastIndexOf: 获取str2中最后一个“o”的索引
var j = str2.lastIndexOf("o");
// split :分割字符串,将str1用"."分割成多个字符串,存放到arr中
var arr = str1.split(".");
// substring : 从str1字符串索引为4的位置开始截取,直到str1结束
var s1 = str1.substring(4);
// 从str1字符串索引为4的位置开始截取(包含),直到索引为9的位置(不包含)
var s2 = str1.substring(4,9);
//substr:从str1字符串索引为4的位置开始截取(包含),一共截取5个字符
var s3 = str1.substr(4,5);
// toUpperCase : 将str2所有字母都转大写
var s4 = str2.toUpperCase();
//toLowerCase : 将str2所有字母都转小写
var s5 = str2.toLowerCase();
//match : 判断str3字符串的格式是否匹配reg的规则,如果不匹配则返回值为null,正确返回该值
var str3 = "1303030330"; //假设str3是用户在页面输入的手机号
var reg = "^1[3,5,7,8,9]\\d{9}$"; //手机号码的规则(正则表达式)
var b = str3.match(reg);
RegExp
//RegExp对象的test函数进行正则校验
var str = "1303030330";
//一个RegExp对象就是一个正则规则
var reg = new RegExp("^1[35789]\\d{9}$");
//test函数:如果匹配返回true, 不匹配返回false
var b = reg.test(str);
console.log(b);
Math
var e = Math.E;
var pi = Math.PI;
//2.“静态”数学函数
//random : 随机产生一个[0,1)小数
var num = Math.random()*10;
//round : 对参数进行四舍五入得到一个整数
var i = Math.round(num); //0-10
//floor : 只舍不入, 向下取整, 获取比参数小的最大整数
var j = Math.floor(num); //0-9
//ceil : 只入不舍, 向上取整, 获取比参数大的最小整数
var k = Math.ceil(num);
// abs : 获取参数的绝对值
var m = Math.abs(-5);
//sqrt : 获取参数的平方根
var n = Math.sqrt(9);
Date
//1.创建Date对象:一个Date对象就表示一个时间,new Date()表示系统当前时间
var date = new Date();
//2.函数
// set*: 设置当前日期的日期成分
date.setFullYear(2029);
date.setMonth(11);
date.setDate(28);
// get*: 从当前日期对象中获取时间成分(年月日时分秒毫秒星期)
var year = date.getYear()+1900; //获取年份,相对于1900年的偏移年份
var year2 = date.getFullYear(); //获取公元纪年的年份
var month = date.getMonth()+1; //获取月份0-11
var d = date.getDate(); //获取日期
var hour = date.getHours(); //获取小时
var min = date.getMinutes(); //获取分钟
var sec = date.getSeconds(); //获取秒
var ms = date.getMilliseconds(); //获取毫秒
var day = date.getDay(); //获取星期
var timeStr = year+"年"+month+"月"+d+"日 "+hour+":"+min+":"+sec+" "+ms+" 星期"+day;
console.log(timeStr);
全局函数
简介: 通过全局对象Functions调用全局函数,Functions没有名称,因此全局函数可以直接调用
//parseInt:将字符串转换成整数数值
var s1 = "123";
var m = parseInt(s1);
//parseFloat:将字符串转换成小数数值
var s2 = "3.14";
var n = parseFloat(s2);
var url = "http://www.test.com/?param=中华有我";
//encodeURI: 对网址的参数部分进行编码(特殊符号和中文)
var newUrl = encodeURI(url);
//decodeURI: 对编码后的网址进行解码
var url2 = decodeURI(newUrl);
//escape:对字符串中的特殊符号和中文进行编码
var str1 = "My name is 老王";
var s = escape(str1);
//unescape:对编码后的字符串进行解码
var str2 = unescape(s);
//当一个字符串满足JS中对象的格式(JSON格式),我们可以通过eval转换成对象格式
var jsonStr = "{stuNum:'1001',stuName:'张三'}";
//eval:将满足JSON格式的字符串转换成JS对象
var stu = eval("("+jsonStr+")");
console.log(stu.stuName);