JavaScript基础回顾以及动画设计

最新推荐文章于 2024-07-20 23:54:17 发布

astzk

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量31

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_60654299/article/details/131560011

版权

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内部内容以及函数构造。

astzk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础回顾以及动画设计

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

扫一扫