Python之Web前段：
一. JavaScript
一. JavaScript
1. 什么是JavaScript ?
JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。
2. JavaScript的编写：
<1. js代码存在形式：
方式一：引入js文件：
1 <script type="text/javascript" src="js文件"></script>
方式二：直接编辑js代码
1 <script type="text/javascript"> 2 js代码内容 3 </script>
<2. js代码放置位置：
(1) 放置于HTML文件的<head></head>之间
由于HTML文件是由浏览器从上到下依次载入的，这样可以确保首先载入js代码。
如果js代码响应延迟，用户长时间看不到页面，大大影响了用户的体验。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 js代码内容 8 </script> 9 </head> 10 <body> 11 12 </body> 13 </html>
(2) 放置于HTML文件的<body></body>底部
当js代码放置于<body>底部时，就算js代码响应延迟，用户也能看到网页，只是js效果稍慢一些，对于用户体验的影响不会很大。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="https://www.gstatic.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> 7 <script> 8 alert(js代码内容); 9 </script> 10 </head> 11 <body> 12 13 </body> 14 </html>
<3. js代码中的注释：
和其他语言一样用来提供代码的可读性，js注释也分为两种：单行注释和多行注释。
(1) 单行注释：
以//开头
1 <script src="https://www.gstatic.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"> 2 // src指定js代码的源链接 3 </script> 4 <script> 5 // alert输出js代码内容 6 alert(js代码内容); 7 </script>
(2) 多行注释：
以 /* 开始，以 */ 结尾。
1 <script src="https://www.gstatic.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"> 2 /* 3 src指定js代码的源链接 4 alert输出js代码内容 5 */ 6 </script> 7 <script> 8 alert(js代码内容); 9 </script>
3. JavaScript变量
与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
-
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
js变量分为局部变量与全局变量：
1. 局部变量：
只能在本变量声明的函数内部调用。
2. 全局变量：
整个代码中都可以调用的变量。
注: JavaScript 语句和 JavaScript 变量都对大小写敏感。
1 <script> 2 var a =1; 3 function test(){ 4 alert(window.a); //a为1,这里的a是全局变量 5 var a=2; //局部变量a在这行定义 6 alert(a); //a为2,这里的a是局部变量 7 } 8 test(); 9 alert(a); //a为1，这里并不在function scope内，a的值为全局变量的值 10 </script>
注: JavaScript 语句和 JavaScript 变量都对大小写敏感。
4. 数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
- 原始类型
- 数字
- 字符串
- 布尔值
- 对象类型
- 数组
- “字典”
- ...
特别的，数字、布尔值、null、undefined、字符串是不可变。
null、undefined
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。 undefined是一个特殊值，表示变量未定义。
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script> 6 var person; 7 var car="Volvo"; 8 document.write(person + "<br />"); 9 document.write(car + "<br />"); 10 var car=null 11 document.write(car + "<br />"); 12 //输出： 13 // undefined 14 // Volvo 15 // null 16 </script> 17 18 </body> 19 </html>
(1). 数字
Javascript只有一种数字类型，不区分整数和浮点数。
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
转换：
-
- parseInt(..) 将某值转换成数字，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
-
- NaN，非数字。可使用 isNaN(num) 来判断。
- Infinity，无穷大。可使用 isFinite(num) 来判断。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 var a = 123.345; 10 a1 = parseInt(a); 11 document.write(a1 + "<br />"); 12 var b = 123; 13 b1 = parseFloat(b); 14 document.write(b1 + "<br />"); 15 var c=123e5; 16 document.write(c + "<br />"); 17 var d=123e-5; 18 document.write(d + "<br />"); 19 // 由于js不区分整数和浮点数，这里测试其实没有什么意思，输出都为整数;极大或者极小的数可以使用科学记数法。 20 21 // 输出： 22 // 123 23 // 123 24 // 12300000 25 // 0.00123 26 </script> 27 28 </body> 29 </html>
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 计算正切值。 82 83 Math
(2) 字符串
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
可使用单引号与双引号：
1 var answer="Nice to meet you!"; 2 var answer="He is called 'Bill'"; 3 var answer='He is called "Bill"';
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) 布尔值
布尔（逻辑）只能有两个值：true 或 false，其首字母小写。
1 var a = True 2 var b = False
js中为False的6个值：
0, '', null, undefined, NaN 和 false
对象的布尔值为True，即使为对象{}。
不同对象之间对比返回False，只有引用相同对象才会返回True，如
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
(4) 数组
数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。和python的列表类似。
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script> 6 var i; 7 var shop = new Array(); 8 shop[0] = "maozi"; 9 shop[1] = "yifu"; 10 shop[2] = "xiezi"; 11 12 for (i=0;i<shop.length;i++) 13 { 14 document.write(shop[i] + "<br>"); 15 } 16 17 //输出： 18 //maozi 19 //yifu 20 //xiezi 21 22 </script> 23 24 </body> 25 </html>
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) 对象
在 JavaScript 中，对象是数据（变量），拥有属性和方法。
申明一个变量即为创建一个新的对象
1 var a = "HelloWord";
JavaScript拥有属性和方法：
属性：
1 a.length=5
方法：
1 a.replace() 2 3 a.search()
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script> 6 person=new Object(); //创建一个person对象 7 person.firstname="laowang"; //以下为person的四个属性 8 person.lastname="gebi"; 9 person.age=40; 10 person.eyecolor="yellow"; 11 document.write(person.firstname + " is " + person.age + " years old."); 12 //输出： 13 //laowang is 40 years old. 14 15 </script> 16 17 </body> 18 </html>
5. 正则表达式：
(1) 定义正则表达式
- /.../ 用于定义正则表达式
- /.../g 表示全局匹配
- /.../i 表示不区分大小写
- /.../m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)
1 var pattern = /^Java\w*/gm; 2 var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; 3 result = pattern.exec(text) 4 result = pattern.exec(text) 5 result = pattern.exec(text)
注：定义正则表达式也可以 reg= new RegExp()
(2) 匹配
JavaScript中支持正则表达式，其主要提供了两个功能：
-
- test(string) 检查字符串中是否和正则匹配
1 n = 'uui99sdf' 2 reg = /\d+/ 3 reg.test(n) ---> true 4 5 # 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
-
- exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
1 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。 2 3 非全局模式 4 获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配） 5 var pattern = /\bJava\w*\b/; 6 var text = "JavaScript is more fun than Java or JavaBeans!"; 7 result = pattern.exec(text) 8 9 var pattern = /\b(Java)\w*\b/; 10 var text = "JavaScript is more fun than Java or JavaBeans!"; 11 result = pattern.exec(text) 12 13 全局模式 14 需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕 15 var pattern = /\bJava\w*\b/g; 16 var text = "JavaScript is more fun than Java or JavaBeans!"; 17 result = pattern.exec(text) 18 19 var pattern = /\b(Java)\w*\b/g; 20 var text = "JavaScript is more fun than Java or JavaBeans!"; 21 result = pattern.exec(text)
(3) 字符串中相关方法
1 obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效) 2 obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部 3 obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项， 4 $数字：匹配的第n个组内容； 5 $&：当前匹配的内容； 6 $`：位于匹配子串左侧的文本； 7 $'：位于匹配子串右侧的文本 8 $$：直接量$符号