一 概念
1.JavaScript
是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能。
为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
2.浏览器分成两部分
渲染引擎：用来解析HTML与CSS，俗称内核。
JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行
3.javascript有三种引入方式
<!-- 引入 js第一种方式 行内引入 注意是单引号 行内引入方式必须结合事件来使用 其他两种引入不需要-->
<button onclick="alert('第一种引入方式')">第一种引入方式</button>
<!--第二种引入方式 内部引入 在head或body中，定义script标签，然后在script标签里面写js代码-->
<script type="text/javascript">
alert("第二种引入方式");
</script>
<!--外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点-->
<script type="text/javascript" src="1.js"></script>
alert("第三种方式 外部引入");
4.基本知识
- console.log 浏览器的console打印输出信息-
- alert() 主要用来显示消息给用户
- 通过控制台输出的颜色判断 数据类型
数字 浏览器的console输出的是蓝色
String 黑色
undefined 和 null 灰色
5. prompt(info)浏览看弹出输入框，用户可以输入
6. 作用域`
全局作用域 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
局部作用域 作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域
块作用域由 {} 包括`在其他编程语言中 如 在 if 语句、循环语句中创建的变量
7. 变量
变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改
本质：变量是程序在内存中申请的一块用来存放数据的空间
var name='lx';
var age=18;
8. 一些符号和流程控制（大致都和java一样）
<!-- === !== 全等 要求值和数据类型都一致-->
<!--for if 什么的和Java一样-->
9. 数据类型转换
数据类型转换 使用表单、prompt 获取过来的数据默认是字符串类型的
转换为字符串类型 toString() String(num) +和字符串拼接的结果都是字符串
转换为数字型 parselnt(string)函数 Number()强制转换函数
转换为布尔型 Boolean()函数
var num=123;
var str = 'sr'+num;
alert(typeof str)//string
var str1= '13';
num1 = Number(str1)
alert(typeof num1) //number
10. 一些特殊的
<!--JS中数值的最大值：Number.MAX_VALUE-->
<!--JS中数值的最小值：Number.MIN_VALUE-->
<!--一个声明后没有被赋值的变量会有一个默认值 undefined-->
<!--一个声明变量给 null 值，里面存的值为空-->
11. js解释器运行
解释运行js代码的时候
第一步 预编译 把所有var 和 function 的 变量名称 提升到当前作用域的最前面 即声明但不赋值
第二步 代码执行 按照代码书写的执行顺序执行
12. innerHTML和innerText
// <h1>文哈哈</h1>
//h1.innerText 即只识别文本内容不识别标签内容(标签的效果也不识别，相邻的标签分隔开) 得到 文哈哈
//h1.innerHTML 识别 h1包含的所有内容
//所以我们可以通过 JS 修改元素的大小、颜色、位置等样式。
// JS 修改 style 样式操作 ，产生的是行内样式，CSS权重比较高
// 可以在修改前把其样式 为空 然后再嵌入自己的样式 btn.style.backgroundColor = '';
//元素 可以自定义属性 setAttribute removeAttribute getAttribute 等方法操作属性
二 基础
1. 函数
// 函数在使用时分为两步：声明函数和调用函数
// 1.函数的声明 function 函数名(参数){ 函数体 } 2.调用 函数名();
function f() {
//会显示2次alert
<!--这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false，如果不是数字返回的是true-->
alert(isNaN(age));
<!--typeof 可用来获取检测变量的数据类型 null 是object 其它均正常返回-->
alert(typeof name);
// 实参个数多于 形参个数 只取到形参的个数 500
//实参个数小于形参个数 多的形参定义为undefined，结果为NaN
}
f();
// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function () {
console.log("匿名函数")
};
// 匿名函数调用的方式，函数调用必须写到函数体下面
fn();
//传递参数时 不用说明参数类型
function f1(param1, param2) {
//arguments展示形式是一个伪数组，因此可以进行遍历 所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参
arguments.length;
}
2. JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
// 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能
// JavaScript 提供了多个内置对象：Math、 Date 、Array、String等
查文档 https://developer.mozilla.org/zh-CN/
3. DOM
// 文档对象模型（Document Object Model，简称 DOM） DOM 接口可以改变网页的内容、结构和样式
// 文档：一个页面就是一个文档，DOM中使用doucument来表示
// 元素：页面中的所有标签都是元素，DOM中使用 element 表示
常用的方法
//console.dir() 可以打印我们获取的元素对象
// 使用 getElementByld() 方法可以获取带ID的元素对象
document.getElementById('标签的id名')
// 根据标签名获取 返回的是数组 即调用时 用下标
document.getElementsByTagName("div")
// 根据类名返回元素对象合数组
document.getElementsByClassName('类名');
// 根据指定选择器返回第一个元素对象 .类名 #id名 也一直接输入标签名
document.querySelector('.uid');
// 根据指定选择器返回所有元素对象
document.querySelectorAll('div');
// 也可以是body,html元素对象
document.body;
4.练习
<button>按钮1</button>
<script type="text/javascript">
//获取button对象 并命名为btn
var btn=document.querySelector('button')
//设置btn的点击事件
btn.onclick =function f() {
//用变量res 获取 prompt输入的结果 注意是字符串
var res=prompt('你的密码');
// 结果进行判断
if (res=='123'){
alert('密码输出正确')
}else{
alert('密码错误')
}
}
</script>
5… 节点的概念
//1.网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
//2.所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
//3.节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
//4. <h1><h2></h2><h3></h3></h1> h1是 h2和h3的父节点 h2和h3兄弟节点
//5. 可以复制node.cloneNode() 添加 node.appendChild(child) node.insertBefore(child,指定元素)
// 删除 node.removeChild(child)创建节点 document.createElement('tagName');
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
console.log(ol.lastElementChild.outerHTML);//输出：<li>我是li5</li>
console.log(ol.children[0]); //第一个子元素节点
// 其他都是一大堆 outerHTML: outerText: "我是li1"
6… 事件
事件 JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
事件三要素
事件源(谁)
事件类型(什么事件)
事件处理程序(做啥)
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function () {
alert('点秋香');
}
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.getElementsByTagName('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
//getElementsByTagName 注意这个返回值是数组 即div是数组所以要进行遍历
for (let i = 0; i < div.length; i++) {
div[i].onclick = function () {
console.log('我被选中了');
}
div[i].style.width = '200px';
}
<button>按钮1</button>
<button>按钮2</button>
<div>事件对象</div>
<a href="/www.baidu.com">阻止默认行为</a>
<script type="text/javascript">
//给元素添加事件，称为注册事件或者绑定事件。
// 注册事件有两种方式：传统方式和方法监听注册方式
//1.传统方式 即不添加监听 此时下面的点击函数会把上面的覆盖 只能得到冒泡阶段
var btns = document.querySelectorAll('button');
btns[0].onclick =function (){
alert("第一个函数");
}
btns[0].onclick =function (){
alert("第二个函数");
btns[0].onclick=null; //解绑事件
}
//2.监听注册方式
// 好处 定义的两次函数中都能被调用
// addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
// type 即 click或者 mouseout等事件 相当于传统的去掉 on listener即监听事件 即当发生type时 所执行的操作
// 最后一个参数是关于冒泡或捕获的 默认为false即冒泡 如<div id="1"><h1 id="2"></h1></div>
// 冒泡： 当你点击"2"中的元素“1”肯定也会触发 因为1包含2 从小到大执行 捕获就是：冒泡的逆过程 从大到小执行
//有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
btns[1].addEventListener("click",function (){
alert('第一次调用');
},false)
btns[1].addEventListener("click",remain)
function remain (){
alert('第二次调用');
//移除事件
btns[1].removeEventListener("click",remain);
}
// 事件对象
var div = document.querySelector('div');
div.onclick = function(e) {
console.log(e);
}
// 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
// 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的
// 3. 事件对象 是 我们接受事件的一系列相关数据的集合 跟事件相关的 比如判断用户按下了那个键等
// 4. 可修改参数名 比如 e
// 阻止事件的默认行为 有大用！！！
var pre_even =document.querySelector("a");
pre_even.addEventListener("click", function (e) {
//阻止其调转行为
e.preventDefault();
// 阻止冒泡 e.stopPropagation();
// 事件委托 为每个字节点 设置一个事件麻烦 直接给其父节点设置其事件 e.target.style.backgroundColor=black e.target点击的对象
})
//禁止右键菜单 即右键不能使用
document.addEventListener("contextmenu",function (e){
e.preventDefault();
})
//禁止选中
document.addEventListener("selectstart",function (e){
e.preventDefault();
})
// e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标 e.pageX（重点） 返回鼠标相对于文档页面的X坐标 e.screenX 返回鼠标相对于电脑屏幕的X坐标
// keyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 keyCode 返回该键值的ASCII值
</script>
7. 练习 判断用户名是否是手机号
<body>
<form action="success.html">
用户名<input type="text" class="un" name="username"><br>
密码 <input type="password" class="pwd"><br>
<input type="submit" class="st">
</form>
<script type="text/javascript">
//获取提交时的标签 并命名为st
var st= document.querySelector('.st')
//st点击时
st.onclick =function (e) {
//获取用户名 .value是获取用户输入的值
var un=document.querySelector('.un').value;
//判断用户名是否输入的是手机号 （不要管看的懂，知道是正则就行）
if (!(/^1[3|5|8][0-9]\d{4,8}$/.test(un))){
//不是手机号
alert(false)
//通过事件e 阻止其默认的跳转
e.preventDefault();
}else {
//即输入的是手机号 会跳转到success页面
}
}
</script>
8. 对象
<script>
//基于ES6
//和java中的类 相关概念相同 万物皆是对象
// 类必须使用new 实例化对象
//constructor函数 构造器函数
//方法之间不能加逗号分隔，同时方法不需要添加 function 关键字
// ES5 构造函数相当于类 其中静态成员 相当于 成员属性 实例成员相当于形参
//每一个构造函数都有一个prototype属性定义的是不变的 所有对象的实例就可以共享这些方法
Star.prototype.sing = function() {console.log('我会唱歌');}
// 1. 利用 new Object() 创建对象
var obj1 = new Object();
// 2. 利用对象字面量创建对象
var obj2 = {};
// 3.利用构造函数创建对象
function Star(uname,age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我会唱歌');
}
}
var ldh = new Star('刘德华',18);
//new 在执行时会做四件事
// 在内存中创建一个新的空对象。
// 让 this 指向这个新的对象。
// 执行构造函数里面的代码，给这个新对象添加属性和方法。
// 返回这个新对象（所以构造函数里面不需要 return ）。
//6种函数
// 函数的不同调用方式决定了this 的指向不同
// 1. 普通函数 this 指向window
function fn() {
console.log('普通函数的this' + this);
}
window.fn();
// 2. 对象的方法 this指向的是对象 o
var o = {
sayHi: function() {
console.log('对象方法的this:' + this);
}
}
o.sayHi();
// 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
function Star() {};
Star.prototype.sing = function() {
}
var ldh = new Star();
// 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
var btn = document.querySelector('button');
btn.onclick = function() {
console.log('绑定时间函数的this:' + this);
};
// 5. 定时器函数 this 指向的也是window
window.setTimeout(function() {
console.log('定时器的this:' + this);
}, 1000);
// 6. 立即执行函数 this还是指向window
(function() {
console.log('立即执行函数的this' + this);
})();
// call() apply() bind() 都可以改变函数内部的 this指向
// call和apply会调用函数，并且改变函数内部的this指向
// call和apply传递的参数不一样，call 传递参数，apply 必须数组形式
// bind不会调用函数，可以改变函数内部this指向
</script>
// 创建对象
// 1.匿名
var star = {
// 多个属性或者方法中间用逗号隔开
name: 'pink',
age: 18,
sex: '男',
sayHi: function () {
alert('大家好啊~');
}
// 方法冒号后面跟的是一个匿名函数
};
star.sayHi();
var obj = new Object(); //创建了一个空的对象
obj.name = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
console.log('hi~');
}
//1. 构造函数名字首字母要大写
//2. 构造函数不需要return就可以返回结果
//3. 调用构造函数必须使用 new
//4. 我们只要new Star() 调用函数就创建了一个对象
//5. 我们的属性和方法前面必须加this
function Star(uname,age,sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang){
console.log(sang);
}
}
var ldh = new Star('刘德华',18,'男');
console.log(typeof ldh) // object对象，调用函数返回的是对象
//new 在执行时会做四件事:
// 在内存中创建一个新的空对象。
// 让 this 指向这个新的对象。
// 执行构造函数里面的代码，给这个新对象添加属性和方法
// 返回这个新对象（所以构造函数里面不需要return）
三 BOM
1. 概念
BOM Browser Object Model 浏览器对象模型。
把 浏览器当作一个对象来看待。顶级对象 window
比 DOM 更大。它包含 DOM
BOM 学习的是浏览器窗口交互的一些对象
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法。
BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差
2. window.onload()
// 1.window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等）
//2.window.onload 属于传统注册事件方式，只能写一次 所以可以用addEventListener去注册多次
// 3.有了window.onload就可以防止找不到元素了
var btn = document.querySelector("button");
btn.addEventListener('load',function (){
alert('无论button在哪，都不会找不到')
})
btn.addEventListener('DOMContentLoaded',function(){
alert('比load加载更快一些')
// DOMCountentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等
})
3. window.onresize
是调整窗口大小加载事件（就是该页面的窗口大小），当触发时就调用的处理函数。
我们经常利用这个事件完成响应式布局。通过window.innerWidth （当前屏幕的宽度）进行操作
4. 定时器
// setTimeout(调用函数,[延迟的毫秒数]) 即n秒后执行函数 默认是0，单位为毫秒
//clearTimeout(timeoutId)方法取消了先前通过调用 setTimeout()建立的定时器 timeoutId即接收的变量
//setInterval(函数，间隔的毫秒数)定时器 每隔 n毫秒 调用一次
//clearInterval (IntervalId) 方法取消了先前通过调用 setInterval() 建立的定时器
5. this指向
// 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
// 方法调用中谁调用this指向谁
// 构造函数中this指向构造函数实例
6. 其他`
//js执行机制
//属于单线程 ，前一个任务结束，才会执行后一个任务
//js中同步:前一个任务结束后再执行后一个任务
// 异步：在做这件事的同时，你还可以去处理其他事情
// 异步操作：普通事件，如click,resize等 资源加载，如load,error等 定时器，包括setInterval,setTimeout等
//异步就是把回调函数 放在任务队列里 而非回调函数的放在执行栈里 等执行栈里的方式执行完毕之后才会执行任务队列里面的
//如setTimeout设置3秒 会在 任务队列里执行 如果在次期间有个点击函数 也会在任务队列里面
//任务队列里面的事件 是会循环遍历的 如果有些行为事件先发生则先执行 同时发生则先进先出的原则
//window 对象给我们提供了一个 location属性用于获取或者设置窗体的url，并且可以解析url统一资源定位符（uniform resouce locator）
//location.href 获取或者设置整个URL
//location.search 返回参数 获取的参数 ?key=value
// 即需要处理 var params = location.search.substr(1);key=value var arr = params.split('=');变成数组，用下标可获取["uname", "ANDY"]
7. 判断手机端还是电脑端
//navigator.userAgent主要用来判断手机端还是电脑端
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
//history forward()前进 back() 后退
history.go();//参数如果是 1 前进1个页面 如果是 -1 后退1个页面
