HTML 2：JavaScript
1、概述
2、变量
3、基本数据类型
4、语句
5、函数
一、概述
1、概述
JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理
一般存在与HTML中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*css代码*/ 8 </style> 9 10 <script> 11 //javascript代码 12 alert(123); 13 </script> 14 </head> 15 <body> 16 17 </body> 18 </html>
2、JavaScript代码存在形式：
1、Head中
<script>
//javascript代码
alert(123);
</script>
PS：type="text/javascript"可写可不写，写上说明script里面就是js代码，不写默认就是
<script type="text/javascript">
//javascript代码
alert(123);
</script>
2、在其他js文件中
<script src='js文件路径'> </script>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--导入js代码--> 7 <script src="commons.js"></script> 8 <script type="text/javascript"> 9 //javascript代码 10 alert(123); 11 </script> 12 </head> 13 <body> 14 15 </body> 16 </html>
PS: JS代码需要放置在 <body>标签内部的最下方
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <h1>asdf</h1> 10 <h1>asdf</h1> 11 <script src="https://www.gstasdfasdfc.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script> 12 <script> 13 </script> 14 </body> 15 </html>
3、注释
-当行注释 //注释内容
-多行注释 /* 注释内容 */
4、写Js代码
-html文件中编写
-临时，浏览器的终端 console
二、变量
python：
name = 'zz'
JavaScript:
name = 'zz' # 全局变量
var name = 'aa' # 局部变量
1 <script type="text/javascript"> 2 // 全局变量 3 name = 'zz'; 4 function func(){ 5 // 局部变量 6 var age = 18; 7 // 全局变量 8 gender = "男" 9 } 10 </script>
三、基本数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
原始类型：数字、字符串、布尔值
对象类型：数组、字典 ...
特别的：布尔值、null、undefined、字符串是不可变。
（null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。undefined是一个特殊值，表示变量未定义。）
1、数字（number）
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
转换：
parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN
2、字符串（string）
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常见功能：
1 obj.length 长度 2 obj.trim() 移除空白 3 obj.trimLeft() 4 obj.trimRight) 5 obj.charAt(n) 返回字符串中的第n个字符 6 obj.concat(value, ...) 拼接 7 obj.indexOf(substring,start) 子序列位置 8 obj.lastIndexOf(substring,start) 子序列位置 9 obj.substring(from, to) 根据索引获取子序列 10 obj.slice(start, end) 切片 11 obj.toLowerCase() 大写 12 obj.toUpperCase() 小写 13 obj.split(delimiter, limit) 分割 14 obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效) 15 obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。 16 obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， 17 $数字：匹配的第n个组内容； 18 $&：当前匹配的内容； 19 $`：位于匹配子串左侧的文本； 20 $'：位于匹配子串右侧的文本 21 $$：直接量$符号
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="i1">欢迎光临</div> 9 10 <script> 11 function func(){ 12 // 根据ID获取指定标签的内容,定于局部变量接受 13 var tag = document.getElementById('i1'); 14 // 获取标签内部的内容 15 var content = tag.innerText; 16 17 var f = content.charAt(0); 18 var l = content.substring(1,content.length); 19 20 var new_content = l + f; 21 22 tag.innerText = new_content; 23 } 24 setInterval('func()', 500); 25 </script> 26 </body> 27 </html>
3、布尔类型（boolean）
布尔类型仅包含真假，与Python不同的是其首字母小写。
4、判断条件
== 比较值相等；!= 不等于；=== 比较值和类型相等；!=== 不等于；|| 或； && 且
5、数组（python中的列表类似）
a=[11,22,33]
常用方法：
1 obj.length 数组的大小 2 obj.push(ele) 尾部追加元素 3 obj.pop() 尾部获取一个元素 4 obj.unshift(ele) 头部插入元素 5 obj.shift() 头部移除元素 6 obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 7 obj.splice(n,0,val) 指定位置插入元素 8 obj.splice(n,1,val) 指定位置替换元素 9 obj.splice(n,1) 指定位置删除元素 10 obj.slice( ) 切片 11 obj.reverse( ) 反转 12 obj.join(sep) 将数组元素连接起来以构建一个字符串 13 obj.concat(val,..) 连接数组 14 obj.sort( ) 对数组元素进行排序
6、字典（js没有专门的dict数据类型）
a={"k1":"v1","k2":"v2"}
a[k1] 获取值
与Python基本相同
四、语句
1、循环语句
for循环
1.1、循环时循环的元素是索引
数组：
a = [11,22,33,44]
for(var item in a){
console.log(item);
}
字典：
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}
1 var names = ["11", "22", "33"]; 2 3 for(var index in names){ 4 console.log(index); 5 console.log(names[index]); 6 }
1.2、数字自加循环
for(var i=0;i<10;i=i+1){
}
a = [11,22,33,44]
for(var i=0;i<a.length;i=i+1){
}
不支持字典的循环
var names = ["11", "22", "33"]; for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); }
while循环：
while(条件){
// break;
// continue;
}
2、条件语句
JavaScript中支持两个中条件语句，分别是：if 和 switch
if语句：
if(条件){
}else if(条件){
}else if(条件){
}else{
}
switch语句：
switch(name){
case '1':
age = 18;
break;
case '2':
age = 40;
break;
default :
age = 12;
}
五、函数
1、基本函数：
a、普通函数
function 函数名(a,b,c){
}
函数名(1,2,3)
function func(arg){
return arg+1
}
var result = func(1)
console.log(result)
注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
b、匿名函数
(setInterval(执行的函数，时间间隔）
setInterval(func()，5000）)
setInterval(function(){console.log(123);},5000） 匿名函数
c、自执行函数
(function(arg){console.log(arg)})(1)
2、函数作用域
a、以函数作为作用域（let除外）
其他语言：以代码块作为作用域
public void Func(){
if(1==1){
string name = "Java";
}
console.writeline(name);
}
Func()
//报错（作用域问题）
python：是以函数为作用域
情况一：
def func();
if 1==1;
name = "zz"
print(name)
func()
//运行正常
情况二：
def func();
if 1==1;
name = "zz"
print(name)
func()
print(name)
//报错
JavaScript：以函数作为作用域
function func(){
if(1==1){
var name = 'zz'
}
console.log(name)
}
func()
//正常执行
b、函数的作用域在函数未被调用之前，已经创建
function func(){
if(1==1){
var name = 'zz'
}
console.log(name)
}
func()
c、函数的作用域存在作用域链，并且也在被调用之前创建
示例一：
xo = 'aa'
function func(){
var xo = 'bb'
function inner(){
var xo = 'cc'
console.log(xo)
}
inner()
}
func() //cc
示例二：
xo = 'aa'
function func(){
var xo = 'bb'
function inner(){
console.log(xo)
}
return inner;
}
var ret = func()
ret() // bb(作用域在被调用之前已经创建，所以还是bb而不是aa)
示例三：
xo = 'aa'
function func(){
var xo = 'bb'
function inner(){
console.log(xo)
}
var xo = 'cc'
return inner;
}
var ret = func()
ret() // cc
d、函数内局部变量提前声明
function func(){
console.log(xo)
}
//程序报错
func(); //undefined
function func(){
console.log(xo)
var xo = 'aa'
}
//解释器解释的过程当中，解释器会找到所有的局部变量，执行一句：var xo（声明了但是没有赋值）
func();
//输出：undefined（只声明没赋值）
3、面向对象
a、this代指对象相当于Python里的self
function Foo(n){
this.name = n; //this相当于Python里的self
}
b、创建对象时，new 函数 （）
var obj = new Foo('we');
注意：Foo充当的构造函数；this代指对象；创建对象时需要使用 new
c、原型
function foo(){
this.name = n;
}
#foo 的原型
foo.prototype = {
'sayNmae':function(){
console.log(this.name)
}
}
obj1 = new foo('we');
obj1.sayName()
obj2 = new foo('wee');
代码中每个对象中均保存了一个相同的Func函数，浪费内存，使用原型和可以解决该问题。
六、其他
1、序列化
JSON.stringify() 将对象转换为字符串（序列化）
JSON.parse() 将字符串转换为对象类型（反序列化）
2、转义
客户端（cookie） =》服务器端
将数据经过转义后，保存在coolie中
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
3、eval
python:
val = eval（"1+1"）
eval(执行表达式)
exec(执行代码)
JavaScript:
eval(相当于python的eval和exec的合集)
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
eval()
EvalError 执行字符串中的JavaScript代码
4、时间
Data对象
var d = new Date()
d.getXXX 获取
d.setXXX 设置
5、正则
5.1基本匹配规则
/.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配（JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容）
5.2两个方法：test、exec
test - 判断字符串是否符合规定的正则
1 rep = /d+/;（内部只要包含数字就行） 2 rep.test("asdfoiklfasdf89asdfasdf") 3 # true 4 rep = /^d+$/;（^开始符$结尾符号d+只能是数字） 5 rep.test("asdfoiklfasdf89asdfasdf") 6 # false
exec - 获取匹配的数据
1 非全局匹配：默认只匹配第一个值 2 rep = /d+/;（默认只拿第一个值） 3 str = "wangshen_67_houyafa_20" 4 rep.exec(str) 5 # ["67"] 6 7 str = "wang1 wang2 zhang3 wang4 zhang5" 8 'waw' 9 #wang1 10 'wa(w+)'(分组匹配) 11 #wang1 ng1 12 13 JavaScript is more fun than Java or JavaBeans! 14 var pattern = /Java(w*)/;（只匹配第一个） 15 # ["JavaScript", "Script"] 16 17 全局匹配：需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕 18 JavaScript is more fun than Java or JavaBeans! 19 var pattern = /Javaw*/g;（全局匹配） 20 # ["JavaScript"] 21 # ["Java"] 22 # ["JavaBeans"] 23 # null 24 25 JavaScript is more fun than Java or JavaBeans! 26 var pattern = /Java(w*)/g;（全局分组匹配） 27 # ["JavaScript",'Script'] 28 # ["Java", ""] 29 # ["JavaBeans", "Beans"] 30 # null
JavaScrip参考手册：http://www.shouce.ren/api/javascript/main.html