day16~18-JavaScript

python-day16-JavaScript

一、js定义

​ (一)JS(JavaScript)控制网页的行为。

是互联网中最流行的脚本语言,网页、小程序、APP等。

​ (二)JS特点:

​ 1.JS是脚本语言。

​ 2.js是轻量级的编程语言。

​ 3.JS是可插入html页面的编程代码。

​ 4.所有现代浏览器均可执行js代码。

​ (三)JS代码可以借助script标签放到head或者body标签中。

​ (四)JS的注释:

​ 1.单行注释 //

​ 2.多行注释 /* */

二、JS写入方式

(一)直接在html页面中写

<!--第一种js引入方式:直接在页面中写。-->
<body>
    <script type="text/javascript">
        //js代码注释(单行注释)。
        /*
        js代码注释的多行注释。
        */
        //document---指代HTML
        //write---写入
        document.write('<h1>这是一个标题</h1>')
        document.write('<p>这是一个段落</p>')
    </script>
</body>

(二)引入外部JS文件

<!--第二种js引入方式:文件中-->
<script type="text/javascript" src="js/01-js.js"></script>
// 01-js.js
document.write(
	"<a href='https://www.baidu.com'>百度</a>"
)

三、JS基础

(一)定义变量

打印输出使用:console.log()

1.变量名 = 变量值(全局变量)

num = 1
console.log(num)

2.var 变量名 = 值(函数中的局部变量)

var age = 18
console.log(age)

3.let 变量名 = 值({}中的局部变量)

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

4.const 变量名 = 值(常量)

const stu_id = 'Python001'
console.log(stu_id)

(二)运算符

1.数学运算符: +、-、*、/、%、**

console.log(1 + 1)
console.log(1 * 2)
console.log(2 / 3)
console.log(2 % 3)

2.比较运算符:>、<、>=、<=、==、!=

console.log(10>20)   //false
			
//两边的元素转换成字符串以后是否相等。
console.log(5 == 3)
console.log(5 == '5')
//两边的元素转换成字符串以后是否不相等。
console.log('5' != 5)
//===直接判断两边数据是否相等。
//!==直接判断两边数据是否不想等。

3.赋值运算符:=、+=、-=、*=、/=、**=、%=

num_1 = 3
num_2 = 6
num_1 += num_2
//和Python同理
console.log(num_1)

4.逻辑运算符: &&(逻辑与)、||(逻辑或)、!(逻辑非)

console.log(4 > 3 && 4 < 5)
console.log(4 > 3 && 4 > 5)
console.log(4 > 3 || 4 > 5)
console.log(!(4 > 3 || 4 > 5))

(三)分支结构

1.单分支结构

语法1:
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?'成年':'未成年')

2.多分支结构

语法2-多分支:
if(条件){
代码块
}else if(条件){
代码块
}else if(条件){
代码块
}else{
代码块
}

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

(四)循环

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的和
//while循环
i = 1
total = 0
while(i<=100){
	total += i
	i += 1
}
console.log(total)

3.传统for循环

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

//传统for循环  C语言
total = 0
for(i=1;i<=100;i+=1){
	total += i
}
console.log(total)

4.传统for循环改while循环

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

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

(五)函数

1.函数:将重复的代码封装起来,以便重复调用。

2.作用

1)降低代码冗余度。

​2)将执行某一功能的代码封装起来,更容易理解。

3.步骤

​ 1) 定义函数

​ function 函数名(形参列表){

​ 函数体

​ }

​ 2)调用函数(实参列表)

//计算1-n的值
function sum(n){
	total = 0
	for(i=1;i<=n;i+=1){
		total += i
	}
	console.log(total)
}
//函数调用
sum(100)
sum(50)

(六)数组

1.数组只有正向下标。

2.数组的增加:push()–向数组末尾添加新元素。

3.数组的删除:pop()–删除数组中的最后一个元素。

​ splice(下标,个数)从制定下标开始,删除指定个数的数据。

4.修改

5.查找:利用下标查找。

//js中的数组就是Python中的列表
//数组只有正向下标
list1 = ['Python', 'JavaScript', 'C', 'HTML']
//数组的增删改查
//增加:push-向数组末尾添加新元素
list1.push('C++')
console.log(list1)
			
