本文详细介绍了JavaScript的基础知识，包括其嵌入方式、输入输出、变量与数据类型、运算符、控制结构（如分支、循环）、数组和对象操作、DOM元素获取与修改、事件绑定与解绑，以及函数和时间倒计时的使用。
JavaScript的组成
js的嵌入
内部js的嵌入
<!-- <script>
alert("你好")
</script> -->外部js的嵌入
.js文件
alert("这是外部的js")<script src="js/外部.js"></script><button onclick="alert('哈哈哈哈哈哈')">按钮</button>//点击后弹出警示JavaScript输入与输出语法
输出语法
向body内部输出
<body>
<script>
//向页面中打印
document.write('输出语句')
document.write('<h1>这是标题</h1>')
//控制台输出
console.log('判断结果')
</script>
</body>输入语法
<body>
<script>
prompt("请输入你的年龄")
</script>
</body>字面量
[]数组字面量 {}对象字面量
变量声明赋值
(变量不要加引号)
<body>
<script>
let age
age=18
console.log(age)
</script>
</body>常量
常量声明的时候必须赋值
const age=8 //声明常量
数据类型
计算错误 返回NaN
数据类型--字符串型
字符串拼接
模板字符串
<body>
<script>
let age=18
//必须用``引用里面${变量名}
document.write(`我今年${age}岁了`)
</script>
</body>检测数据类型
console.log(typeof age)数据类型的转换
转换为Boolean型
这些都为假（Boolean非空非0都为真）
console.log(Boolean(NaN))//false
console.log(Boolean(undefined))//false
console.log(Boolean(null))//false隐式转换
案例：
显示转换
let str='123'
console.log(Number(str))//字符类型强转数字类型比较运算符
===全等是指数值和数据类型完全一样叫全等
分支语句简单案例
if分支语句
三元运算符
数字补0案例
<body>
<script>
let age=prompt('请输入年龄')
age = age<10? 0+age:age//加号两边如果有一个字符串就会把另外一边也转换为字符串
alert(`${age}`)
</script>
</body>switch语句
switch语句案例
while循环语句
whlie条件语句案例
<body>
<script>
let i= +prompt('请输入树子')
let j=0
while(j<=i){
if(j===50){
j++
continue
}
document.write(`${j}<br/>`)
j++
}
</script>
</body>for循环
案例
<body>
<script>
for(let i=0;i<=3;i++){
document.write(`循环了${i}次<br/>`)
}
</script>
</body>操作数组——增
push增加（往尾部插入）unshift（往头部插入）
案例
<body>
<script>
let arr=['刘','关','张']
let count=arr.push('王')
count=arr.unshift('黄')
document.write(count+'<br/>')
//运行结果 5
for(let j=0;j<arr.length;j++){
document.write(arr[j]+'<br/>')
}
//运行结果黄 刘 关 张 王
</script>
</body>Array.prototype.reduce()对数组所有元素进行求和运算
const array1 = [1, 2, 3, 4,5];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue,
);
console.log(sumWithInitial);
// 运行结果: 15数组的筛选
案例
<body>
<script>
let arr=[1,20,3,100,6]
let arr1=[]
for(let i=0;i<arr.length;i++){
if(arr[i]>10){
arr1.push(arr[i])
}
}
console.log(arr1)
</script>数组的操作——删除
arr.pop() 删除数组最后一个元素
arr.shift()删除数组第一个元素
arr.splice(起始位置，删几个元素)删除指定元素
函数
函数的使用
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
function table(){
let arr=[]
for(let i=0;i<4;i++){
arr.push(prompt(`请输入第${i}季度的值`))
}
document.write(`<div class="box">`)
for(let i=0;i<arr.length;i++){
document.write(`<div style="height: ${arr[i]}px;">
<span>${arr[i]}</span>
<h4>${i+1}</h4>
</div>`)
}
document.write(`</div>`)
}
table()
</script>
</body>
</html>函数的命名
有参函数
<script>
let num= +prompt('请输入第一个数')
let num1= +prompt(`请输入第二个数`)
function jingg(num,num1){
document.write(`${num+num1}`)
}
jingg(num,num1)
</script>立即执行函数
立即执行函数作用：防止变量污染，立即执行不需要调用
写法案例
第一种写写法：
注意：写两个立即执行函数必须加分号，否则报错
第二种写法：
（函数名要写）
时间倒计时
逻辑中断
运行结果：3
对象
对象的声明语法
对象是由属性和方法组成
案例：
<script>
let pink={
uname:'王子',
age:18,
gander:'男'
}
console.log(pink)
</script>对象的增删改查——查
对象的增删改查——增
案例：
可以直接在属性名后增加属性
对象的增删改查——删
总结对象的增改查
对象内的方法使用
对象的遍历
案例
注意：console.log(k)遍历出来的是带''引号的属性名（k='uname'） 将带引号的属性名带入 obj[k] 这种写法就能遍历出来
链接
JS基础Day5-68-遍历对象
数组和对象的声明
注意:可以用const对数组进行声明，前提是只能对数组或者对象原有的数据进行添加而不是重新赋值
DOM
DOM与BOM的区别
获取DOM元素对象（querySelector）
案例
<body>
<div class="box">123</div>
<ul>
<li>测试1</li>
<li>测试2</li>
</ul>
<script>
// const box=document.querySelector('div')
// const li=document.querySelector('ul li:first-child')//选择第一个元素对象
const li=document.querySelectorAll('ul li')//选择所有的元素对象(获取到的是一个伪数组)
console.log(li)
</script>
</body>DOM获取其他元素的方法
获取元素修改文字内容
注意：innerHTML和innerText，前者可以识别标签，后者不能
<body>
<div class="box">我是王大锤</div>
<script>
const box= document.querySelector('.box')//获取元素
console.log(box.innerHTML)//获取文字内容
box.innerHTML='<strong>哈哈哈哈哈哈</strong>'//修改文字内容
</script>
</body>
修改常见的属性
DOM常见API 以及常见的鼠标操作
https://blog.csdn.net/m0_56223760/article/details/134736929?ops_request_misc=&request_id=&biz_id=102&utm_term=js%E5%B8%B8%E8%A7%81%E7%9A%84DOM%E5%92%8CBOM%E7%9A%84API&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-134736929.142%5Ev99%5Epc_search_result_base8&spm=1018.2226.3001.4187阻止冒泡
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件绑定</title>
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
fa=document.querySelector('.father')
son=document.querySelector('.son')
document.addEventListener('click',function(){
alert('我是爷爷')
})
fa.addEventListener('click',function(){
alert('我是爸爸')
})
son.addEventListener('click',function(e){
alert('我是儿子')
//阻止事件流动 事件对象.stopPropagation()
e.stopPropagation()
})
</script>
</body>
</html>解绑事件
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
