JS基础语法——HTML
一、选择器的优先级
1.选择器的优先级
权重值越大优先级越高。（无论权重是多少，内联样式表的优先级都是最高的）
元素选择器、* 权重值是：1
类选择器权重值是：2
id选择器权重值是：4
群组选择器：看每个独立的选择器的权重值分别是多少
后代、子代选择器：所有被>或者空格隔开的选择器的权重之和
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="div1" class="c1">
<div id="div2" class="c2">
<p id="p1" class="c3" style="color: deeppink;">我是段落1p>
div>
div>
<style type="text/css">
/* 单个选择器的优先级 */
#p1{
color: blue;
}
.c3{
color: green;
}
p{
color: red;
}
#p1{
background-color: yellow;
}
div #p1{
background-color: aquamarine;
}
/*
后代选择器比较权重的时候：先比第一大的独立选择器谁大谁优先级高，如果第一大相同，就比第二天的选择器，以此类推...
*/
.c2>#p1{
border-top: 2px solid red;
}
body>#div1>div>p{
border-top: 5px dotted blue;
}
style>
body>
html>
二、认识JS
1.什么是js
js是JavaScript的缩写，是一门专门用来控制前端页面的编程语言（属于脚本语言）
js是web标准中的行为标准 - 主要负责网页中内容的修改
2.js代码写在哪儿
内联js - 将js代码写标签的事件属性中
内部js - 将js代码写在script标签
外部js - 将js代码写在js文件中，然后在html中用script标签导入
注意：同一个script标签只能在导入外部js和写内部js两个功能中选一个
3.js能干什么
a.修改/获取标签内容
b.修改/获取标签属性
c.修改标签样式
d.在网页中插入html代码
4.js怎么写（语法）
大小写敏感
一行语句结束一般不需要分号, 箭头函数之前需要加分号
命名采用驼峰式命名
js中的标识符：由字母、数字、下划线和$组成，数字不能开头
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<p id="p1">我是段落1p>
<img id="img1" src="img/bear.png" >
<br>
<br>
<button type="button" onclick="document.getElementById('p1').innerText = 'hello js!'">修改内容button>
<button type="button" onclick="document.getElementById('img1').src = 'img/hat1.png'">修改图片button>
<button type="button" onclick="document.getElementById('p1').style.color='red'">修改颜色button>
<script type="text/javascript">
// for(i=0;i<10;i++){
// document.write('我是超链接')
// }
names = ['张国荣', '王祖贤', '张曼玉', '周润发', '刘德华']
for(x in names){
document.write(''
+names[x]+'')
}
script>
body>
html>
三、变量
1.定义变量
1)语法：
变量名 = 值
var 变量名 = 值
let 变量名 = 值
const 变量名 = 值
1）四种定义变量的方法
studentName = '小明'
console.log(studentName)
var age = 18
console.log(age)
let sex = '男'
console.log(sex)
const height = 180
console.log(height)
2）四种方法的区别
a.前三种方式定义的变量，变量的值可以修改；用const定义的变量的值不能修改
studentName = '张三'
age = 20
sex = '女'
console.log(studentName, age, sex)
// height = 190 //报错，因为const定义的变量中的数据不能修改
b.不同的作用域
a. 变量名 = 值 - 这儿的变量是全局变量(不管在哪儿定义)
b. var 变量名 = 值 - 在函数中定义是局部变量，没有定义在函数中就是全局
c. let 变量名 = 值 - 在{}中定义的是局部变量，没有定义在{}中的是全局的
num = 100 // num是全局的
var x = 'hello' // x是全局的
let a = 11
{
num2 = 200
var x2 = 'you'
let a2 = 22
}
function func1(){
num3 = 300
var x3 = 'are'
let a3 = 33
console.log('函数中:', num, x, a, num2, x2)
}
func1()
console.log(num, num2, num3)
console.log(x, x2)
console.log(a)
// console.log(a2)
// console.log(a3)
if(age>=18){
let school = '清华大学'
console.log('if里面:',school)
}
// console.log(school)
2.同时定义多个变量
变量名1=变量名2=变量名3=… = 值
a=b=c=100
console.log(a,b,c)
// var/let/const 变量1,变量2,变量3,...
var a1,b1,c1 = 20
console.log(a1, b1, c1) // undefined undefined 20
var b1,b2,b3
console.log(b1, b2, b3) // undefined undefined undefined
var c1=100, c2=200, c3=300
console.log(c1, c2, c3)
四、运算符
1.数学运算：+、-、*、/、%、++、–
console.log(10+20)
console.log(10-20)
console.log(10*20)
console.log(5/2)
console.log(9%2)
++(自增1)、–(自减1)
变量++、++变量
age = 18
age++ //age = age+1
console.log(age) //19
++age
console.log(age) //20
age--
console.log(age) //19
--age
console.log(age) //18
增操作，++/–放在前面和后面的时候的不同
num = 10
num2 = ++num // num+=1; num2=num
console.log(num2) //11
num = 10
num2 = num++ //num2 = num; num+=1
console.log(num2) //10
a = 10
result = 12 + a++ - --a + ++a
console.log(result) //23
2.比较运算运算符：>、<、>=、<=、、!=、=、!==
结果都是布尔值
console.log(10 > 20) // false
console.log(5 == '5') // true
console.log(5 == 5) // true
console.log(5 === '5') //false
console.log(5 === 5) // true
// 注意: js中的比较运算符，不支持连写表示范围
age = 30
// console.log(18<=age<=28) // true
3.逻辑运算符: &&(逻辑与运算)、||(逻辑或运算)、!(逻辑非运算)
console.log(true && true)
console.log(true && false)
console.log(false && true)
console.log(false && false)
console.log(true || true)
console.log(true || false)
console.log(false || true)
console.log(false || false)
console.log(!true)
num = 18
console.log(num%3==0 && num%7==0)
4.赋值运算符: =、+=、-=、*=、/=、%=
运算规则和python一样
num = 100
num += 10 // num = num+10
num -= 20
5.三目运算符：?:
表达式?值1:值2 - 判断表达式的结果是否为true，如果是，整个运算表达式的结果是值1否则是值2
age = 18
result = age>=18?'成年':'未成年'
console.log(result)
num = 10
result = num%3?'不是3的倍数':'3的倍数'
console.log(result)
五、分支结构
-
if分支结构
if(条件语句){
代码块
}if(条件语句){
满足条件要执行的代码块
}else{
条件不满足要执行的代码块
}if(条件语句1){
代码块1
}else if(条件语句2){
代码块2
}else if(条件语句3){
代码块3
}
…
else{
代码块N
}执行过程和应用和python一样
age = 19
if(age>=18){
console.log('成年')
}else{
console.log('未成年')
}
语法：
switch(表达式){
case 值1:{
代码块1
}
case 值2:{
代码块2
}
case 值3:{
代码块3
}
…
defualt:{
代码块N
}
}
2.switch
说明：
- switch和case、defualt是关键字
- case语句后面的{}可以省略
- 表达式可以是任何有结果的表达式
- 值也必须是有结果的表达式，通常会直接写一个固定的数据
执行过程：
先计算表达式的值，然后让表达式的值依次和每个case后面的值进行比较，哪个case后面的值和表达式的值相等，
就将这个case作为入口，依次执行和这个case以及它后面所有的代码块，直接执行完或者遇到break就结束。
如果没有哪个case后面的值和表达式的值相等，就将defualt作为入口（注意：defualt不是一定要放在最后）
switch(0){
case 0:
console.log('表达式1')
break
case 1:
console.log('表达式2')
case 2:
console.log('表达式3')
break
default:
console.log('表达式6')
case 3:
console.log('表达式4')
case 4:
console.log('表达式5')
}
练习：根据成绩打印等级：A-B-C-D
90-100(A) 80-89(B) 60-79© 60分以下(D)
parseInt(数据) - 将数据转换成整数
score = 89
switch(parseInt(score/10)){
case 10:
case 9:
console.log('A')
break
case 8:
console.log('B')
break
case 7:
case 6:
console.log('C')
break
default:
console.log('D')
break
}
六、循环结构
1.while循环
1）while
while(条件语句){
循环体
}
2) do-while(保证循环至少执行一次)
do{
循环体
}while(条件语句)
2.for循环
1) for-in
for(变量 in 序列){
循环体
}
注意：变量取的不是元素而是下标或者key
2) 标准for
for(表达式1;表达式2;表达式3){
循环体
}
表达式1
while(表达式2){
循环体
表达式3
}
执行过程: 先执行表达式1, 然后判断表达式2的结果是否为true，如果为true是执行循环体，执行完循环体再执行表达式3；
再判断表达式2是否为true,为true又执行循环体，执行完循环体再执行表达式3;
以此类推，如果表达式2的结果是false整个循环就结束
names = ['张三', '老王', '李四', '小明']
for(x in names){
console.log('x:', x, names[x])
}
stu1 = {
'name':'余婷', 'age': 18, 'face': 100}
for(x in stu1){
console.log('x:', x, stu1[x])
}
// js控制循环执行100次
for(let i=0;i<100;i++){
console.log(i, '==========')
}
// js控制循环产生100~999的数字序列
for(let i=100;i<1000;i++){
console.log('i:', i)
}
// 产生0~100中所有的偶数
for(let i=0;i<=100;i+=2){
console.log('偶数i:', i)
}
// 产生50~1的数字序列
for(let i=50; i>=1;i--){
console.log('倒数i:', i)
}
3.continue和break - 和python一样
七、函数
1.函数的定义
function 函数名(参数列表){
函数体
}
注意：js中每个函数中都有一个局部变量arguments,用来接收这个函数在调用的时候传的所有的实参
function sum(num1, num2){
return num1+num2
}
function func1(a, b=10, c=20){
// console.log('a:', a, 'b:', b, 'c:', c)
console.log(`a:${
a} b:${
b} c:${
c}`)
}
// 有默认值的参数可以放在没有默认值参数的前面
function func2(a=10, b, c=20){
console.log(`a:${
a} b:${
b} c:${
c}`)
}
2.函数的调用
函数名(实参列表)
console.log(sum(10, 30))
func1(40)
func2(1,2,3)
// 注意: js中使用关键字参数传参无效, 只能使用位置参数
func1(c=300,a=200,b=100) // a:300 b:200 c:100
// 调用函数的如果不给没有默认值的参数传参，不会报错，这个参数的值会是undefined
func1() // a:undefined b:10 c:20
func1(1,2,3,4,5,6,7,8) // a:1 b:2 c:3
3.arguments
js中每个函数中都有一个局部变量arguments,用来接收这个函数在调用的时候传的所有的实参
function func3(){
console.log(arguments)
}
func3()
func3(10)
func3(10,20)
func3('name', 'age', 30)
console.log('======================')
function func4(x){
console.log('x:', x)
console.log(arguments)
for(i in arguments){
console.log('i:', i, arguments[i])
}
}
func4()
func4(100, 200)
func4(1, 4, 9, 19, 80)
4.匿名函数
函数名 = function (参数列表){
函数体
}
函数名 = lambda 参数列表: 返回值
sum2 = function(x,y){
console.log(x+y)
return x+y
}
sum2(12.5, 10)
5.箭头函数
(参数列表)=>{函数体}
sum3 = (x,y)=>{
console.log(`x+y: ${
x+y}`)
return x+y
}
sum3(100, 200)
// name = '小明'
// python: f'你的名字是:{name}'
// js: `你的名字是:${name}`
nums = [19, 89, 78, 65, 12]
nums.sort(function(item1, item2){
return item1-item2
})
console.log(nums) // [12, 19, 65, 78, 89]
nums = [19, 89, 78, 65, 12]
nums.sort(function(item1, item2){
return item2-item1
})
console.log(nums) // [89, 78, 65, 19, 12]
nums = [19, 89, 78, 65, 12]
nums.sort(function(item1, item2){
return item2%10-item1%10
})
console.log(nums) // [19, 89, 78, 65, 12]
// 正则
re = /^\d{3}$/
result = re.test('789asdf')
console.log(result)