Python_day10:JavaScript

一、简介:JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器

Python_day10:JavaScript
1 <!-- 方式一 -->
2 <script type"text/javascript" src="JS文件"></script>
3   
4 <!-- 方式二 -->
5 <script type"text/javascript">
6     Js代码内容
7 </script>
JavaScript代码存在形式

  JavaScript代码存放位置

  • HTML的head中
  • HTML的body代码块底部(推荐)

二、变量

  JavaScript中变量的声明,局部变量必须用var+变量名,否则便是全局变量

Python_day10:JavaScript
 1 <script type="text/javascript">
 2 
 3     // 全局变量,type="text/javascript"可不加
 4     name = 's';
 5  
 6     function func(){
 7         // 局部变量
 8         var age = 18;
 9  
10         // 全局变量
11         gender = "男"
12     }
13 </script>
14 
15 //JavaScript中代码注释:
16 
17 单行 //
18 多行 /*  */
var 变量名,注释

三、数据类型

  JavaScript 中的数据类型分为原始类型和对象类型:

  • 原始类型
    • 数字
    • 字符串
    • 布尔值 
  • 对象类型
    • 数组
    • 字典
Python_day10:JavaScript
1 // null、undefined
2 
3 null是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”。
4 undefined是一个特殊值,表示变量未定义。
5 
6 特别的,数字、布尔值、null、undefined、字符串是不可变
null、undefined

 1、数字(Number)

  JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。

转换:

  • parseInt(..)    将某值转换成数字,不成功则NaN
  • parseFloat(..) 将某值转换成浮点数,不成功则NaN

特殊值:

  •  NaN,非数字。可使用 isNaN(num) 来判断。
  • Infinity,无穷大。可使用 isFinite(num) 来判断。
Python_day10:JavaScript
 1 常量
 2 
 3 Math.E
 4 常量e,自然对数的底数。
 5 
 6 Math.LN10
 7 10的自然对数。
 8 
 9 Math.LN2
10 2的自然对数。
11 
12 Math.LOG10E
13 以10为底的e的对数。
14 
15 Math.LOG2E
16 以2为底的e的对数。
17 
18 Math.PI
19 常量figs/U03C0.gif。
20 
21 Math.SQRT1_2
22 2的平方根除以1。
23 
24 Math.SQRT2
25 2的平方根。
26 
27 静态函数
28 
29 Math.abs( )
30 计算绝对值。
31 
32 Math.acos( )
33 计算反余弦值。
34 
35 Math.asin( )
36 计算反正弦值。
37 
38 Math.atan( )
39 计算反正切值。
40 
41 Math.atan2( )
42 计算从X轴到一个点的角度。
43 
44 Math.ceil( )
45 对一个数上舍入。
46 
47 Math.cos( )
48 计算余弦值。
49 
50 Math.exp( )
51 计算e的指数。
52 
53 Math.floor( )
54 对一个数下舍人。
55 
56 Math.log( )
57 计算自然对数。
58 
59 Math.max( )
60 返回两个数中较大的一个。
61 
62 Math.min( )
63 返回两个数中较小的一个。
64 
65 Math.pow( )
66 计算xy。
67 
68 Math.random( )
69 计算一个随机数。
70 
71 Math.round( )
72 舍入为最接近的整数。
73 
74 Math.sin( )
75 计算正弦值。
76 
77 Math.sqrt( )
78 计算平方根。
79 
80 Math.tan( )
81 计算正切值。
Math

  2、字符串(String):无法修改

Python_day10:JavaScript
 1 obj.length                           长度
 2  
 3 obj.trim()                           移除空白
 4 obj.trimLeft()
 5 obj.trimRight)
 6 obj.charAt(n)                        返回字符串中的第n个字符
 7 obj.concat(value, ...)               拼接
 8 obj.indexOf(substring,start)         子序列位置
 9 obj.lastIndexOf(substring,start)     子序列位置
