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)
}