JavaScript--pythonWeb

最新推荐文章于 2024-10-02 10:53:34 发布

Geeks.

最新推荐文章于 2024-10-02 10:53:34 发布

阅读量1.3k

点赞数 8

分类专栏： Web前端文章标签： python

本文链接：https://blog.csdn.net/Darling912/article/details/141735238

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Javascript 是一种由 Netscape(网景)的 LiveScript 发展而来的
原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是
为了解决服务器端语言，比如 Perl，遗留的速度问题，为客户提供更流畅的浏览
效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢 , 只有
28.8kbps，验证步骤浪费的时间太多。于是 Netscape 的浏览器 Navigator 加
入了 Javascript ，提供了数据验证的基本功能。 JavaScript 的正式名称是
"ECMAScript"。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的

JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript
(Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言，
从 1996 年开始，已经出现在所有的 Netscape 和 Microsoft 浏览器中。
ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳
了它的首个版本。JavaScript 的组成包含 ECMAScript、DOM、BOM。JS 是一
种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和
动画特效等

ECMAScript
是一种由欧洲计算机制造商协会（ECMA）通过 ECMA-262 标准化的脚本程
序语言,简单点说，ECMAScript 描述了语法、类型、语句、关键字、保留字、
运算符和对象。它就是定义了脚本语言的所有属性、方法和对象。
DOM
把整个页面规划成由节点层构成的文档，它不与浏览器、平台、语言相关，
为 web 开发者提供一个标准可以访问站点中的数据、脚本和表现层对象.DOM
编程可以实现网页内容校验和动态变化的效果

3_JS 中数组的使用
3_1_数组创建的方式
JS 数组创建的四种语法
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. <script>
7. /*第一种
8. *创建了一个空数组 new Array();
9. * */
10. var arr=new Array();
11. arr[0]=1;
12. console.log(arr);
13.
14. /*
15. *第二种
16. * 创建定长数组 new Array(5);
17. * */
18. var arr2=new Array(5);
19. arr2[0]="x";
20. arr2[4]=true;
21. console.log(arr2)
22.
23.
24. /*
25. * 第三种创建语法
26. * 创建时,直接指定元素值
27. * */
28.
29. var arr3=new
Array("asdf",10,20.3,true);

30. console.log(arr3)
31.
32.
33. /*
34. *第四种语法
35. * 相当于第三种语法的简写
36. * */
37. var arr4=["asdf",10,20.3,true];
38. console.log(arr4)
39.
40. </script>
41. </head>
42. <body>
43. </body>
44. </html>
45.
3_2 数组的元素和长度
JS 中数组元素和长度使用时的特征
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. <script type="text/javascript">
7. var arr=[11,22,33];
8. console.log(arr)
9. console.log(arr[0]);
10. console.log(arr.length)
11.
12. /*
13. * JS 中的数组是可以通过修改 length 属性
来改变数组长度的
14. * */
15. arr.length=5;
16. console.log(arr)
17. /*
18. * JS 的数组可以通过索引改变数组的长度
19. * */
20. arr[9]=99;

21.
console.log(arr);
22.
23. </script>
24. </head>
25. <body>
26. </body>
27. </html>
3_3 数组的遍历方式
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. <script>
7. var arr=[5,7,3,1,6,2,4,9,8];
8. /*
9. * 普通 for 循环遍历数组
10. * */
11. for(var
i=0;i<arr.length;i++){
12. console.log(arr[i])
13. }
14.
15. /*
16. *foreach 循环遍历数组
17. * JS 中 foreach 写法为 for( var i in 数
组)
18. * i 不是元素是索引
19. * */
20. for (var i in arr){
21. console.log(arr[i])
22. }
23.
24. </script>

25. </head>
26. <body>
27. </body>
28. </html>
3_4 数组的常用方法
数组的常用方法
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. <script>
7. var arr=[1,2,3,4,5,6,7,8,9];
8. var index =arr.indexOf(7);//查询元素索引
的方法
9. console.log(index)
10.
11. // 合并两个数组
12. var hege = ["Cecilie", "Lone"];
13. var stale = ["Emil", "Tobias", "Linus"];
14. var children = hege.concat(stale);
15. console.log(children)
16.
17. // 合并三个数组
18. var parents = ["Jani", "Tove"];
19. var brothers = ["Stale", "Kai Jim",
"Borge"];
20. var children = ["Cecilie", "Lone"];
21. var family = parents.concat(brothers,
children);
22. console.log(family)
23.
24.
25. // 合并字符串

26. var fruits = ["Banana", "Orange",
"Apple", "Mango"];
27. var fs =fruits.join();
28. console.log(fs)
29.
30.
31. // 移除最后一个元素
32. var fruit=fruits.pop();
33. console.log(fruits)
34. console.log(fruit)
35.
36. // 想结尾增加元素
37. fruits.push("Grape");
38. console.log(fruits)
39.
40.
41. //反转数组
42. fruits.reverse();
43. console.log(fruits)
44.
45. //删除数组第一个元素
46. var ss =fruits.shift();
47. console.log(fruits);
48. console.log(ss)
49.
50. //向第一个位置添加元素
51. fruits.unshift("火龙果");
52. console.log(fruits);
53.
54. // 截取子数组从哪个索引开始,到哪个索
引结束包头不包尾
55.
56. var citrus = fruits.slice(1,3);
57. console.log(citrus)
58.
59. var numbers =[1,2,3,4,5,6,7,8,9]
60. /*
61. * 删除数组中的某些元素
62. * 2 从哪个索引开始删除
63. * 3 删除多个少个元素
64. * */
65. /*numbers.splice(2,3);
66. console.log(numbers)*/
67. /*

68. * 如果第二个参数是 0 那么就变成了在指
定索引位置增加元素
69. * */
70. numbers.splice(2,0,100);
71. console.log(numbers)
72. </script>
73. </head>
74. <body>
75. </body>
76. </html>
77.
数组元素的排序
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. <script>
7. var fruits = ["Banana", "Orange",
"Apple", "Mango"];
8. fruits.sort();
9. console.log(fruits)
10.
11. var numbers=[5,7,9,6,1,8,3,4,2];
12. numbers.sort(function(a,b){return
b-a});
13. console.log(numbers)
14.
15.
16.
17. </script>
18. </head>
19. <body>
20. </body>
21. </html>

4_JS 中的对象
4_1JS 中的常用对象
JS 中的常用对象
JS 基于对象的脚本语言 ,有类和对象,但是没有封装,继承,多态,Java script
中有一些浏览器直接识别并使用的对象,常见的对象有 Array,String 对象,Math
对象,Number 对象,Date 对象等等.
String 和 java 中的 String 很类似,的常用方法
方法
方法描述
charAt() 返回在指定位置的字符。
charCodeAt()

返回在指定的位置的字符的 Unicode 编码。
concat() 连接两个或更多字符串，并返回新的字符串。
fromCharCode() 将 Unicode 编码转为字符。
indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
includes() 查找字符串中是否包含指定的子字符串。
lastIndexOf()
从后向前搜索字符串，并从起始位置（0）开始计算返
回字符串最后出现的位置。
match()
查找找到一个或多个正则表达式的匹配。

repeat() 复制字符串指定次数，并将它们连接在一起返回。
replace()
在字符串中查找匹配的子串，并替换与正则表达式匹
配的子串。
search() 查找与正则表达式相匹配的值。
slice()
提取字符串的片断，并在新的字符串中返回被提取的部
分。
split() 把字符串分割为字符串数组。
startsWith()
查看字符串是否以指定的子字符串开头。

substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
trim() 去除字符串两边的空白
toLocaleLowerCase() 根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase(

) 根据本地主机的语言环境把字符串转换为大写。
valueOf() 返回某个字符串对象的原始值。
toString()
返回一个字符串。

6_BOM 编程学习
6_1 认识 BOM 和 DOM
认识 BOM 和 DOM
什么是 BOM
BOM 是 Browser Object Model 的简写，即浏览器对象模型。
BOM 有一系列对象组成，是访问、控制、修改浏览器的属性的方法
BOM 没有统一的标准(每种客户端都可以自定标准)。
BOM 的顶层是 window 对象
什么是 DOM
DOM 是 Document Object Model 的简写，即文档对象模型。
DOM 用于 XHTML、XML 文档的应用程序接口(API)。
DOM 提供一种结构化的文档描述方式，从而使 HTML 内容使用结构化的方式
显示。
DOM 由一系列对象组成，是访问、检索、修改 XHTML 文档内容与结构的标准
方法。
DOM 标准是由 w3c 制定与维护。DOM 是跨平台与跨语言的。
DOM 的顶层是 document 对象

DOM 和 BOM 的关系
红色框内是归 DOM，绿色框内归 BOM；也可以说 DOM 也是归 BOM 管的
BOM 编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属
性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出...行为
DOM 编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个
对象中有很多关于操作文档的一些属性和方法,访问这些属性和方法的时候,我们
就可以通过代码动态控制页面上显示的内容
BOM 是为了操作浏览器出现的 API，window 是其根对象。
DOM 是为了操作文档出现的 API，document 是其根对象。

window 对象及常用方法
什么是 window 对象
Window 对象描述
Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗
口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表
达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，
可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而
不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使
用，如只写 alert()，而不必写 Window.alert()。
除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定
义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的
都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使
用这两个属性。除了这两个属性之外，parent 属性、top 属性以及 frame[] 数
组都引用了与当前 Window 对象相关的其他 Window 对象。

什么是 DOM 编程

简单来说:DOM 编程就是使用 document 对象的 API 完成对网页 HTML 文
档进行动态修改,以实现网页数据和样式动态变化效果的编程.
什么是 document
document 对象代表整个 html 文档，可用来访问页面中的所有元素，是最
复杂的一个 dom 对象，可以说是学习好 dom 编程的关键所在。
document 对象如何获取
document 对象是 window 对象的一个成员属性，通过 window.document
来访问，当然也可以直接使用 document,根据 HTML 代码结构特点,document
对象本身是一种树形结构的文档对象。

DOM 节点分类 node
结点对象:Node,document 对象中的每一个分支点都是一个 node 对象,它

有三个子类
元素节点 Element 如:<a href="链接地址">我的链接</a>
属性节点 Attribute 如:href="链接地址"
文本节点 Text 如:我的链接
DOM 操作的内容
1.查询元素（获取元素,进而操作元素,或者元素的属性,文本）
2.操作文本
3.操作属性
4.操作元素
5.操作 CSS 样式（一个特殊的属性 style）
实例代码分析