10 obj.substring(from, to)              根据索引获取子序列
11 obj.slice(start, end)                切片
12 obj.toLowerCase()                    大写
13 obj.toUpperCase()                    小写
14 obj.split(delimiter, limit)          分割
15 obj.search(regexp)                   从头开始匹配,返回匹配成功的第一个位置(g无效)
16 obj.match(regexp)                    全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
17 obj.replace(regexp, replacement)     替换,正则中有g则替换所有,否则只替换第一个匹配项,
18                                      $数字:匹配的第n个组内容;
19                                      $&:当前匹配的内容;
20                                      $`:位于匹配子串左侧的文本;
21                                      $':位于匹配子串右侧的文本
22                                      $$:直接量$符号
字符串操作

 3、布尔类型(Boolean)

Python_day10:JavaScript
1 ==      比较值相等
2 !=       不等于
3 ===   比较值和类型相等
4 !===  不等于
5 ||        或
6 &&      且
Boolean

 4、数组:相当于python中的列表

Python_day10:JavaScript
 1 obj.length          数组的大小
 2  
 3 obj.push(ele)     尾部追加元素
 4 obj.pop()           尾部获取一个元素
 5 obj.unshift(ele)  头部插入元素
 6 obj.shift()         头部移除元素
 7 obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
 8 obj.splice(n,0,val) 指定位置插入元素
 9 obj.splice(n,1,val) 指定位置替换元素
10 obj.splice(n,1)      指定位置删除元素
11 obj.slice( )           切片
12 obj.reverse( )      反转
13 obj.join(sep)       将数组元素连接起来以构建一个字符串
14 obj.concat(val,..)  连接数组
15 obj.sort( )         对数组元素进行排序
数组操作

 5、正则

Python_day10:JavaScript
 1 /.../  用于定义正则表达式
 2 /.../g 表示全局匹配
 3 /.../i 表示不区分大小写
 4 /.../m 表示多行匹配
 5 
 6 <!-- JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达式^和$,m模式也会使用^$来匹配换行的内容) -->
 7 
 8 var a = "JavaScript is more fun than \nJavaEE or JavaBeans!"
 9 undefined
10 var b = /^Java\w*/gm
11 undefined
12 r = b.exec(a)
13 ["JavaScript", index: 0, input: "JavaScript is more fun than ↵JavaEE or JavaBeans!", groups: undefined]
14 r = b.exec(a)
15 ["JavaEE", index: 29, input: "JavaScript is more fun than ↵JavaEE or JavaBeans!", groups: undefined]
16 r = b.exec(a)
17 null
定义 Python_day10:JavaScript
1 >var n = '333sss'
2 <undefined
3 >reg = /\d+/
4 </\d+/
5 >reg.test(n)
6 <true
7 
8 //只要正则在字符串中存在就匹配,如果想要开头和结尾匹配的话,就需要在正则前后加 ^和$
匹配 text(string)检查字符串中是否和正则匹配 Python_day10:JavaScript
 1 //获取正则表达式匹配的内容,如果未匹配,值为null,否则,获取匹配成功的数组。
 2 
 3 <!--非全局模式:获取匹配结果数组,注意:第一个元素是第一个匹配的结果,后面元素是正则子匹配(正则内容分组匹配)-->
 4 var s = "JavaScript is more fun than JavaEE or JavaBeans!"
 5 undefined
 6 var p = /\bJava\w*\b/
 7 undefined
 8 res = p.exec(s)
 9 ["JavaScript", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined]
10 res = p.exec(s)
11 ["JavaScript", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined]
12 
13 var p = /\b(Java)\w*\b/
14 undefined
15 res = p.exec(s)
16 (2) ["JavaScript", "Java", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined]
17 
18 
19 <!--全局模式:需要反复调用exec方法,来一个一个获取结果,直到匹配获取结果为null表示获取完毕-->
20 var s = "JavaScript is more fun than JavaEE or JavaBeans!"
21 undefined
22 var p = /\bJava\w*\b/g
23 undefined
24 res = p.exec(s)
25 ["JavaScript", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined]
26 res = p.exec(s)
27 ["JavaEE", index: 28, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined]
28 res = p.exec(s)
29 ["JavaBeans", index: 38, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined]
30 res = p.exec(s)
31 null
32 var p = /\b(Java)\w*\b/g
33 undefined
34 res = p.exec(s)
35 (2) ["JavaScript", "Java", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined]
36 res = p.exec(s)
37 (2) ["JavaEE", "Java", index: 28, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined]
38 res = p.exec(s)
39 (2) ["JavaBeans", "Java", index: 38, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined]
40 res = p.exec(s)
41 null
匹配 exec(string) Python_day10:JavaScript
1 obj.search(regexp)                   获取索引位置,搜索整个字符串,返回匹配成功的第一个位置(g模式无效)
2 obj.match(regexp)                    获取匹配内容,搜索整个字符串,获取找到第一个匹配内容,如果正则是g模式找到全部
3 obj.replace(regexp, replacement)     替换匹配替换,正则中有g则替换所有,否则只替换第一个匹配项,
4                                        
5 $数字:匹配的第n个组内容;                                         
6 $&:当前匹配的内容;                                          
7 $`:位于匹配子串左侧的文本;                                         
8 $':位于匹配子串右侧的文本
9 $$:直接量$符号
字符串中相关方法

 6、其他

