学习python的第十六天

最新推荐文章于 2024-08-02 18:45:38 发布

lx_59_59

最新推荐文章于 2024-08-02 18:45:38 发布

阅读量288

点赞数

文章标签：学习 javascript 前端 html

本文链接：https://blog.csdn.net/qq_57257042/article/details/125751861

版权

JS必知必会

JS（JavaScript）控制网页的行为。

JS是互联网中最流行的脚本语言，应用于网页、小程序、app等。

JS是脚本语言。
JS是轻量级的编程语言。
JS是可插入HTML页面的代码。
所有现代浏览器均可执行JS代码。

// ：js代码的单行注释。

/* */：js代码的多行注释。

JS代码可以借助script标签放到head或者body标签中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 第一种JS引入方式 -->
		<script type="text/javascript">
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 第一种JS引入方式 -->
		<script type="text/javascript">
		   // document：指代HTML
		   // write：写入
		   document.write("<h1>这是一个标签</h1>")
		   document.write("<p>这是一个段落</p>")		   
		</script>
        <!-- 第二种JS引入方式 -->
		<script type="text/javascript" src="js/demo1.js"></script>
	</body>
</html>

JS小案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<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="../day14/img/a.png" alt="" id="photo">
		<input type="submit" value="更改图片"
        onclick="document.getElementById('photo').src='../day14/img/b.png'">
		<!-- 修改文字样式 -->
		<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 = ''">
		<!-- 插入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>
</html>

JavaScript的基础知识

1. 定义变量

变量名 = 变量值（全局变量）。

num = 1

console：控制台。

log：日志。

console.log(num)
// 1

var：变量名 = 变量值（函数中的局部变量）。

var age = 18
console.log(age)
// 18

let 变量名 = 变量值（{}中的局部变量）。

let gender = '男'
console.log(gender)
// 男

const 变量名 = 变量值（常量）。

const stu_id = 'python001'
console.log(stu_id)
// python001

2. 运算符

数学运算符：+、-、*、/、%、**

console.log(5+)
console.log(5-2)
console.log(5*2)
console.log(5/2)
console.log(5**2)
console.log(5%2)

比较运算符：<、>、<=、>=、==、!=

console.log(2>3)  // false
// 两边的元素转换成字符串以后是否相等
console.log('5' == 5)  //true
// 两边的元素转换成字符串以后是否不相等
console.log('5' != 5) //flase

赋值运算法：=、+=、-=、*=、/=、**=、%=

num_1 = 3
num_2 = 4
num_1 += num_2
console.log(num_1)
// 7

逻辑运算符：&&、||、！

console.log('a' >= '0' && 'a' <= '9')
// false

3.分支结构

语法一：

if(条件语句){
代码块
}else{
代码块
}

age = 18
if(age >= 18){
    console.log('成年')
}else{
    console.log('未成年')   
}

语法2：
if(条件语句){
代码块
}else if (条件语句){
代码块
}else{
代码块
}

year = 2000
if(year % 4 === 0 && year !== 0){
    console.log('闰年')
}else if(year % 400 ===0){
    console.log('闰年')
}else{
    console.log('平年')
}

分支结构：else可以省略不写

4. 三目运算符

python：结果1 if 条件 else 结果2。
Java、C、js：条件？结果1:结果2–条件成立结果1，反之结果2。

console.log(age >= 18?'成年':'未成年')

JS的循环

1. for-in循环

for(变量 in 序列){
代码块
}

for~in循环取得的是序列中每个元素的下标

list1 = [10,20,30,40]
for(i in list1){
    console.log(list1[i])
}

2. while循环

while(条件语句){
代码块
}

// 计算1-100的和
i = 1
total = 0
while (i <= 100){
    total += i
    i += 1
}
console.log(total)
// 5050

3. 传统for循环

for(表达式1;表达式2;表达式3){
代码块
}

total = 0
for(i=0;i<=100;i+=1){
    total += i
}
console.log(total)

4. 传统for循环改while循环

表达式1
while(表达式2){
代码块
表达式3
}

JS函数

函数：将重复的代码封装起来，以便重复调用。

作用：

降低代码的冗余度。
将执行某一功能的代码封装起来，更容易让人理解。

1. 定义函数

function 函数名(形参列表){
函数体
}

2. 调用函数

函数名(实参列表)

例1：计算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)

例2：计算10和20的和

计算100和30的和

function num_list(x,y){
				total = x + y
				console.log(total)
			}
			num_list(10,20)
			num_list(100,30)

JS数组

js中的数组就是python中的列表。

数组只有正向下标

list1 = ['Python','JavaScript','C','HTML']

数组的增删改查

增加：push 向数组末尾添加新元素。

list1.push('C++')
console.log(list1)

删除：pop 删除数组中的最后一个元素。

list1.pop()
console.log(list1)

删除：splice(下标，个数) 从指定下标开始删除指定个数的数据。

list1.splice(0,2)
console.log(list1)

修改

list1[1] = 'Java'
console.log(list1)

查找

console.log(list1.length)
console.log(list1[1])

JS字符串

字符串：‘’ 或者 “”

a = 'abcd'
b = "1234"

字符串的拼接

console.log(a+b)

在JS中，字符串不可以重复。

字符串比较大小符合编码值比较大小规则。

console.log(a > b)

字符串长度

console.log(a.length)

格式化输出

age = 18
name = '张三'
str1 = `${name}今年${age}岁`
console.log(str1)

JS字典

字典：{}表示容器。

{key:value} – key:说明 value:值

key：js中key如果是字符串，必须使用引号。

stu_info_dict = {name:'小明',age:20,score:100,weight:50,height:165}
console.log(stu_info_dict)

调用字典中的元素

字典[key] []中的key必须加引号（python只能使用法一）。
字典.key key不需要加引号。

console.log(stu_info_dict['name'])
console.log(stu_info_dict.name)

字典没有长度

字典的实际应用

stu = [
    {name:'李华',age:20},
    {name:'李刚',age:25},
    {name:'李建',age:16},
]
// 将成年学生的名字打印出来
for(x in stu){
    if(stu[x].age >= 18){
        console.log(stu[x].name)
    }
}