js基础知识总结

一、js的简介

        js(JavaScript的缩写) 是 Web 脚本语言，可用于 HTML 和 web。可在web中增加设计效果，校验表单，辨别浏览器，建立cookies等，可适用不同的主流浏览器。

二、js的基础知识

1.js的引入html的两种方式

(1).直接写在html中，要写在<script> 与 </script> 标签之间。

可写在head中，确保函数被调用前已经加载完成
也可写在body中，脚本将伴随着页面一起加载

(2).也可以把脚本保存到外部文件中。通常被多个网页使用的代码。

2.js的语言基础

(1).变量

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值。
如：var x=5;           (须以字母或$ 和 _ 符号开头，大小写敏感)

(2).数据类型

6种;String、Number、Boolean、Object、Null、Undefined

typeof返回的是字符串有六种可能:"number","string","boolean","object","function","undefined"
var x;               // x 为 undefined
var x = 5;           //  x 为数字
var x = "John";      // x 为字符串
var x = null;   // x 为null  ，表示一个空对象引用
var x = “true”;   // x 为Boolean

1).js的数组

创建数组：
var myCars=new Array();  myCars[0]="Saab";    myCars[1]="Volvo";
var myCars=new Array("Saab","Volvo","BMW");
var myCars=["Saab","Volvo","BMW"];
访问数组：var name=myCars[0];  myCars[0]="Opel";
     所有的JavaScript变量都是对象。一个数组中可包含对象元素、函数、数组.


常用的方法：
concat()合并数组               reverse()反转                         tostring()转换成字符串
push()末尾添加新元素     pop()删除最后一个元素     shift()删除第一个元素
         sort()排升序                         slice()截取元素                      unshift()开头添加新元素
join()用数组的元素组成字符串

2).js的对象

创建对象
var dog= {name : 'Tom', age : 21 , eat : function(){  }    }

3).字符串

var dog= “shenmojiahuo”;           
dog[2]:取第三个元素,下标从0开始
var lenth= dog.lenth;      字符串的长度
转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。
字符串常用的方法有：
方法                   描述
charAt() 返回指定索引位置的字符
valueOf() 返回某个字符串对象的原始值

concat()                连接两个或多个字符串，返回连接后的字符串

indexOf() 返回字符串中检索指定字符第一次出现的位置

lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置

match()                找到一个或多个正则表达式的匹配

replace()                替换与正则表达式匹配的子串

search()                检索与正则表达式相匹配的值

slice()                提取字符串的片断

split()               把字符串分割为子字符串数组

substr()               从起始索引号提取字符串中指定数目的字符

substring() 提取字符串中两个指定的索引号之间的字符

toLowerCase() 把字符串转换为小写

toString() 返回字符串对象值

toUpperCase() 把字符串转换为大写

trim()                移除字符串首尾空白

4).js的数据类型的转换

    typeof 操作符，用来检测变量的类型
typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object
null与undefined的区别
null 和 underfined 的值相等，但类型不等：
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

  注意
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
js类型转换的方法
String()  把其他类型转换成字符串，toString() 也是有同样的效果
Number() 可以将字符串，日期，boolean转换为数字。
Date() 返回时间的字符串。
自动转换类型：
5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5

(3).js的运算符

+    -    *    /    %    ++    --   =    +=    -=    *=    /=    %=    >    <    >=    <= 
逻辑运算符 
&&    (x < 10 && y > 1) 为 true
||      (x==5 || y==5) 为 false
!        !(x==y) 为 true
条件运算符
variablename=(condition)?value1:value2 
比较
==      表示值相等即可
===    值和类型均要相等

(4).js的方法

方法的定义
function functionname(var1,var2){执行代码}
方法内部声明的变量叫局部变量，作用域在方法中
方法外部声明的变量叫全局变量
局部变量在方法执行完毕后销毁。
全局变量在页面关闭后销毁。
var x = function (a, b) {return a * b};
var z = x(4, 3);

(5).js的事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。


事件                              描述
onchange()            HTML 元素改变
onclick()            用户点击 HTML 元素
onmouseover()            用户在一个HTML元素上移动鼠标
onmouseout ()            用户从一个HTML元素上移开鼠标
onkeydown()            用户按下键盘按键
onload()            浏览器已完成页面的加载

