JavaScript(二)

1.javascript简介

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

2.引入方式

// 注释方法
1.单行注释
    //
2.多行注释
    /**/

/ 引入方式 /
1.script标签内部直接书写js代码
2.引入外部js文件

/*
结束符
js语言的结束符号是分号
但是你在编写js代码的时候如果不加分号，也不会报错
alert(123);
*/

# JS编写平台
1.支持代码编写的软件
2.浏览器直接充当编辑器使用

3.变量声明

在js中定义变量需要使用关键字

# 在python中
username = 'simon'
# 在js中需要使用关键字(var let)
var username = 'simon'
let username = 'xc'
定义常量
const pi = 3.14
"""
let是ecs6新语法，使用它可以区分全局变量和局部变量的问题
"""
var i = 10;
for (var i=0;i<5;i++){
    console.log(i)
}
i
5

var j = 10;
for(let j=0;j<5;j++){
    console.log(i)
}
j
10

4.JS的数据类型

数值类型(包含了我们之前在python中学习的整型和浮点型)
字符类型
布尔值类型
null与undefined
自定义对象([]，{})
内置对象

# 1.如何查看数据类型
typeof


# 1.数值类型中的NaN
在数据类型转换的过程中，如果转换的对象无法变成数字就会返回NaN


# 2.字符类型
三种定义字符串的方式
var name = 'simon'
var name = "simon"
var name = `simon666`
"""
第三种也叫    模板字符串
var username = 'simon';
var age = 18;
var res = `
my name is ${username} and my age is ${age}
`
res
"
my name is simon and my age is 18
"
"""
# 在js中字符串的拼接推荐使用加号



# 3.布尔值
在js中布尔值全部都是小写而python中是首字母大写
true
false
# ""(空字符串)、0、null、undefined、NaN都是false。


# 4.null与undefined
null表示值为空
undefined只定义了没有给过值


# 5.对象
# 5.1 数组
var l = [1,2,3,4,5]  # js中的数组表现形式上跟python列表很像

var l1 = [111,222,333,444,555,666]
l1.forEach(function(data,index){
    console.log(date,index)
})
# 第一个是元素本身 第二个是索引值 第三个是元素来自于谁
l1.forEach(function(data,index,arr){
    console.log(data,index,arr)
})


1.splice(1,2)  # 第一个起始位置  第二个是删除的元素个数
(2) [222, 333]
l1
(4) [111, 444, 555, 666]
l1.splice(0,3,666)  # 第三个参数是要添加的元素

# 5.2自定义对象
# 第一种定义方式
var obj = {'username':'simon',"password":123}
undefined
typeof obj
"object"
obj['username']
"simon"
obj.username
"simon"
# 第二种定义方式
var obj1 = new Object()
undefined
obj1
{}
obj1.username = 'simon'
"simon"
obj1.password = 123
123
obj1
{username: "simon", password: 123}

5.运算符

var x=10;
var res1=x++;
var res2=++x;
res1;
10
res2;
12

// 比较运算符
# 弱等于
5 == '5'  # js会自动转换成相同的数据类型再做比较
# 强等于
5 === '5'  # 不让js自动帮你转换


// 逻辑运算符
在python中            在js中
and                        &&
or                        ||
not                         ！

6.流程控制

"""
固定句式
    关键字(条件){子代码}
"""
var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}
# 星期几是从0-6  0表示星期日
var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;  # 如果不写就会一致往后执行
  case 1:
  console.log("Monday");
  break;
default:  # 没有匹配项的时候走的
  console.log("...")
}


b = 10
if b > 5:
    print('yes')
else:
    print('no')

7.循环结构

"""
for(条件){
    子代码
}
"""
var l = [111,222,333,444,555,666,777]
for(let i=0;i<l.length;i++){
    console.log(l[i])
}
"""
while(条件){
    子代码
}
"""
var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

"""
三元运算
在python中
x = 10
res = '哈哈哈' if x > 20 else '嘿嘿嘿'
print(res)

在js中
var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

x
10
"""

8.函数

# 在python定义函数
def index(x,y):
    return x,y

# 在js中
"""
function(参数){函数体代码}
"""
function(x,y){
    return x,y
}
# arguments关键字 可以获取到调用函数的时候所有的实际参数 是一个数组