//删除:pop()--删除数组中的最后一个元素
list1.pop()
console.log(list1)
list1.pop()
console.log(list1)
			
//修改
list1[1] = 'Java'
console.log(list1)
			
//删除:splice(下标,个数)从制定下标开始,删除指定个数的数据。
list1.splice(0,2)
console.log(list1)
			
//查找
console.log(list1.length)
console.log(list1[0])

(七)字符串

1.字符串是用’ '或者" "括起来的字符。

2.字符串的拼接: +。

3.重复:可用+。

4.比较大小:使用编码值比较大小。

5.查看字符串长度:length

6.格式化输出${}

// 字符串:'', ""
a = 'abcd'
b = '1234'
//字符串的拼接
console.log(a + b)
			
// 字符串的重复(不可用)
console.log(a * 2)
			
// 字符串比较大小符合编码值比较大小规则
console.log(a > b)
			
// 查看字符串长度
console.log(a.length)
			
// 格式化输出
age = 18
name = '张三'
//反引号(`)--英文状态下ESC下面的键
Str1 = `${name}今年${age}`
console.log(Str1)

(八)字典

1.字典:{}表示容器

​ {key: value}—key:说明; value: 值。

​ key: value

​ key:js中key可以用引号引起来,也可以不使用引号;

​ python中key如果是字符串,必须使用引号

2.调用字典中的元素

​ 方法一:字典[key]–[]中的key必须加引号(python只能使用这种方法)

​ 方法二:字典.key–.key不需要加引号

3.字典的长度(字典没有长度,js和python都一样)

stu_info_dict = {
	name: '小红',
	age: 20,
	score: 100,
	weight:50,
	height:170
}
console.log(stu_info_dict['name'])
console.log(stu_info_dict.name)
//3.字典的长度(字典没有长度,js和python都一样)
console.log(stu_info_dict.length)
			
//4.字典的实际应用
stu = [
	{name:'李华',age:20},
	{name:'李刚',age:25},
	{name:'小明',age:17}
]
			
//将成年的学生名字打印出来?
for(x in stu){
	if(stu[x].age >= 18){
		console.log(stu[x].name)
	}
}

四、DOM节点操作

(一)获取节点

1.DOM(document object model) 操作

​ js提供了一个document,指向的是HTML,在js中通过document对象。

​ 直接或者间接获取页面内容对应的标签。

2.DOM操作具体内容-操作节点(节点就是标签)

​ a.直接获取节点-

​ document.getElementById(id属性值)–通过id属性值获取标签。

​ getElementByClassName(class属性值)。

​ getElementsByTagName(标签名)。

​ b.获取父节点: 节点.parentElement–获取指定节点的父节点。

​ c.获取子节点: 节点.children–获取指定节点的所有子节点。

​ 节点.firstElementChild–获取指定节点的第一个子节点。

​ 节点.lastElementChild–获取指定节点的最后一个子节点

​ d.添加节点

​ e.删除节点

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>DOM获取节点</title>
	</head>

	<body>
		<div id="box1">
			<p id="p1">段落</p>
		</div>
		
		<div id="box2">
			<a href="">百度</a>
			<p id="p2">段落</p>
		</div>
		
		<div id="box3">
			<p id="p3">段落</p>
		</div>
		
		
		<script type="text/javascript">
			p1 = document.getElementById('p1')
			console.log(p1)
			p1.style.color = 'red'
			//p1.style='color:red;'
			p2 = document.getElementsByTagName('p')
			console.log(p2)
			
			colors = ['blue', 'green', 'pink']
			for(x in p2){
				p2[x].style = `color:${colors[x]};`
			}
			
			div1 = document.getElementById('p1').parentElement
			console.log(div1)	
		</script>
	</body>

</html>

(二)添加节点

1.创建新的节点

​ document.createElement(标签名)

2.添加节点

​ 节点1.appendChild(节点2)—在节点1的最后添加节点2(节点1和节点2

是父子)。

​ 节点1.insertBefore(节点2, 节点3)–在节点1中节点3的前面添加节点2。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>添加节点</title>
	</head>

	<body>
		<script type="text/javascript">
			document.write('<span>aaa</span>')
		</script>
		
		<div id="div1">
			<p id="p1">段落</p>
		</div>
		
		<script type="text/javascript">
			//直接向body标签添加子标签。
			document.write('<span>aaa</span>')
		</script>
		
		<script type="text/javascript">
			//向p标签前添加新标签。
			a = document.createElement('a')  //创建a标签
			
			p = document.getElementById('p1')
			
			div1 = document.getElementById('div1')
			.insertBefore(a, p)   //添加创建的a标签
		</script>
	</body>

