Html 2：JavaScript

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>

js存在位置

2、JavaScript代码存在形式：

1、Head中

//javascript代码

alert(123);

</script>

PS：type="text/javascript"可写可不写，写上说明script里面就是js代码，不写默认就是

//javascript代码

alert(123);

</script>

2、在其他js文件中

 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>

放在body最下方

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{

}

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

test

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     '\bwa\w\b'
 9     #wang1
10     '\bwa(\w+)\b'(分组匹配)
11     #wang1 ng1
12     
13     JavaScript is more fun than Java or JavaBeans!
14     var pattern = /\bJava(\w*)\b/;（只匹配第一个）
15     # ["JavaScript", "Script"]
16     
17 全局匹配：需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
18     JavaScript is more fun than Java or JavaBeans!
19     var pattern = /\bJava\w*\b/g;（全局匹配）
20     # ["JavaScript"]
21     # ["Java"]
22     # ["JavaBeans"]
23     # null
24     
25     JavaScript is more fun than Java or JavaBeans!
26     var pattern = /\bJava(\w*)\b/g;（全局分组匹配）
27     # ["JavaScript",'Script']
28     # ["Java", ""]
29     # ["JavaBeans", "Beans"]
30     # null

exec

JavaScrip参考手册：http://www.shouce.ren/api/javascript/main.html

posted on 2018-08-20 15:52 水无阅读(247) 评论(0) 编辑收藏举报