JavaScript 入门
JavaScript 是一门独立的语言，与JAVA没有任何关系，浏览器自带JS解释器
JavaScript代码存在形式：
1.可以在html的<head>或<body>中 , 为了增加网页的友好度，让用户先看到内容，再看到动态效果，若先加载js可能需要时间等待。因此最好将JS 放置在 <body>标签内部的最下方，先让静态页面加载出来
<script>
// javascript代码
</script> 或
<script type="text/javascript"> // 默认就是text/javascript，可不写
// javascript代码
</script>
2. 引入js文件
<script src="path/xxx.js"></script>
举个简单的栗子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="user" > <input type="button" onclick="GetData();" value="点击" /> <script> function GetData(){ var i = document.getElementById('user'); alert(i.value); } </script> </body> </html>
注释：
单行注释 //
多行注释 /* */
写Js代码：
1、在html 文件中 (注意养成好习惯后面加分号)
2、临时，浏览器的终端，在console中输入{} ，按shift+enter换行
变量
name='xxx' #默认全局变量
var name='xxx' #局部变量
注：声明变量时建议养成习惯前面加var,因为全局变量较少，如斟酌后确需声明全局变量再将var移除
<script> name='abc'; // 全局变量 function func(){ var name='xyz'; // 局部变量 age=18; // 全局变量 } </script>
数据类型
基本数据类型：数字、字符串、数组、字典、布尔类型
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。
数字、布尔值、null、undefined、字符串不可变。
数字（Number）
age = 18
数字类型操作方法：
parseInt(..) // 将某值转换成整数，不成功则NaN parseFloat(..) // 将某值转换成浮点数，不成功则NaN NaN 表示非数字。可使用 isNaN(num) 来判断。 Math.abs( ) // 计算绝对值。 Math.max( ) // 返回两个数中较大的一个。 Math.min( ) // 返回两个数中较小的一个。 Math.random( ) // 计算一个随机数。
布尔类型（Boolean） ： true & false (注意小写)
字符串（String）
字符串是由字符组成
str = 'abc'
字符串常用操作方法：
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) 分割 obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效) obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。 obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本; $$：直接量$符号;
数组
a = [11,22,'a','b']
数组常用操作方法：
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( ) 对数组元素进行排序
字典
a = {'k1':'v1','k2':'v2'}
条件语句
if 语句
if(条件){ ... }else if(条件){ ... }else{ ... }
条件判断有：
== 值相等 if 1=='1' 结果为true
!= 值不相等
=== 值和类型都相等
!== 不相等
如：if 1==='1' 结果为false
&& and
|| or
switch 语句（在python中没有，其他语言一般没有）
name='1' switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; }
循环语句
for 循环
语法一： a = [11,22,33,44] for(var item in a){ console.log(a[item]); } a = {'k1':'v1','k2':'v2'} for(var item in a){ console.log(a[item]); } 语法二：（不支持字典的循环，字典无序） for(var i=0;i<10;i=i+1){ ... } a = [11,22,33,44] for(var i=0;i<a.length;i=i+1){ ... }
while 循环
while(条件){ // break; // continue; }
序列化
JSON.stringify() 将对象转化为字符串
> arr=[1,2,3,4]
> JSON.stringify(arr)
< "[1,2,3,4]"
JSON.parse() 将字符串转换回对象类型
> str=JSON.stringify(arr)
> JSON.parse(str)
< [1, 2, 3, 4]
转义
encodeURI()
decodeURI()
decodeURIComponent()
encodeURIComponent()
> url="https://www.sogou.com/web?query=中文"
> encodeURI(url)
< "https://www.sogou.com/web?query=%E4%B8%AD%E6%96%87"
> newurl= "https://www.sogou.com/web?query=%E4%B8%AD%E6%96%87"
> decodeURI(newurl)
< "https://www.sogou.com/web?query=中文"
> url="https://www.sogou.com/web?query=中文"
> encodeURIComponent(url)
< "https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E4%B8%AD%E6%96%87"
> url= "https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E4%B8%AD%E6%96%87"
> decodeURIComponent(url)
< "https://www.sogou.com/web?query=中文"
应用：http 是短连接，客户端第一次请求时，服务器端将数据发往客户端，客户端先将数据经过转义后，再保存在cookie，客户端下次请求时携带cookie。爬虫
示例：自动登陆抽屉网站并点赞
#/usr/bin/pyenv import requests # 1、首先登陆任何页面，获取cookie i1 = requests.get(url= "http://dig.chouti.com/help/service") # 2、用户登陆，携带上一次的cookie，后台对cookie中的 gpsd 进行授权 i2 = requests.post( url= "http://dig.chouti.com/login", data= { 'phone': "86手机号", 'password': "密码", 'oneMonth': "" }, cookies = i1.cookies.get_dict() ) # 3、点赞（只需要携带已经被授权的gpsd即可） gpsd = i1.cookies.get_dict()['gpsd'] i3 = requests.post( url="http://dig.chouti.com/link/vote?linksId=8589523", cookies={'gpsd': gpsd} ) print(i3.text)
eval
在python中
val=eval(表达式) #有返回值， 如 '1+1'
exec(执行代码) #无返回值, 如for循环
str='1+1'
val=eval(str)
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。 即eval里即可以是表达式也可以执行代码
时间
python中有time模块获取时间
JS中需要有一个Date对象，使用Date()创建
var d = new Date() // 必须加new表示创建一个Date对象
d.getxxx() // 获取当前时间点的某个值，如年月日时分秒
d.setxxx() // 设置时间
正则表达式
正则本质上做两件事：
1、检测内容是否存在
2、提取文本内容
定义正则表达式
- /.../ 用于定义正则表达式，JS正则使用 / /符号扩起，其他语言中使用引号
- /.../g 表示全局匹配
- /.../i 表示不区分大小写
- /.../m 表示多行匹配
test - 判断字符串是否符合规定的正则
> rep = /\d+/; // 创建一个正则表达式对象
> rep.test("asdfoiklfasdf89asdfasdf")
< true
> rep = /^\d+$/;
> rep.test("asdfoiklfasdf89asdfasdf")
< false
exec - 获取匹配的数据
> rep = /\d+/;
> str = "asdf1234qwer5678"
> rep.exec(str)
< ["1234"] // 默认只获取第一个，不管执行几次
分组 (一级匹配 => 二级匹配)：
> var test="JavaScript is more fun than Java or JavaBeans!"
> var pattern = /\bJava(\w*)\b/;
> pattern.exec(text)
< ["JavaScript", "Script"]
全局匹配：
> var test="JavaScript is more fun than Java or JavaBeans!"
> var pattern = /\bJava\w*\b/g;
> pattern.exec(text)
< ["JavaScript"]
> pattern.exec(text)
< ["Java"]
> pattern.exec(text)
< ["JavaBeans"]
> pattern.exec(text)
< null
> pattern.exec(text) // 类似迭代器
< ["JavaScript"]
> var test="JavaScript is more fun than Java or JavaBeans!"
> var pattern = /\bJava(\w*)\b/g;
> pattern.exec(text)
< ["JavaScript",'Script']
> pattern.exec(text)
< ["Java", ""]
> pattern.exec(text)
< ["JavaBeans", "Beans"]
> pattern.exec(text)
< null
多行匹配：默认就是多行匹配，m模式也会使用^$来匹配换行的内容
> text="JavaScript is more fun than \n Java or JavaBeans!"
> var pattern = /^Java(\w*)/g;
> pattern.exec(text)
< ["JavaScript",'Script']
< null
> var pattern = /^Java(\w*)/gm;
> pattern.exec(text)
< ["JavaScript",'Script']
< ["Java", ""]
< null
《JavaScript中的CSS属性对照表》
浙公网安备 33010602011771号