Java-Script 编程

Java-Script 编程
一. Js概念
- 1.1 简介
- 1.2 语法结构
二. 变量使用
- 2.1 定义变量
- 2.2 定义常量
三. 数据类型
四. 流程控制
五. 函数系列
- 5.1 函数定义
- 5.2 函数的全局变量和局部变量
六. 对象编程
七. BOM 浏览器对象模型
八. DOM 文档对象模型

一. Js概念

1.1 简介

1.js也是一门编程语言 它也是可以写后端代码的
	用js一统天下 前后端都可以写
  	nodejs 支持js代码跑在后端服务器上
    然而并不能 想的太天真了!!!
2.js跟java一毛钱关系都没有，纯粹是为了蹭当时java的热度


ECMAScript和JavaScript的关系
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。


JS版本
	主要还是用的5.1和6.0

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习

1.2 语法结构

#01 js的注释
"""
// 单行注释

/*
多行注释1
多行注释2
多行注释3
*/
"""

#02  两种引入方式  
		1.script标签内部直接书写js代码  
  	2.script标签src属性引入外部js代码
    
#03 js语法结构  
	js是以分号作为语句的结束  但是如果你不写分号，问题也不大 也能够正常执行 但是它就相当于没有结束符

二. 变量使用

2.1 定义变量

"""
在js中首次声明变量需要使用关键字
	var
		声明的都是全局
	let
		可以区分全局和局部
	for循环案例
	不用关键字其实也不报错(js非常的不严谨,不容易报错)
	
	
js变量的命名规范
	1.变量名只能是 
		数字 字母 下划线 $
	2.变量名命名规范(不遵循也可以)
		1.js中推荐使用驼峰式命名
			userName
			dataOfDb
		2.python推荐使用下划线的方式
			user_name
			data_of_db
	3.不能用关键字作为变量名
			不需要记忆 

js代码的书写位置
	1.可以单独开设js文件书写
	2.还可以直接在浏览器提供的console界面书写
		在用浏览器书写js的时候 左上方的清空按钮只是清空当前页面 代码其实还在
		如果你想要重新来 最好重新开设一个 页面
		(在使用浏览器书写 你自己的js代码的时候推荐你在 自己的html页面打开)
"""


#01 定义变量
console.log('hello word');

// 定义变量 全局生效
var name = 'zhang';

// 定义变量局部生效
let age = 18;

// 打印变量值
console.log(name,age)

2.2 定义常量

// 在js中是有真正意义上的常量的 

// 定义常量,注意常量定义后 无法通过 var和let 变量方式修改
const pi = 3.14;
console.log(pi)

三. 数据类型

js也是一门面向对象的编程语言即一切皆对象!!!

js/python是一门拥有动态类型

name = 'zhang'
name = 123
name = [1,2,3,4]
# name可以指向任意的数据类型 
# 但是有一些语言中，变量名之内指向一种后续不能更改

3.1 数值类型(number)

// 01定义变量 整形和浮点型 
var a = 11;
var b = 11.11;

// 02查看数据类型
typeof a;
typeof b;

// 03类型转换
parseInt()			//int整形转换
parseFloat()		//浮点形转换


//int整形转换
console.log(parseInt('123.23324'))
console.log(parseInt('1234csscddsc3434'))
console.log(parseInt('cdscdsc123.23324'))

// 浮点形转换
console.log(parseFloat('1234445.3434'))
console.log(parseFloat('12344sdcdscds'))
console.log(parseFloat('12344sdcdscds.23434'))


// 特殊的 NaN:数值类型 表示的意思是“不是一个数字” NOT A NUMBER

类型转换

查看类型

3.2 字符类型(string)

// 01 定义字符串三种方式
var s = 'qq'
var s1 = 'pmnkk'

// 模版字符串
var ss = `
    zhangyuzhou
    i name is na
    i love you
`
console.log(ss)


// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错 
var name = 'zhang';
var age = 18;
var user = ` my name is ${name} age is ${age} `;
console.log(user)



// 02 字符拼接
// 在python中不推荐你使用+做拼接 join
// 在js中推荐你直接使用+做拼接
var z = name + age
console.log(z)

图示

3.3. 字符类型常用方法

汇总

方法名称	含义
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

案例


// 01返回长度
var name = 'zhangyuzou';
name.length;
10


// 02移除两边空格
var name_trim = '  zhangyuzhou  ';
name_trim.trim();
'zhangyuzhou'
// 移除左边空格
name_trim.trimLeft();
'zhangyuzhou  '
// 移除右边空格
name_trim.trimRight();
'  zhangyuzhou'



