JavaScript

一、js简介

js与java没有关系

js也是一门编程语言 它也是可以写后端代码的

nodejs 支持js代码跑在后端服务器上

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

// 单行注释

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

//两种引入方式
	/*
	1.script标签内部直接书写js代码
  	2.script标签src属性引入外部js代码
  	*/

二、变量与常量

变量：

在js中，首次定义一个变量名的时候需要用关键字来声明

关键字：var，es6推出的新语法let

var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效

变量命名规范

1.由字母，数字，下划线，美元符号组成

2.严格区分大小写

3.不能以数字开头

4.不能是关键字，保留字

5.变量名必须要有意义

6.遵守驼峰命名法：首字母小写，后面单词的首字母需要大写。myFirstName

常量：

python中没有真正意义上的常量 默认全大写就是表示常量

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

const pi = 3.14159

二、数据类型

js是一门动态类型

Number :数字型

Boolean ：布尔值类型

String：字符串类型

Undefined：空值

Null：空值

1、数值型

var name = 123;

//isNaN 这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false,如果不是数字返回的是true
    coonsole.log(isNaN(12));//false

// 类型转换
parseInt()
parseFloat()

2、字符型

js可以使用单引号嵌套双引号，或者用双引号嵌套单引号，外双内单，外单内双

字符串拼接

多个字符串之间可以使用，其拼接方式为：字符串+任何类型=拼接之后的字符串

数值相加，字符相连

多行字符串：模板字符串

var name = `
多行
多行
多行

`
// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错

var name = 'j'

var age = 18

var sss = `
   my name is ${name} and my age is ${age}
`
sss

//   my name is j and my age is 18

// 我们变量不要写到字符串里面，是通过和字符串相连的方式实现的
     coonsole.log('pink'+ age + '岁')

     
// 变量和字符串相连的口诀：引引加加

字符类型常用方法

.length	返回长度
.trim()	移除空白,不能加括号指定去除符号
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
	联想记忆
		MySQL
			concat
			concat_ws
			group_concat
		python
			join
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

3、布尔型

在python中布尔值是首字母大写的：True False

布尔值是false的有哪些：
空字符串、0、null、undefined、NaN

<script>
var flag = true;//布尔型
var flag1 = false; // 布尔型
console.log(flag+1);// true参与加法运算当1来看
console.log(flag1+1);// false参与加法运算当0来看   
    

</script>

4、undefined、null

null
表示值为空 一般都是指定或者清空一个变量时使用

name = 'jason'
name = null

undefined
表示声明了一个变量 但是没有做初始化操作(没有给值)
函数没有指定返回值的时候 返回的也是undefined

三、对象

• 数组[] 类似于Python中的列表

  var arr = [1,2,3,4]
  

• 自定义对象 {} 类似于Python中的对象

  // 第一种创建对象的方式
  var star = {
   uname : 'upup',
   age : 18,
   sex : '男',
   sayHi : function(){
   alert('大家好啊~');
   }
  };
  console.log(star.name);
  console.log(star['name']);
  star.sayHi();
  
  //第二种创建对象的方式
  var andy = new Object();
  andy.name = 'upup';
  andy.age = 18;
  andy.sex = '男';
  andy.sayHi = function(){
   alert('大家好啊~');
  }
  
   console.log(andy.uname);
   console.log(andy['sex']);
    andy.sayHi();
  
  
  
  

四、运算符

//算数运算符
var x = 10;
var res1 = x++;
var res2 = ++x;
res1 10
res2 12

/*
++表示自增1 类似于 +=1
加号在前先加后赋值 加号在后先赋值后加
*/

// 比较运算符
1 == '1'  // 弱等于  内部自动转换成相同的数据类型比较了
true  

1 === '1'  // 强等于  内部不做类型转换

1 != '1'
false
1 !== '2'
true

// 逻辑运算符
	// python中 and or not
    // js中 && || !
5 && '5'
'5'

0 || 1
1

!5 && '5'
false

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

五、流程控制

// if判断
var age = 28;
// if(条件){条件成立之后指向的代码块}
if (age>18){
  console.log('来啊 来啊')
}

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

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


//  switch语法
"""
提前列举好可能出现的条件和解决方式
"""
var num = 2;
switch(num){
  case 0:
  	console.log('a');
  	break;  // 不加break 匹配到一个之后 就一直往下执行
  case 1:
  	console.log('b');
  	break;
  case 2:
  	console.log('c');
  	break;
  case 3:
  	console.log('d');
  	break;
  case 4:
  	console.log('e');
  	break;
  case 5:
  	console.log('f');
  	break;
  default:
  	console.log('f')
}

