js引入方式
/*内部引入*/
<body>
<script>
...
</script>
</body>
/*外部引入*/
<script src="./外部js.js">
</script>
输入输出语句
<body>
<script>
/*输入语句*/
prompt('请输入。。。')
/*打印到页面*/
document.wriite(`你们。。。`)
/*可以识别标签*/
document.wriite(`<strong>你们。。。</strong>`)
/*控制台输出语句*/
console.log('你们')
</script>
</body>
变量
<body>
<script>
//变量：盒子，存储数据的容器，数据本身不是变量
//变量的声明：let 变量名 （以前用var）
let age
age =prompt('请输入你的年龄：')
console.log(age)
</script>
</body>
//变量的初始化
let uname =prompt('请输入你的用户名')
console.log(uname)
//同时定义多个变量(不推荐)
let jio='zs',duer=23
console.log(jio,duer)
//变量案例
let age=prompt('输入你的年龄')
document.write(age)
变量命名规范
<body>
<script>
//1.有效字符（大小写字母，数字，下划线，$）；2.关键字保留字不能用于变量命名；3.不能以数字开头；4.尽量使用有意义的变量名；5.比较长的名字用驼峰命名法，eg：userName,用大写将不同的名字分开
</script>
</body>
let和var的区别
//var可以多次声明同一变量,可以先输出再声明。但是let不能
console.log(age)
var age
const常量
//常量名大写，能用const就用这个，否则用let
const PI=3.14
consloe.log(PI)
数据类型
<body>
<script>
//js是弱数据类型语言，只有赋值
let uname=21
console.log(typeof(uname))//查看类型
//基本数据类型~数字类型
let a=21
let b=4
console.log(a)
console.log(a+2 or ...)
console.log(a%b)
</script>
</body>
//字符串类型
let uname='bsdbcsdbn' or "bsdbcsdbn"
//字符串拼接用+号
let a = prompt("请输入num1")
let b = prompt("请输入num2")
console.log(a+b)
//模板字符串
let uname=prompt(请输入名字：")
let age=prompt("请输入年龄：")
/*document.write('我叫'+uname+',今年'+age+‘岁了’) or*/
document.write('你叫'${uname},今年${age}岁了)
布尔类型
console.log(typeof(3>5)) //检查数据类型，结果是false
//undefined ,声明未赋值
//null
console.log(undefined+1)
console.log(null+1)
隐式转换
let a=2
console.log(a+'2')//数字加字符串类型
显示转换
let a=prompt('num1')
let b=prompt('num2')
console.log(number(a)+number(b))
console.log(typeof (+a))
let c='200px'
console.log(parseInt(c))
console.log(parseFloat(c))
alert()//警示框
求和案例
doucment.write(` `)
运算符
a +=4;
a -=3;
a /=3
a *=8
比较运算符
let num1=2
let num2='2'
alert(num1==num2)//~true,只比较数值，类型自行转换
alert(num1===num2)//~false，既比较类型也比较数值
逻辑运算符
&&：两真则真，一假则假 ||：一真则真，全假则假 !：
单分支语句
let age=19
if(age<=18)
{
document.write('你是未成年')
}
双分支语句
let age= +prompt('请输入你的的年龄')
if(age<=18)
{
alert('你是未成年')
}
else
{
alert('恭喜你，成年了')
}
案例之判断是否是平闰年
<script>
let year = +prompt('请输入年份')
if(year%100!==0 && year%4===0 || year%400===0)
{
alert('闰年')
}
else
{
alert('平年')
}
</script>
多分支语句
let age = +prompt('age:')
if(age<18)
{
alert('你是未成年')
}
else if(age>18 && age<==25)
{
alert('青春年华')
}
else
{
alert('好汉不提当年勇')
}
三元运算符（双分支的简写）
如上二分支的例子的简写如下：
a<=18 ? alert('你是未成年'):alert('恭喜你，成年了')
//判断条件？条件成立时执行的语句：条件不成立时执行的语句
数字补零案例
let a= +prompt('num')
a<10?alert(0+a):alert(a)
//输入2变02
SWITCH
let num = +prompt('今天星期几')
switch(num){
case 1:
alert('星期一')
break
case 2:
aler('星期二')
break
。。。。}
while
let i=10
while(i>0)
{
console.log('你是大聪明')
i--
}
do while
let i=10
do{
console.log('你是大聪明')
i--
}while(i>11)
eg:
<script>
let i=0
let sum=0
while(i<=100)
{
sum=sum+i
i++
} alert(sum)
</script>
for循环
continue和break~跳出循环
break跳出循环
continue跳出本次循环
循环加强
let a ={1,2,3,66,4,5}
for ( let i in a)
{
console.log(a[i])
}
//for (let k of a)
{
console.log(k)
}
数组(!!!)
let arr[20]
let arr['dfnjd','sdhub','dguiag']
//查找
1.alert(arr[5])
2.let arr2 = new Array()
//数组遍历
for(let i in arr){
console.log(arr[i])
}
//增删改查
通过索引下标对其重新赋值
//使用系统提供的Array类
console.log(arr instanceof(Array))
//合并数组
arr3=arr.concat(arr2)
//增,push在数组末尾添加元素,unshift在数组首部加元素
arr.push('jio')
arr.unshift('jiojio')
console.log(arr)
//删
arr.pop()
console.log(arr)
or
arr.splice(起始位置，删除数量)
arr.spllice(删除的起始位置,0,要添加的元素)
console.log(arr,slice(3))//截取，3是截取的字符长度
二维数组
student[1][0]
let student=[['mlkfkffg',42,'fdf'].['dferrg',34,'ger']]
console.log(student[1][0])
for(let i in student)
{
for(let j in student[i])
{
console.log(student[i][j])
}
}
函数
//函数必须调用才能执行
eg:fuction getSum(a,b)
{
console.log(a+b)
}
getSum(2,9)//实参
let a=getSum(b=9,a=2)与上选择其一
//函数要有返回值，一定要添加return关键字，否则返回值为underfined
匿名函数
无法直接使用，没有名字
函数表达式
把函数复制给变量名
let a = function(){
consloe.log('dbwjhdbsdd')
}
a()
立即执行函数
（function(){console.log('jio')}）()
(function(){console.log('jiojio')}) ()
值传递，引用传递
值传递只传递了值，地址没有变
引用传递传地址，发生改变
默认值参数
function getCir(r,PI = 3.14){
return PI * r * r
}
let a=getCir(3)
console.log(a)
箭头函数
/*setInterval(function (){
console.log('i hate you')
},1000)*/
setInterval(() =>console.log('i love you'),100)
递归
function jio(n){
if(n === 1)
{
return 1
}else{
return n*jio(n-1)
}
//求1~n的和
function he(n)
{
if(n===1)
{
return 1
}
else{
return n+he(n-1)
}
}
alert(he(5))
闭包~函数嵌套函数
数组遍历
let arr[6] = {'a',1,4,5,6,7}
for (let i=0;i<arr.length;i++)
{
console.log(arr[i])
}
字符串的方法
let str='nishidacongmin'
console.log(str.split(' '))//以空格的方式字符拆开
console.log(str.substring(2,4))
console.log(str.startswith('ni'))//以什么开头
console.log(str.endswith('ni'))//以什么结尾
console.log(str.includes('min'))
对象
let arr = [160,160]
对象，无序的数据集合
let obj={
uname:‘jiiozai’，
age:19，
gender:'nv'，
consloe.log('我要唱歌了')//动作
}
obj.sing()//动作
console.log(obj)
console.log(obj.uname)//对某一个元素查找
console.log(obj.['age'])
let obj2=new Object()//另一种构造函数方法
对象的增删改查
let obj={
uname:‘jiiozai’，
age:19，
gender:'nv'，
}
obj.uname = 'GGBond'//修改
consloe.log(obj)
obj.sing =fuction(){
console.log('sing~')}//增加
delete obj.gender
console.log(obj)//删除
对对象的遍历
for(let k in obj){
console.log(typeof(k))
console.log(obj[k])
}
数组对象
let arrobj=
[
{
uname:'zs',
age:21
},
{
uname:'jio',
age:12
},
]
console.log(arrobj)
arrobj[1]['uname']
for(let i=0;i<arrobj.lenght:i++){
for(let k in arrobj[i]){
console.log(arrobj[i][k])
}}
Math内置对象
console.log(Math.E)
console.log(Math.PI)
//向上取整
console.log(Math.cell(3.14))
//向下取整
console.log(Math.floor(3.14))
//绝对值
console.log(Math.abs(-3.14))
//求幂次方
console.log(Math.pow(3.14))
//开平方
console.log(Math.sqrt(3.14))
//随机数0~10，左闭右开
console.log(Math.random())
//扩大范围
console.log(Math.random()*（10-2+1）+2)
日期
let date=new Date()
alert(date)
let year = date.getFullYear()
let month = date.getMonth()+1
let day = date.getDate()
let hh = date.getHours()//时
let mm = date.getMinutes()
let mm = date.getseconds()
document.write('${year}年${month}月${day}日${date}${hours}${minnutes}')
dom
<button>提交</button>
const btn = document.querctor('button')
console.dir(btn)
获取元素的方法
const li2 =document.querySelector('.two')
console.log(li2)
//document.querySelectorAll将所有匹配的元素全部获取到，并存放到伪数组
const lis =document.querySelectorAll('li')
console.log(lis)
const li3 =document.querySelectorAll('ul li:nth-child(3)')
...
//其他
const lis =document.getElementsByTagName('div')
const lis =document.getElementsById('four')
修改元素内容
<div class="one">我是一个即将被更改的盒子</div>
<div class="two">我是一个即将被更改的盒子</div>
<script>
//1.获取元素
const box1=documet.querySelector('.one')
const box2=documet.querySelector('.two')
console.log(box1)
console.log(box2)
//2.操作,修改
box1.innerText='jiojio'//innerText不识别标签
box2.innerHTML='dudu'//innerHTML识别标签
修改元素属性
<img src="../images/1.webp" alt="六得花" title="刘德华">
<input type="text" placeholder="...">
<script>
//1.获取元素
const img=document.querySelector('img')
const ipt=document.querySelector('input')
const btn+document.querySelector("button")
//2.改元素属性 对象.属性=值
img.src="../images/2.webp"
img.title="我是个大帅哥"
ipt.type="password"
ipt.palceholder="..."
</script>
修改元素样式属性
**定时器**！！！
setTimeout\setInterval 两种定时器
1.setTimeout:某段代码或函数在多久后执行
setTimeout（code or function,time(ms)）
//传入一串代码
setTimeout('console.log("我是1秒之后执行的代码") ',1000)//1000是毫秒
//返回值为一个整数，代表定时器编码
let timer=setTimeout('console.log("我是4秒之后执行的代码") ',4000)
console.log(timer1)
//传入函数,传的是函数名，不要带小括号
let timer=setTimeout（fn,3000）
function fn(){
console.log('6666')
}
//setTimeout（函数或一段代码，延迟时间，实参。。。。）
let timer =setTimeout(function(a,b){
console.log(a+b)
},2000,1,4)
//定时器的第一个参数，如果是对象方法，this不再指向对象，指向全局环境
let obj={
uname:'guoxin',
a:3,
b:4,
sum:function(){
console.log(this.a)
}
}
obj.sum()
2.setInterval：间隔一段时间，将代码或者函数执行一次
let timer = setInterval('console.log(\'666666\')',1000)
clearInterval(timer)
let timer2 = setInterval(function(a,b)){
console.log(a+b)
},1000,2,3)
作业：1.九九乘法表，用for和while做一遍
2.写一个二维数组做一个循环遍历
3.用户注册倒计时
9779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