# 箭头函数
箭头的左边是参数右边是返回值
var f = function(v){
  return v;
}
// 等同于
var f = v => v;

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

9.内置对象

var d1 = new Date();
console.log(d1.toLocaleString());

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

JSON对象
# 在python中
import json
json.dumps()  # 序列化
json.loads()  # 反序列化

# 在js中
JSON.stringify()  # 序列化
JSON.parse()  # 反序列化


RegExp对象
# 在js中定义正则表达式有两种方式
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')
// 全局模式下
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
undefined
var info = 'egondsb'
undefined
reg2.test(info)
true
reg2.test(info)
false


reg2.test()  # 不给默认匹配的是undefined
true

var r = /undefined/
undefined
r.test()
true
r.test('undefined')
true

typeof undefined
"undefined"

10.BOM操作

浏览器对象模型
window.open('https://www.baidu.com','','height=400px,width=400px')
window.open('https://www.baidu.com','','height=400px,width=400px,top=200px,left=200px')
window.close()  # 关闭当前界面

window.history.forward()  // 前进一页
window.history.back()  // 后退一页

window.location.href  获取URL
window.location.href="URL" // 跳转到指定页面


alert(123)
confirm('你确定吗')
prompt('写点什么吧')

计时器相关
// 3秒之后再执行函数
// t = setTimeout(f1,3000);
// 清除定时器
// clearTimeout(t)

// 每个3秒触发一次
res = setInterval(f1,3000);
// 清除定时器
res = clearInterval(res)

11.DOM操作

# 查看标签
document.getElementById('d1')  # 直接返回标签对象
document.getElementsByClassName('c1')  # 返回的是数组
document.getElementsByTagName('p')  # 返回的是数组

# 简介查找
parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素



var aEle = document.createElement('a');
aEle.href = 'https://www.baidu.com'
aEle.setAttribute('username','jason')
<a href=​"https:​/​/​www.baidu.com" username=​"jason">​</a>​
aEle.innerText = '百度'
dEle = document.getElementById('d1')
dEle.appendChild(aEle)
"""
在给标签命名的时候我们习惯使用
xxxEle的方式
    divEle
    pEle
    aEle
"""

divEle.innerHTML
"
    <span class="c2">sss</span>
    <p class="c1">ppp</p>
"
divEle.innerHTML = 'hahahahahah'
"hahahahahah"
divEle.innerText = '<h1>111</h1>'  # 无法识别HTML并自动转换
"<h1>111</h1>"
divEle.innerHTML = '<h1>111</h1>'  # 可以识别并转换
"<h1>111</h1>"


# 获取input里面的用户数据
inputEle = document.getElementById('d1')
inputEle.value
"weeqewqewqewqewewqeqw"
inputEle.value = 'jason'
"jason"

var input1Ele = document.getElementById('d2')
undefined
d2.value
"C:fakepath
eadme.txt"
d2.files
FileList {0: File(69), length: 1}
d2.files[0]  # 文件对象
"""
with open() as f:
    pass
"""

12.类属性操作

divEle.classList
DOMTokenList(3) ["c1", "bg-red", "bg-green", value: "c1 bg-red bg-green"]
divEle.classList.add('ccc')
undefined
divEle.classList.remove('bg-green')
undefined
divEle.classList.contains('ccc')
true
divEle.classList.toggle('bg-green')  # 有则删除无则添加
true
divEle.classList.toggle('bg-green')
false

13.CSS样式操作

js操作css样式统一语法
"""
标签对象.style.属性
"""
obj.style.backgroundColor="red"
obj.style.margin
obj.style.width
obj.style.left
obj.style.position

14.事件

给不同的标签绑定不同的事件:点击不同的标签可以触发不同的动作
    
# js绑定事件的方式
"""
标签对象.事件名 = function(){
    事件对应的具体步骤
}
"""
# 两种方式
<button  onclick="f1()">按钮1</button>
<button id="d1">按钮2</button>
<script>
    function f1() {
        alert('按钮一被点击了')
    }

    var bEle = document.getElementById('d1');
    bEle.onclick = function () {
        alert('按钮2被点击了')
    }
</script>