// 03 返回第n个字符 
var name_sub = '$$zhangyu$$$';
name_sub.charAt(2);
'z'
// 返回值的索引，注意多个字符 返回第一个值的索引
name_sub.indexOf('ang');
4


// 04根据索引范围 获取子序列，注意不支持负数 
name_sub.substring(0,5);
'$$zha'
// 根据索引 切片 支持负数（用这个即可）
name_sub.slice(0,-1);
'$$zhangyu$$'


// 05根据值 分割 第二个参数不是限制切割字符的个数,而是获取切割之后元素的个数
var name_split = 'zhang|yu|zhou|ai|ni|...';
name_split.split('|',3);
(3) ['zhang', 'yu', 'zhou']


// 06字符拼接 不同类型拼接 js会自动转成对应类型
// js是弱类型(内部会自动转换成相同的数据类型做操作)
var nameInt = 123;
var nameSrt = 'cadr';
var nameStr01 = '|';
nameStr01.concat(nameInt,nameSrt,'qqq');
'|123cadrqqq'

图示

3.4 布尔值(boolean)

"""
1.在python中布尔值是首字母大写的
	True
	False
2.但是在js中布尔值是全小写的
	true
	false
# 布尔值是false的有哪些
	空字符串、0、null、undefined、NaN
"""

3.5 null与undefined

"""
null
	表示值为空 一般都是指定或者清空一个变量时使用
		name = 'jason'
		name = null
undefined
	表示声明了一个变量 但是没有做初始化操作(没有给值)
	函数没有指定返回值的时候 返回的也是undefined
	

"""

3.6 数组

// 01 定义数组
var l = [11, 22, 33, 44];
console.log(typeof l);
console.log(l);

// 数组可以存不同类型的值
var l1 = [111, 'qqq', 111.2, true]
console.log(typeof l1);
console.log(l1);

// 根据索引取值 但是不支持负数
console.log(l1[0])

3.7 数组常用的方法

方法	说明
.length	数组的大小，长度
.push(ele)	尾部追加元素
.pop()	获取尾部元素
.unshift(ele)	头部插入元素
.shift()	移除头部元素
.slice(start, end)	切片，根据索引
.reverse()	反转列表倒叙显示
.join(seq)	将元素拼接成字符串
concat(list, list,str)	连接数组, 并不会改变当前数组的值
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数,可以传三个参数，返回值，索引，数组
.splice()	先删除指定范围的元素然后向数组添加新的元素
.map()	返回一个数组元素调用函数处理后的值的新数组

案例

// 01 查看数组大小，长度
var l = [11,222,333,'ace',[111,333]]
console.log(l.length)


// 02 尾部追加元素 可以添加列表类型
l.push(999)
console.log(l)

var l1 = ['qqq','ccc',555]
l.push(l1)
console.log(l)


// 03 获取尾部元素
var l2 = [11,222,333,'ace',[111,333]]
console.log(l2.pop())


// 04 头部插入元素
l2.unshift(111)
console.log(l2)

// 05 移除头部元素
var l3 = [11,222,333,'ace',[111,333]]
console.log(l3)
l3.shift()
console.log(l3)


// 06 切片 切片后需要重新赋值 才会改变
var l4 = [11,222,333,'ace',[111,333]]
l4.slice(0,3)

var l5 = l4.slice(0,3)
console.log(l5)



// 07 反转 列表倒叙显示
var l6 = [11,222,333,'ace',[111,333]]
console.log(l6.reverse())
console.log(l6)


// 08 将元素连接成字符串
var l7 = [11,222,333,'ace',[111,333]]
console.log(l7.join());
console.log(l7.join('%'));


11,222,333,ace,111,333
11%222%333%ace%111,333


和python相反 这里尾部添加 .join('%') 括号内值



// 09 连接数组,连接两个数组 并不会改变当前数组的值
var l8 = [666, 555, 444, 333, 222]
var l9 = ['qqq','ccc']
console.log(l8)

console.log(l8.concat(l9))
console.log(l8.concat(l9,909))


// 10 排序 只能按照第一位进行排序
var l10 = [666, 555, 444, 333, 'zaaa',222,990,1000,3344,'cdcsd']
console.log(l10.sort())

[
  1000,    222,
  333,     3344,
  444,     555,
  666,     990,
  'cdcsd', 'zaaa'
]

三个比较重要方法

// 11 将数组的每个元素传递给回调函数,可以传三个参数，返回 值，索引，数组
var l12 = [111, 222, 3444]
l12.forEach(function (value, index,array) {
    console.log(value, index,array)
}, l12)


// 12 删除元素 并添加新的元素
var l13 = [111, 222, 3444,'aaa',[123,345]]
l13.splice(0,3)
console.log(l13)

[ 'aaa', [ 123, 345 ] ]


