几点注意:
- Javascript不用写分号,写也可以。
- script标签按标准应该写在<head></head>里面或者</body>前面,如果写在</body>后面,浏览器会自动改到里面,使用上不会有影响(不会解决任何bug)。
- var特点:声明前置(预解析)——无论在前后哪里声明,都会放在最前面,声明函数的时候好用;无视低级作用域——只被函数作用域限制。ES6的let可以解决这些问题。
ES6
- let局部变量
- "${value}":字符串中使用这个可以代表嵌入变量,代替之前的""+value+"".
- 箭头函数:
var func = (para) => {}
函数体可用常规的也可以直接写返回值 - 面向对象——类
// 本质上还是一个function,继承用extends
class Person extends Animal{
// 静态成员
static str = "静态数据"
// 构造函数,可省略
constructor(name){
// 子类要在此加一个super,可以拿到父类包括静态的所有成员,也可用传参
super(name)
// 用this代表实例对象的成员,可以在此写函数
this.name = name
}
// 方法,放在原型上面(__proto__),公用空间,相当于静态
action(){
// 可以先执行父类的成员方法
super.action()
console.log(this.name)
}
}
简单输出:
- 弹窗:
alert("str"+value);
- 文档内:
document.write("Hello World!"+value);
- 控制台
console.log('')
Switch 语句
请使用 switch语句来选择多个需被执行的代码块之一。
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
重要数据结构
字符串
字符串字面量(直接量):
var str1 = '123abc'
字符串变量类型本身不含方法,但可以直接使用方法,因为使用的是字符串对象的方法(包装方法)。
字符串对象:
var str2 = new String('123abc')
是一种类似数组,属性和方法与数组类似,但比数组少一些方法。
console.log(str1,str2)
通过输出可以看到,str1就是一个字符串,str2更像数组。二者都可以像数组一样用str[index]
取其中的元素,也可以用str.charAt(index=0)
兼容IE8以下。
字符串变量和字符串对象用法基本一样,平时使用不推荐用字符串对象。
字符串比较:
var c1 = '中'
var c2 = '文'
console.log(c1 > c2)
比较的是unicode
字符串方法 | 描述 |
---|---|
str.charCodeAt(index=0) | 查看unicode值 |
String.fromCharcode(unicode1,unicode2) | 参数是unicode码,可以放多个 |
str.indexOf(str0[,index]) | 查找是否有对应的字符串str0,如果有返回第一次出现的索引值;如果没有返回-1。可选参数index,查找起点 |
str.lastIndexOf(str0[,index]) | 同上,从后往前查找 |
数组
虽然叫array,但功能很多,可以储存多种类型的变量,相当于list,也可以叫列表
新建数组:
var infos = new Array();(不推荐)
或者
var infos = []
数组长度
arr.length
数组方法[1]
常用:
![](https://img.haomeiwen.com/i13018298/ba529e742fbc47a1.png)
数组属性,返回
查找
arr.indexOf(item[,startIndex])
从左往右查找item,找到返回第一次出现的索引,找不到返回-1。从startIndex开始查找,如果不填就是0.
数组连接
arrayObject.concat(arrayX,......)
连接两个或多个数组。
- arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。添加的是数组中的元素,而不是数组。
数组切片
arrayObject.slice(start,end)
数组切片.返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。原来的数组不改变。
- start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
- end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。 如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
添加/移除
arrayObject.splice(startIndex[,howmany,item1,.....,itemX])
数组元素添加/移除。可删除从 startIndex 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
- index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
- howmany 可选。要删除的项目数量。如果不设置此值,则从index处删除后面的所有。如果设置为 0,则不会删除项目。
- item1, ..., itemX 可选。向数组startIndex的位置添加的新元素。
ES6和数组
ES6的展开运算符写成...
的形式,可以用于数组复制和类数组转化数组。
var arr1 = [1,2,3]; //如果arr是类数组也可以
var arr2 = [...arr]; //ES6的展开运算符(性能稍高)
var arr2 = Array.from(arr); //ES6
如果直接把旧数组赋值给新数组,只会将引用传递过去,这样改变新数组时旧数组的内容也会变。
类数组缺少一些数组的方法,如果要使用那些方法,要先用上面的方式转化成数组。
JS类型转换
ECMAScript中可用的3种强制类型转换如下:
- Boolean(value)——把给定的值转换成Boolean型;
- Number(value)——把给定的值转换成数字(可以是整数或浮点数);
- String(value)——把给定的值转换成字符串。
字符串转数字:
方案一代码: Number(str)
方案二代码: parseInt(str)
和parseFloat()
第二个方法有两个参数,第一个参数就是要转换的对象,第二个参数是进制基数。不写默认十进制。
注意: parseInt方法在 '00'开头的数字是会当做2进制转10进制的方法进行转换('0x'开头是16进制,'0'开头是8进制)。所以建议string转int类型最好用Number方法;
数字转换成字符串
方案一代码:String(value)
方案二代码:
var i = 10;
var s = i.toString();
alert(typeof s); //将输出 String
字符串(json)与对象的转换
var obj = JSON.parse(str)
var str = JSON.stringify(obj)
对象
判断对象中是否有某个键
- myObj.hasOwnProperty('myKey');
- if ('key' in myObj)
获得对象的键数组或值数组:
Object.keys(myObj)
Object.values(myObj)
获得对象的长度大小
Object.keys(myObj).length
删除一个键值对
- delete myObj.myKey
- delete myObj[myKey]
通信
上传文件
在网页中,从本地目录添加
<!-- 添加 s -->
<!-- [ATTENTION!!] 切换 .on -->
<div data-action="upload" >
<input id="_upload_html5_input"
name="file"
type="file"
multiple="multiple"
aria-label="上传文件,按空格选择文件。"
style="display: none;" />
<label for="_upload_html5_input">
<span class="btn btn-l btn-upload">
<img src="文件按钮.jpg" width="103" height="73" alt=""/>
</span>
</label>
<pre>菜单</pre>
</div>
AJAX
共分为四个步骤:
- XMLHttpRequest对象的创建
- 开启请求
- 返回数据后程序行为的绑定
- 发送
步骤一、三:
let xhr=new XMLHttpRequest(); // 创建对象
xhr.onreadystatechange=function(){ // 行为的绑定,onreadystatechange这个方法每次状态改变都调用
if (xhr.readyState==4 && xhr.status==200)
{ // 判断当前状态是服务器响应成功,则修改UI
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.onload = () => { // 行为的绑定的另一种形式,只在服务器响应成功后调用
console.log(xhr.responseText)
}
步骤二、四:
- GET请求,如果希望通过 GET 方法发送信息,则向 URL 添加信息(query string或者直接带参数):
xhr.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xhr.send()
open()中的最后一个参数写true代表同步,false代表异步。
- POST请求,如果需要像 HTML 表单那样 POST 数据,使用 setRequestHeader() 来添加 HTTP 头,然后在 send() 方法中规定希望发送的数据:
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");
setRequestHeader表示向HTTP协议头中添加信息,以上代码意味着添加一条CONTENT-TYPE:application/x-www-form-urlencoded
,含义是表示客户端提交给服务器文本内容的编码方式是URL编码,即除了标准字符外,每字节以双字节16进制前加个“%”表示。当然还有其他编码方式,如:CONTENT-TYPE:multipart/form-data
可以通过表单上传文件图片等。
一个使用例子:
let xhr = new XMLHttpRequest()
xhr.open('get','/check?username=123','true') // true同步,false异步
xhr.onload = () => {
console.log(xhr.responseText)
}
xhr.send()
form表单用Ajax提交数据
正常情况下form表单不能通过Ajax提交数据,因为其有自动提交自动跳转的功能。有一个方法可以取消自动提交和跳转,改为手动使用Ajax,等返回成功信息后再跳转。
<form>
姓名:<input class="inputStyle" type="text" name="username" /><br />
密码:<input class="inputStyle" type="password" name="pwd" /><br />
<input class="loginStyle" type="submit" value="登录" />
</form>
// 使用form.onsubmit,不要使用form.submit
form.onsubmit = (ev) => {
console.log(form[0].value,form[1].value)
let xhr = new XMLHttpRequest()
xhr.open('post','/login')
xhr.onload = () => {
const res = JSON.parse(xhr.response);
console.log(res);
if(res.message='success'){
// 如果正常收到了信息,再使用location.href跳转
location.href = '/photo.html'
}else{
console.log("err")
}
}
xhr.setRequestHeader("content-type", "application/json");
xhr.send(JSON.stringify({
username:form[0].value,
password:form[1].value
}))
// 让form的onsubmit返回false,可以取消自动提交和跳转
return false
}
网友评论