javascript学习笔记

最新推荐文章于 2022-12-18 16:39:14 发布

cj1064789374

最新推荐文章于 2022-12-18 16:39:14 发布

阅读量507

点赞数 2

分类专栏： 2021年研究生学习笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/cj1064789374/article/details/113065481

版权

2021年研究生学习笔记专栏收录该内容

45 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
    <script>
        alert('welcome');
    </script>
    <script src="js/test01.js"></script>
</head>
<body>
</body>
</html>

test01.js
alert('hello world!')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert</title>
    <script>
        n1 = 1;
        n2 = 2;
        alert(n1+n2);
        if(n1<n2 && 3>2){
            alert('cj'+'true')
        }else if(4>3){
            alert('love'+'true')
        }else{
            alert('gjl'+'true')
        }
        //JS严格区分大小写
        //在浏览器按F12后显示elements是左边HTML与右边CSS
        //按console进入控制台输入alert(n1);回车即可执行
        //如果在控制台按console.log(n1)那就在控制台输出
        //按sources可以看源代码并加断点，刷新页面，调试
        //按network，刷新页面，可以看请求，响应，cookie
        //按application可以看缓存
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型基础</title>
    <script>
        console.log(123)
        console.log(123.1)
        console.log(NaN)
        console.log(Infinity)
        console.log(2>1)
        console.log('abc')
        console.log(!(2>1 && 2<1)||3>4)
        console.log(3.0=='3')   //值一样（请坚持用===）
        console.log(3.0==='3')  //类型一样值一样
        console.log(NaN===NaN)  //NaN与所有值都不等
        console.log(isNaN(NaN)) //NaN判断
        console.log(1/3===(1-2/3))                  //false
        console.log(Math.abs(1/3-(1-2/3))<0.0001)   //true
        console.log(null)
        console.log(undefined)
        console.log( )
        arr=[1,2,3,4,5]
        for (let i=0; i<arr.length; i++){
            console.log(i+arr[i])
        }//数组就是列表
        console.log(arr[5])//undefined
        person={
            name:'cj',
            age:30,
            tags:['love','gjl']
        }//不得不说，真的很像python
        console.log(person.name,person.age,person.tags)
        王者荣耀='倔强青铜'
        console.log(王者荣耀)
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型重点</title>
    <script>
        //1、严格检查 所有变量定义强制用let
        'use strict'
        //2、转义字符
        let i = '\'1';
        //3、let 设置循环变量的那部分是父作用域，循环体内是单独的子作用域
        console.log(i)
        for (let i = 0; i < 2; i++) {
            let i = 'abc';
            console.log(i);
        }
        //4、反引号 可以读取多行字符串，输出时建议不要用${}
        let s=`
        a
        b
        c`
        console.log(`你好呀${s}`+s)
        //5、字符串 获取长度，下标录值，大小写，下标，子串
        let stu='student'
        console.log(stu.length)
        console.log(stu[0])
        console.log(stu.toUpperCase())
        console.log(stu.indexOf('t'))
        console.log(stu.substring(2,5))
        //6、字符串 改值
        stu='a'//变量赋值是可以的
        //stu[0]='a'但这行是不行的
        console.log(stu)
        console.log("yyyy-MM-dd-hh-mm-ss".replace("-","/"))
        console.log("yyyy-MM-dd-hh-mm-ss".replace(/-/g,"/"))
        //7、数组
        let arr=[1,2,3,4,5]
        console.log(arr)
        console.log(arr.length)
        arr.length=9
        arr[0]=11
        arr[6]=20
        console.log(arr)
        console.log(arr[5])//undefined
        console.log(arr.indexOf(20))//6
        console.log(arr.indexOf(22))//-1
        console.log(arr.includes(20))//true
        let brr=arr.slice(3,7)//切片
        console.log(brr)
        brr.push(100)//后入
        console.log(brr)
        brr.pop()//后出
        console.log(brr)
        brr.unshift(200)//前入
        console.log(brr)
        brr.shift()//前出
        console.log(brr)
        function sortNumber(a,b){
            return a - b
        }
        brr.sort(sortNumber)//排序
        console.log(brr)
        brr.reverse()//翻转
        console.log(brr)
        let crr=brr.concat([33,44,55])
        console.log(brr)//没变
        console.log(crr)//变了
        let ss=crr.join('-')//连接（empty跳过）
        console.log(ss)
        let drr=[[1,2],[3,4],['5','6']]
        console.log(drr)
        console.log(drr[1][1])
        console.log(drr.length)
        //8、对象
        let person={
            name:'cj',
            age:24,
            sex:'male'
        }
        console.log(person)
        console.log(person.name)
        console.log(drr.love)//undefined
        drr.love='gjl'
        console.log(drr.love)//gjl
        delete drr.love
        console.log(drr.love)//undefined
        delete drr.name//定义时生成的属性不能删
        console.log(person.name)//仍然存在
        console.log('age' in person)//true
        console.log('toString' in person)//true，在控制台输出person点开下面的__proto__可以看到继承的方法有toString
        console.log(person.hasOwnProperty('toString'))//false
        console.log(person.hasOwnProperty('age'))//true
        //JS中键是字符串，值是任意对象
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制</title>
    <script>
        'use strict'
        let age=3
        if(age<3){
            console.log('1')
        }else if(age<5){
            console.log('2')
        }else{
            console.log('3')
        }
        while(age<10){
            age=age+1
            console.log(age)
        }
        for(let i=0;i<10;i++){
            console.log(i)
        }
        let arr=[1,2,3,4,5]
        for(let i in arr){
            console.log(i)//读下标，好像没什么卵用
        }
        for(let i of arr){
            console.log(i)//用of才是读值，有用！
        }
        arr.forEach(function(value){console.log(value)})
        //把arr里逐个元素作为参数value扔给function执行
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map/set</title>
    <script>
        'use strict'
        let cj_map = new Map([['cj',100],['love',200],['gjl',300]])
        console.log(cj_map.get('love')) //用get获得值
        cj_map.set('forever',1314)      //用set设键值对（没就新增）
        console.log(cj_map)
        cj_map.delete('cj')             //用delete删键值对
        console.log(cj_map)
        console.log(cj_map.keys())
        console.log(cj_map.values())

        let cj_set = new Set([12,3,4,54])
        cj_set.add(2)
        cj_set.delete(4)
        console.log(cj_set.has(54))
        console.log(cj_set.keys())
        console.log(cj_set.values())

        let cj_arr=[3,4,5]
        console.log(cj_arr)
        for(let x of cj_arr){
            console.log(x)//3,4,5
        }
        for(let x of cj_map){//值
            console.log(x)          //长为2的list(事实证明可遍历)
            console.log(x[0],x[1])  //取出来后用下标读即可
        }
        for(let x of cj_set){
            console.log(x)//12,3,54,2
        }


    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数与变量作用域 </title>
    <script>
        'use strict'
        function cj_abs(x,...rest) { // 另一种写法是let cj_abs=function(x){
            // if (typeof x!== 'number'){
            //     throw 'Not a number'
            // }
            for (let i=0;i<arguments.length;i++){
                console.log(arguments[i])
            }
            console.log(rest)
            if(x>=0){
                return x
            }else{
                return -x
            }
        }
        console.log(cj_abs(-10),'test1')
        console.log(cj_abs(10),'test2')
        console.log(cj_abs(10,20,30),'test3')  //只读取10
        console.log(cj_abs(),'test4')       //传入NaN，上面throw打开会报错
        //如果函数没显示返回，就是返回undefined
        //JS无论传多少参数都不报错，异常要手动设
        //变量的作用域就看{}即可，如果内{}与外{}有同名变量，则内{}变量覆盖外部变量
        let tt=1
        function func() {
            let tt=2
            console.log(tt)
        }
        console.log(tt)
        func()
        console.log(tt)
        //所有var定义的全局变量都会绑定在window对象下，但let不会
        let x=100
        console.log(x)
        console.log(window.x)
        var xx=100
        console.log(xx)
        console.log(window.xx)
        //同理alert也是绑定在window下
        window.alert(xx)
        window.alert(window.xx)
        //重写
        var old_alert=window.alert;
        window.alert=function(){}   //重写
        window.alert(123)           //失效
        window.alert=old_alert
        window.alert(123)           //生效

        //规范：把自己的变量全部放入自己定义的唯一空间名字，避免全局命名冲突
        var CJApp={}
        CJApp.name='cj';
        CJApp.add=function(a,b){
            return a+b
        }

    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法</title>
    <script>
        'use strict'
        function getAge(x) {
            let now=new Date().getFullYear()
            return now-this.birth-x//谁调用它谁就是this
        }
        let cj={
            name:'cj',
            birth:1996,
            age:getAge//可以理解为函数名就是函数指针
        }
        let gjl={
            name:'gjl',
            birth:1997,
            age:getAge//可以理解为函数名就是函数指针
        }
        console.log(cj.age(1))   //24
        console.log(gjl.age(2))  //22
        console.log(getAge.apply(cj,[1]))    //24
        console.log(getAge.apply(gjl,[2]))   //22
        //注意：即使不传参，apply中的[]也要保留

    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>date</title>
    <script>
        'use strict'
        /*
        typeof 123
        "number"
        typeof '123'
        "string"
        typeof true
        "boolean"
        typeof NaN
        "number"
        typeof []
        "object"
        typeof {}
        "object"
        typeof Math.abs
        "function"
        typeof undefined
        "undefined"
         */
        let now=new Date()  //不传参Date()就是返回现在时间
        now.getFullYear()   //2021
        now.getMonth()      //一月是0
        now.getDate()       //23
        now.getDay()        //星期6
        now.getHours()      //19点
        now.getMinutes()    //58分
        now.getSeconds()    //41秒
        now.getTime()       //1611403121613时间戳
        now = new Date(1611403121613)//Sat Jan 23 2021 19:58:41 GMT+0800 (中国标准时间)
        now.toLocaleString()//"2021/1/23 下午7:58:41"，这是string对象不是Date对象

    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
    <script>
        'use strict'
        let user={
            name:'cj',
            age:3,
            sex:'男'
        };
        let jsonUser=JSON.stringify(user)
        //控制台输入console.log(jsonUser)
        //控制台输入console.log(jsonUser)
        //控制台输出{"name":"cj","age":3,"sex":"男"}
        let obj=JSON.parse('{"name":"cj","age":3,"sex":"男"}')
        //控制台输入console.log(obj)
        // 控制台输出{"name":"cj","age":3,"sex":"男"}


    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类与继承</title>
    <script>
        'use strict'
        //第一种创建student对象（对象也是类）的写法
        let student={
            name:'CJ',
            age:23,
            run:function () {
                console.log(this.name+" ran at "+this.age+".")

            }
        }
        let gjl={
            name:'GJL'//有自己的name属性则下面的继承不会用父对象更改
        }

        //第一种继承的写法（继承的student既是类也是对象）
        gjl.__proto__=student
        gjl.run()
        let bird={
            fly:function () {
                console.log(this.name+" flew.")
            }
        }
        gjl.__proto__=bird
        gjl.fly()
        //gjl.run()报错！

        //最后看一下输出
        console.log(student)
        /*
        {name: "CJ", age: 23, run: ƒ}
            age: 23
            name: "CJ"
            run: ƒ ()
            __proto__: Object
        */
        console.log(gjl)
        /*
        {name: "GJL"}
            name: "GJL"
            __proto__: Object
            如果展开__proto__有：
                fly: ƒ ()
                __proto__: Object
        */



        //第二种创建类的写法
        class abc{
            constructor(name) {
                this.name=name
            }
            hello(){
                console.log(this.name+" abc.")
            }
        }
        let xyz=new abc('cj')//类必须实例化出对象
        xyz.hello()

        //第二种继承的方法
        class ijk extends abc{
            constructor(name,grade) {
                super(name)
                this.grade=grade
            }
            my_grade(){
                console.log(this.name+this.grade)
            }
        }
        let lmn=new ijk('gjl','super')
        lmn.my_grade()

        //最后看一下输出
        console.log(abc)//其实就是定义式
        /*
        class abc{
            constructor(name) {
                this.name=name
            }
            hello(){
                console.log(this.name+" abc.")
            }
        }
        */
        console.log(xyz)
        /*
        abc {name: "cj"}
            name: "cj"
            __proto__:
                constructor: class abc
                hello: ƒ hello()
                __proto__: Object
         */
        console.log(ijk)
        console.log(lmn)

    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM</title>
    <script>
        'use strict'
        /*
        微软IE
        苹果Safari
        LinuxFireFox
        */
        // 零、调整窗口在控制台尝试下面指令
        // 一、window
        // window.innerHeight
        // 618
        // window.innerWidth
        // 169
        // window.outerHeight
        // 1047
        // window.outerWidth
        // 931
        // //二、navigator
        // navigator.appName
        // "Netscape"
        // navigator.appVersion
        // "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36"
        // navigator.userAgent
        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36"
        // navigator.platform
        // "Win32"
        // //三、screen
        // screen.width
        // 1920
        // screen.height
        // 1080
        // //四、location
        // location.host
        // "www.baidu.com"
        // location.href
        // "https://www.baidu.com/"
        // location.protocol
        // "https:"
        // location.reload()//刷新网页
        // location.assign('https://blog.csdn.net/cj1064789374')//重定向
        // //五、document
        // document.title
        // "百度一下，你就知道"
        // document.title='cj'
        // "cj"
        // let dl=document.getElementById('APP') 这行必须放在ID定义了之后
        // document.cookie
        // "discount_free_trigger=true; freePromorunningtmr=1584000"
        // 恶意人员会获取你的cookie然后用你的cookie来登陆，不需要你的账号与密码
        // //六、history
        history.back()
        history.forward()

    </script>