// 三个参数 先删除指定范围的元素 然后再替换 第三个参数的值[9999]
l13.splice(0,3,9999)
console.log(l13)

[ 9999, 'aaa', [ 123, 345 ] ]



// 13 返回一个数组元素调用函数处理后的值的新数组
// 一个参数 返回列表内容
var l14 = [11, 22, 33, 44, 55, 66]
var msg = l14.map(function (value) {
    return value*2+1

}, l14)

console.log(msg)

[ 23, 45, 67, 89, 111, 133 ]


// 三个参数，返回 元素，元素索引，元素数组
var l14 = [11, 22, 33, 44, 55, 66]
l14.map(function (value,index,array) {
    console.log(value*2,index,array)
}, l14)


22 0 [ 11, 22, 33, 44, 55, 66 ]
44 1 [ 11, 22, 33, 44, 55, 66 ]
66 2 [ 11, 22, 33, 44, 55, 66 ]
88 3 [ 11, 22, 33, 44, 55, 66 ]
110 4 [ 11, 22, 33, 44, 55, 66 ]
132 5 [ 11, 22, 33, 44, 55, 66 ]

3.8 运算符

// 01 算术运算符
var x = 10;
var res1 = x++;     // 加号在前面是 先赋值后运算，res1 = 10 (x =10 先赋值给res1  然后再加1)
var res2 = ++x;     // 加号在后是，先运算在赋值   res2 =12 (因为 res1执行过 x++,此时x=11)

console.log(res1,res2)


// 02 比较运算符 等于 不等于
console.log(1 == '1')       //true  弱等于 内部自动转换相同数据类型比较
console.log(1 === '1')      //false 强等于  内部不做类型转换

console.log(1 != '1')       //false
console.log(1 !== '1')      //true



// 03 逻辑运算符
// python中 and并且 or或者 not非
// js中   	&& 			|| 		!

console.log(5 && '6')   //并且 两边条件都为真 取后面的值，js整形和字符串类型可以比较
console.log(5 && 5)

console.log(0 || 1)    // 或者 取条件为真的，如果都为真 取后面的值
console.log(0 || 'a')


console.log( !5 )      //false 判断5 非真的，

// 一定要注意到底什么时候返回的是布尔值 什么是返回的是数据



// 04 赋值运算符
= += -= *= ....

var y=10
 re1 = y+=1
console.log(re1)

 re1 = y-=1
console.log(re1)

 re1 = y*=5
console.log(re1)

四. 流程控制

4.1 if 判断

"""
#格式1 if 
if(条件){条件成立之后指向的代码块}

#格式2 if else 
if(条件){
		条件成立之后指向的代码块
	} 
else {
	条件不成立 后指向的代码块
	}

#格式3 if else if  else
if(条件1){
		条件1成立之后指向的代码块
	} 
else if (条件2) {
	条件2成立后指向的代码块
	}
else {
		都不成立执行的代码
	}

"""


#01 if判断
var age = 28;
if (age>18){
  console.log('来啊 来啊')
}

#02 if-else
if (age>18){
  console.log('来啊 来啊')
}else{
  console.log('没钱 滚蛋')
}

#03 if-else if else
if (age<18){
  console.log("培养一下")
} 
else if(20 < age <27){
  console.log('小姐姐你好 我是你的粉丝')
}
else{
  console.log('你是个好人')
}


"""
在js中代码是没有缩进的 只不过我们处于python书写习惯人为的加上了而已
()条件
{}代码块
"""

4.2 switch 语句

"""
提前列举好可能出现的条件和解决方式
"""

#01 类似于 shell case语句
var sum = 3;
switch (sum) {
    case 0:
        console.log('喝酒');
        break;
    case 1:
        console.log('洗浴');
        break;
    case 2:
        console.log('唱歌');
        break;
    case 3:
        console.log('按摩');
        break;
    case 4:
        console.log('开车');
        break;
    case 5:
        console.log('欢迎下次光临');
        break;
    default:
        console.log('条件都没匹配上 默认走这个')
}

4.3 for循环

"""
for的语法格式

for(初始值；条件判断；自身的改变）{要重复执行的代码}；

"""

#01 案例一 for 循环 打印0-9
for (let i = 0; i < 10; i++) {
    console.log(i)
}


#02 案例二 for循环打印列表值
var l = [11, 22, 33, 44, 77, 8, 999]
for (let i = 0; i < l.length; i++) {
    console.log(i)
    console.log(l[i])
}

#03 案例三 循环3次的时候结束循环
var a = 0;
for (let i = 0; i < 6; i++) {
    console.log(i)
    // 循环三次不再循环
    if (i == 3) {
        console.log('再见')
        break
    }
}


