JavaScript基础
# 1. 语法
js没有严格的数据类型区别,它是弱类型语言,js对大小写是敏感的。
js行注释用//
//注释
function(){
alert("Hello World!");
}
2
3
4
js中主要的类型有:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined) 但是这些类型都是js动态拥有的。js中一条语句结束以分号结束;
# 2. 数据类型
String类型:js中定义字符串使用双引号或者单引号,一般使用双引号。
var str = "Hello World!;"
Number类型
var num = 23.2;
Boolean类型
true
false
Array类型(如下为字面量定义方式)
var array = [1,2,3,4];
Object类型(如下为字面量定义方式)
var obj = {name:'lee',age:23};
Null 表示值为空,undefined是指该值为被定义。
# 3. 变量的定义
js中变量定义通常使用var
关键词定义
变量定义,在方法外定义声明的变量为全局变量属于window对象,方法类定义的变量属于方法本身,是局部变量。
//变量
var = "Hello";
2
在js中,变量的声明会自动提升。变量可以先使用,在定义。如下var x
其实已经提升到匿名函数前面了,但是js的变量初始化是不能被提升的。
x = 23;
function(x){
return x;
}
var x;
2
3
4
5
变量的生命周期,当变量被初始化如 var name='Jack';变量的生命周期开始。局部变量,方法执行结束后,局部变量被销毁。全局变量,窗口关闭否,全局变量被销毁。默认,不是用var 定义变量,默认为全局变量。
var name = 'Lee';
function test() {
var name = "Jack";
console.warn(name);
};
test();
//debugger;debugger断点调试
console.log("信息:" + name);
2
3
4
5
6
7
8
# 4. JS 几种定义变量的方式
//var定义的变量可以修改,如果不初始化会输出undefined,不会报错。
var aaa;
console.log(aaa);
// const定义的变量不可以修改,而且必须初始化 ,在其他任何地方修改都无效
const bbb = 090;
// 无法输出
// bb = 22
console.log(bbb)
//let是块级作用域,函数内部使用let定义后,对函数外部无影响。只在块级作用域有效,其他任何地方赋值都不影响该变量
let ccc;
console.log(ccc)
2
3
4
5
6
7
8
9
10
11
12
13
# 5. 对象
其实在js中一切皆对象。本身js就是基于面向对象的。 对象的创建有很多种方式,如下:
//使用Object对象创建
var obj = new Object();
obj.name = "Lee";
obj.age = 23;//js中访问对象中属性用.操作符或者["name"]来访问。
//字面量方式创建
var obj2 = {
name:"Lee",//这里是逗号
age:23//最后一个属性,没有逗号
}
//构造函数方式创建
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
//使用
var myFather=new person("John","Doe",50,"blue");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Js中函数也是一种对象,函数还可以作为对象方法。
var obj ={
name:"Lee",
age:23,
eat:function(){
return "我喜欢吃饭";}
}
2
3
4
5
6
数组定义
//数组定义
//var array = new Array();
//var array = new Array(10); //长度
var array = new Array("apple", "borland", "cisco");
//数组的遍历
for(var v in array) {
console.log(array[v]);
}
var arr = [1, 2, 3];
var arr1 = [4, 5, 6];
var a = arr.concat(arr1);
console.log(a)
2
3
4
5
6
7
8
9
10
11
12
# 6. 严格模式
消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为。 若全局开启严格模式,只需在js代码首行定义字符串"use strict"。 使用注意事项
不允许使用未声明的变量 不允许删除变量或对象。var x = 3.14;delete x; 不允许删除函数。function x(p1, p2) {}; delete x; 不允许变量重名:function x(p1, p1) {}; 不允许使用八进制:var x = 010;// 报错 不允许使用转义字符:var x = \010; 不允许对只读属性赋值:var obj = {};Object.defineProperty(obj, "x", {value:0, writable:false});obj.x = 3.14; 不允许对一个使用getter方法读取的属性进行赋值var obj = {get x() {return 0} };obj.x = 3.14; 不允许删除一个不允许删除的属性:delete Object.prototype; // 报错 变量名不能使用 "eval" 字符串:var eval = 3.14; 变量名不能使用 "arguments" 字符串:var arguments = 3.14; 不允许使用以下这种语句:with (Math){x = cos(2)}; // 报错 严格模式下,许多保留字不可用implements、interface、let、package、private、protected、public、static、yield
function f() {
//严格模式下,没有指向全局对象。而是现实,undefined
return this;
}
2
3
4
5
# 7. 函数
函数定义方式如下
function fun(){
return "定义函数";
}
var fun = function(){
return "函数的定";
}
//通过JS中内置的Function定义
var myFunction = new Function("a", "b", "return a * b");
//也可以
var myFunction = function(a,b){
return a*b;//通过传递参数来实现
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
函数也可以被提升,可以在为声明之前调用,然后在生命。这js自动完成。
myFunction(5);
function myFunction(y) {
return y * y;
}
2
3
4
同时函数的自调用
(function myFunction(y) {
return y * y;
})(5);
2
3
函数的argument对象
//js中的函数可以传递很多参数,然后在函数体中通arguments对象来访问参数信息。
fun(1,2,3,4);
//当前定义的函数,属于window对象,因为它不属于任何一个变量。
function fun(){
console.log(arguments.length+"::::"+arguments.toString()+":::"+arguments[0]);
}
2
3
4
5
6
其实,在定义一个函数时,即使没有指定参数,js也会默认给隐式参数,函数的尝试一可以传很多个的。参数信息可以同过argument对象来访问。
当函数没有被自身的对象调用时, this的值就会变成全局对象。 函数作为全局对象调用,会使 this 的值成为全局对象。使用 window 对象作为一个变量容易造成程序崩溃
关于call 和applyapply 传入的是一个参数数组,也是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。 在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。 在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
//定义函数
var obj = new Function("x", "y", "return(x+y)");//这个函数里面可以传很多参数
var obj = function(x,y){return x+y;}
alert(obj(2,4));
//关于call和apply
var a = {
name:'Lee',
age:23
}
var getName = function(){
return this.name;
console.log("打印姓名:"+getName.call(a));
console.log("打印姓名:"+getName.apply(a))
var fun = function(){
return function(){
return '返回的函数';
}
}
console.log(fun()());
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
闭包
闭包就是,函数内嵌套嵌套的函数return一个值或者是暴露某一个值,然后在函数外部可以访问该值。
这里一定要注意生命周期问题。
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function() {
var flat = this;
return function() {
return flat.name;
};
}
};
alert(object.getNameFunc()());
2
3
4
5
6
7
8
9
10
11
# 8. BOM
当页面被加载时,只要打开一个窗口,便是浏览器对象模型(BOM); 在window中的对象和方法如下: screen对象
screen.width 屏幕宽度 screen.height屏幕高度 screen.availWidth 可用屏幕宽度 screen.availHeight可用屏幕高度 screen.pixelDepth色彩分辨率 screen.colorDepth色彩深度
location对象
location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 (80 或 443) location.protocol 返回所使用的 web 协议(http:// 或 https://) location.href 属性返回当前页面的 URL。
history对象
history.back() - 与在浏览器点击后退按钮相同 history.forward() - 与在浏览器中点击按钮向前相同
navigator对象
主要获取浏览器、系统、硬件有关信息。
# 9. DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。通过document对象可以改变页面的html和css的属性样式。 document对象吃常用的 screen.availHeight方法有:
doucment.getElementById(IdName);//得到页面指定的id
document.getElementByTagName(TagName)//获取指定标签素
document.getElementByClassName(ClassName);//获取HTML标签的class属性
document.getElementById(id).innerHTML=新的 HTML//改变 HTML 内容
document.getElementById(id).attribute=新属性值//改变HTML的属性
document.getElementById(id).style.property=新样式//改变HTML的样式
//document.getElementById("p2").style.color="blue";
2
3
4
5
6
7
关于DOM事件 事件,主要是用来完成HTML页面各种动作效果。 除了在标签中直接添加事件外,也可以通过addEventListene()方法
element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 removeEventListener() 方法移除由 addEventListener() element.removeEventListener("mousemove", myFunction);
element.addEventListener("click", function(){ alert("Hello World!"); });
参数useCapture是可选的,指定事件的处理方式。默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。 冒泡传递:最先触发内部事件,然后再触发外部事件。 捕获传递:最先触发外部事件,然后再触发内部事件。
如果你将<p>元素插入到 <div>元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢? 冒泡传递:<p>中的事件最被触发,然后才是<div>中的事件 捕获传递::<div>中的事件最被触发,然后才是<p>中的事件
# 10. 注意事项
- 在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的。
for (var i = 0; i < 10; i++) {
// some code
}
return i;
2
3
4
Undefined 不是 Null
在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法。对象只有被定义才有可能为 null,否则为 undefined。
定义对象、数组,最后不能添加逗号
points = [40, 100, 1, 5, 25, 10,];
websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}
2
3
== 和 === == 主要比较值是否相等,=== 全等于除了要比较值以外还要比较数据类型;
var a =20;
var b ="20";
alert(a==b);//true
alert(a===b);//false
2
3
4
href="#"与href="javascript:void(0)"的区别 #包含了一个位置信息,默认的锚是#top 也就是网页的上端。 而javascript:void(0), 仅仅表示一个死链接。 在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。 如果你要定义一个死链接请使用 javascript:void(0) 。
# 11. 全局对象
- decodeURI(pram) 函数可对 encodeURI() 函数编码过的 URI 进行解码。
- encodeURI(pram) 函数可把字符串作为 URI 进行编码。该函数对传入字符串中的所有非(基本字符、Mark字符和保留字符)进行转义编码
- encodeURIComponent(pram) 函数可把字符串作为 URI 组件进行编码。该函数对传入字符串中的所有(基本字符、Mark字符和保留字符)都进行转义编码
- decodeURIComponent(pram) 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
- escape(pram) 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
- unescape(pram) 函数可对通过 escape() 编码的字符串进行解码。
- eval(pram) 函数可计算某个字符串,并执行其中的的 JavaScript 代码。就是把解析的字符串当做js执行。
- getClass() 函数可返回一个 JavaObject 的 JavaClass,obj.getClass()
- isFinite(number) 函数用于检查其参数是否是无穷大。如果 number 是有限数字(或可转换为有限数字),那么返回 true。否则,如果 number 是 NaN(非数字),或者是正、负无穷大的数,则返回 false。
- isNaN() 函数用于检查其参数是否是非数字值。若是数字,则返回false,否则为true
- undefined 属性用于存放 JavaScript 的 undefined 值。(全局属性)
- String() 函数把对象的值转换为字符串。
- Number(obj) 函数把对象的值转换为数字。
- parseFloat(String) 函数可解析一个字符串,并返回一个浮点数。 该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。
- parseInt(string, radix) 函数可解析一个字符串,并返回一个整数。
# 12. Get与Post
- 大家都认为的标准答案
- GET在浏览器回退时是无害的,而POST会再次提交请求。
- GET产生的URL地址可以被Bookmark,而POST不可以。
- GET请求会被浏览器主动cache,而POST不会,除非手动设置。
- GET请求只能进行url编码,而POST支持多种编码方式。
- GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
- GET请求在URL中传送的参数是有长度限制的,而POST么有。
- 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
- GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。
- GET参数通过URL传递,POST放在Request body中。
- 其实答案是这样的:
- GET和POST本质上就是TCP链接,并无差别。但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中体现出一些不同。
- HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP,也就是说,GET/POST都是TCP链接。
- GET产生一个TCP数据包;POST产生两个TCP数据包。
- 对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。
# 13. 跨域解决方法
一级域名相同的情况 document.domain()
HTML标签中src属性,支持get请求,允许跨域
<script src="">
JSONP格式eval
ifram之间的交互window.postMessage()方法字符支持225字符
服务端设置CORS(安全沙箱),Access-Control-Allow-Origin:; 设置这个属性为 通配所有请求