// for循环
// 打印0-9数字
for(let i=0;i<10;i++){
  console.log(i)
}
// 题目1  循环打印出数组里面的每一个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
  console.log(l1[i])
}

// while循环
var i = 0
while(i<100){
  console.log(i)
  i++;
}

// 三元运算符
// python中三元运算符 res = 1 if 1>2 else 3
// JS中三元运算  res = 1>2?1:3 
// 条件成立取问好后面的1 不成立取冒号后面的3
var res = 2>5?8:10 // 10
var res = 2>5?8:(8>5?666:444)  // 666

六、函数

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

// 格式
function 函数名(形参1,形参2,形参3...){函数体代码}

// 无参函数
function func1(){
  console.log('hello world')
}
func1()  // 调用 加括调用 跟python是一样的

// 有参函数
function func2(a,b){
  console.log(a,b)
}
func2(1,2)

func2(1,2,3,4,5,6,7,8,9)  // 多了没关系 只要对应的数据
VM3610:2 1 2
undefined

func2(1)  // 少了也没关系
VM3610:2 1 undefined
  
// 关键字arguments
function func2(a,b){
  console.log(arguments)  // 能够获取到函数接受到的所有的参数
  console.log(a,b)
}

function func2(a,b){
  if(arguments.length<2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}


// 函数的返回值  使用的也是关键字return
function index(){
  return 666
}
function index(){
  return 666,777,888,999
}
res = index();
999
res
999  // 只能拿到最后一个

function index(){
  return [666,777,888,999]
}
// js不支持解压赋值


// 匿名函数  就是没有名字
function(){
  console.log('哈哈哈')
}
var res = function(){
  console.log('哈哈哈')
}

// 箭头函数(要了解一下)  主要用来处理简单的业务逻辑 类似于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
}

七、内置对象

日期对象

let d3 = new Date()
Fri May 15 2020 14:41:06 GMT+0800 (中国标准时间)
   
d3.toLocaleString()
"2020/5/15 下午2:41:06"

// 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()

let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString()  // 月份从0开始0-11月
"1111/12/11 上午11:11:11"

// 时间对象具体方法
let d6 = new Date();
d6.getDate()  获取日
d6.getDay()		获取星期
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()					时间戳

JSON对象

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

在js中也有序列化反序列化
	JSON.stringify()								dumps
	JSON.parse()										loads			