#04 案例4 循环取对象（字典）的值
var d1 = {'name':'yuzhou','age':18}
for(let i in d1){
  console.log(i,d1[i])
}  # 支持for循环 暴露给外界可以直接获取的也是键

结果：
		name yuzhou
		age 18

4.4 while 循环

"""
while语法：

while (条件){
		条件成立后的代码(循环体)
};

"""

#01 案例一 打印0-10 
var i = 0
while(i<11){
  console.log(i)
  i++;
}


#02 案例2 打印0-10 但是不打印 7
var i = 0
while (i < 11) {
    if (i === 7) {
        continue
    }
    console.log(i)
    i++;
}

4.5 三元运算符


"""
python中三元运算符
a, b = 2, 5
max = a if a > b else b
print(max) # 5; 

条件成立返回的值：a 
if 条件对比 a >= b  
else: 条件不成立 返回的值
										
"""



#01 JS中三元运算  res = 1>2?1:3 

// 条件成立后 取问号后面的值，不成立取冒号后面的值
var q = 2>5?'成立':'不成立'
console.log(q);  #2>5 结果成立 所以取问好后面的值
成立


// 多层三元表达式
var q = 2>5?'成立':(8>5?'true':'false')
console.log(q)

true
"""
三元运算符不要写的过于复杂 
"""

五. 函数系列

5.1 函数定义

"""
# 在python定义函数需要用到关键字def
# 在js中定义函数需要用到关键字function

函数定义格式：
	function 函数名称(参数1，参数2，参数3...){
		
		函数执行代码
		return	只能返回一个值
	}

"""


# 01 无参函数
function fun1(){
    console.log('这是无参函数')
}
fun1()  //函数调用


# 02 有参函数
function fun2(x,y){
    console.log('这是有参函数')
    console.log(x,y)
}
fun2(10,20)
fun2(1,2,3,4,5,6)   #参数多了 不会报错，只取对应的数据
fun2(1)             #参数少了 也不会报错，只取对应的数据  


#03 arguments方法 能够获取到函数接受到的所有的参数 
function fun3(x,y,z){
    console.log(arguments)      //获取函数的所有参数
    console.log(x,y,z)
}
fun3(1,2,3)

结果如下 Arguments 返回索引+值
  [Arguments] { '0': 1, '1': 2, '2': 3 }
  1 2 3


#04 arguments方法使用案例 用户需要传对应数量的参数 才可以执行代码（不可多 不可少）
function fun3(x, y, z) {
    if (arguments.length > 3) {
        console.log('参数多了')
    } else if (arguments.length < 3) {
        console.log('参数传少了')
    } else{
        console.log('参数正常 正在运行代码体...')
         console.log(x, y, z)
    }
}

fun3(1,2,3)
结果如下：
  参数正常 正在运行代码体...
  1 2 3
fun3(1,2,4,5,5)		#参数多了

  
  
  
#04  函数的返回值  使用的也是关键字return
function index(){
    return 11,22,33
}
console.log(index())        //返回值是 33 return 多个 只会返回最后一个

js不支持解压赋值




#05 匿名函数
var res = function(){
  console.log('哈哈哈')
}

console.log(res())


#06 箭头函数
# 箭头函数(要了解一下)  主要用来处理简单的业务逻辑 类似于python中的匿名函数
var func1 = v => v;  """箭头左边的是形参 右边的是返回值"""
等价于
var func1 = function(v){
  return v
}

var func2 = (arg1,arg2) => arg1+arg2
等价于
var func1 = function(arg1,arg2){
  return arg1+arg2
}


// 单个参数
var fun1 = x => x;
console.log(fun1(1))	#结果是 1



// 多个参数
var fun2 = (x,y) => x+y;
console.log(fun2(1,2))	#结果是3
3

5.2 函数的全局变量和局部变量

# 跟python查找变量的顺序一致

#01 优先于当前函数值
var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  
打印结果： ShenZhen



#02 函数体内没有 从上级取找
var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  

打印结果： BeiJing


#03 闭包函数
var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

打印结果：ShangHai

六. 对象编程

6.1 自定义对象

"""
可以看成是我们python中的字典 但是js中的自定义对象要比python里面的字典操作起来更加的方便

创建自定义对象的两种方式
		1. var d1 = {}
		2. var d2 = new Object() 
"""


#01 方法1 var d1 = {}
#1.1 创建对象
var d1 = {}
var d2 = {'bobby':'看电影','gender':'male'}
console.log(typeof d1)



#1.2 添加值
d1.name = 'zhang'
d1.age = 18
console.log(d1)

#1.3 查看值
console.log(d1.name)

