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