"""
let d7 = {'name':'jason','age':18}
let res666 = JSON.stringify(d7)
"{"name":"jason","age":18}"

JSON.parse(res666)
{name: "jason", age: 18}

八、BOM

BOM：浏览器对象模型 Browser Object Model
作用：js代码操作浏览器

window对象

window对象指代的是浏览器窗口。

 window.innerHeight //浏览器窗口的高度
 window.innerWidth  // 浏览器窗口的宽度

//控制浏览器打开窗口的大小与位置 新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置
window.open('https://www.baidu.com.com/','','height=400px,width=400px,top=400px,left=400px')

window.close()  // 关闭当前页面

window子对象

window.navigator.appName //是否是一个网站

window.navigator.appVersion //返回网址

window.navigator.userAgent // 用来表示当前是否是一个浏览器

/*
扩展:仿爬措施
	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配置即可
/*

window.navigator.platform  //查看浏览器的平台


# 如果是window的子对象 那么window可以省略不写

history对象

// 对应的就是你浏览器左上方的两个的箭头
window.history.back()  回退到上一页
window.history.forward()  前进到下一页

location对象

window.location.href	// 获取当前页面的url
window.location.href = url  // 跳转到指定的url
window.location.reload()  // 属性页面   浏览器左上方的小圆圈

弹出框

// 警示框
alert('你不要过来啊！！！')

// 确认框 会返回结果true或者false
confirm('ok?')
false

// 提示框
prompt('啊','2')
"3"

计时器

1、过一段时间之后触发一次

2、每隔一段时间触发一次，循环发生

function func1() {
        alert(123)
    }
    let t = setTimeout(func1,3000);  // 毫秒为单位 3秒之后自动执行func1函数

    clearTimeout(t)      // 取消定时任务  如果你想要清除定时任务 需要日前用变量指代定时任务


function func(){
    alert(123)
}
setInterval(func2,3000);

function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒执行一次
        function inner(){
            clearInterval(t)  // 清除定时器
        }
        setTimeout(inner,9000)  // 9秒中之后触发
    }
    show()

九、DOM

DOM：文档对象模型 Document Object Model
作用： js代码操作标签

DOM树的概念:所有的标签都可以称之为是节点

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

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

DOM操作操作的是标签 而一个html页面上的标签有很多
1.先学如何查找标签
2.再学DOM操作标签

DOM操作需要用关键字document起手

1、查找标签

• 直接查找

// id 查找 返回是对象
<div id= "d1"></div>
document.getElementById('d1')

//类查找 返回数组
<div class= "d1"></div>
document.getElementsByClassName('d1')

// 标签查找 返回容器
<div></div>
document.getElementsByTagName('div')

let divEle = document.getElementsByTagName('div')[1]

// 用变量名指代标签对象的时候 一般情况下都推荐书写成
xxxEle
	divEle
	aEle
	pEle

• 间接查找

// 拿父节点
pEle.parentElement  

pEle.parentElement.parentElement

pEle.parentElement.parentElement.parentElement

pEle.parentElement.parentElement.parentElement.parentElement

// 获取所有的子标签 
let divEle = document.getElementById('d1')
divEle.children  
divEle.children[0]

// 第一个儿子节点
divEle.firstElementChild

// 最后一个儿子节点
divEle.lastElementChild

// 兄弟节点 下面第一个
divEle.nextElementSibling  

// 兄弟节点 同级别上面第一个
divEle.previousElementSibling  

2、操作标签

节点操作

// 添加img
let imgEle = document.createElement('img')  # 创建标签

imgEle.src = '111.png'  // 给标签设置默认的属性


imgEle.username = 'jason'  // 自定义的属性不能点的方式直接设置


imgEle.setAttribute('username','upup')   // 既可以设置自定义的属性也可以设置默认的书写

imgEle.setAttribute('title','一张图片')

<img src="111.png" username="jason" title="一张图片">

let divEle = document.getElementById('d1')

divEle.appendChild(imgEle)  // 标签内部添加元素(尾部追加)
<img src="111.png" username="jason" title="一张图片">


// 创建a标签
    
let aEle = document.createElement('a')

<a></a>
aEle.href = 'https://www.baidu.com/'
"https://www.baidu.com/"

<a href="https://www.baidu.com/"></a>

aEle.innerText = '点我有你好看!'  // 给标签设置文本内容
"点我有你好看!"
aEle
<a href="https://www.baidu.com/">点我有你好看!</a>
let divEle = document.getElementById('d1')

let pEle = document.getElementById('d2')

divEle.insertBefore(aEle,pEle)  // 添加标签内容指定位置添加
<a href="https://www.baidu.com/">点我有你好看!</a>


/*
额外补充
	appendChild()
		removeChild()
		replaceChild()
	
	
	setAttribute()  设置属性
		getAttribute()  获取属性
		removeAttribute()  移除属性
*/

// innerText与innerHTML
divEle.innerText  // 获取标签内部所有的文本

divEle.innerHTML  // 内部文本和标签都拿到
/*div
        <a href="https://www.mzitu.com/">点我有你好看!</a><p id="d2">div&gt;p</p>
        <span>div&gt;span</span>
   */
    
divEle.innerText = 'heiheihei'
"heiheihei"
divEle.innerHTML = 'hahahaha'
"hahahaha"

divEle.innerText = '<h1>heiheihei</h1>'  // 不识别html标签

divEle.innerHTML = '<h1>hahahaha</h1>'  // 识别html标签

获取值

// 获取用户数据标签内部的数据
let seEle = document.getElementById('d2')
seEle.value

let inputEle = document.getElementById('d1')
inputEle.value

//  如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
fileEle.value  // 无法获取到文件数据

      
fileEle.files[0]  // 获取文件数据
File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}

节点操作

let divEle = document.getElementById('d1')
divEle.classList  //  获取标签所有的类属性
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]


divEle.classList.remove('bg_red')  // 移除某个类属性


divEle.classList.add('bg_red')  // 添加类属性

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

divEle.classList.toggle('bg_red')  // 有则删除无则添加
false
divEle.classList.toggle('bg_red')
true




// DOM操作操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
"red"
pEle.style.fontSize = '28px'
"28px"
pEle.style.backgroundColor = 'yellow'
"yellow"
pEle.style.border = '3px solid red'
"3px solid red"

十、事件

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

// 绑定事件的两种方式
<button onclick="func1()">点我</button>
<button id="d1">点我</button>

<script>
    // 第一种绑定事件的方式
    function func1() {
        alert(111)
    }

    // 第二种
    let btnEle = document.getElementById('d1');
    btnEle.onclick = function () {
        alert(222)
    }
</script>



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


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