#1.4 修改值
d1.name = 'yuzhou'
console.log(d1.name)


#1.5 for 循环遍历取值
for(let i in d1){
  console.log(i,d1[i])
}  # 支持for循环 暴露给外界可以直接获取的也是键

结果：
		name yuzhou
		age 18



##02 方式2 需要使用关键字 new Object()
#2.1 创建空对象
var d4 = new Object()

#2.2 添加值
d4.name = 'zhang'
d4.gender = 'male'

#2.3 查看
console.log(d4)
console.log(d4.name)

6.2 Date 时间对象

"""
语法格式：
		1. let d = new Date()												#获取当前时间
		2. let d = new Date('2023/12/30 13:14:16')	#自定义时间

"""

#01 创建时间对象
let d = new Date()
console.log(d.toLocaleString())


#02 查看时间 toLocaleString 格式化时间 人类可读方式
console.log(d)
2023-11-03T05:34:15.436Z


console.log(d.toLocaleString())
浏览器控制台显示：2023/11/3 13:35:57


  
  
#03 时间对象具体方法
let d6 = new Date('2023/12/30 13:14:16:67')
console.log(d6.getDate())            //获取日
console.log(d6.getDay())             //获取星期
console.log(d6.getMonth())           //获取月 （0-11）
console.log(d6.getFullYear())        //获取完整的年份
console.log(d6.getHours())           //获取小时
console.log(d6.getMinutes())         //获取分钟
console.log(d6.getSeconds())         //获取获取秒
console.log(d6.getMilliseconds())    //获取毫秒
console.log(d6.getTime())            //获取时间戳

6.3 JSON对象

"""
在python中序列化反序列化
	dumps 		序列化
	loads			反序列化

在js中也有序列化反序列化
	JSON.stringify()								dumps		序列化
	JSON.parse()										loads		反序列化
"""

# 01 定义一个对象（字典）
let d = {'name':'zhang','age':18}
console.log(typeof d,d)


# 02 序列化为json字符串
let d_dumps = JSON.stringify(d)
console.log(typeof d_dumps,d_dumps)

# 03 反序列化
let d_loads = JSON.parse(d_dumps)
console.log(typeof d_loads,d_loads)


打印结果：
		object { name: 'zhang', age: 18 }
    string {"name":"zhang","age":18}
    object { name: 'zhang', age: 18 }

6.4 RegExp 正则对象

"""
在python中如果需要使用正则 需要借助于re模块
在js中需要你创建正则对象

	两种创建语法格式：
		01 创建正则对象
      1. let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
      2. let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
		
		02 匹配内容
			console.log(reg.test('zhangcc'))
			sss.match(/s/g)										#全局匹配s
		

"""

#01 方法1 创建正则对象
let reg = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,10}')


#02 方法2 创建正则对象
let reg1 = /'^[a-zA-Z][a-zA-Z0-9]{5,10}'/


#03 匹配内容 正确返回布尔值
console.log(reg.test('zhangcc'))
console.log(reg1.test('&zhangcc'))



#04 题目 获取字符串里面所有的字母s
let sss = 'zhangdsd sds dfs'
console.log(sss.match(/s/))
console.log(sss.match(/s/g))		#加g代表全局匹配


结果如下：
			[ 's', index: 6, input: 'zhangdsd sds dfs', groups: undefined ]
      [ 's', 's', 's', 's' ]



 
#04 全局匹配模式吐槽点
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('egondsb')
reg3.test('egondsb')  # 全局模式有一个lastIndex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false

# 验证
reg3.lastIndex
0
reg3.test('egondsb')
true
reg3.lastIndex
7

# 吐槽点二 
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()

reg4.test()  # 什么都不传 默认传的是undefined
true
reg4.test()
true

reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true


"""
总结 你在用js书写正则的时候一定要注意上述问题
一般情况下你后续也不会解除到了
"""

6.5 Math对象

"""
abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

"""

七. BOM 浏览器对象模型

7.1 bom定义

"""
BOM
	浏览器对象模型  Browser Object Model
		js代码操作浏览器
DOM
	文档对象模型	  Document Object Model
		js代码操作标签

"""

7.2 window对象


#01 window对象
window对象指代的就是浏览器窗口
 
#02 简单操作
window.innerHeight;		//浏览器窗口的高度
972
window.innerWidth     //浏览器窗口的宽度
1680


#03 打开新的窗口
window.open('https://www.jd.com', '','htight=400px,width=400px,top=400px,left=400px')


注意：
		新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置
		扩展父子页面通信window.opener()

    
#04 关闭当前页面
window.close()

7.3 window-navigator子对象


## navigator相关使用
// 浏览器名称
navigator.appName;
'Netscape'


