JS必知必会
JS(JavaScript)控制网页的行为。
JS是互联网中最流行的脚本语言,网页、小程序、app等 。
1.JS是脚本语言;
2.JS是轻量级的编程语言;
3.JS是可插入HTML页面的代码;
4.所有现代浏览器均可执行JS代码。
5.JS代码可以借助script标签放到head或者body标签中。
<body>
<!-- 第一种js引入方式 -->
<script type="text/javascript">
//js代码注释(单行注释)
/*
js代码注释(多行注释)
*/
//document --> 指代HTML
//write --> 写入
document.write("<h1>这是一个标题</h1>")
document.write("<p>这是一个段落</p>")
</script>
<!-- 第二种js引入方式 -->
<script type="text/javascript" src="js/demo1.js"></script>
</body>
JS小案例
<body>
<!-- 修改标签的内容 -->
<span>请输入姓名:</span><span id="name">张三丰</span>
<br>
<input type="text" name="" id="info">
<!-- onclick -- 点击事件 -->
<input type="submit" value="提交"
onclick="document.getElementById('name').innerText=document.getElementById('info').value">
<!-- 修改图片 -->
<img src="./img/cat_open(1).png" alt="" id="photo">
<input type="submit" value="更改图片" onclick="document.getElementById('photo').src = './img/cat_close(1).png'">
<!-- 修改文字标签 -->
<p id="style">段落</p>
<input type="submit" value="华丽的" onclick="document.getElementById('style').style='color:pink;font-size:20p;'">
<input type="submit" value="朴素的" onclick="document.getElementById('style').style=''">
<!-- 插入html代码 -->
<script type="text/javascript">
//Python的列表在其他编程语言中叫做数组。
titles = ['四川','云南','贵州','湖北']
for (x in titles){
title = titles[x]
html_str = "<span id='one'>" + title + "</span><span>|</span>"
document.write(html_str)
document.getElementById('one').style='color:red;'
}
</script>
</body>
JS基础
1.定义变量
变量名 = 变量值(全局变量)
var 变量名 = 值(函数中的局部变量)
let 变量名 = 值({}中的局部变量)
const 变量名 = 值(常量)
2.运算符:
1)数学运算符: +、—、*、/、%、**
2)比较运算符:>、<、>=、<=、==、!=、===、!==
==:两边的元素转换成字符串以后是否相等
!=:两边的元素转换成字符串以后是否不相等
===:直接判断两边数据是否相等
!==:直接判断两边数据是否不相等
3)赋值运算符:=、+=、-=、*=、/=、**=、%=
4)逻辑运算符:&&(逻辑与)、||(逻辑或)、!(逻辑非)
3.分支结构
语法1:
if(条件语句){
代码块
}else{
代码块
}
语法2:
if(条件语句){
代码块
}else if(条件语句){
代码块
}else if(条件语句){
代码块
}else{
}
分支结构:else可以省略不写
4.三目运算符:
python版本: 结果1 if 条件 else 结果2.
java、c、js版本:条件?结果1:结果2 --> 条件成立,结果1;反之,结果2.
<body>
<script>
num = 1
//console:控制台
//log:日志
console.log(num)
var age = 18
console.log(age)
let gender = '男'
console.log(gender)
const stu_id = 'Python001'
console.log(stu_id)
console.log(1 + 2)
console.log(1 * 2)
console.log(2 / 3)
console.log(2 % 3)
console.log(10 > 20) //false
console.log(5 == 3) //false
console.log('5' == 5) //true
console.log('5' != 5) //false
num_1 = 3
num_2 = 6
num_1 += num_2
//和python同理
console.log(num_1)
console.log(4 > 3 && 4 < 5)
console.log(4 > 3 && 4 > 5)
console.log(4 > 3 || 4 > 5)
console.log(!(4 > 3 || 4 > 5))
age = 18
if(age >= 18){
console.log('成年')
}else{
console.log('未成年')
}
console.log(age >= 18?'成年':'未成年')
year = 2000
if(year % 4 === 0 && year % 100 !== 0){
console.log('闰年')
}else if (year % 400 ===0){
console.log('闰年')
}else{
console.log('平年')
}
sum1 = 0
for(n=1;n<=100;n+=1){
sum1 += n
}
console.log(sum1)
// 公式:体重(kg) / (身高(m)的平方值) 在18.5 ~ 24.9之间属于正常
hight = 1.62
weight = 100
console.log(weight / (hight ** 2))
if (18.5 <= (weight / (hight ** 2)) && (weight / (hight ** 2)) <= 24.9){
console.log('是否正常:true')
}else{
console.log('是否正常:false')
}
</script>
</body>
JS循环
1.for-in循环
for(变量 in 序列){
代码块
}
2.while
while(条件语句){
代码块
}
3.传统的for循环
for(表达式1;表达式2;表达式3){
代码块
}
4.传统for循环改while循环
表达式1
while(表达式2){
代码块
表达式3
}
<body>
<script>
//计算1-100的和
//while循环
i = 1
total = 0
while (i <= 100){
total += i
i += 1
}
console.log(total)
//传统for循环
total = 0
for (i=0;i<=100;i+=1){
total += i
}
console.log(total)
//for-in循环取的是序列中每个元素的下标
// 通过 序列[下标] 的形式再将元素取出
list1 = [10,20,30,40]
for (i in list1){
console.log(list1[i])
}
// document.cookie --- 获取用户的账号密码信息的cookie
str1 = 'abc123'
for(i in str1){
console.log(i)
}
</script>
</body>
JS函数
函数:将重复的代码封装起来,以便重复调用。
作用:1.降低代码的冗余度。2.将执行某一功能的代码封装起来,更容易让人理解。
1.定义函数
function 函数名(形参列表){
函数体
}
2.调用函数
函数名(实参列表)
<body>
<script>
// 计算1-n的值。
function num_total(n){
total = 0
for(i=1;i<=n;i+=1){
total += i
}
console.log(total)
}
num_total(100)
num_total(50)
// 计算10和20的和
// 计算100和30的和
function sum(a,b){
console.log(a+b)
}
sum(10,20)
sum(100,30)
</script>
</body>
JS数组
js中的数组就是python中的列表
js数组只有正向下标
数组的增删改查:
1)增加:push - 向数组末尾添加新元素
2)删除:pop() - 删除数组中最后一个元素
3)删除:splice(下标,个数) - 从指定下标开始,删除指定个数的数据。
4)修改:列表名[下标]=新的元素
5)查找:列表名[下标]
<body>
<script>
list1 = ['Python','javascript','c','HTML']
list1.push('C++')
console.log(list1)
list1.pop()
console.log(list1)
list1.pop()
console.log(list1)
:
list1[1]='java'
console.log(list1)
list1.splice(0,2)
console.log(list1)
console.log(list1.length)
console.log(list1[0])
</script>
</body>
JS字符串
字符串: ‘’ 或者 “”
1)字符串的拼接:+
2)字符串的重复(不可用)
3)字符串比较大小符合编码值比较大小规则
<body>
<script>
a = 'abcd'
b = '1234'
console.log(a + b)
console.log(a > b)
// 字符串的长度
console.log(a.length)
// 格式化输出
age=18
name='张三'
str1=`${name}今年${age}岁` // 此处是反引号
console.log(str1)
</script>
</body>
JS字典
字典:{}表示容器
{key:value} – key:说明;value:值
key:js中key可以用引号引起来,也可以不使用引号;python中key如果是字符串,必须使用引号。
1.调用字典中的元素
方法一:字典[key] - []中的key必须加引号(python只能使用 字典{key})
方法二:字典.key - .key不需要加引号
2.字典的长度(字典没有长度,js和python都一样)
<body>
<script>
list1 = ['小红',20,100,50,170]
stu_info_dict = {name:'小红',age:20,score:100,weight:50,height:170}
console.log(stu_info_dict)
console.log(stu_info_dict['name'])
console.log(stu_info_dict.name)
console.log(stu_info_dict.length)
// 字典的实际应用
stu = [
{name:'李华',age:20},
{name:'李刚',age:25},
{name:'小明',age:17}
]
// 将成年的学生名字打印出来?
for(x in stu){
if(stu[x].age >= 18){
console.log(stu[x].name)
}
}
</script>
</body>