(6).js的语句

条件语句
if(){} 
if(){}else if(){}
switch(n){case 1: 语句1 break;  .......deafult:}
循环语句
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
            break 语句用于跳出循环。continue 用于跳过一次循环。

(7).js的正则表达式

语法：/正则表达式主体/修饰符(可选); 例如：var patt = /runoob/i;
js中正则表达式通常用于两个字符串的方法：search()和replace()
search()用于检测与正则表达式想匹配的值
replace()用于替换和正则表达式相匹配的值
var str = "wangjie goodman!"; 
var n = str.search(/good/i);   n的结果是8;
var txt = str.replace(/good/i,"bad");  则：txt是"wangjie badman!";
在 js中，RegExp 对象的方法。
test() 用于检测一个字符串是否匹配某个模式。
exec() 用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。未匹配，则返回null。
var patt = /e/;  
patt.test("The best things in life are free!");     结果为true
patt.exec("The best things in life are free!");    结果是“e”

(8).js的错误及调试

错误的处理
try { //代码} catch(err) { //处理错误}
trow语句抛出异常
调试
console.log() //在控制台打印
设置断点
谷歌浏览器按F12键
惠而浦app开发的项目的调试一般用gapdebug工具

(9).json

JSON 是用于存储和传输数据的格式，是一个文本。
JSON 通常用于服务端向网页传递数据 ，可被任何语言读取及作为数据格式传递。。
一般格式：var sha={"sites":[
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}
var obj=JSON.parse(sha);  //把json转换成js对象
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

 3.js的输出

JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

4.js的严格模式

"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增，在 JavaScript 旧版本中会被忽略。
严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。
严格模式下你不能使用未声明的变量。
"use strict";
x = 3.14;       // 报错 (x 未定义)

三、js的dom操作

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 HTML DOM，可访问 HTML 文档的所有元素。
访问html元素的三种方式：
var x=document.getElementById("intro");//通过id
var x=document.getElementById("main");//通过标签
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");//通过类名

1.如何改变html的内容 及属性(innerHTML)？

（1）改变 HTML 内容

    document.getElementById(id).innerHTML=新的 HTML

（2）改变 HTML 属性

    document.getElementById(id).attribute=新属性值
                  document.getElementById("image").src="landscape.jpg";

2.如何改变 HTML 元素的样式 (CSS)？

document.getElementById(id).style.property=新样式;
 document.getElementById("p2").style.color="blue";
<button type="button" 
οnclick="document.getElementById('id1').style.color='red'">
</button>

3.如何添加事件？

addEventListener()用于向指定元素添加事件句柄。removeEventListener() 移除
      例：document.getElementById("myBtn").addEventListener("click", displayDate);
语法：element.addEventListener(event, function, useCapture);
event：事件；如：mouseover、click、mouseout，无前缀
function方法；
useCapture：布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
事件传递的两种方式
冒泡：子元素的事件先触发
捕获：父元素的时间先触发

4.如何增加和删除html的元素？

创建新的html元素：

删除html元素：

四、浏览器的Bom

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

1.window对象

 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
window的尺寸：
 window.innerWidth 
 window.innerHeight 
window的方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

2.Window Screen

window.screen 对象包含有关用户屏幕的信息，可以直接用screen.
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

3.Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的地址。

4.Window History

Window History包含浏览器的历史。
history.back()：返回前一个 URL，与在浏览器点击后退按钮相同
history.forward() - 加载历史列表中的下一个 URL，与在浏览器中点击按钮向前相同

5.Window Navigator 

window.navigator 对象包含有关访问者浏览器的信息。


浏览器代号:  navigator.appCodeName 
浏览器名称:  navigator.appName 
浏览器版本:  navigator.appVersion 
启用Cookies:  navigator.cookieEnabled 
硬件平台:  navigator.platform  
用户代理:  navigator.userAgent 
用户代理语言:  navigator.systemLanguage 

6.Window 弹窗

alert():警告窗
confirm():确认窗
prompt:提示窗

7.js计时

setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码
例：
setInterval(function(){alert("Hello")},3000);//每3秒弹出一次hello
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
setTimeout(function(){alert("Hello")},3000);//3秒后弹出一次hello
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码