// 浏览器代号
navigator.appCodeName; 
'Mozilla'

navigator.appVersion; //浏览器版本
'5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'

navigator.platform; //浏览器平台
'MacIntel'

navigator.userAgent; //浏览器 User-agent 头
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'

navigator.language; //浏览器语言
'zh-CN'
navigator.onLine; //浏览器是否在线
true
navigator.cookieEnabled; //Cookies是否使用
true



var txt = "";
txt +=  "<p>浏览器名称: " + navigator.appName + "</p>";
txt += "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt += "<p>浏览器名称: " + navigator.appName + "</p>";
txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt += "<p>Cookies启用: " + navigator.cookieEnabled + "</p>";
txt += "<p>浏览器语言: " + navigator.language + "</p>";
txt += "<p>浏览器是否在线: " + navigator.onLine + "</p>";
txt += "<p>浏览器平台: " + navigator.platform + "</p>";
txt += "<p>User-agent头: " + navigator.userAgent + "</p>";
document.write(txt);



"""
扩展:仿爬措施
	1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器
		userAgent
		user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
	如何破解该措施
		在你的代码中加上上面的user-agent配置即可
"""

7.4 history对象

"""

对应的就是你浏览器左上方的两个的箭头

"""

window.history.back()  回退到上一页
window.history.forward()  前进到下一页

7.5 location对象(掌握)

//获取当前页面信息
window.location

// 获取当前页面的 url
window.location.href

// 跳转到指定url ;
window.location.href = 'https://www.yeitu.com/'

// 刷新当前页面
window.location.reload()

7.6 弹出框

警告框
确认框
提示框

// 警告框
alert('这是一个警告框！！！别过来')
undefined


// 确认框 确认是true 取消是 false
confirm('这是一个提示框，你确定要点击吗？真到吗？')
true
confirm('这是一个提示框，你确定要点击吗？真到吗？')
false

// 提示框; 用户可以输入内容
prompt('手牌给我看下 666号')
'好的'

警告框

确认框

提示框

7.7 计时器相关

过一段时间之后触发(一次)
每隔一段时间触发一次(循环)

"""
语法结构
			setTimeout(fund1,3000)   毫秒为单位 3秒后自动执行fun1函数 只执行一次
			setInterval(fund1,3000)	 毫秒为单位 3秒后自动执行fun1函数 一直执行
			clearTimeout(t) 				 取消定时器
	
"""


<script>
    function fund1 (){
      alert(123)
    }
    let t = setTimeout(fund1,3000)    // 毫秒为单位 3秒后自动执行fun1函数

    clearTimeout(t)                   // 取消定时器人物

    function func2() {
        alert(123)
    }

    function show() {
        let t = setInterval(func2, 3000);  // 每隔3秒执行一次
        function inner() {
            clearInterval(t)  // 清除定时器
        }

        setTimeout(inner, 9000)  // 9秒中之后触发
    }
    show()

</script>

八. DOM 文档对象模型

8.1 定义

"""
DOM树的概念

所有的标签都可以称之为是节点

JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应


DOM操作操作的是标签 而一个html页面上的标签有很多 
	1.先学如何查找标签
	2.再学DOM操作标签
	
DOM操作需要用关键字document起手
"""

8.2 查找标签

通过ID查找不要加索引了

"""
id查找
类查找
标签查找

"""

#01 id查找	返回的是标签本身
document.getElementById('d1')

#02 类名称查找	返回的是个数组
document.getElementsByClassName('c1')

#03 标签名称查找
document.getElementsByTagName('div')

间接查找

#01 获取父节点
let pEle = document.getElementsByClassName('c1')[0]		#获取指定类标签（注意返回时数据 索引取值）

pEle.parentElement 															#拿父节点
pEle.parentElement.parentElement   							#获取多层拿父节点
pEle.parentElement.parentElement.parentElement 	#获取多层拿父节点

#02 获取子标签
let idEle =  document.getElementById('d1')		# 获取所有的标签

idEle.firstElementChild												#获取第一个儿子标签
idEle.lastElementChild												#获取最后一个标签

divEle.nextElementSibling  										#同级别下面第一个
divEle.nextElementSibling  										#同级别上面第一个

8.3. 操作节点

1）Dom创建img标签

通过DOM操作动态的创建img标签
标签添加属性
将标签添加到文本中

#01 创建标签
let imageEle = document.createElement('img');

#02 给标签天际默认的属性
imageEle.src = '222.png'; 
'222.png'

#03 设置一些自定义的图片属性
imageEle.setAttribute('username','fufu')
imageEle.setAttribute('title','付付的图片')

#04 检查
imageEle
<img src="222.png" username="fufu" title="付付的图片">