Python_day10:JavaScript
1 //序列化就是将JavaScript中的数据类型转换成字符串
2 JSON.stringify(obj)    序列化
3 JSON.parse(str)        反序列化
序列化 Python_day10:JavaScript
 1 var r = "www.baidu.com?name='你好'"
 2 
 3 encodeURI(r)        //URI中的转义字符
 4 "www.baidu.com?name='%E4%BD%A0%E5%A5%BD'"
 5 
 6 decodeURI(r)        //URl中未转义的字符
 7 "www.baidu.com?name='你好'"
 8 
 9 encodeURIComponent(r)   //转义URI组件中的字符
10 "www.baidu.com%3Fname%3D'%E4%BD%A0%E5%A5%BD'"
11 
12 decodeURIComponent(r)   //URI组件中的未转义字符
13 "www.baidu.com?name='你好'"
14 
15 <!--
16 escape( )                         对字符串转义
17 unescape( )                     给转义字符串解码
18 URIError                         由URl的编码和解码方法抛出
19 -->
转义 Python_day10:JavaScript
//JavaScript中的eval是Python中eval和exec的合集,既可以编译代码也可以获取返回值。

>eval(2+2*5)
<12
eval

时间处理:http://www.shouce.ren/api/javascript/main.html

四、语句异常

 1、条件语句

Python_day10:JavaScript
1     if(条件){
2  
3     }else if(条件){
4          
5     }else{
6  
7     }
if 语句 Python_day10:JavaScript
 1     switch(name){
 2         case '1':
 3             age = 123;
 4             break;
 5         case '2':
 6             age = 456;
 7             break;
 8         default :
 9             age = 789;
10     }
switch 语句

 2、循环

Python_day10:JavaScript
1 var names = ["a", "b", "c"];
2  
3 for(var i=0;i<names.length;i++){
4     console.log(i);
5     console.log(names[i]);
6 }
for i 循环 Python_day10:JavaScript
1 var names = ["a", "b", "c"];
2 
3 for(var index in names){
4     console.log(index);
5     console.log(names[index]);
6 }
for index 循环 Python_day10:JavaScript
1 while(条件){
2     // break;
3     // continue;
4 }
while 循环 Python_day10:JavaScript
 1 try {
 2     //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
 3 }
 4 catch (e) {
 5     // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
 6     //e是一个局部变量,用来指向Error对象或者其他抛出的对象
 7 }
 8 finally {
 9      //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
10 }
异常处理

五、函数

 1、基本函数:对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。

Python_day10:JavaScript
1 // 普通函数
2     function func(arg){
3         return true;
4     }
普通函数 Python_day10:JavaScript
 1 //普通函数
 2 function func(){     
 3    console.log(1);
 4 }    
 5 setInterval("func()", 5000);
 6   
 7 //匿名函数   
 8 setInterval(function(){console.log(1);},5000)
 9 
10 
11 setinterval为定时器;
匿名函数 Python_day10:JavaScript
 1 // 自执行函数
 2     (function(arg){
 3         console.log(arg);
 4     })('123')
 5 
 6 //自执行函数等同于以下代码:
 7     function func(arg){
 8         console.log(arg);
 9     }
10     func(123)
自执行函数

 2、函数作用域

Python_day10:JavaScript
1 function M(){
2     if(1==1){
3         var name = 'jack';
4     }
5     console.log(name);
6 }
7 // 输出: jack
8 
9 JavaScript6中新引入了 let 关键字,用于指定变量属于块级作用域
一、“JavaScript中无块级作用域” Python_day10:JavaScript
 1 //在JavaScript中每个函数作为一个作用域,在外部无法访问内部作用域中的变量。
 2 
 3 function Main(){
 4     var innerValue = 'seven';
 5 }
 6  
 7 Main();
 8  
 9 console.log(innerValue);