</html>

(三)删除节点

remove()

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>删除节点</title>
	</head>

	<body>
		<p id="p1">段落1</p>
		<p>段落2</p>
		<p>段落3</p>
		
		<script type="text/javascript">
			//remove()--删除节点
			//节点.remove()
			p1 = document.getElementById('p1')
			p1.remove()
			
			p = document.getElementsByTagName('p')
			console.log(p)
			p[1].remove()
		</script>
	</body>

</html>

(四)向节点中添加内容和属性

节点.innerText – 操作标签内部的文字

节点.innerHTML – 操作标签内部的文字(包括子标签)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>添加内容和属性</title>
	</head>

	<body>
		<a class="a1">百度<b>一下</b></a>
		
		<script type="text/javascript">
			a1 = document.getElementsByTagName('a')
			//a1[0].innerText = 'HTML'
			//a1[0].innerText = 'HTML<b>CSS</b>'   引号里面是文本
			//a1[0].innerHTML = 'HTML'
			a1[0].innerHTML = 'HTML<b>CSS</b>'
			
			//节点.属性 = 属性值 -- 向节点内添加或修改属性
			a1[0].href = 'https://www.baidu.com'
			a1[0].target = '_blank'
			a1[0].className = 'a2'
		</script>
	</body>

</html>

(五)js操作浏览器

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>js操作浏览器</title>
	</head>

	<body>
		<input type="submit" id="" value="打开新窗口" onclick="openwindow2()" />
		<input type="submit" id="" value="关闭新窗口" onclick="close2()" />
		<br />
		<input type="submit" id="" value="打开新标签页" onclick="openwindow1()" />
		<input type="submit" id="" value="关闭新标签页" onclick="close1()" />
		<br />
		<input type="submit" value="关闭当前窗口" onclick="close3()" />
		<input type="submit" value="回到底部" onclick="to_bottom()" />
		<input type="submit" value="回到右边" onclick="to_right()" />
		
		
		<div style="height: 5000px;width:10000px;"></div>
		<p>页面底部</p>
		<script type="text/javascript">
			//打开浏览器新标签页:window.open()
			function openwindow1(){
				w1 = window.open('https://www.baidu.com')
				//window.open()
			}
			//关闭刚打开的新标签页
			function close1(){
				w1.close()
			}
			//打开新的窗口
			function openwindow2(){
				w2 = window.open('https://www.baidu.com', '_blank', 'width=400,height=500')
				w2.moveTo(500,200)
			}
			//关闭刚刚打开的新的窗口
			function close2(){
				w2.close()
			}
			//关闭当前窗口
			function close3(){
				window.close()
			}
			//实现页面滚动
			function to_bottom(){
				//window.scrollTo()里面传x,y的值
				//window.scrollTo(0,4600)
				y = 0
				y_max = 5000
				while(y <= y_max){
					y += 500
					window.scrollTo(0,y)
				}
			}
			
			function to_right(){
				//window.scrollTo()里面传x,y的值
				//window.scrollTo(0,4600)
				x = 0
				x_max = 10000
				while(x <= x_max){
					x += 500
					window.scrollTo(x,0)
				}
			}	
		</script>
	</body>

</html>

五、BOM节点操作

(一)BOM(Brower Object Model)操作

BOM:对浏览器进行的操作–主要有打开窗口、滚动窗口、定时操作。

(二)定时器

1.Interval定时器的开启和关闭

1)创建定时器

setInterval(函数, 事件) – 返回一个定时器对象,每隔指定时间(单位是毫秒)就自动调用指定的函数。

2)关闭定时器

clearInterval(定时器对象)

例1:在控制台定时打印 ‘hello world!’

//定时打印
num = 1
t1 = setInterval(function(){
	console.log('hello world!' + num)
	num++
}, 2000)