#04 查找ID是 d1的标签 并在尾部插入图片
let divEle = document.getElementById('d1');

#05 标签尾部添加元素 （图片）
divEle.appendChild(imageEle);  							
<img src="222.png" username="fufu" title="付付的图片">


注意此操作为临时修改，并未落在磁盘


"""
额外补充
	appendChild()		#添加
	removeChild()		#删除
	replaceChild()	#替换
	
	
	setAttribute()  		设置属性
	getAttribute()  		获取属性
	removeAttribute()  	移除属性
"""

图示

2）Dom创建a标签

创建a标签
设置属性
设置文本
添加到指定的标签的上面

#01 创建a标签
let aEle = document.createElement('a');


#02 添加 href连接
aEle.href = 'http://www.zhangyuzhou.cn/';

#03 添加链接文字
aEle.innerText = '点击可以跳转';


#03 添加到指定位置（div下面P标签的下方）
let divEle = document.getElementById('d1');		#获取div标签
let pEle = document.getElementById('d2');			#获取p标签

#04 添加
divEle.insertBefore(aEle,pEle);  //指定位置添加
<a href="http://www.zhangyuzhou.cn/">点击可以跳转</a>

"""
额外补充
	appendChild()		#添加
	removeChild()		#删除
	replaceChild()	#替换
	
	
	setAttribute()  		设置属性
	getAttribute()  		获取属性
	removeAttribute()  	移除属性
"""

-----

### innerText 和 innerHtml区别
1）区别一
divEle.innerText		#获取所有文本
divEle.innerHTML		#获取所有文本加标签

2）区别2 
divEle.innerText = '<h1>fufufu</h1>';			#不识别Html语言，显示为普通文本 所见即所得
divEle.innerHTML = '<h1>fufufu</h1>';			#识别html语言	显示为标题

图示

8.4 获取值操作


#01 .value  input标签 获取用户输入的值
let inputEle = document.getElementById('d1'); 
inputEle.value;


#02 select选择框标签 获取用户选择的数据
代码：
<select name="" id="d2">
  <option value="111">莲花楼</option>
  <option value="222">为你暗香来</option>
  <option value="333">沙海</option>
</select>

js书写：
let seEle = document.getElementById('d2'); 
seEle.value;
333

#03 获取用户上传的文件数据
1）获取上传文件的标签
let fileEle = document.getElementById('d3');

2）使用files方法获取图片字典
fileEle.files

3）获取文件数据
fileEle.files[0]

图示一

图示二

8.5 class、css属性操作

#01 获取标签内所有属性
1）获取对应标签
let divEle = document.getElementById('d1');

2）获取标签内所有属性
divEle.classList


#02 移除某个属性
divEle.classList.remove('bg_yellow')

#03 添加某个属性
divEle.classList.add('bg_yellow')

#04 验证是否包含某个类属性
divEle.classList.contains('c1')
true
divEle.classList.contains('c2')
false


#05 有则删除 无则添加
divEle.classList.toggle('bg_yellow');
false
// 有则删除 无则添加
divEle.classList.toggle('bg_yellow');
true
// 有则删除 无则添加
divEle.classList.toggle('bg_yellow');
false
// 有则删除 无则添加
divEle.classList.toggle('bg_yellow');
true

#07 修改p标签样式 style
1）获取p便签
let pEle = document.getElementsByTagName('p')[0]

2） 修改字体颜色
pEle.style.color = 'red'; 

3）修改字体大小
pEle.style.fontSize = '28px';  

4）修改边框border 样式
pEle.style.border = '5px solid red'; 

5）修改背景颜色
pEle.style.backgroundColor = 'yellow';  



等等..... DOM操作操作标签样式 统一先用style起手

参考下方图示2

图示二

8.6 事件操作

1）绑定事件的两种方式

onclick="fun1()
btnEle.onclick = function ()

"""
达到某个事先设定的条件 自动触发的动作
"""

<body>
<!--方式1 设置 onclick="fun1()-->
<button onclick="fun1()">方式1点我</button>
<!--方式2-->
<button id="d1">方式2点我</button>
<script>
    // 方式1
    function fun1() {
        alert(123)
    }

    // 方式2 找出该便签，设置属性值等于对应的函数即可
    let btnEle = document.getElementById('d1')
    btnEle.onclick = function () {
        alert('方式2的弹窗')
    }
    
</script>
</body>
</html>



----注意-----
"""
script标签既可以放在head内 也可以放在body内
但是通常情况下都是放在body内的最底部


# 等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
            // 第一种绑定事件的方式
            function func1() {
                alert(111)
            }
            // 第二种
            let btnEle = document.getElementById('d1');
            btnEle.onclick = function () {
                alert(222)
            }
        }
"""