10  
11 // 报错:Uncaught ReferenceError: innerValue is not defined
二、JavaScript采用函数作用域 Python_day10:JavaScript
 1 //JavaScript中的每个函数作为一个作用域,如果出现函数嵌套函数,则就会出现作用域链。
 2 
 3 a = '1';                        //第三步
 4   
 5 function Func(){
 6     var a = "2";              //第二步
 7     function inner(){
 8         var a = '3';           //第一步
 9         console.log(a);
10     }
11     inner();
12 }
13 Func();
14 
15 //当执行console.log(a)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。
三、JavaScript的作用域链 Python_day10:JavaScript
 1 //JavaScript的作用域在被执行之前已经创建,日后再去执行时只需要按照作用域链去寻找即可。
 2 
 3 a = '1';
 4  
 5 function Func(){
 6     var a = "2";
 7     function inner(){
 8  
 9         console.log(a);
10     }
11     a = '3';
12     return inner;
13 }
14  
15 var ret = Func();
16 ret();
17 // 输出结果: 3
18 
19 全局作用域 -> Func函数作用域 -> inner函数作用域
四、JavaScript的作用域链执行前已创建 Python_day10:JavaScript
 1 JavaScript中如果不创建变量,直接去使用,则报错:
 2 console.log(a);
 3 // 报错:Uncaught ReferenceError: a is not defined
 4 
 5 JavaScript中如果创建值而不赋值,则该值为 undefined,如:
 6 var a;
 7 console.log(a);
 8 // 输出:undefined
 9 
10 函数内:
11 function Foo(){
12     console.log(a);
13     var a = 's';
14 }
15 Foo();
16 // 输出:undefined
17 上述代码,不报错而是输出 undefined,其原因是:JavaScript的函数在被执行之前,会将其中的变量全部声明,而不赋值。所以,相当于上述实例中,函数在“预编译”时,已经执行了var a;所以上述代码中输出的是undefined。
五、函数内局部变量声明提前

 3、面向对象

Python_day10:JavaScript
 1 function Foo (name,age) {    //Foo充当构造函数
 2     this.Name = name;          //this代指对象
 3     this.Age = age;
 4     this.Func = function(arg){
 5         return this.Name + arg;
 6     }
 7 }
 8   
 9 var obj = new Foo('abc', 18); //创建对象时需要使用 new
10 var ret = obj.Func("ss");
11 console.log(ret);
12 
13 
14 //上述代码中每个对象中均保存了一个相同的Func函数,从而浪费内存。使用原型和可以解决该问题
创建对象 Python_day10:JavaScript
 1 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个对象;
 2 
 3 用途:包含可以由特定类型的所有实例共享的属性和方法;
 4 
 5 理解:prototype是通过调用构造函数创建的那个对象的原型对象;
 6 
 7 使用原型的好处是可以让所有对象实例共享它所包含的属性和方法;
 8 
 9 也就是说,不必在构造函数中定义对象信息(属性/方法),而是可以直接将这些信息添加到原型中;
10 
11 function Foo (name,age) {
12     this.Name = name;
13     this.Age = age;
14 }
15 Foo.prototype = {
16     GetInfo: function(){
17         return this.Name + this.Age
18     },
19     Func : function(arg){
20         return this.Name + arg;
21     }
22 }
prototype-原型

 六、AO词法分析

Python_day10:JavaScript
 1 <body>
 2     <script>
 3         function t1(age) {
 4             console.log(age);
 5             var age = 27;
 6             console.log(age);
 7             function age() {};
 8             console.log(age);
 9         }
10         t1(3);
11     </script>
12 </body>
13 
14 输出结果为:
15 function age(){}
16 27
17 27
先看一段代码 Python_day10:JavaScript
 1 active object ====>AO
 2 1、形式参数
 3 2、局部变量
 4 3、函数声明表达式
 5 
 6 分析:
 7 1、形式参数
 8 AO.age = undefined;
 9 AO.age = 3;
10 
11 2、局部变量
12 AO.age = undefined;
13 
14 3、函数声明表达式
15 AO.age = function(){};
active object分析

 

上一篇:Python之路day10-数据库基本操作


下一篇:函数基础(一)(day10整理)