前端 -- JavaScript基础

11.3 Javascript

Javascript介绍

• 能处理逻辑

• 可以和浏览器交互

• 不够严谨

ECMAscript : js的一种标准化规范,标出了一些基础的js语法

DOM -- document object model 文本对象模型,主要操作文档中的标签

BOM -- browser object model 浏览器对象模型,主要用来操作浏览器

11.3.1 JS引入

方式一:
    <script>
        alert('XXX')  // 页面弹出警告框
    </script>
方式二:
    <script src="链接"></script>
    
结束符: 分号 -- ;
单行注释: // 
多行注释: /* 内容 */

11.3.2 变量

• 变量名: 数字字母下划线$

• 创建变量的关键字 : var a=1

  创建变量可以不指定数据类型

• 创建变量但不赋值: var a; a创建出来就是一个underfind类型

11.3.3 输入输出

弹出框:alert
弹出输入框:var inp=prompt('问句') 弹出输入孔,输入的内容会被返回给inp
控制台输出: console.log(变量或值)

11.3.4 数据类型

查看数据类型: typeof 变量; / typeof(变量);

数值类型

• 整数 小数 : number

• 保留小数位: b.toFixed(2)

字符串: String

• '单引号' ; var s1 = '字符串1'

• "双引号" ; var s2 = "字符串2"

属性 : length
方法:
s.strm()          去两端空白,得到一个新值
a.concat('abc')   a拼接'abc'
.charAt(索引)      给索引求字符
.indexOf(字符)     给字符求索引
.slice(start,end) 顾头不顾尾,可以用负数,取子串
.toLowerCase()    全部变小写 
.toUpperCase()    全部变大写
.split(',',2)     根据(第一个参数)分隔符切割,取前多少个结果

11.3.5 boolean 布尔值

Boolean()
true  : [] {} 
false : undefined null NaN 0 '' 

11.3.6 null undefined

null 表示空  boolean值为false
undefined 没有定义 创建变量但是不赋值 boolean值为false

11.3.7 内置对象类型

数组 Array

创建:
var arr = ['a','b','c'];
var arr2 = new Array();
索引操作:
arr[0] 查看
arr2[0] = 'alex' 赋值操作

Array常用的属性和方法

属性或方法	解释
.length	数组长度
.push()	尾部追加元素
.pop()	获取尾部的元素
.unshift()	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转原数组
.join(seq)	seq是连接符 将数组元素连接成字符串
.concat(val, ...)	数组合并,得到一个新数组，原数组不变
.splice(a,b,c)	参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)
.sort()	排序

自定义对象

var str1 = '{"name": "chao", "age": 18}';
var obj1 = {"name": "chao", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

遍历对象中的内容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

11.3.8 数据类型之间的转换

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(num)  // "123"
    var str = num.toString()
任意类型 --> Boolean
    Boolean(数据)
​
字符串和数字相加 --> 字符串
字符串和数字相减 --> 数字

11.3.9 运算符

赋值运算符

= += -= *= /= %=

比较运算符

> < >= <= 
比较值,不比较类型
    ==  等于
    !=  不等于
比较类型和值(常用)
    === 等同于
    !== 不等同于

算数运算符

+ - * / % ** 
​
++ / --  自增 / 自减
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

11.3.10 流程控制

特点:

• 所有的代码块都是用{}标识的

• 所有的条件都是用()标识的

if语句

if (条件) {
    执行操作
}else if(条件)){
    满足条件执行            
}else if(条件)){
    满足条件执行        
}else{
    满足条件执行
}

case语句

    var err_type = 'info'
    // case表示一个条件,满足这个条件就会走进来,遇到break跳出。如果某个条件中不写break，那么直到该程序遇到下一个break停止,case条件是根据switch中定义条件的进行判断
    switch(err_type) {
        case 'warining':
            console.log('警告');
            break;
        case 'error':
            console.log('错误');
            break;
        default:
            console.log('没错')
    }

