1. 了解JavaScript
JS(JavaScript)控制网页行为
JS是互联网最流行的脚本语言,网页、小程序、app
- JS是脚本语言
- JS是轻量级的编程语言
- JS是可插入HTML页面的代码
- 所有现代浏览器均可执行JS代码
JS代码可以借助script标签放到head或者body标签中
<body>
<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/demo.js"></script>
</body>
demo.js
document.write(
"<a href='https://www.baidu.com'>百度</a>"
)
2. 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"><br>
<!-- 修改图片 -->
<img src="../file/大嘴花张嘴.jpg" alt="" id="photo">
<input type="submit" value="更改图片" onclick="document.getElementById('photo').src='../file/大嘴花闭嘴.jpg'">
<input type="submit" value="还原图片" onclick="document.getElementById('photo').src='../file/大嘴花张嘴.jpg'">
<!-- 修改文字样式 -->
<p id="style">这是一个段落</p>
<input type="submit" value="华丽的" onclick="document.getElementById('style').style='color: pink;font-size: 20px;'">
<input type="submit" value="朴素的" onclick="document.getElementById('style').style=''"><br>
<!-- 插入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>
3. JavaScript基础
<body>
<script>
// 1. 定义变量
// 变量名 = 值(全局变量)
num = 1
// console:控制台
// log:日志
console.log(num) //类似于print
// var 变量 = 值 (函数中的局部变量)
var age = 18
console.log(age)
// let 变量名 = 值 ({}中的局部变量)
let gender = '男'
console.log(gender)
// const 变量名 = 值 (常量)
const stu_id = 'Python001'
console.log(stu_id)
// 2. 运算符
// 1) 数学运算符:+ - * / % **
console.log(1+1)
// 2) 比较运算符:> < >= <= == != === !==
console.log(10>20) // false、true
// == 两边的元素转换成字符串以后是否相等
console.log(5==3) // false
console.log('5'==5) // true
// != 两边的元素转换成字符串以后是否不相等
console.log('5'!=5) // false
// === !== 直接判断两边数据是否相等、不相等
// 3) 赋值运算符:= += -= *= /= **= %=
num_1 = 3
num_2 = 6
num_1 += num_2
console.log(num_1)
// 逻辑运算符:&&(逻辑与运算)、||(逻辑或运算)、!(逻辑非运算)
console.log(4>5 && 4<5)
console.log(4>5 || 4<5)
console.log(!(4>5 || 4<5))
// 分支结构
// 语法一
// if (条件语句){
// 代码块
// }
// 语法二
// if (条件) {
// 代码块
// }else if(条件){
// 代码块
// }else{
// else可以省略不写
// }
// 三目运算
// python:结果1 if 条件 else 结果2
// java、c、js:条件?结果1:结果2 -> 条件成立,结果1,反之结果2
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('平年')
}
weight = 60
height = 1
console.log(weight/(height**2))
if (18.5<=weight/(height**2) && weight/(height**2) <= 24.9) {
console.log()
}
</script>
</body>
4. js循环
<body>
<script>
/*
循环
1. for -in 循环
for (变量 in 序列){
代码块
}
2. while循环
while (条件语句) {
代码块
}
3. 传统for循环
for(表达式1;表达式2;表达式3){
代码块
}
4. 传统for循环改while循环
表达式1
while(表达式2){
代码块
表达式3
}
*/
// 计算1~100的和
// while循环
i = 1
totle = 0
while (i <= 100) {
totle += i
i += 1
}
console.log(totle)
// 传统for循环
totle = 0
for (i=0;i<=100;i+=1) {
totle += i
}
console.log(totle)
// for-in循环,取得是每个元素的索引,再通过索引取出元素
list_1 = [10,20,30,40]
for (i in list_1) {
console.log(list_1[i])
}
// document.cookie --- 获取用户的账号密码信息cookie
str_1 = 'abc123'
for (i in str_1) {
console.log(str_1[i])
}
</script>
</body>
5. js函数
<body>
<script>
// 函数:将重复的代码封装起来,以便重复调用。
// 作业:1. 降低代码的冗余度。2. 将执行某一功能的代码封装起来,更容易让人理解。
/*
1. 定义函数
function 函数名(形参列表){
函数体
}
2. 调用函数
函数名(实参列表)
*/
// 计算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)
function sum(a,b){
result = a + b
console.log(result)
}
sum(10,20)
sum(100,30)
</script>
</body>
6. js数组
<body>
<script>
// js中的数组就是Python中的列表
// 数组只有正向下标
list_1 = ['Python', 'JavaScript', 'C', 'HTML']
// 数组的增删查改
// 增 push - 向数组末尾添加一个元素
list_1.push('C++')
console.log(list_1)
// 删 pop - 删除数组中的最后一个元素
list_1.pop()
console.log(list_1)
// 删 splice(下标, 个数) - 从指定下标开始,删除指定个数的数据
list_1.splice(0,2)
console.log(list_1)
// 改
list_1[1] = 'Java'
console.log(list_1)
// 查
console.log(list_1.length)
console.log(list_1[1])
</script>
</body>
7. js字符串
<body>
<script>
// 字符串:''、""
a = 'abcd'
b = '1234'
// 字符串的拼接
console.log(a+b)
// 字符串的重复(不可用)
console.log(a*2)
// 字符串比较大小符合编码值比较大小规则
console.log(a>b)
// 查看字符串的长度
console.log(a.length)
// 格式化输出
age = 18
name = '张三'
str_1 = `${name}今年${age}岁`
console.log(str_1)
</script>
</body>
8. js练习题
第一题
使用while循环输出 0~100内所有3的倍数
<script>
i = 1
while (i < 100) {
if (i % 3 === 0) {
console.log(i)
}
i += 1
}
</script>
第二题
使用循环计算1234…*10的结果
<script>
result = 1
j = 1
while (j <= 10) {
result *= j
j += 1
}
console.log(result)
</script>
第三题
统计一个字符串中数字的个数(使用函数进行封装)
<script>
function str_num(str) {
count = 0
for (x in str) {
if (str[x] >= '0' && str[x] <= '9') {
count += 1
}
}
console.log(`字符串'${str}'中有${count}个数字`)
}
str_num('name125')
</script>
第四题
计算所有学生平均分
stu = [
{name: ‘大黄’, age: 27, score: 60},
{name: ‘小明’, age: 18, score: 89},
{name: ‘张三’, age: 23, score: 92},
{name: ‘小花’, age: 20, score: 71},
{name: ‘小红’, age: 30, score: 84}
]
<script>
stu = [
{ name: '大黄', age: 27, score: 60 },
{ name: '小明', age: 18, score: 89 },
{ name: '张三', age: 23, score: 92 },
{ name: '小花', age: 20, score: 71 },
{ name: '小红', age: 30, score: 84 }
]
sum = 0
for (i in stu) {
sum += stu[i].score
}
console.log(sum / stu.length)
</script>
第五题
求斐波那契数列列中第n个数的值:1,1,2,3,5,8,13,21,34… (这儿的n可以是任意正整数,可以通过输入来确定)
<script>
function fib(n) {
if (n <= 1) {
return n;
}
return fib(n - 1) + fib(n - 2);
}
console.log(fib(24))
</script>