Javascript介绍
能够处理逻辑
可以和浏览器交互
不够严谨
javascript包含:
ECMAscript js的一种标准化规范 标出了一些基础的js语法
DOM document object model 文本对象模型 主要操作文档中的标签
BOM browser object model 浏览器对象模型 主要用来操作浏览器js引入和script标签
方式一:在html页写js代码
<script>
alert('hello,world')
</script>
方式二: 引入js文件
<script src="first.js"></script> 结束符和注释
结束符
; 是js代码中的结束符
单行注释
// alert('hello,world');
多行注释
/*多行注释*/变量
变量名 : 数字\字母\下划线\$
创建变量的关键字var :var a = 1;
创建变量的时候可以不指定数据类型
创建变量但不赋值 :var a; a创建出来就是一个undefined未定义输入输出
弹出框alert
alert('hello') 弹出框中的内容是"hello"
弹出输入框
var inp = prompt('问句') 弹出输入框,输入的内容会被返回给inp
控制台输出
console.log(变量或值)基础的数据类型
查看类型
typeof 变量;
typeof(变量);数字number
整数 var a = 1
小数 var b = 1.237
保留小数 b.toFixed(2) //1.24字符串String
var s1 = '单引号'
var s2 = '双引号都是字符串的表达方式'string 类型的常用方法
属性 : length
方法:
trim() 去空白
a.concat('abc') a拼接'abc'串
charAt(索引) 给索引求字符
indexOf(字符) 给字符求索引
slice(start,end) 顾头不顾尾,可以用负数,取子串
.toLowerCase() 全部变小写
.toUpperCase() 全部变大写
.split(',',2) 根据(第一个参数)分隔符切割,切前多少个结果boolean 布尔值
true : [] {}
false : undefined null NaN 0 '' null 空和undefined未定义
null 表示空 boolean值为false
undefined 没有定义 创建变量但是不赋值 boolean值为false内置对象类型
数组 Array
创建:
var arr = ['a','b','c'];
var arr2 = new Array();
索引操作:
arr[0] 查看
arr2[0] = 'alex' 赋值操作Array常用的属性和方法
属性:length
方法:
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() //在原数组上改的 反转
.join(seq) //a1.join('+')，seq是连接符 将数组元素连接成字符串
.concat(val, ...) //连个数组合并,得到一个新数组，原数组不变 连接数组
.sort() //排序
.splice() //参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) 删除元素，并向数组添加新元素。自定义对象
数据类型之间的转换
string --> int
parseInt('123') //123
parseInt('123abc') //123
parseInt('abc') //NaN not a number
string --> float
parseFloat('1.233')
float/int --> String
var num = 123
String(123)
var str = num.toString()
任意类型 --> Boolean
Boolean(数据)
字符串和数字相加 --> 字符串
字符串和数字相减 --> 数字运算符
赋值运算符
= += -= *= /= %=比较运算符
> < >= <=
== != 不比较类型
=== !== 比较类型和值(常用)算数运算符
+ - * / % **
++ --
var a = 1
undefined
var b = a++ // a=2 b=1
var c = ++a // a=3 c=3逻辑运算符
&& 逻辑与 ||逻辑或 !逻辑非
true && true //true
true || false //true
!true //false流程控制
特点:
所有的代码块都是用{}标识的
所有的条件都是用()标识的条件判断
if语句
if (true) {
//执行操作
}else if(true){
//满足条件执行
}else if(true){
//满足条件执行
}else{
//满足条件执行
}case语句
var err_type = 'info'
switch(err_type) {
case 'warining':
console.log('警告');
break;
case 'error':
console.log('错误');
break;
default:
console.log('没错')
}循环语句
while
var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
console.log(i);
i = i+1; //更新循环条件
}for
//方式一:
for(var i = 1;i<=10;i++){
console.log(i)
}
//方式二:
var arr = [1,2,3,4,5]
for (n in arr){
console.log(n)
}
三元运算符
var 结果 = boolean表达式 ? 为true返回的值:为false返回的值 函数
function 函数名(参数){
函数体
return 返回值
}
函数名(参数)
//注意 : 传递的参数可以和定义的个数不一样,但是不要这么写
// 返回值只能有一个
//arguments伪数组
function add(){
console.log(arguments);
}
add(1,2,3,4)
function add(a,b){
console.log(arguments);
}
add(1,2,3,4)匿名函数
var add = function(){
console.log('hello,world');
}
//add()调用自调用函数
(function(a,b){
console.log(a,b)
})(1,2)内容回顾 - javascript基础语法
js的引入
方式一:
<script>
js代码
</script>
方式二:
<script src='xxxx.js'></script>js的编程要求
结束符 ;
注释 // 单行注释
/*多行注释*/变量
声明 var
变量的命名 : 数字 字母 下划线 $
不能用js中的保留字输入输出
alert('弹出的警告框')
console.log('在控制台里打印')
var inp = prompt('请输入内容 :')基础数据类型
number
整数和小数都属于number类型
toFixed(2) 保留两位小数string
'字符串' "字符串"
属性 :length
方法 :trim(),concat('str'),charAt(索引),indexOf(元素),slice(start,end),split(sep,返回前n个值)
toLowerCase(),toUpperCase()boolean
true [] {}
false undefined null NaN 0 '' null
设置为空undefined
未定义 当一个变量只声明 不赋值的时候转换
parseInt('123') 字符串转数字
parseFloat('1.235') 字符串转小数
String(undefined) 小数转字符串(推荐)
var a = 123
a.toString() 数字转字符串
Boolean(数据类型) 任意类型转换成boolean内置对象类型
array
var a = [1,2,3,4]
var a = new Array([1,2,3,4])
属性:length
方法:push() pop() shift() unshift()
slice() reverse() join('sep') sort() splice(1,2,'新的值') concat()自定义对象
var obj = {'alex':'name'} //对象json数据类型序列化
'{"key":18,"123":[1,2,3]}'
自定义对象 = JSON.parse(json字符串)
json字符串 = JSON.stingify(自定义对象)运算符
算数运算符 : + - * / ** % ++ -- var b = ++a varb = a++
赋值运算符 : = += -= *= /= %=
比较运算符 : > < >= <= == != === !==
逻辑运算符 : &&与 ||或 !非流程控制
条件判断
if(条件){
//满足条件之后要执行的代码
}else if(条件){
//满足条件之后要执行的代码
}else{
//都不满足之后要执行的代码
}
switch(值){
case 值1:
代码;
break
case 值2:
代码;
break
default:
代码
}循环
while(条件){
循环体
}
for(var i=0;i<10;i++){
循环体
}
for(i in arr){
i是索引,arr[i]是具体的值
}
for(vari=0;i<arr.length;i++){
i是索引,arr[i]是具体的值
}三元运算符
var 值 = 条件 ? 条件为true返回的内容:条件为false返回的内容函数
function 函数名(参数){
函数体
return 返回值 //返回值的个数必须是一个,如果返回多个值,放在数组中返回
}
函数名(参数)
arguments 函数中内置的动态单数,可以接收所有的参数
匿名函数
var 变量名 = function(参数){
函数体
return 返回值
}
自调用函数
(function(形参){
函数体
return 返回值
})(实参)js
正则的用法
创建一个正则:
var reg = RegExp('正则表达式') //注意,写在字符串中所有带\的元字符都会被转义,应该写作\\
var reg2 = /正则表达式/ //内部的元字符就不会转义了
reg.test('待检测的字符串') //如果字符串中含有符合表达式规则的内容就返回true,否则返回false
在字符串中应用正则
var exp = 'alex3714'
exp.match(/\d/) //只匹配从左到右的第一个
exp.match(/\d/g) //匹配所有符合规则的 返回一个数组
var exp2 = 'Alex is a big sb'
exp2.match(/a/) //只匹配小写a
exp2.match(/a/i) //i表示不区分大小写 A也会被匹配出来
exp2.match(/a/ig) //不区分大小写并匹配所有
exp.search(/正则表达式/i) //不区分大小写,从exp字符串中找出符合条件的子串的第一个索引位置
exp.split(/正则表达式/i,n) //不区分大小写,根据正则切割,返回前n个结果
exp.replace(/正则/gi,'新的值') //i表示不区分大小写,g表示替换所有,将符合正则条件的内容替换成新的值
小问题1
var reg2 = /\d/g //正则表示要匹配多个值
reg2.test('a1b2c3') //多次test会的到true true true false 继续test会循环之前的结果
小问题2
var reg3 = /\w{5,10}/
reg3.test() //如果什么都不写,那么默认test中传递undefined参数,刚好可以符合9位字符串的规则Date对象
创建对象:
var dt = new Date() //获取到当前时间
dt.toLocalString() //转换成'2019/8/13 10:18:12'
dt.getFullYear() //年
dt.getMonth() //月 1月是0
dt.getday() //周中天 周日是0
dt.getDate() //月中天 1号是1
dt.getHours() //时 从0开始
dt.getMinutes() //分 从0开始
dt.getSeconds() //秒 从0开始
自定义时间:
var dt2 = new Date('2018/1/1 12:12:12') 1月1日
var dt2 = new Date(2018,1,1); 2月1日Math对象
面向对象(了解)
function Student(name,age){
this.stu_name = name
this.stu_age = age
}
Student.prototype.show = function(){
console.log(this.stu_name,this.stu_age)
}
var stu = Student('alex',84) // 实例化
stu.stu_name // 查看属性
stu.stu_age
stu.show() // 调用方法
object.prototype.show = function(){
console.log(this.stu_name,this.stu_age)
}