循环语句

var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
    console.log(i);
    i = i+1; //更新循环条件
}
//方式一:
for(var i = 1;i<=10;i++){
        console.log(i)
}
​
//方式二:
var arr = [1,2,3,4,5]
for (n in arr){
        console.log(n)  // n是索引,取值arr[n]
}

三元运算符

var 结果 = boolean表达式 ? 为true返回的值:为false返回的值 
var a = 1
var b =2
var c = a>b ? a:b  //如果a>b成立返回a，否则返回b
console.log(c)

11.3.11 函数

函数的定义

function 函数名(参数){
    函数体
    return 返回值
}
函数名(参数)
//注意 : 传递的参数可以和定义的个数不一样,但是不要这么写
//      返回值只能有一个,如果有多个,默认返回最后一个
//arguments伪数组,传递多少个值,接收多少个
function add(){
    console.log(arguments);
}
add(1,2,3,4)
​
function add(a,b){
    console.log(arguments);
    console.log(add.length);         //获取形参的个数
    console.log(arguments.length);  //获取实参的个数
    arguments[0] = 99;  //将实参的第一个数改为99
}
add(1,2,3,4)

匿名函数

var add = function(){
    console.log('hello,world');
} 
//add()调用

自调用函数

(function(a,b){
    console.log(a,b)
})(1,2)

11.3.12 正则用法

创建一个正则:
var reg = new RegExp('正则表达式') //写在字符串中所有带的元字符都会被转移,应该写 \
var reg = / 正则表达式 /  //内部不需要写成字符串
reg.text('待检测的字符串') // 字符串中有符合表达式规则的内容就返回true否则返回false
​
在字符串中应用正则
var exp = 'Agoni4017'
exp.match(/d/) //只匹配符合规则的第一个
exp.match(/d/) //匹配所有符合规则的,返回一个数组
var exp = 'my heart beat with you'
exp.match(/a/) //只匹配小写a
exp.match(/a/i) //i表示不区分大小写
exp.match(/a/gi) //不区分大小写匹配所有
exp.search(/正则表达式/i) // 不区分大小写,找到符合条件的第一个索引位置
exp.split(/正则表达式/i,n) //不区分大小是,根据正则切割,返回前n个结果
exp.replace(/正则/gi,'新值') //将符合条件的所有内容替换成新的值
reg.lastIndex() //查看索引的位置
​
小问题1
var reg = /d/g //表示匹配多个值
reg.test('a1b2c3')  //多次test会的到true true true false 继续test会循环之前的结果
​
​
小问题2
var reg = /w{5,10}/  //5-10位字母数字下划线
reg.test() //如果什么都不写,那么默认test中传递undefined参数,9位字符串符合正则条件

11.3.13 date对象

创建对象
var dt = new Date() // 获取当前的时间
dt.toLocalString()  // 转换成'2019/8/13 10:18:12
dt.getFullYear()   // 年
dt.getMonth()      // 月,从0来时
dt.getday()       // 周中天,从0开始,周日为0
dt.getDate()      //月中天,1号是1
dt.getHours()     // 时,从0开始
dt.getMinutes()   // 分,从0开始
dt.getSeconds()   // 秒,从0开始
​
自定义时间
var dt = new Date('2018/1/1 12:12:12')   1月1日
var dt = new Date(2018,1,1);             2月1日

11.3.14 math对象

Math.floor()  //向下取整
Math.ceil()   //向上取整
Math.max()    //求最大值
Math.min()    //求最小值
Math.random() //随机数,默认0-1之间.
Math.abs()    //绝对值
Math.round()  //四舍五入取整
求min-max之间的随机数: min+Math.random()*(max-min)

11.3.15 面向对象

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('Agoni',24) // 实例化
stu.stu_name  // 查看属性
stu.stu_age
stu.show()    // 调用方法