JavaScript基础回顾以及动画设计

JavaScript基础回顾

JavaScript常适用于<body></body>标签之下,因为先加载body在加载script更加安全一些

JavaScript的功能较为强大,可以在大部分情况下不用刻意甚至不推荐打分号

JavaScript的输出语句也与Java有所不同 ,为console.log(),且语句内String类常用单引号而非双引号

JavaScript的数据类型和变量类似于Java,但是声明是由let声明,且部分类型的判断有所不同,具体如下:

    let a=3
    console.log(typeof a)//number类型
    a='abc'//包含单引号和双引号,建议使用单引号
    console.log(typeof a)//String类型
    a=true
    console.log(typeof a)//boolean类型
    a=null
    console.log(typeof a)//object类型(null类型)
    a=undefined
    console.log(typeof a)//undefined类型
    let b
    console.log(typeof b)//undefined类型

其中还可以用NaN(not a number)去做number类型判断

JavaScript的if和for判断与Java相似,但要注意在JavaScript中if是具有默认判断的,与Java中的if布偶类型判断类似,如下:

    let a=0
    if(a==0){
        console.log('a=0')
    }else{
        console.log('a!=0')
    }//输出a=0
    if(a!=0){
        console.log('a=0')//
    }else{
        console.log('a!=0')
    }//输出a!=0
    if(a){
        console.log('a=0')
    }else{
        console.log('a!=0')
    }//输出a!=0

在number类型判断中只加入变量名就会与!=0进行判断,而在String类型中则会与!=''进行比较。

JavaScript中数组的内容可以直接用中括号储存,其中对象数组的内容由大括号储存,如下:

    //1.简单数组
    let arr1=[1,2.3,'a',true,null,undefined,null];
    console.log(arr1.length)//null可以占据数组
    //2.复杂的数组
    let arr2=[
        {id:1,name:'曹操',age:36},
        {id:2,name:'刘备',age:34},
        {id:3,name:'孙权',age:30},
    ]

JavaScript中的函数极其类似于方法,常用于拆分数组且拥有两种命名方式,如下:

    function f1(){
        console.log('f1函数')
    }
    let f2=function(){//匿名函数
        console.log('f2函数')
    }

JavaScript中也拥有遍历,且功能更加强大,如下:

    arr2.forEach(function(e,i){//e代表每个元素,i代表元素的序号
        console.log(e,i)//输出数组中的每个元素
    })
    //简化为 箭头函数的表达形式
    arr2.forEach((e,i)=>{
        console.log(e,i)
    })

JavaScript中数组可以直接进行筛选,但是原数组不会被改变,筛选出来的结果要以新数组的形式返回到新数组中,如下:

    let arr3=arr2.filter((e,i)=>{
        return e.age<35
    })
    console.log(arr3)

js-dom即和html进行交互,一般使用过程为:

        1.获取 html标签,返回一个元素对象

        2.设置 值

常用的获取html标签的方法如下:

<body>
    <input id="1" type="text" value="aa">
    <p class="2"></p>
</body>

<scirpt>
    document.getElementById('id值')
    document.getElementsByClassName('class值')
</script>

js-dom功能较多,可以实现获取,更改,赋值等诸多功能,以下为一个例子:

<body>
    <input id="inp1" type="text" value="aa">
</body>
<script>
//一、单个的设置
    //1.获取 
    let inp1=document.getElementById('inp1')
    //2.设置值
    inp1.value='曹操'

//二、批量的设置
    let arr2=[
        {id:1,name:'曹操',age:36},
        {id:2,name:'刘备',age:34},
        {id:3,name:'孙权',age:30},
    ]  
    //1.获取 ul
    let ul1=document.getElementById('ul1')

    function changeText(){
    //2.替换
    let s='' 
    arr2.forEach((e)=>{
        s+=`<li>${e.id}-${e.name}-${e.age}</li>`//``模版字符串,在数字1感叹号旁边
    })
    ul1.innerHTML=s
}
</script>

JavaScript动画

实现JS动画的过程通常为分为:

       1.获取 html标签

        2.设置定时器以关闭

<script>
    //1.获取
    let z=document.getElementById('z')//以上以及设置了一个id为z的黑色方块
    let x=0,y=0
    //定时器
    let dsp=setInterval(()=>{
        if(x>=400||y>=400){
            //到了终点,终止定时器    
            clearInterval(dsp)     
            }
           x+=1,y+=1
           console.log(x,y)
           z.style.top=y+'px'
           z.style.left=x+'px'
    },10);//其中,10为运动动画间隔为10ms
</script>

JS动画也极富创造力和计算能力,在此我们可以和css动画一样对图形进行创造。

拓展

button中可以加入onclick添加点击事件然后调用script中的函数实现功能,具体如下

    <button onclick="test()">按钮</button>

script中``为模版字符串,可用于修改html中的语句,如下:

    let s='' 
    arr2.forEach((e)=>{
        s+=`<li>${e.id}-${e.name}-${e.age}</li>`//``模版字符串,在数字1感叹号旁边
    })
    ul1.innerHTML=s

总结

JavaScript内容较多,需要较长时间来巩固加深印象,可以结合java面向对象的内容来加快消化。必须要牢记,css用于html布局,html为标签设置,js用于深化html内部内容以及函数构造。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值