</head>
<body>
<dl id="APP">
    <dt>计算机</dt>
    <dd>用来计算的仪器 ... ...</dd>
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
<script>
    let dl=document.getElementById('APP')
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM查改</title>
</head>
<body>
    <div id="father">
        <h1>this is the h1</h1>
        <p id="p1">this is the p1</p>
        <p class="p2">this is the p2</p>
    </div>
</body>
<script>
    'use strict'
    let h1=document.getElementsByTagName('h1')
    console.log(h1)
    console.log(h1[0].innerText)
    console.log('----------')
    let p1=document.getElementById('p1')
    console.log(p1)
    console.log(p1.innerText)
    p1.innerText='I love GJL.'//html与text同步更改
    console.log(p1)
    console.log(p1.innerText)
    p1.innerHTML='<strong>I love CJ.</strong>'
    console.log(p1)
    console.log(p1.innerHTML)
    console.log('----------')
    let p2=document.getElementsByClassName('p2')
    console.log(p2)
    console.log(p2[0].innerText)
    p2[0].style.color='yellow'
    p2[0].style.fontSize='30px'
    p2[0].style.padding='2em'
    console.log('----------')
    let father=document.getElementById('father')
    let children=father.children
    console.log(children)
    console.log(children[0]===h1[0])    //全等！
    console.log(children[1]===p1)       //全等！
    console.log(children[2]===p2[0])    //全等！
    console.log('----------')
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM删除</title>
</head>
<body>
<div id="aaa">
    <p id="bbb">b</p>
    <p id="ccc">c</p>
    <p id="ddd">d</p>
    <p id="eee">e</p>
