zoukankan      html  css  js  c++  java

  • python第15天

    　　　

    　　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 = /^Javaw*/gm;
2 var text = "JavaScript is more fun than 
JavaEE 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 = /Javaw*/;
 6     var text = "JavaScript is more fun than Java or JavaBeans!";
 7     result = pattern.exec(text)
 8  
 9     var pattern = /(Java)w*/;
10     var text = "JavaScript is more fun than Java or JavaBeans!";
11     result = pattern.exec(text)
12  
13 全局模式
14     需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
15     var pattern = /Javaw*/g;
16     var text = "JavaScript is more fun than Java or JavaBeans!";
17     result = pattern.exec(text)
18  
19     var pattern = /(Java)w*/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                                           $$：直接量$符号
  • 相关阅读:
    Selenium IDE
    selenium简介
    Java程序要操作数据库，一定要使用JDBC技术吗？
    JDBC几个接口分区叫什么？它们分别有什么用？
    JDBC的全称是什么？
    什么时候使用session？什么时候使用application?
    内置对象session和application的作用是什么？
    修改表单中为什么要使用隐藏域？
    如何创建一个不能修改的属性？
    如何修改属性？
  • 原文地址：https://www.cnblogs.com/python-nameless/p/5774867.html
Copyright © 2011-2022 走看看