HTML基础之JS
HTML中的三把利器的JS 又称为JavaScript，看着好像和Java有点联系，实际上他和java半毛钱关系都没有，JavaScript和我们学习的Python、Go、Java、C++等，都是一种独立的语言，Python的解释器有Python2.7、Python3.x，浏览器具有解释JavaScript的功能，所以它才是HTML的三把利器之一。
JavaScript 是脚本语言
-
JavaScript 是一种轻量级的编程语言。
-
JavaScript 是可插入 HTML 页面的编程代码。
-
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
-
JavaScript 很容易学习
在HTML中可以将JavaScript/JS的代码写在head中，被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释。
引入JavaScript代码，类似于Python的import
head中引入JS与body中引入JS区别
html代码从上而下解析，如果在head中引入JS，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。
如何在Pycharm里面运行JS
任何的编程语言想要执行都需要有一个好的环境。
node
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行
注释
单行注释通过 // 多行通过 /* */
JS变量
name = 'csf'; // 默认全局变量
function func() {
var name = 'chenshifeng'; // 局部变量
}
与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串
var pi=3.14;
// 如果你熟悉 ES6，pi 可以使用 const 关键字，表示一个常量
// const pi = 3.14;
var person="John Doe";
var answer='Yes I am!';
声明（创建） JavaScript 变量
我们使用 var 关键词来声明变量：
// 先声明 再赋值
var carname;
carname="Volvo";
// 声明变量时对其赋值
var carname="Volvo";
一条语句，多个变量
可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var lastname="Doe", age=30, job="carpenter";
let 和 const
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
-
let 声明的变量只在 let 命令所在的代码块内有效。
-
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
注意：var是函数作用域，let是块作用域。
// let不能被重新定义，但是var是可以的
let aa = 100
console.log(aa)
let aa = 200 // SyntaxError: Identifier 'aa' has already been declared
bb = 200
console.log(a) // 200
var bb = 100
var bb = 200 // 200
bb = 200 // 300
console.log(bb)
// 声明的常量 不能重新赋值
const aaa = 100;
aaa = 200; // TypeError: Assignment to constant variable.
const aaa = 300; // SyntaxError: Identifier 'aa' has already been declared
console.log(aaa) // 100
一般写JS逆向 推荐使用 var
JS基本数据类型（JavaScript 声明数据类型通过new）
字符串
//定义字符串
var str = '你开心就好！';
var name = '尘世风';
// 字符串的拼接
var name_str = name+str;
//字符串操作
str = '尘世风'
str.charAt(0) // 根据角标获取字符串中的某一个字符 char字符
str.substring(1,3) // 根据角标获取 字符串子序列 大于等于x 小于y
str.length // 获取字符串长度
str.concat('是测试工程师') // 拼接字符串
str.indexOf('测试') // 获取子序列的位置
str.slice(0,1) // 切片 start end
str.toLowerCase() // 变更为小写
str.toUpperCase() // 变更大写
str.split('是',1) // 切片 返回数组 参数2 为取分割后数组的前x个元素
// 数字类型（JavaScript 只有一种数字类型。数字可以带小数点，也可以不带）
var age = 18;
var score = 89.22;
number = '18';
// 字符串转
var n = parseInt(number);
// 转换成小数
f =parseFloat(number)
// 布尔类型（true 或 false）
var t = true; var f = false;
数组类型（就是Python的列表）
// 第一种创建方式 var list = new Array();
list[0] = '尘世风';
list[1] = '90后';
// 第二种创建方式
var list2 = new Array('尘世风','90后');
// 第三种创建方式
var list3 = ['尘世风','90后'];
数组操作
var list3 = ['尘世风','90后'];
list3.length // 数组的长度
list3.push('dsx') // 尾部追啊参数
list3.shift() // 头部获取一个元素 并删除该元素
list3.pop() // 尾部获取一个元素 并删除该元素
list3.unshift('dsx') // 头部插入一个数据
list3.splice(start, deleteCount, value) // 插入、删除或替换数组的元素
list3.splice(n,0,val) // 指定位置插入元素
list3.splice(n,1,val) // 指定位置替换元素
list3.splice(n,1) // 指定位置删除元素
list3.slice(1,2) // 切片;
list3.reverse() // 反转
list3.join('-') // 将数组根据分割符拼接成字符串
list3.concat(['abc']) // 数组与数组拼接
list3.sort() // 排序
对象类型（等同于Python的字典）
对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。 类似于python里面的字典。
var car = {name:"shifeng", model:500, color:"white"};
创建了对象的一个新实例
person= new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
对象访问
car.name;
car['name']
对象方法
对象的方法定义了一个函数，并作为对象的属性存储。
var person = {
firstName: "sf",
lastName : "lili",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
console.log(persons.fullName());
注：在对象方法中，
this指向调用它所在方法的对象。
定时器
setInterval(alert('尘世风'),5000); //参数1 为定时器执行的功能，第二个参数为定时器工作的间隔时间 毫秒为单位
function t1() {
console.log('我是一名小测试')
}
setInterval('t1()', 5000);// 可以运行方法
JS条件判断语句
if (条件) {
执行代码块
} else if (条件) {
执行代码块
} else {
执行代码块
};
if (1 == 1) {
console.log()
} else if (1 != 1) {
console.log()
} else if (1 === 1) {
console.log()
} else if (1 !== 1) {
console.log()
} else if (1 == 1 && 2 == 2) { //and
console.log()
} else if (1 == 1 || 2 == 2) { //or
console.log()
}
switch (a) {
case 1:
console.log(111);
break;
case 2:
console.log(222);
break;
default:
console.log(333)
}
JS循环语句
第一种循环
循环的是角标
tmp = ['宝马', '奔驰', '尼桑'];
tmp = '宝马奔驰尼桑';
tmp = {'宝马': 'BMW', '奔驰': 'BC'};
for (var i in tmp) {
console.log(tmp[i])
}
第二种循环
不支持字典的循环
for (var i = 0; i < 10; i++) {
console.log(tmp[i])
}
第三种循环
while (1 == 1) {
console.log(111)
}
函数定义
1、普通函数
function 函数名(形参, 形参, 形参) {
执行代码块
}
函数名(形参, 形参, 形参);
2、匿名函数 匿名函数没有名字，无法调用时找到，将整个函数当做一个参数传递
setInterval(function () {
console.log(11)
}, 5000);
3、自执行函数创建函数并且自动执行
当引入多个js文件时，函数名可能会出现重复，这时通过自执行函数，保证每一个js文件都会被解析，从而生成独立的容器，防止调用冲突
(function (name) {
console.log(name)
})('csf');
作用域
Python的作用域是以空格作为作用域的，其他语言以代码块（{}）作为作用域的。
JavaScript是以函数作为作用域
function tmp() {
var name = 'csf';
console.log(name)
}
tmp();
console.log(name);
2、函数作用域在函数未被调用之前，已经创建
var name = 'cc';
function a() {
var name='csf';
function b() {
console.log(name);
}
return b
}
var c = a();
c();
3、函数的作用域存在作用域链（代码不执行时，先生成作用域链）
当函数嵌套函数时，每一个函数为一个作用域，多层就叫做作用域链，查找遵循作用域链规则
function outer() {
name = 'nn';
function inner() {
var name = 'ii'
console.log('in', name)
}
console.log('out', name);
inner()
}
outer();
函数不调用时，只生成作用域，当调用时遵循作用域链执行，name都为hhh
function outer() {
var name = 'nn';
function inner() {
console.log('in', name)
}
var name = 'hhh';
console.log('out', name);
inner()
}
outer();
4、函数内,局部变量提前声明 JavaScript的函数在运行前会找到函数内的所有局部变量执行
var xxx;
function func() {
console.log(name);
var name = 'csf';
}
func();
面向对象
在JavaScript中，方法和类写法类似，区别方式为是否有this，如果有就可以当做是类来用
JavaScript的类默认就拥有了Python的构造函数__init__
function Foo(name) {
this.name = name;
}
创建对象时JavaScript需要用到new关键字来创建对象
var obj = new Foo('csf');
console.log(obj.name);
类中定义方法，虽然可以用，但是在多个实例时存在重复实例方法，浪费资源
创建对象时，say每次创建对象，都会创意一个say的方法。
function Foo1(name) {
this.name = name;
this.say = function () {
console.log(this.name)
}
}
var obj1 = new Foo1('dsx_obj1');
obj1.say();
完善类的定义
function Foo2(name) {
this.name = name
}
// 类的原型,将共用的的方法抽出来，当在实例化后，只创建了一个叫做Foo2的对象，对象内只有name，在调用方法时先在Foo2中找，没有找到，会在去原型中找
// 是否有该方法。有执行，没有就报错
Foo2.prototype = {
say: function () {
console.log(this.name)
}
};
var obj2 = new Foo2('csf_obj2');
obj2.say();
序列化
JSON.stringify(obj) //序列化
JSON.parse(str) //反序列化
转义
转义中文或特殊字符
在标准的url的规范中是不允许出现中文字符或某些特殊字符的，所以要进行转义
//& 代表参数的链接，如果就是想传& 给后端那么必须转义
var url = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E5%88%98%E4%BA%A6%E8%8F%B2&rqlang=cn&rsv_enter=0&rsv_dl=tb&rsv_btype=t"
// var url = "https://www.baidu.com/s?wd=刘亦菲"
console.log(decodeURI(url)); //URl中未转义的字符
console.log(decodeURIComponent(url)) //URI组件中的未转义字符
console.log(encodeURI(url)) //URI中的转义字符
console.log(encodeURIComponent(url)) //转义URI组件中的字符
JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
// 执行代码
}
注： JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
有名函数
function xxs(){
console.log('123')
}
xxs();
函数赋值表达式定义函数
sss = function (a,b,c){
console.log(b)
}
sss(1)
JavaScript之自执行函数
一种理解是，自执行即自动执行，也就是所谓的立即执行函数，常用于无限debugger操作
!(function () {
console.log("Hello World!");
})();
!(function (a,b) {
console.log(a,b);
})(1,3);
在前面加上一个布尔运算符（只多了一个感叹号），就是表达式了，将执行后面的代码*
内部函数外部调用
var xxasdasd;
!(function () {
console.log("Hello World!");
function xx1() {
console.log('xxxx')
}
xxasdasd = xx1
})();
console.log(xxasdasd());
// Hello World!
// xxxx
// undefined
作用域
变量在函数内声明，变量为局部变量，具有局部作用域。
局部变量：只能在函数内部访问
变量在函数外定义，即为全局变量。
var aa1 = '123123' // 全局变量
function xxss(){
var ddd = 10; // 局部
console.log(aa1) // 123123
console.log(ddd) // 10
}
xxss()
console.log(aa1) // 123123
// 不可以
function sas(){
console.log(ddd) // ReferenceError: ddd is not defined
}
console.log(sas())
JavaScript 变量生命周期
-
JavaScript 变量生命周期在它声明时初始化。
-
局部变量在函数执行完毕后销毁。
-
全局变量在页面关闭后销毁。
JavaScript事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
登陆举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="name">
<input type="text" id="pwd">
<button onclick="xl()">登陆</button>
<script>
function xl(){
var name = document.getElementById("name").value
var pwd = document.getElementById("pwd").value
console.log(name,pwd)
}
</script>
</body>
</html>
json转换
JSON.parse() // 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() // 用于将 JavaScript 值转换为 JSON 字符串。
实例演示
// 要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法
var obj = JSON.parse('{"a": "Hello", "b": "World"}')
console.log(obj) // { a: 'Hello', b: 'World' }
// 要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'});
console.log(json) // {"a":"Hello","b":"World"}
如果您觉得本篇文章还不错，欢迎点赞，转发分享（转发请注明出处），感谢~~