</div>

</body>
<script>
    'use strict'
    let self=document.getElementById('bbb')//删法一读儿子
    self.parentElement.removeChild(self)//再找父亲来删
    let root=document.getElementById('aaa')
    root.removeChild(root.children[0])//删ccc，注意后面的下标会前移
    root.removeChild(root.children[0])//删ddd
    //其实也可以一开始就father.innerText=''把三个全清掉





</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM增加</title>
    <style>

    </style>
</head>
<body>
<p id="aaa">a</p>
<div id="bbb">
    <p id="ccc">c</p>
    <p id="ddd">d</p>
    <p id="eee">e</p>
    <p id="fff">f</p>
</div>
</body>
<script>
    'use strict'

    //一、读已有的
    let aaa=document.getElementById('aaa')
    let bbb=document.getElementById('bbb')
    bbb.appendChild(aaa)//注意插进去之后原先的aaa就没有了

    //二、建未有的
    let newP=document.createElement('p')//
    newP.id='newP'
    newP.style.color='red'  //用style可设置样式
    newP.innerText='hi'
    bbb.appendChild(newP)

    //三、其他标签及属性设置
    let z=document.getElementsByTagName('style')
    z[0].setAttribute('type','text/css')
    z[0].innerHTML='body{background-color:yellow}'//下面y覆盖了这个黄色背景效果

    let y=document.getElementsByTagName('body')
    y[0].setAttribute('style','background:red')//万能设置属性方法

    let x=document.createElement('script')
    x.setAttribute('type','text/javascript')//万能设置属性方法
    bbb.appendChild(x)

    //四、换序
    let ddd=document.getElementById('ddd')
    let eee=document.getElementById('eee')
    bbb.insertBefore(eee,ddd)

    //五、替换
    let ccc=document.getElementById('ccc')
    let fff=document.getElementById('fff')
    bbb.replaceChild(fff,ccc)//用fff代替ccc，则原来的fff就没有了

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <form method="post" action="#" onsubmit="return ff()">
        <p>
            <input type="text" name='username' id='username'>
            <input type="text" id='password'>
            <input type="hidden" name='password' id='md5password'>

        </p>
        <p>
            <input type="radio" name='sex' id='boy' value='boy'>boy
            <input type="radio" name='sex' id='girl' value='girl'>girl
        </p>
        <input type="submit">
    </form>
