JavaScript
简介
JavaScript简称JS，与Java没有任何关系
JavaScript是一门编程语言
不过JavaScript逻辑非常不严谨
JavaScript很容易学习
简单使用
HTML引入JavaScript方式
- script标签内部直接编写（不推荐使用）
- link标签src属性引入外部JS文件
注释语法
任何一门编程语言都需先了解其注释语法
代码注释为代码之母
HTML：<!--这是HTML注释-->
CSS：/注释/
JS://单行注释、/*多行注释*/
结束符号
分号作为结束符号（;）但是不写问题也不大
变量与常量
在js中声明变量需要关键字声明：
老版本：var（声明的是全局变量）
新版本：let（可以声明局部变量）
在js中声明常量需要使用关键字
const //这是声明一个真正意义上的常量
如何创建变量
var name = 'll'
let name = 'pp'
如何创建常量
const pi = 3.14
PS：可以编写js代码的地方
1、pycharm提供的js文件
2、浏览器提供的编程环境
注：在pycharm中使用let关键字命名的时候如果飘红，说明pycharm没有使用 6+ 版本，更改之后就可以了
基本数据类型
Python：
int、float、str、list、dict、bool、tuple、set
JS：
number数值类型、string字符串、boolean布尔值、undefined、object对象(列表，字典等)
JS是动态类型语言
声明一个变量之后可以更改指向的数据类型
number类型
//数值类型：包含了整形与浮点型
声明之后就可以进行赋值操作
let n1 = 11
var n2 = 11.11
类型转换：
parseInt('123') 转换字符串中的数字部分
parseInt('aa') 报错
//NAN:Not A Number
//NAN:数值类型，表示的意思不是一个数字
parseGloat('11.11') 可以转换全部
查看数据类型：
typeof()
string类型+内置方法
定义字符类型方式：
let name = 'kk'
var name = 'kk'
定义多行字符串：
let s1 = `kk` //称之为模板语法
内置方法
.length() 返回长度
.trim() 移除空白
.trimLeft 移除左侧空白
.trimRigth 移除右侧
.charAt(n) 返回第n个字符
.concat(value,...) 拼接 //推荐使用 +
.indexOF(substring,start) 子序列位置//返回整体所在的范围
.slice(start,end) 切片
.toLowerCase() 转大写
.toUpperCase() 转小写
.split(selimiter,limit) 分割//返回数组(列表)
格式化输出
let name = 'kk'
let age = '10'
let s1 = `my name is ${name} my age is ${age}`
注：如果之后需要使用``但是冲突，可以使用 \ 转义
boolean类型
true，fales
false：空字符串，0，null，undefined，NAN
//跨语言传输实现无障碍交流
json序列化
null与undefined
null：空的意思，原来有可以指向的值，但被清空了
undefined：声明一个变量但没有初始化（let v1），就是undefined
Object之数组类型
对应到Python中就是list
js中一切事物都是对象，允许自定义对象
let l1 = [11,'22',22.22] //类型是对象下面的Array
*内置方法
.length 数组的大小
let l2 = l1.length
.push(ele) 尾部追加元素
let l2 = l1.push(元素)
.pop() 获取尾部元素
let l2 = l1.pop()
.unshift(ele) 头部插入元素
let l2 = l1.unshift(元素)
.shift() 头部移除元素
let l2 = l1.shift()
.sort() 排序
let l2 = l1.sort()
.slice(start,end) 切片
.reverse() 翻转
.join(seq) 将数组元素拼接成字符串
.concat(val,...) 链接数组
.forEach() 将数组的每一个元素传递给回调函数并返回
let l1 = [11,22,33,44]
l1.forEach(function(n,m,z){console.log(n,m,z)})
functiom：定义函数
n:必选参数，代表当前元素
m:可选，代表索引值
z:可选，代表当前操作的元素来自哪里
console.log()：输出函数==print
.splice(n,m，z) 第一个元素是删除的起始位置，第二个是删除几个，没有就从开始到结尾，第三个要添加的新元素
.map() 返回一个数组元素电泳函数处理后的值得新数组
let l1 = [11,22,33,44]
l1.map(function(x){
return x+1};
)
//python复习
l = [22.22,'kk',111]
res = '|'.join(l)
print(res)
'报错'
//列表的内置方法要熟记
l1 = [11,22,33,44]
res = map(lamada x:x*2 l1)
print(list(res))
运算符
++：自增
-- ：自减
let x = 10
let res1 = x++ //10：在后面先复制在自增
let res2 = ++x //12：在前面先自增在复制
比较运算符
== :弱等于,会自动转换数据类型到相同的状态
=== :强等于，跟Python ==一样
!== :强不等，跟Python != 一样
逻辑运算符
&&：and
|| ：or
！ ：not
流程控制
if 判断
if(条件){
条件成立之后执行的代码
}else{
条件不成立执行的代码
}
----------------------------------------------------------
if(条件1){
条件1成立
}else if(条件2){
条件2成立
}else{
上述条件都不成立
}
switch
var day = new Date().getDay();
switch(day){
case 0 :
console.log('Sunday');
break;
case 1:
console.low('Monday');
break;
default:
console.log('...')
}
for 循环
for (起始值;循环条件;每次循环后执行的操作){
for循环体代码
}
for(var i=0; i<10; i++){
console.log(i);
}
//小练习
var l1 = [111,222,333,444,555]
for (let i=0; i<l1.length;i++){
console.log(l1[i])
}
while循环
while(循环条件){
循环体代码
}
三元运算符
Python：
res = '吃饭' if 18>10 else '喝水'
Js：
res = 18>10 ? '吃饭':'喝水'
函数
/*
在Python中：
def 函数名（参数1，参数2，..）:
"""函数注释"""
函数体代码
return 返回值
*/
//在JS中：
function 函数名(参数1，参数2,..){
//函数注释
函数体代码
return 函数返回值
}
案例：
function f1(n){
console.log(n)
}
f1(123)
f1() 不传参数：undefined
f1(11,22) 多传:只用第一个
function f2(){
console.log(arguments)
}
arguments：用户传什么就会保存什么
"""
arguments:可以获取传入的所有数据
支持return和匿名函数
"""
箭头函数：
let f = v => v;
//等同于
let f = function(v){
return v;
}
自定义对象
//相当于Python中的字典类型
创建方法：
1、var d = {'name':'kk','age':10}
2、var d = Object({'name':'kk','age':10})
查看方式：
d.naem
d.age
d['name']
d.name = 'll' //修改
d.hobby = 'play' //新增
/*
在Python中实现 . 点的方式实现查看数据
class MyDict(dict):
def __getattr__(self, item):
return self.get(item)
def __setattr__(self, key, value):
self[key] = value
res = MyDict(name='jason',age=18)
print(res.name)
print(res.age)
res.xxx = 123
print(res.xxx)
print(res)
*/
内置对象
如果需要使用内置对象，需要关键字：new
let d1 = new Date()
//序列化
JSON.stringify() //序列化
JSON.parse() //反序列化
/*
如果当前js中有一个布尔值true需要基于网络发送给python程序并且让python转换成布尔值 如何操作
1.在js中使用JSON.stringify()序列化成json格式字符串
2.基于网络发送给python程序(自动编码)
3.python接收 解码并反序列化
*/
RegExp(正则对象)
定义：
1、let reg1 = new RegExp('正则表达式');
2、let reg2 = /正则表达式/;
test是regExp的方法，参数是字符串，返回值是布尔类型。
match是String的方法，参数是正则表达式，返回值是数组。
匹配方式：
reg2.test('传入字符串') //返回布尔值
全局匹配：
let reg2 = /正则表达式/g; //当正则表达式后面跟随g的时候会变成全局匹配会有一个lastindex属性，这个属性会在匹配成功之后光标留在文本后面，再次匹配后匹配不到内容
reg2
/^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('jason666')
true
reg2.test('jason666')
false
reg2.lastIndex
0
reg2.test('jason666')
true
reg2.lastIndex
8
BOM操作
BOM 浏览器对象模型>>>通过js操作浏览器
DOM 文档对象模型>>>使用js操作前端页面
BOM操作：
window对象：
window.innerHerght 当前浏览器窗口的高度
window.innerWidth 当前浏览器窗口的宽度
window.open() 打开新的浏览器窗口
打开的新窗口为子窗口，与当前窗口可以交互
window.close() 关闭当前浏览器窗口
navgator对象：
window.navigator.appName 获取浏览器全称
window.navigator.appVersion 获取浏览器厂商和版本的详细字符串
window.navigator.userAgrnt 客户端大部分信息
window.navigator.platform 浏览器运行所在的操作系统
history对象：
window.location 对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的一页面
window.location.href 获取URL
window.location.href="URL" 跳转到指定的URL地址
window.location.reload() 重新加载当前页面
弹出框:
警告框：
alert('输入内容')
确认框：
confirm('用户确认') //返回布尔值
提示框：
prompt('提示信息','用户输入信息') //返回null或者用户输入的内容
时间相关：
var t1 = setTimeout('js语句',毫秒) //打开程序之后多少毫秒执行js语句
clearTimeout(t1) //取消该(t1)定时任务
var t2 = setInterval('js语句',时间间隔) //间隔多少秒循环执行一次js语句
clearIntercal(t2) //取消该定时任务
DOM操作
DOM(Dociment Ovject Mode)是一套对文档的内容进行抽象和概念化的方法
DOM树的概念：
所有的标签都可以称之为节点，通过某一个节点可以找到任意其他节点
查找标签
要控制标签就要先学会查找标签
直接查找
// 查找前缀关键字>>>:document
查找方式:
ID查找：
document.getElementById()
var 标签对象 = document.getElementById('id')
返回对象（标签对象）
class查找：
document.getElementByClassName()
var 标签对象 = document.getElementsByClassName('cls')[0] //索引 0 表示直接取出第一个标签对象
返回数组(内部元素为一个个的标签对象)
标签查找：
document.getElementsByTagName()
var 标签对象 = documentsByTagName('div')[0] //索引 0 直接取出第一个标签对象
返回数组(内部元素为一个个的标签对象)
----------------------------------------------------------------------------------------------------------------------------------
/*
注意返回类型
当变量名指向标签对象的时候一般情况下都书写成xxxEle
JS中推荐命名方式为小驼峰体
*/
----------------------------------------------------------------------------------------------------------------------------------
/*
如果js代码需要页面上加载某些标签。
那么就将script写在body标签的最底部。
需要引入外部文件也同样
*/
----------------------------------------------------------------------------------------------------------------------------------
// 小总结：
标签对象 = document.getElemenById('id') // id查找
标签对象 = document.getElementsByClassName('cls') // 类查找
标签对象 = document.getElementsByTagName('div') // 标签查找
间接查找
//需要首先创建一个标签对象
var 标签对象 = document.getElementById()
标签对象.parentElement // 找到当前标签的父标签
.children // 当前标签的所有子标签
.firstElementChild // 当前标签的第一个字标签
.lastElenmentChild // 当前标签的最后一个字标签
.nextElementSibling // 当前标签同级别下面第一个
.previousElementSibling // 当前标签同级别上面第一个
节点操作
使用JS代码操作标签
// 添加元素
创建标签:
var 变量名 = document.createElement('标签名') // 如：div，
设置属性：
1、变量名.属性 = '设置参数' // 创建出来的标签拥有所对应的默认属性直接 点 就可以添加内容
2、变量名.setAttribute('属性名','属性值') // 属性名可以是自定义或者默认的
// 以上两种设置属性的方法
添加标签：
// 首先需要获得一个标签对象
var 标签对象 = document.getElementById('id')
// 创建标签
创建的标签 = createElement('标签名')
// 添加标签
标签对象.appendChild(创建的标签) // 创建的标签添加到标签对象内部的最底部,尾部追加
//删除对象
// 获取删除元素的标签与父标签
父标签对象.removeChild(删除的标签对象)
// 替换节点
// 获取替换元素的标签对象与父标签对象，创建新的标签
父标签对象.replaceChild(新的标签，替换的标签)
----------------------------------------------------------------------------------------------------------------------------------
// 小总结：
var 标签对象 = document.createElment('标签') //创建标签
标签对象.setAttribute('属性'，'属性值') // 添加属性
标签对象.setAttribute('属性名') // 获取属性
//或者
标签对象.属性 = '属性值' // 更改相对应的标签自带的属性的值
标签对象.属性 // 获取标签自带的属性的值
var 父标签对象 = document.getEelementById('id') // 获取其父标签
父标签对象.appendChild(标签对象) // 添加标签
属性节点
找到要操作的标签，更改其内部文本
// 获取文本节点的值
var 标签对象 = doculement.相关节点()
标签对象.innerText
// 或者
标签对象.innerTHML
// innerText:
不添加复制符号就是获取内部文本
添加复制符号就是更改内部文本
标签对象.innerText
标签对象.innerText = '新的文本内容'
// innerHTML
不添加赋值符号就是获取内部文本和所对应的标签
添加复制符号就是更改内部文本和岁所对应的标签
标签对象.innerHTML
标签对象.innerHTML = '<a>这是a标签的文本</a>'
----------------------------------------------------------------------------------------------------------------------------------
// 小总结:
innerText
innerText = ''
innerHTML
innerHTML = ''
获取值操作
// 获取普通文本数据
标签对象.value 可以获取用户输入的内容
// 获取特殊的文件数据
标签对象.value 获取的仅仅是这个文件所在的计算机的文件地址
标签对象.files[0] 获取单个文件数据
标签对象.files 获取所有文件数据，数组的形式，可以索引取值取出内部文件数据对象
class操作
// 通过class操作标签
classlist // 查看所有的class
classlist.remove(cls) // 删除指定的类
classlist.add(cls) // 添加指定的类
classlist.contains // 返回布尔值，判断这个类是否存在
classlist.toggle(cls) // 判断是否存在这个类，存在则删除，不存在则添加
JS操作CSS
var 标签对象 = 获取标签
标签对象.style.CSS的操作 = '更改之后的属性值'
----------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的标题</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
单击我！</button>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------
事件
给HTML标签绑定一个自定义的功能
绑定事件的方式一：
<button onclick="func()">点我</button>
<script>
function func() {
alert(123)
}
</script>
绑定事件的方式二：
<button id="d1">选我</button>
<script>
// 1.先查找标签
var btnEle = document.getElementById('d1')
// 2.绑定事件
btnEle.onclick = function () {
alert(456)
}
</script>
绑定事件的方式三：
<h1 id="id1">我的标题</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
单击我！</button>
内置参数this
this指代的就是当前操作对象本身
// 在事件的函数体代码内部使用
操作对象.事件参数 = function (){
alert(123)
console.log(this)
}
事件部分参数
onclick // 单击事件：鼠标点击一下运行事件内的代码
onfocus // 焦点事件：当鼠标在当前位置所执行事件内的代码
onblir // 失焦事件：当鼠标移走当前位置所执事件内的代码
onchange //文本域变化事件
onload //等待...加载完毕执行的事件
常见的事件操作
事件小练习
------------------------------------------------------------------------------------------------------------------------------
// 通过点击button按钮实时显示当前时间
<!DOCTYPE html>
<html>
<body>
<p>这是时间事件小练习</p>
<button id='b1'>点击</button>
<p id='p1'></p>
<script>
// 查找标签
var butEle = document.getElementById('b1')
// 创建一个时间函数
function date1() {
// 获取当前时间
var newDate = new Date()
// 将当前时间添加到p标签中
document.getElementById('p1').innerText = newDate
}
// 绑定事件
butEle.onclick = function () {
// 事件为定时
setInterval(date1, 1000)
}
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------
// 数据校验
<!DOCTYPE html>
<html>
<body>
<p>请输入内容</p>
<p>username:<input type='text' id='n1'><span id = 's1'></span></p>
<p>password:<input type='password' id='p1'></p>
<button id='b1'>登录</button>
<p id = 'p2'></p>
<script>
// 获取标签
var butEle = document.getElementById('b1')
// 绑定事件
butEle.onclick = function () {
document.getElementById('p2').innerText = Date()
// 获取用户输入标签
var nameEle = document.getElementById('n1')
// 判断用户输入
if (!nameEle.value) {
// 如果用户输入为空，就提醒
var spEle = document.getElementById('s1')
spEle.innerText = '账户不能为空'
}
}
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------
事件补充
当某个标签已经有事件了，那么在绑定事件会造成事件冲突
浙公网安备 33010602011771号