python学习笔记16--javascript总结
一、JavaScript简介
- JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
- JavaScript 很容易学习。
二、JavaScript与HTML
JS可以用来操作HTML标签、属性、样式等等，从而实现页面的动态效果或者用户交互，使得页面对用户更加友好。
一般情况下，页面加载JS代码有两种方式：
- 写在外部js文件中
- 直接写在页面中
JS代码一般放置在html代码中body标签中最后，这样可以避免用户访问网站时加载JS时间太长导致的页面内容迟迟无法显示的问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>我就是个标题</h1> <script type="text/javascript" src="./test.js"></script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>我就是个标题</h1> <script type="text/javascript"> alert("这是一段JavaScript代码!"); </script> </body> </html>
三、JavaScript基础
1、变量
全局变量 变量名 = '变量值';
局部变量 var 变量名 = '变量值';
定义JS变量时，加上关键字var表示定义局部变量，不加则表示全局变量，为了防止变量冲突，除非明确需要全局变量，否则声明变量时都应该使用var关键字。JS代码中，所有语句都应该用分号结尾。
2、注释
// 单行注释
/*...*/ 多行注释
3、基本数据类型
数字类型
字符串类型，字符串类型有如下方法：
obj.length 返回字符串长度 obj.trim() 移除字符串中的空白 obj.trimLeft() 移除字符串左边的空白 obj.trimRight) 移除字符串右边的空白 obj.charAt(n) 返回字符串中的第n个字符 obj.concat(value, ...) 字符串拼接 obj.indexOf(substring,start) 返回子序列位置 obj.lastIndexOf(substring,start) 返回子序列位置 obj.substring(from, to) 根据索引获取子序列 obj.slice(start, end) 切片 obj.toLowerCase() 大写 obj.toUpperCase() 小写 obj.split(delimiter, limit) 分割，delimiter表示分隔符，limit表示分隔后显示的最多项 obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效) obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。 obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本 $$：直接量$符号
数组类型
数组类型类似于python中的列表，表示方法也相同。数组类型有如下方法：
obj.length 数组的大小 obj.push(ele) 尾部追加元素 obj.pop() 尾部获取一个元素 obj.unshift(ele) 头部插入元素 obj.shift() 头部移除元素 obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 obj.splice(n,0,val) 指定位置插入元素 obj.splice(n,1,val) 指定位置替换元素 obj.splice(n,1) 指定位置删除元素 obj.slice( ) 切片 obj.reverse( ) 反转 obj.join(sep) 将数组元素连接起来以构建一个字符串 obj.concat(val,..) 连接数组 obj.sort( ) 对数组元素进行排序
l1 = [1,2,3,4,5] Array [ 1, 2, 3, 4, 5 ] l1.splice(2,0,9) Array [ ] l1 Array [ 1, 2, 9, 3, 4, 5 ] l1.splice(2,1) Array [ 9 ] l1 Array [ 1, 2, 3, 4, 5 ] l1.splice(2,1,8) Array [ 3 ] l1 Array [ 1, 2, 8, 4, 5 ]
布尔类型
true
flase
字典类型
JS中的字典类型类似于python中的字典
4、运算符
JS中运算符与python中运算符类似，但又有一些不同的运算符：
==：两个等号表示左右值相同就相同，与值的类型无关
===：三个等号表示左右值和值的类型都相同才相同，否则不同
!=:左右两边值不相同就不等。
!==：左右两边值或类型不同才不等
&&：逻辑与运算符，与python中and相同
||：逻辑或运算符，与python中or相同
5、流程控制
循环
for循环，JS中for循环有两种写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var l1 = ["a","b","c","d","e"];
/* 第一种for循环写法 */
for(var item in l1){
console.log(item);
}
/* 第二种for循环写法 */
for(var i=0;i<l1.length;i++){
console.log(l1[i]);
}
</script>
</body>
</html>
执行结果：
[Log] 0 (for_JS.html, line 11)
[Log] 1 (for_JS.html, line 11)
[Log] 2 (for_JS.html, line 11)
[Log] 3 (for_JS.html, line 11)
[Log] 4 (for_JS.html, line 11)
[Log] a (for_JS.html, line 15)
[Log] b (for_JS.html, line 15)
[Log] c (for_JS.html, line 15)
[Log] d (for_JS.html, line 15)
[Log] e (for_JS.html, line 15)
从上述结果我们可以看出，for循环并没有循环数组的值，而是循环了数组的索引值，这一点和python是有区别的。
while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var item = 10;
var i = 0;
while( i < item) {
console.log("This is " + i );
i++;
}
</script>
</body>
</html>
执行结果：
[Log] This is 0 (while_js.html, line 12)
[Log] This is 1 (while_js.html, line 12)
[Log] This is 2 (while_js.html, line 12)
[Log] This is 3 (while_js.html, line 12)
[Log] This is 4 (while_js.html, line 12)
[Log] This is 5 (while_js.html, line 12)
[Log] This is 6 (while_js.html, line 12)
[Log] This is 7 (while_js.html, line 12)
[Log] This is 8 (while_js.html, line 12)
[Log] This is 9 (while_js.html, line 12)
switch case选择结构
switch结构在python中没有，其类似于多条件判断，当判断满足其中一条条件时执行该条件下的代码块，如果没有满足的条件，则执行“default”下的代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var item = "alert";
switch(item) {
case 'console':
console.log(item);
break;
case 'alert':
alert(item);
break;
default:
alert("No!");
}
</script>
</body>
</html>
在该结构中，每一个case条件中的代码块最后都要写一句break语句，让该结构终止。否则，代码会从匹配到的case项开始，执行其下其他case项中的代码。
判断
if (条件一){
代码块;
}else if (条件二){
代码块;
}else {
代码块;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var item = "198";
if (item<4){
console.log("Less then number!");
}else if (item>=4 && item<10){
console.log("Great then number!");
}else {
console.log("Too large!");
}
</script>
</body>
</html>
6、函数
JS中常用的函数有：普通函数，匿名函数，自执行函数
函数定义：
function 函数名(形参1,形参2,...) {
函数体
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/* 普通函数 */
function fun1(name,age){
console.log(name + ":" + age);
}
/* 调用普通函数 */
fun1("李四",33);
/* 匿名函数 */
setInterval(function () {alert(23333)},5000);
/* 自执行函数 */
(function (name) {alert(name)})("zhangsan")
</script>
</body>
</html>
