JavaScript_资料

Posted 2022-11-26 skyrabbit

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 = /\w5,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)

DOM