目录
1.变量及声明方式，常量，数据类型,类型转换，算数运算符，小案例
1.变量及声明方式，常量，数据类型,类型转换，算数运算符，小案例
let uname=prompt('请输入姓名');
let age=prompt('请输入年龄');
let gender=prompt('请输入性别');
document.write(uname+'/'+age+'/'+gender);
let arr=[10,20,40,50,99,88,77,66];
let arrs=['刘德华','张学友','黎明','郭富城'];
document.write(arrs[3]);
document.write(arrs.length);
const ggb_value=9.8;
console.log(ggb_value);let和var都是申明变量的方式，let更规范
prompt输入框
document.write将数据显示在页面上
console.log控制台输出
const常量
数据类型：
number数字型：整数，小数，正数，负数
操作，加减乘除取余，+-*/%,()有优先级，对NaN进行任何操作都为NaN，NaN表示未知结果
string字符型
单引号‘’双引号“”反引号’’都为字符串,拼接用+
console.log('abc"def"');
boolean布尔型
ture和false
undefined未定义型
声明不赋值，值为undefined
传值时为undefined，表明还没有传递
null空类型
null表示有赋值，内容为空
object对象，引用类型
附带
检测数据类型
let age=18;
console.log(typeof age);类型转换:
场景：单选框等传值为字符串型，所以要类型转换
隐式转换：+-*/%都会隐式转换
字符串的加法，“”+1，为“1”
减法，“1”-1，为0
null转换为数字为0
undefined数字转换为NaN
显式转换: number(),ParseInt(),ParseFloat()
小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
text-align: center;
}
table{
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
}
th{
padding: 5px 30px;
}
/* table,
th,
td{
border: 1px,solid,#000;
} */
</style>
</head>
<body>
<h2>订单确认</h2>
<script>
let price=prompt('请输入价格')
let num=prompt('请输入购买数量')
let address=prompt('请输入地址')
let tatol=Number(num)*Number(price)
document.write(`
<table >
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<th>小米青春版</th>
<th>${price}元</th>
<th>${num}</th>
<th>${tatol}元</th>
<th>${address}</th>
</tr>
</table>
`)
</script>
</body>
</html>2.运算符
赋值运算符
= ，+=，-=，/=，*=，%= 对变量进行赋值
一元运算符
++,-- 自增，自减
前置自增，后置自增 单独使用无区别
返回值，前置先自加
后置 先参与运算在加
比较运算符
比较数据大小，是否相等
>,<,<=,>=,== 这些简单，不说了，对值进行判断
=== 左右两边的值和类型是否相等
!== 左右两边是否不全等
只返回true,false
涉及到NaN都为false
逻辑运算符
&&,||,! 与，或，非
运算符优先级
小括号>一元运算符>算术运算符>关系运算符
>相等运算符>逻辑运算符>赋值运算符>逗号运算符
3.流程控制语句
1. 顺序结构 从上至下
2.分支结构 选择性执行
if语句
if ( ) {
}else if( ) {
}else{
}
三元运算符
a>b?1:0
a>b为真则1，假则0
switch
switch(){
case 1:
break
case 2:
break
default：
}
3. 循环结构 重复执行
while,for
let num=10
while(num<20){
document.write(`${num}<br>`)
num++
}
break 退出循环,continue结束本次循环
let i=['1','2','3','4','5']
for(let num=0;num<i.length;num++){
document.write(i[num])
}
4.数组
数组【】表示，下标从0开始
let i=['1','2','3','4','5']
i[i.length+1]='99'
console.log(i)数组添加元素，push 添加在尾部，unshift 添加在头部,返回值是数组的长度
删除元素，pop（）删除最后一个元素，返回删除元素的值
shift删除头部的元素，返回删除元素的值
splice()删除指定的元素，两个参数，起始位置和个数
5.函数
<script>
sheet()
function sheet(){
let i=0
for(i=0;i<10;i++){
document.write(i);
}
}
</script>可以多次调用，可用于封装代码，除此之外，还有封装好的系统函数，pop()等
函数名冲突，后者覆盖前者,return后不再执行
let b=sum([1,2,3,4,5])
document.write(b)
function sum(arr){
let a=0
for (let i = 0; i < arr.length; i++) {
a=a+arr[i]
}
return a
}局部作用域：函数内申明的变量，函数外无效
全局作用域：全局变量全局有效
匿名函数
函数表达式
let t=function(x,y){
console.log(x+y)
}
t(1,2)
//函数表达式需先声明，在调用，有顺序let btn=document.querySelector('button')
btn.onclick=function(){
alert('说出吾名，吓汝一跳！')
}立即执行函数 避免全局变量的污染，本质上是调用函数 格式：（函数（形参）{}）(实参)
需注意封号
(function(){
let num=10
console.log(num);
})();
(function(){
let num=20
console.log(num);
})();第二种写法
(function(){}());
小案例，时间
let second=+prompt('请输入秒数')
function getTime(t){
console.log(t)
h=parseInt(t/60/60%24)
m=parseInt(t/60%60)
s=parseInt(t%60)
h=h<10? '0'+h:h
m=m<10? '0'+m:m
s=s<10? '0'+s:s
return h+'/'+m+'/'+s
};
let a=getTime(second)
document.write(a)逻辑中断
function fn(x,y){
x=x || 0
y=y || 0
console.log(x+y)
}
//为真则返回x,为假则返回0转换为布尔型
‘空字符串和0，undefined,null,NaN 都为假,其他为真
6.对象
对象也是一种数据类型，无序的数据集合，详细的描述某个事物
let lisi={}
let zhangsan={
gender:'男',
sg:185,
tz:70
}属性的操作
增 可以直接对象.属性，新增属性
删 delete 对象.属性
改 属性等于变量，重新赋值即可
查 对象.属性，点等于的 第二种zhangsan['sg']
对象方法
let zhangsan={
gender:'男',
sg:185,
tz:70,
song:function(){
console.log('冷冷的冰鱼在脸上胡乱的拍')
document.write('冷冷的冰鱼在脸上胡乱的拍')
}
}
zhangsan.song()遍历对象
let zhangsan={
gender:'男',
sg:185,
tz:70,
song:function(){
console.log('冷冷的冰鱼在脸上胡乱的拍')
document.write('冷冷的冰鱼在脸上胡乱的拍')
},
forP:function(){
for(k in zhangsan){
console.log(k);
console.log(zhangsan[k]);
}
//for in 不推荐遍历数组，推荐遍历对象
//k是字符串值，用查的第二种方法
}
}
zhangsan.forP()内置对象
js内部提供的对象，包含属性和方法给开发者调用
例如：document.write()
console.log()
Math 数学对象
相关文档：MDN Web Docs
document.write(Math.PI)
console.log(Math.ceil(1.5)); let a=Math.random()*11
a=Math.floor(a);
document.write(a+'<br/>')
let b=Math.floor(Math.random()*6+5)
document.write(b)
小案例
let names=['张三','李四','王五']
let random=Math.floor(Math.random()*names.length)
document.write(names[random])
names.splice(random,1)
console.log(names); let random=Math.floor(Math.random()*11)
document.write(random+'<br/>')
let a=prompt('猜数字游戏，请输入');
while (a!=random) {
if(a<random){
a=prompt('猜小了，请重新输入')
}else
if(a<random){
a=prompt('猜大了，请重新输入')
}else{
break;
}
}
document.write('恭喜,猜对了')
对象地址图解
小知识：
var let const
var容易出错，不建议用，优先const,值不变直接用const，值改变在改为let
对于引用数据类型，声明的变量里面存放的是地址，需要注意的是const 声明数组或对象，增加删除元素是可以的，因为他们存放在堆上，引用没变，引用存放在栈上，但如果赋值一个新对象或数组，引用改变就会报错
7.web APIs
DOM是浏览器提供的用来操作网页内容的功能，用来开发网页内容特效和实现用户交互
DOM树 体现标签与标签之间的关系
将html文档以树状结构体现，例如html标签包含head和body标签，这两个标签又包含很多标签，很多标签里又有标签，一层一层可以理解为树状结构
api通过js的形式操控标签
DOM对象
浏览器根据html标签生成js对象，既然是对象，便有属性和方法,document是DOM提供的一个对象，网页所有内容都在document里。
<body>
<div>123</div>
<script>
const div=document.querySelector('div')
console.dir(div)
</script>
</body>DOM 获取元素对象、修改属性
<div class="box">qweqweqweqweqw</div>
<div class="box">123</div>
<p class="nav">导航栏</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
//获取匹配的第一个元素
const c=document.querySelector('div')
const nav=document.querySelector('.nav')
const li=document.querySelector('ul li:first-child')
console.dir(li)
console.log(li)
const lis=document.querySelectorAll('ul li')
console.log(lis)
</script>根据CSS选择器获取DOM元素，返回的是匹配的第一个元素对象，没有匹配，返回空
querySelectorAll返回的是NodeList集合，是个伪数组，有索引，有长度，但没有数组方法
操作元素内容、属性、样式
<div class="box">嘿嘿嘿</div>
<script>
const box=document.querySelector('.box')
// console.log(box.innerText);
box.innerText='哈哈哈' //不解析标签
box.innerHTML='<strong>嘻嘻嘻</strong>' //解析标签
//看着用即可
</script><div class="box">
<h1>一等奖：<span id="one">???</span></h1>
<h2>二等奖：<span id="two">???</span></h1>
<h3>三等奖：<span id="three">???</span></h1>
</div>
<script>
const index=['one','two','three']
const personArr=['刘德华','周杰伦','郭富城','黎明','张学友']
for(let i=0;i<index.length;i++){
let ran=Math.floor(Math.random()*personArr.length)
const one=document.querySelector('#'+index[i])
one.innerHTML=personArr[ran];
personArr.splice(ran,1)
console.log(personArr);
}
</script><img src="aaa.jpeg" alt="">
<script>
const images=document.querySelector('img')
images.src='bbb.jpeg'
</script><style>
.box{
width: 200px;
height: 200px;
color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box=document.querySelector('.box')
box.style.width='300px'
box.style.backgroundColor='hotpink'
</script><style>
body{
background-image: url(ccc.jpeg);
}
</style>
</head>
<body>
<script>
document.body.style.backgroundImage='url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2fb712eb-bd51-464e-aea4-eb92e209d9df%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688625342&t=8def16ad8747a69bdc25c61c5ac4ad6a)'
</script>修改样式比较多的情况下，可以通过修改类名减少代码量，如果需要添加一个类，要保留之前的类，覆盖直接赋值， 添加则 原类名 空格 新类名
还可以通过classlist操控css ,追加，删除，切换
<style>
.nav{
height: 200px;
width: 200px;
background-color: pink;
}
.aaa{
height: 300px;
}
.bbb{
background-color: skyblue;
}
.ccc{
width: 300px;
}
</style>
</head>
<body>
<div class="nav"></div>
<script>
const nav=document.querySelector('.nav')
nav.classList.add('aaa')
nav.classList.add('bbb')
nav.classList.add('ccc')
nav.classList.remove() //删除
nav.classList.toggle() //切换
</script>定时器-间歇函数
<style>
.btn{
width: 80px;
height: 30px;
}
</style>
</head>
<body>
<p onmousemove="bbb()" onmouseleave="aaa()">10</p>
<button class="btn" onclick="aaa()">开始</button>
<script>
let i=10
let t=0;
let a=0;
let p=document.querySelector('p')
let btn=document.querySelector('.btn')
function bbb(){
t=0
btn.innerHTML='开始'
clearInterval(a)
}
function aaa(){
if(t===0){
t=1
btn.innerHTML='暂停'
a=setInterval(function(){
if(i<=0){
i=11
}
--i
p.innerHTML=i
},1000);
return;
}
t=0
btn.innerHTML='开始'
clearInterval(a)
}
document.onkeyup = function() {
aaa()
};
</script>
</body>DOM 事件基础
键盘监听，焦点的聚焦和失焦
功能：密码框切换
<body>
<input type="text" class="aa">
<input type="text" class="bb">
<input type="text" class="cc">
<script>
const aa=document.querySelector('.aa')
const bb=document.querySelector('.bb')
const cc=document.querySelector('.cc')
aa.focus();
//addEventListener不会被覆盖，onclick会被覆盖
aa.addEventListener('keyup',function(KeyboardEvent){
if(KeyboardEvent.keyCode>48 && KeyboardEvent.keyCode<90){
bb.focus();
return;
}
alert('请输入0-9或者a-zA-Z的密码')
})
bb.addEventListener('keyup',function(KeyboardEvent){
if(KeyboardEvent.keyCode>48 && KeyboardEvent.keyCode<90){
cc.focus();
return;
}
})
cc.addEventListener('keyup',function(KeyboardEvent){
if(KeyboardEvent.keyCode>48 && KeyboardEvent.keyCode<90){
cc.blur();
return;
}
})
</script>
</body>鼠标事件:click,mouseenter,mouseleave
焦点事件:focus,blur
键盘事件:keydown,keyup
文本事件:input
this 的指向（基本概念）
谁调用指向谁，例：button点击事件，this指的是button，
回调函数
函数A作为参数传递给函数B，A就是回调函数
2438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
