JavaScript

 一、JavaScript介绍

        1、概念：JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为。 JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释 执行代码，不进行预编译。

        2、特点：①、可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序

                         ②、解释执行：事先不编译，逐行执行

                         ③、基于对象：内置大量现成对象

        3、js的组成： ①、ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准

                                ②、DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每 一个节点。

                                ③、BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改 变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀 疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。

 二、HTML和js的结合

        1、js的三种使用方式

                ①、行内脚本

<button onclick="alert('弹框测试')">点我一下</button>

                ②、内部脚本

<script>
    alert("弹框")
</script>

                ③、外部脚本

<script src="test.js"></script>

三、JavaScript的使用

        1、变量

                ①、声明变量：var x ;

                ②、数值类型：number（不区分整型数值和浮点型数值 所有数字都采用 64 位浮点格式存储，类似于double 格式）

                ③、字符串：String（首尾由单引号或双引号括起）

        2、自动类型转换：

                ①、数字 + 字符串：数字转换为字符串 10+’a’ -> 10a

                ②、数字 + 布尔值：true转换为1，false转换为0 true+5->6

                ③、字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea

                ④、布尔值 + 布尔值：布尔值转换为数值1或0 true+true->2

        3、数据类型转换函数

                ①、parseInt：强制转换成整数 。如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值 不是数字） 例如：parseInt("6.32")=6

                ②、parseFloat：强制转换成浮点数 如果不能转换，则返回 NaN 例如：parseFloat("6.32")=6.32

                ③、typeof：查询数值当前类型，返回 string / number / boolean / object 例如：typeof("test"+3)=="string"

        4、null 与 undefined

                ①、null 在程序中代表“无值”或者“无对象” 可以通过给一个变量赋值 null 来清除变量的内容。                 

                ②、undefined 声明了变量但从未赋值或者对象属性不存在。

        5、关系运算

                ①、严格相等：a===b，既类型相同，又值相同

                ②、值相等：a==b，值相同

                ③、非严格相同：！===

        6、常用字符串API

                ①、length:获取字符串的长度（字符串中字符的个数） 属性，没有小括号

                ②、toUpperCase/toLowerCase :转大小写

                ③、charAt(下标) ： 返回某个下标上的字符

                ④、indexof(字符)：查找字符串中字符出现的首次下标

                ⑤、lastIndexof(字符)：查找字符串中字符最后一次出现的下标

                ⑥、substring(开始,结束)：截取字符串中一部分（结束是不包含的）

                ⑦、replace(旧的,新的)：将字符串中的旧字符替换成新字符

                ⑧、split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

        7、数组

                ①、创建数组

var arr1 = new Array();

                ②、数组的初始化

// 第一种
var arr1 = new Array();
arr1[0] = 110;
arr1[1] = 119;
arr1[2] = 120;
// 第二种
var arr1 = new Array(10,"a",true);
// 第三种
var arr1 = [10,"a",true];
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}

                ③、数组的常用方法

                        tostring()：将数组转换成字符串

                        join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。

                        concat(新元素)：将原来的数组连接新元素，原数组不变。

                        slice(开始，结束)：在数组中提取一部分，形成新的数组。

                        reverse()：数组的反转（倒序）

                        sort()：数组排序

        8、Math数学对象

                ①、概念：Math 对象用于执行数学任务 没有构造函数 Math() 无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法。

                ②、常用方法：

         9、函数

                ①、语法

function 函数名( 形参列表 ){
// 函数体
return 返回值;
}

        函数声明后不会立即执行，会在我们需要的时候调用到。 注意： 形参：一定不要带数据类型 分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句，所以不以分号 结束。

                ②、参数对象

        在函数内部，调用参数列表的属性

function func(a,b,c){
console.log( arguments.length ); // 获得参数的个数
console.log( arguments[1] ); // 获得下标为1的参数
}

                ③、构造函数

        函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);

                ④、匿名函数

var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收
return a * 10 + b;
};
console.log( fn(3, 4) );

                ⑤、全局函数

                        isNaN：检查其参数是否是非数字值

                        eval：用来转换字符串中的运算

                        encodeURI 与 decodeURI

        10、闭包

                ①、闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一 个函数。

                ②、闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理； 简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据 的安全唯一性 想了解闭包，首先要了解什么是全局变量，什么是局部变量

function test1(){
    var count = 0; //局部变量
    function jia(){
    return count+=1;
    }
    return jia;
    }
    var fn = test1(); // fn => function jia(){return count+=1; }
    fn();
    fn();
    console.log( fn() ); // 每次调用方法，首先就是将变量还原为0

                ③、优缺点

                        优点：方便调用上下文中声明的局部变量 逻辑紧密，可以在一个函数中再创建个函数，避 免了传参的问题

                        缺点：因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭 包就会造 成内存泄露，内存消耗很大。

        11、弹框输出：普通弹框 alert("hello，拉勾");

                                控制台日志输出 console.log("谷歌浏览器按F12进入控制台");

                                页面输出 document.write("<h2>我爱你中国<h2/>"); 将元素输出到body中；

                                确认框 confirm("确定删除吗？");

                                输入框 prompt("请输入姓名：");