2）点击事件开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .c1 {
      height: 400px;
      width: 400px;
      border-radius: 50%;
    }
    .bg_yellow {
      background-color: yellow;
    }

    .bg_blueviolet {
      background-color: blueviolet;
    }

  </style>
</head>
<body>
<div id="d1" class="c1 bg_yellow bg_blueviolet "></div>
<button id="bu1" type="submit" >点击可改变颜色</button>

<script>
  // 获取按钮标签
  let butEle = document.getElementById('bu1')
  
  // 获取图形标签
  let divEle = document.getElementById('d1')
  
  // 按钮标签绑定事件 --点击--触发
  butEle.onclick = function () {
    divEle.classList.toggle('bg_blueviolet')
  }

</script>

</body>
</html>

3）input框获取焦点和失去焦点

"""
点击输入框 清除默认值
"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" value="这是个默认值" id="d1">

<script>
  // 获取焦点事件,用户点击则清空默认值
  let iEle = document.getElementById('d1')
  iEle.onfocus = function () {
    // value 重新赋值 = ''空
    iEle.value = ''
  }
  // 失去焦点事件
  iEle.onblur = function () {
    // 鼠标不点击 
    iEle.value = '还是给你一个默认值吧!!!!'
  }

</script>

</body>
</html>

4）实时展示当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--实时展示当前时间-->
<input type="text" id="d1" style="display: block;height: 60px;width: 400px; font-size: 30px">
<button id="d2">开始</button>
<button id="d3">结束</button>
<script>
    // 01 先定义一个全局变量存储定时器的变量
    let t = null
    let inputEle = document.getElementById('d1')
    let startEle = document.getElementById('d2')
    let endEle = document.getElementById('d3')
    // 2.1 访问页面后 将访问的时间展示在input框中
    // 2.2 动态展示当前时间
    // 2.3 用户通过按钮可以控制 开始或者结束
    function showTime() {
        let dateEle = new Date();
        inputEle.value = dateEle.toLocaleString();
    }

    // 给按钮绑定 点击事件，点击则执行
    startEle.onclick = function () {
        // 定时执行 每一秒执行一次
        // 判断如果定时器 已经存在 则不执行，不存在则执行
        if (!t) {
            t = setInterval(showTime, 1000);
        }
    }
    endEle.onclick = function () {
        // 点击的停止 取消
        clearInterval(t)
        // 取消后定时后 将t重置为null
        t = null
    }
    showTime()

</script>
</body>
</html>

5）省市联动-文本域变化事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1">
    <option value="" selected disabled>请选择</option>
</select>
<select name="" id="d2"></select>

<script>
    // 01 获取标签数据
    let oneEle = document.getElementById('d1');
    let twoEle = document.getElementById('d2');

    // 02 创建数组 模拟省级数据
    data = {
        "河北": ["廊坊", "邯郸", '唐山'],
        "北京": ["朝阳区", "海淀区", '昌平区'],
        "山东": ["威海市", "烟台市", '临沂市'],
        '上海': ['浦东新区', '静安区', '黄浦区'],
        '深圳': ['南山区', '宝安区', '福田区']
    };
    // 03 for循环取省
    for (let key in data) {
        // 将信息作成option标签 添加到select框中
        // 3.1 创建option 标签
        let opEle = document.createElement('option')
        // 3.2 设置标签文本
        opEle.innerText = key
        // 3.3 设置value
        opEle.value = key
        // 3.4 添加到select框中  添加元素 appendChild （标签 a img option ）
        oneEle.appendChild(opEle)
    }
    // 04 渲染对应的市信息，文本变化域 onchange
    oneEle.onchange = function () {
        // 4.0 每次渲染前应该 先清空元素
        twoEle.innerText = ''
        // 4.1 获取用户选择的key 省
        let keyEle = oneEle.value
        // 4.2 获取所有市信息 获取数据为列表 ['南山区', '宝安区', '福田区']
        let city_listEle = data[keyEle]

        // 4.3 加个请选择 默认选择
        let ss = "<option selected disabled>请选择</option>"
        twoEle.innerHTML = ss

        // 4.3 for循环取值 渲染到第二个select框内
        for (let i = 0; i < city_listEle.length; i++) {
            // 4.4 获取市名称 并创建option标签
            let cityEle = city_listEle[i]
            let oopEle = document.createElement('option')
            // 4.5 设置文本
            oopEle.innerText = cityEle
            // 4.5 设置value
            oopEle.value = cityEle
            // 4.6  添加到select框中  添加元素 appendChild （标签 a img option ）
            twoEle.appendChild(oopEle)
        }
    }
</script>
</body>
</html>