web前端 js笔记

JS引入方式；

内部：
在body结尾处写
<script>...</script>

外部：
在body结尾处写
<script src=""一个已经写好了的.js文件地址></script>

输入输出语句：

    <script>
        prompt('请输入您的密码：')        //输入
        document.write('你们真是小天才')    //打印到页面    括号里可以为内容添加标签
        console.log('我现在要在控制台输出')    //打印到控制台    括号里的标签不识别
    </script>

变量：
    <script>
        let 变量名;                //声明变量        //可以同时定义多个变量 let a = prompt('请输入您的密码：')
        age = prompt('请输入您的密码：');    //变量赋值        //声明和赋值可以同时进行
        console.log(age)            //不加引号
    </script>

常量
    <script>
        const 名 =                //声明    用于区分最好用大写做常量名
    </script>    

js是弱数据类型，只有赋值后才知道其数据类型

基本数据类型:
    1.数字类型：
        let a=33
        let b=23
        console.log(a +/-/*/除/% b)        //除号会保留小数点
    2.字符串类型:
        let uname='huangheping'        //可以写双引号，但是一个字符串不能出现两个单引或双引，'abcd"efgh"mn'这个是可以的
        console.log(typeof (uname))        //typeof检查类型，可以不写
        字符串拼接用+
            console.log(a + b)
        模板字符串:
             let name = prompt('输入名字：')
             let  age   = prompt('输入年龄：')
            document.write('你叫:' + name, '今年:' + age)    //很麻烦，不推荐
            document.write(`你叫${name},今年${age}岁`)    //模板字符串，用的反引号，可识别标签

    3.布尔类型

        <script>
            console.log(typeof (3>5))            //undefined声明，未赋值    null,返回值是true/false
        </script>    

    
    4.显示转换                            //(隐式转换：在数字+字符串时，会把数字当作字符串)
        let uname=prompt('输入名字：')    
        console.log(number/+ (uname))            //number/+ 转化为数字类型

        let c='200px'
        console.log(parseInt (c))                //提取数字，将末尾Int改成Float可以保留数字的小数部分

alert（a+b）//警示框

运算符:
    =  +=  *=  -=  /=  ++ --  >  <  ==  >=  <=   ===    && || ！        //除号会保留小数点；==只比较数值，将其他类型转化为数值在比较；
                                //===既比较数值，也比较类型
    

单分支语句
    if(条件){......}else{.....}                        //与c类似
    
    条件？语句一 ：语句二                    //条件成立执行语句一，条件不成立执行语句二
多分支语句
    switch(a)
    {
        case 1: alert('.......')break
        case 2: alert('.......')break
        default: 
    }

循环结构（for  while    do...while）
循环嵌套

let arr = [1,2,3,4,5]
for(let i in arr)    
    {
        console.log(arr[i])        //按顺序输出数组的每个值    
    }

for(let k of arr)    
    {
        console.log(k)        //按顺序输出数组的每个值,效果与上面相同
    }

数组; let arr = [...,...,...,]            //定义 console.log(数组名 instancef Array)判断是不是数组如果是，返回值true
访问通过下标，也可以通过下标进行修改

增加数组:
    数组名.unshift/push(内容)        //添加在数组最前面/后面

删除数组：
    数组名.shift/pop(内容)        //删除在数组最前面/后面的内容
    数组名.splice(数字1，数字2)        //数字1代表删除的起始位置，数字2代表往后删除的个数

数组的合并:  数组3=数组1.concat(数组2)        //将数组2连接在数组1后面并赋值给数组3

把所有数据放进一个字符串console.log(arr.join('每个数据用什么隔开'))
截取数组的值    console.log(arr.slice(3))    //截取前三个

二维数组：
    let student =[[...],[...],[...],[...]]

    for(let i in stuent)
    {
        for(int j in stuent[i])
            console.log(student[i][j])
    }

获取数组长度 student.length

函数:
    function 函数名(形参){
            执行代码            //函数定义和内容
            console.log(arguments)    //arguments接受所有实参，并存在数组里,srguments[i]
            
            return ....            //函数有返回值一定要写return，
                    }
    
    函数名(实参)                //调用

例：    function a(b){
            b()    
                }

    function c(){
            打印c    
                }
        a(c)                //结果是打印了c

let a = function c(){
        ....
                }                //这时候函数名只能用a

立即执行函数(function(){......})()

值传递不影响原数据，引用传递会影响

箭头函数
    setInterval(()=>{console.log('.......')},1000)

递归函数
    function jiecheng(n){
                if(n===1){return 1}
                else{
                    return n*jiecheng(n-1)
                    }
            }

闭包:function out(){
        let  a = '变量'
        function over(a){
                打印a
                }
        }

数组遍历
    let arr=[.........]
    for(let i = 0; i < arr.length; i++){
                        arr[i] 是遍历的数组的元素
                }

对象(无序的数据结合):
        let obj={
            uname:'zhangsan',
            age:21,
            gender:'nan'
            }
访问:          console.log(obj.uname) /console.log(obj['uname']) 

对象的遍历:
        for(let k in obj){
                console.log(k)/console.log(obj[k])
                }

数组对象    let arrobj=[
            {
                uname:'zhansgan'
                age:'18'
            },
            {
                uname:'lisi'
                age:'20'
            }

        ]
        
查看    arrobj[i]['uname']

遍历    for(let i=0;i<arrobj.lenth;i++){
                for(let k in  arrobj[i]){
                        console.log(arrobj[i][k])
                        }
                }

Math内置对象
    console.log(Math.E)            //数学e的自然数
    console.log(Math.PI)            //数学圆周率    
//Math.ceil()向上取整        //Math. floor()向下取整    //Math.abs()取绝对值        //Math.pow(数字1,数字2) 数字1的数字2次方
//Math.sqrt()开方        //Math.random()默认0-1随机数左闭右开区间         //Math.floor(Math.random()*(m-n+1))+n 表示m-n随机数    

日期内置对象
    let date=new Date()
    alert(date)                        //获取时间到date
    
    let year = date.getFullYear()                //或取年
    let month = date.getMonth()+1            //获取月
    let day = date.getDate()                //获取日
    let hh = date.getHours()                //获取时
    let mm = date.getMinutes()                //获取分
    let ss = date.getSeconds()                //获取秒
    let gg= date.getDay()                //获取星期
document.write(`${year}-${month}-${day} ${hh}:${mm}:${ss}`)
    

a.toFixed(n)                                //a保留n位小数

获取对象
    1.通过css
        document.querySelector('...')                    //括号里面跟的是css选择器的名字，只显示找到的第一个
        document.querySelectorAll('...')                    //获取所有，伪数组，可以通过遍历打开
    
    2.其他
        document.getElementsByTagName('...')                //括号里跟标签名
        document.getElementsById('...')                    //括号里跟id

修改元素内容
    1.const box=获取元素

    2.操作
        box.innerText = '修改内容'/box.innerHTML = '修改内容'        //前者不识别标签，后者能识别标签
            
修改元素属性
<body>
    <ing src="地址1">
    <script>
        const/let img=document.querySelector('img')            //获取
        img.src="地址2"                        //修改元素属性   元素.属性="修改值"
    </script>

</body>        

修改元素样式属性
    <style>
        div{
            width:300px;
            height:300px;
            background-color:red;
            }
    </style>
    
    <script>
        const/let div=document.querySelector('div')            //获取
        div.style.witdh =""                        //修改元素样式   元素.style.属性="修改值"
        div.style.height=""
        ..........
    </script>

通过类(class)修改
    <div class"box"><div>
    <script>
        const/let div=document.querySelector('div')    
        div.className=""                        //会将原来的类名覆盖
    </script>

通过其classList对类名进行修改
    <div class"box1"><div>
    <script>
        const div=document.querySelector('div1')    
        div.classList.add('box2')                    //添加一个box2的类名
        div.classList.remove("box2")                    //若原来有box2类名，则删除它。若原来没有box2类名，则添加他
    </script>

定时器(setTimeout/setInterval)
setTimeout：某段代码或者函数在多久后执行
            setTimeout(代码/函数/函数名 , 时间(单位是毫秒) , 实参....)    //返回值为一个整数，代表定时器编码
        例：    setTimeout('console.log("再看一眼就会爆炸")' , 1000 )    

setInterval：每隔一段时间，代码和函数执行一次
            setInterval(代码/函数/函数名 , 时间(单位是毫秒) , 实参....)        

事件监听:
    const div=document.querySelector('div')                    //获取元素
    div.addEventListener('click',()=>{执行的操作})                //添加事件监听，click鼠标点击

事件绑定
    const div=document.querySelector('div')                    //获取元素
    div.οnclick=function(){........................}                    //元素.on事件名 = 回调函数

事件委托
    const ul=document.querySelector('ul')                    //获取li的父级元素ul
    ul.addEventListener('click',(e)=>{e.target.style.backgroundColor='pink'})        //点击父级下的哪个li，哪个li变成粉色

常见事件
    鼠标点击click    鼠标经过mouseenter    鼠标离开mouseleave    获得焦点focus    失去焦点blur    键盘按下事件/    用户输入事件input....................................
    

滚动事件
    

捕获,冒泡
    <style>
        .grandfather{
                .....
               }
        .father{
            .....
                  }
        .son{
            ...
               }
    </style>

    <div class="grandfather">
        <div class="father">
            <div   class="son">
            </div>
        </div>
    </div>

    <script>
        document.querySelector('.grandfather').addEventListener('click',(e)=>{console.log('我是爷爷')} , true)
        document.querySelector('.grandfather').addEventListener('click',(e)=>{console.log('我是父亲')})
        document.querySelector('.grandfather').addEventListener('click',(e)=>{console.log('我是儿子')})
    <scripy>
//默认fales冒泡，   true捕获

阻止默认行为    e.preventDefault()
        例:document.querySelector('button').addEventListener('click',(e)=>{e.preventDefault())        //阻止了button默认的点击提交

    

节点操作
    找父级节点  let father= document.querySelector('.son').parentNode
    找子级节点  let son= document.querySelector('.father').childern                        //会找所有子级
    
    追加节点      let btn= document.querySelector('button')
          let ul    = document.querySelector('ul')
          btn.addEventListener('click',()=>{
                        let li = document.querySelector('li')            //创建节点
                        li.innerHTML = `<h1>新建<h1> <button>删除</button>`    //添加内容
                        ul.appendChild(li)/ul.insertBefore(li, 谁的前面)        //追加到最后面/追加xxx的前面
                        }
                   )

        
         btn.addEventListener('click',()=>{
                        let li = document.querySelector('li')            //创建节点
                        li.innerHTML = `<h1>新建<h1> <button>删除</button>`    //添加内容
                        ul.appendChild(li)/ul.insertBefore(li, 谁的前面)        //追加到最后面/追加xxx的前面
                        }
                   )
        document.querySelector('newLi button').addEventListener('click'),()=>{
                                    ul.removeChild(li)        //删除节点
                                          })

    删除节点

构造函数
    function Obj(uname,age){
                this.uname = uname,
                this.age      = age
                  }
    let obj1 = new Obj('zhangsan',23)
    let obj2 = new Obj('wanger',18)
    Obj.prototype.sing = function{.......}                //原型，被所有对象所共享。obj1.sing()与obj2.sing()共享这个内容

    Obj.prototype={
            constructor:Obj,                    //手动添加构造器指向构造函数
            sing:function(){console.log('我要唱歌')},
            dance:function(){console.log('我要跳舞')}
            
                }
    

this关键字
    默认指向windows    构造函数中指向实例化的对象    对象中指向当前对象        函数基本调用时，也指向windows    =>函数this指向上一层环境中this

js执行机制--单线程