例2:方块下移

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>定时器</title>
		<style type="text/css">
			#box {
				background-color: red;
				width: 80px;
				height: 80px;
				position: absolute;
				top: 10px;
			}
		</style>
	</head>

	<body>
        <!--方块下移-->
		<div id="box"></div>
		<!--方块停止下移-->
		<input type="submit" value="关闭定时器2" onclick="clearInterval(t2)" />

		<script type="text/javascript">
			//方块下移
			t = 10
			t2 = setInterval(function() {
				t += 2
				document.getElementById('box').style.top = t + 'px'

			}, 100)
		</script>
	</body>

</html>

2.Timeout定时器(相当于定时炸弹)

//2)Timeout定时器(相当于定时炸弹)
t3 = setTimeout(function() {
	console.log('hello')
}, 1000)

(三)事件绑定

事件绑定 - 让网页内容和对人类的指定的行为做出反应。

1.事件三要素:事件源、事件、事件驱动程序。

2.绑定事件的方法

1)在标签内部给事件源的事件属性赋值: <标签名 οnclick=“事件驱动程序”></标签名>。

​ 函数中的this是window对象

<!--绑定方式1-->
<button id="btn1" type="button" onclick="alert('你好哇!')">问候</button>

2)在js中给标签对应的节点的事件属性赋值:事件源对应的节点.onclick = 事件驱动程序对应的

函数。

​ 注意:事件驱动程序对应的函数必须是普通函数的函数名或者是匿名函数。

​ 函数中的this是事件源

<button id="btn2" type="button">提问</button>
<script type="text/javascript">
	//绑定方式2
	document.getElementById('btn2').onclick = function(){
		alert('今年多大了?')
		//this指的是当前节点。
		console.log(this)
	}
</script>

3)在js中通过节点对象的addEventListener绑定事件:事件源节点.addEventListener(事件名

称,事件驱动程序对应的函数)。

​ 注意:事件名称前面不加on。

​ 必须要获取到标签名。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>事件绑定</title>
	</head>

	<body>
		<button id="btn3" type="button">确定</button>

		<script type="text/javascript">
			//绑定方式3
document.getElementById('btn3').addEventListener('click',function(){
				confirm('是否删除?')
				console.log(this)
			})

		</script>
	</body>

</html>

(四)常见事件类型

1.鼠标相关事件(任何可见标签都可以绑定鼠标事件):

​ onclick - 点击事件

​ onmouseover - 鼠标悬停在标签上的事件

​ onmouseout - 鼠标从标签上离开的事件。

<button type="button" onmouseout="alert('鼠标离开')">按钮</button>
<script type="text/javascript">
	//1.鼠标相关事件
    b1 = document.getElementById('b1')
    b1.onmouseover = function(){
        b1.innerHTML = '哎你点不了!'
        b1.style.color = 'green'
	}
			
	b1.onmouseout = function(){
		b1.innerHTML = '点点点'
		b1.style.color = 'orangered'
	}
</script>

2.按键相关事件:

​ onkeypress - 某个按键按下对应的事件

​ onkeydown - 某个按键按下对应的事件

​ onkeyup - 某个按键按下后弹起来对应的事件

​ 注意:按键相关事件在绑定的时候必须通过js绑定(用方法2或者方法3绑定),才可以在函数

中添加事件对应的参数,来获取按键信息。

3.值改变

​ onchange - 用于检测下拉列表的选项发生改变的时候

六、常用弹框

(一)alert(提示信息)

​ 弹出提示信息(带确定按钮)

<button onclick="message1()">弹框1</button>
<script type="text/javascript">
	//1.第一类弹框:只有信息和确定按钮的弹框
	//alert(提示信息)
	function message1(){
		alert('添加成功!')
	}
</script>

(二)confirm(提示信息)

​ 弹出提示信息(带确定和取消按钮),返回值是布尔值,

​ 返回值如果是true表示用户点击的是确定按钮

​ 如果是false表示用户点击的是取消按钮

function message2(){
	var result = confirm('是否要删除这个数据?')
	console.log(result)
	if(result==true){
		//确定之后。。。
	}else{
		//取消之后。。。
	}
}

(三)prompt(提示信息)

​ 第三类弹框:有提示信息、输入框、确定按钮和取消按钮

​ 点取消,返回值是null

​ 点确定,返回值是输入框中输入的内容

function message3(){
	//张三是默认值
	var res = prompt('请输入你的名字:','张三')
	console.log(res)
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值