var name = prompt("请输入你的名字：");
document.write( "<h1>大名："+name+"！</h1>" );

三、DOM

        1、DOM访问：

                ①、getElementById：通过id属性获得元素节点对象

                ②、getElementsByName：通过name属性获得元素节点对象集

                ③、getElementsByTagName：通过标签名称获得元素节点对象集

        2、DOM修改

                ①、改变HTML内容：

<body>
<button onclick="test()">点我试试</button>
<script>
function test(){
document.getElementById("hello").innerHTML = "走哇，喝点去~！";
}
</script>
<h2 id="hello">你好！</h2>
</body>

                ②、改变HTML样式：

<body>
<button onclick="chou()">你瞅啥</button>
<script>
function chou(){
document.getElementById("hello").style.color = "red";
document.getElementById("hello").style.fontFamily = "华文彩云";
}
</script>
<h2 id="hello">你好！</h2>
</body>

                ③、在HTML中添加元素

<body>
<button onclick="add()">添加</button>
<div></div>
<script>
function add(){
var img = document.createElement("img"); // <img>
img.setAttribute("src","../lagou-html/img/cat.gif"); // <img
src="../lagou-html/img/cat.gif">
img.setAttribute("title","小猫咪"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪">
img.setAttribute("id","cat"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪" id="cat">
var divs = document.getElementsByTagName("div");
divs[0].appendChild(img);
}
</script>
</body>

                ④、删除节点

<body>

<button onclick="del()">删除</button>
<div>
</div>
<script>
function del(){
var img = document.getElementById("cat");
img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点

                ⑤、替换节点

<body>
<button onclick="rep()">替换</button>
<div>
</div>
<script>
function rep(){
var imgold = document.getElementById("cat");
// 通过修改元素的属性，做的替换
// img.setAttribute("src","../lagou-html/img/2.jpg");
var imgnew = document.createElement("img");
imgnew.setAttribute("src","../lagou-html/img/1.jpg");
imgold.parentNode.replaceChild( imgnew, imgold );
}
</script>
</body>

四、事件

        1、窗口事件

                onload ：当文档被载入时执行脚本（仅在 body 和 frameset 元素中有效。）

<body onload="test()">
<script>
function test() {
document.write("哈哈哈哈");
}
</script>
</body>

        2、表单元素事件（仅在表单元素中有效。）

                onblur 当元素失去焦点时执行脚本

                onfocus 当元素获得焦点时执行脚本

<body>
<script>
function a() {
console.log("获得焦点==被激活");
}
function b() {
console.log("失去焦点");
}
</script>
<form action="">
<p>帐号：<input onfocus="a()" onblur="b()" /></p>
<p>密码：<input /></p>
</form>
</body>

        3、鼠标事件

                onclick 当鼠标被单击时执行脚本

                ondblclick 当鼠标被双击时执行脚本

                onmouseout 当鼠标指针移出某元素时执行脚本

                onmouseover 当鼠标指针悬停于某元素之上时执行脚本

        4、键盘事件

                onkeydown 按下去

                 onkeyup 弹上来

<script>
window.onkeydown = function(){
// event：事件源（按键）
// console.log( "按键编码："+event.keyCode );
if(event.keyCode == "13"){ // 回车键
alert("登录成功！");
}
}
window.onkeyup = function(){
console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则
触发
}
</script>

五、面向对象

        1、使用object创建通用对象

var user = new Object();
user.name = "吕布";
user.age = 21;
user.say = function(){
console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
}
user.say();
var dog = new Object();
dog.nickname = "屎尿多";
dog.wang = function(){
console.log("我饿了，我要拆家了！");
}
dog.wang();

        2、使用构造函数

function userinfo(name , age){
this.name = name;
this.age = age;
this.say = function(){
console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
}
}
var user = new userinfo("詹姆斯",35);
user.say();

        3、使用直接量

var user = {
username : "孙悟空",
age : 527,
say : function(){
console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！");
}
};
user.say();

六、JSON

        1、概念大家在互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大（每个人的编码喜 好不一样） JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写，同时也易于机器解析和生成 。

        2、语法：{

                        属性1：值1，

                         属性2：值2，

                         。。。。 }

        3、演示

<script>
var json1 = { username: "吕布", age: 31 };
console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁");
// json数组
var josnarr = [{ name: "貂蝉", age: 18 }, { name: "小乔", age: 17 }];
console.log("貂蝉" + josnarr[0].age + "岁了");
console.log("小乔" + josnarr[1].age + "岁了");
// 复杂的json对象
var long = {
name: "赵云",
sex: "男",
hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"]
};
console.log(long.name + "的主攻武器：" + long.hobby[1]);
</script>

七、BOM

        1、window对象

                窗口特征：

<button onclick="kai()">极速入职</button>
<script>
function kai(){
window.open("http://lagou.com" , "拉勾网" ,
"width=500,height=300,left=400");
// window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才
生效
}
</script>

        2、screen屏幕对象

                得到分辨率：

<body>
<button onclick="kai()">求大小</button>
</body>
<script>
function kai() {
alert(window.screen.width + "|" + window.screen.height);
}
</script>

        3、location定位

<button onclick="test()">测试</button>
<script>
function test(){
console.log( "当前页面的URL路径地址："+ location.href );
location.reload(); // 重新加载当前页面（刷新）
location.href = "http://lagou.com"; // 跳转页面
}
</script>

        4、history浏览器历史

                history对象会记录浏览器的痕迹

                a.html

<a href="b.html">去b页面</a>

                b.html

<button onclick="hui()">返回</button>
<script>
function hui(){
//history.go(-1); //上一级页面
history.back(); // 与go(-1)是等价的
}
</script>

        5、navigator 导航

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

<script>
var str = "";
str += "<p>浏览器的代号："+ navigator.appCodeName +"</p>";
str += "<p>浏览器的名称："+ navigator.appName+"</p>";
str += "<p>浏览器的版本："+ navigator.appVersion+"</p>";
str += "<p>硬件平台："+ navigator.platform+"</p>";
str += "<p>用户代理："+ navigator.userAgent +"</p>";
str += "<p>启用Cookies："+navigator.cookieEnabled+"</p>";
document.write(str);
</script>

        6、存储对象

                ①、本地存储 localStorage（ 在关闭窗口或标签页之后将会删除这些数据）

                        保存数据

localStorage.setItem("name","curry")

                       提取数据

localStorage.getItem("name");

                        删除数据

localStorage.removeItem("name");

// 三种方式保存数据
localStorage["a"] = 1;
localStorage.b = 2;
localStorage.setItem("c",3);
// 查看数据类型
console.log( typeof localStorage["a"] )
console.log( typeof localStorage["b"] )
console.log( typeof localStorage["c"] )
// 第一种方式读取
var a = localStorage.a;
console.log(a);
// 第二种方式读取
var b = localStorage["b"];
console.log(b);
// 第三种方式读取
var c = localStorage.getItem("c");
console.log(c);

                ②、会话存储

                        会话，就是保持浏览器别关闭。 关闭浏览就等于结束了一次会话。 开启浏览器就意味着创建了一次会话。

                        保存数据

sessionStorage.setItem("name", "klay");

                        提取数据

var lastname = sessionStorage.getItem("name");

                        删除指定键的数据

sessionStorage.removeItem("name");

<button onclick="dian()">点我</button>
<h3 id="result"></h3>
<script>
function dian(){
if( sessionStorage.getItem("clickCount") ){
sessionStorage.setItem("clickCount",
Number(sessionStorage.getItem("clickCount")) + 1);
}else{
sessionStorage.setItem("clickCount", 1);
}
document.getElementById("result").innerHTML = "已经点击了"+
sessionStorage.getItem("clickCount") +"次！"
}
</script>

八、计时操作

        1、周期性定时器 setInterval

                setInterval(1,2)：周期性触发代码exp （常用）

<h1 id="title"></h1>
<script>
var colors = ["red","blue","yellow","pink","orange","black"];
var i = 0;
function bian(){
document.getElementById("title").style.color = colors[i++];
if(i == colors.length){
i = 0; // 颜色重新开始
}
}
function time(){
var d = new Date();
var str = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"号
"+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒";
document.getElementById("title").innerHTML = str;
}
setInterval(bian,100); // 每隔1秒，执行一次变色函数bian
setInterval(time,1000); // 每隔1秒，执行一次时间函数time
</script>
</body>
>

        2、停止定时器 clearInterval

        

<body>
<img id="tu" src="../lagou-html/img/1.jpg" width="50%" />
<br />
<button onclick="begin()">开始</button>
<button onclick="stop()">停止</button>
<script>
var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
function begin() {
timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量
}
function stop() {
clearInterval(timer); // 停止定时器
}
function bian() {
var i = Math.floor(Math.random() * arr.length); // 0-4
document.getElementById("tu").src = "../lagou-html/img/" + arr[i];
}
</script>
</body>

        3、一次性定时器 setTimeout

                相当于延迟的效果，只执行一次

<script>
function bian(){
document.body.style.backgroundColor = "red";
}
//3秒之后调用
setTimeout(bian,3000);
</script>