</body>
<script>
    'use strict'
    let input_text = document.getElementById('username')
    input_text.value='33'
    let input_boy = document.getElementById('boy')
    let input_girl = document.getElementById('girl')
    input_boy.checked=true
    input_girl.checked=true//只能二选一所以上面input_boy就会变false

    function ff() {
        let pwd=document.getElementById('password')
        let md5pwd=document.getElementById('md5password')
        md5pwd.value=md5(pwd.value)//设隐藏的md5password是为了防止用户点击提交时密码框内容瞬间有变长的显示效果
        return true//如果是true就会提交，这里false可以是判断到表单内容不符合正则表达式
    }
    //按F12，按network，按左边的一个HTTP请求，右边接到最下面有form data

    //特别注意：name与id与value的区别：
    //id是让前端的CSS与JS中的document定位的（value就是标签的值）
    //name是写在请求里的key（value就是标签的值）

</script>
</html>

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

最后总结来区分下function是类还是函数：看有没有new
然后成员一定是有this.来声明的！
console.log(1);
function checkscope(){
  	this.xx=2;
  	this.f=function(){
    	console.log('3'); 
    }
}
let x = new checkscope();
console.log(x.xx);
x.f();

console.log(4);
function checkscope2(){
  	this.xx=5;
  	return function(){
    	return this.xx;
    }
}
let xy = checkscope2();//这个函数返回了一个函数
console.log(xy());//执行xy这个函数，得到xx值（是在执行时才取出变量的值）
console.log(xy.xx);//不是类对象，没有成员

输出如下：
> 1
> 2
> "3"
> 4
> 5
> undefined

cj1064789374

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
javascript学习笔记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>welcome</title> <script> alert('welcome'); </script> <script src="js/test01.js"></script></he.
复制链接

扫一扫

专栏目录