1 JavaScript 是什么?
-
JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
-
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
-
现在也可以基于 Node.js 技术进行服务器端编程
JavaScript的作用
- 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
浏览器执行 JS 简介
浏览器分成两部分：渲染引擎和 JS 引擎
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行JS 的组成
1.ECMAScript
ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
更多参看MDN: MDN手册
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview
2.DOM——文档对象模型
文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
3.BOM——浏览器对象模型
浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
3.6 JavaScript的特点
JavaScript是基于对象和事件驱动的解释性的脚本语言，适用于静态或动态页面，是一种广泛使用的客户端脚本语言，它具有解释性、基于对象、事件驱动、安全性和跨平台等特点。
1. 解释性
JavaScript 不同于一些编译性的程序语言，例如 C、C++ 等，他是一种解释性的程序语言，它的源代码不需要经过编译，而直接在浏览器种运行时被解析。
2. 基于对象
JavaScript 是一种基于对象的语言，这意味着它能运用自己已经创建的对象，因此，许多功能可以来自脚本环境中对象的方法与脚本的相互作用。
3. 事件驱动
JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行。
4. 跨平台
JavaScript依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持 JavaScript 的浏览器就可正常执行。
3.7 JS 初体验
|
-
行内式
<input type="button" value="点我试试" onclick="alert('Hello World')" />- 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
- 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
- 可读性差， 在html中编写JS大量代码时，不方便阅读；
- 引号易错，引号多层嵌套匹配时，非常容易弄混；
- 特殊情况下使用
-
内嵌式
<script> alert('Hello World~!'); </script>- 可以将多行JS代码写到 script 标签中
- 内嵌 JS 是学习时常用的方式
-
外部JS文件
<script src="my.js"></script>- 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
- 引用外部 JS文件的 script 标签中间不可以写代码
- 适合于JS 代码量比较大的情况
JavaScript注释
单行注释
|
单行注释的注释方式如下：
|
|
多行注释:
多行注释的注释方式如下：
|
|
快捷键修改为： ctrl + command + /
vscode → 首选项按钮 → 键盘快捷方式 → 查找 原来的快捷键 → 修改为新的快捷键 → 回车确认
JavaScript输入输出语句
为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：
| 方法 | 说明 | 归属 |
|---|---|---|
| alert(msg) | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
- 注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。
事件基础
事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
事件三要素
交互效果可以遵循简单三步曲来实现：
- 事件源（谁）：触发事件的元素
- 事件类型（什么事件）： 例如 click 点击事件
- 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
js获取标签
<div id="div1"></div>
<script>
/*
document:文档
get:获取
Element:元素
By:通过
Id:ID名
*/
alert(document.getElementById("div1")); //[object HTMLDivElement]
</script>事件案例代码:
<body>
<button id="btn">唐伯虎</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>执行事件的步骤
案例代码
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>分析事件三要素
- 下拉菜单三要素
- 关闭广告三要素
添加事件
<div id="div1"></div>
<script>
/*
onclick:单击事件
*/
document.getElementById("div1").onclick = function () {
// 存放 展示效果的代码块
}
</script>点击按钮触发事件弹出 hello world
<button id="but">弹出</button>
<script>
/*
1. 找到谁 按钮 document.getElementById("but");
2. 加事件 ( 点击事件 ) 标签.onclick
3. 要做的事情 (function (){})
语法：标签.事件 = function(){要做的事情}
*/
document.getElementById("but").onclick = function () {
alert("hello world");
}
</script>window.onload
window.onload的作用是，当文档和资源都加载完成后调用。
当我们把script标签放在head里面去获取元素的时候，我们会发现获取到的值为null，那是因为代码是从上往下执行，当获取标签的时候，标签还没有被加载。
<head>
<script>
window.onload = function(){
document.getElementById("but").onclick = function () {
alert("hello world");
}
}
</script>
</head>
<button id="but">按钮</button>其他事件
js 的事件有很多，如鼠标事件，键盘事件，文本事件，窗口事件等等，这些后期会讲，我们这里先掌握简单的鼠标事件。
鼠标事件除了点击onclick之外，还有很多其他的鼠标事件，具体如下：
- onclick ：点击事件
- ondblclick ：双击事件
- onmouseover ： 鼠标移入元素
- onmouseout : 鼠标离开元素
- onmouseenter ：鼠标移入元素
- onmouseleave ：鼠标离开元素
- onmousemove: 鼠标在元素中移动
- onmousedown： 鼠标按下
- onmouseup： 鼠标抬起
- oncontextmenu ：鼠标右键菜单事件
<script>
// 1.onclick ：点击事件
document.getElementById("box").onclick = function(){
console.log("点击了");
}
// 2.onmouseover ：鼠标移入元素
document.getElementById("box").onmouseover = function(){
console.log("鼠标移入元素");
}
// ......
</script>
<div id="box">我是box</div>变量的概念
什么是变量
白话：变量就是一个装东西的盒子。
通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。
变量在内存中的存储:
本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。
变量的使用:
- 变量的声明
- 变量的赋值
声明变量
|
-
var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
-
age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
赋值
|
- = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
- 变量值是程序员保存到变量空间里的值
变量的初始化
|
变量语法扩展
- 更新变量
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
|
-
同时声明多个变量
同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。
|
-
声明变量特殊情况
情况 说明 结果 var age ; console.log (age); 只声明 不赋值 undefined console.log(age) 不声明 不赋值 直接使用 报错 age = 10; console.log (age); 不声明 只赋值 10
变量命名规范
规则：
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
- 严格区分大小写。var app; 和 var App; 是两个变量
- 不能 以数字开头。 18age 是错误的
- 不能 是关键字、保留字。例如：var、for、while
- 变量名必须有意义。 MMD BBD nl → age
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
推荐翻译网站： 有道 爱词霸
操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）
改变元素内容（获取或设置）
innerText改变元素内容
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮， div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 我们写一个 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>innerText和innerHTML的区别
- 获取内容时的区别：
innerText会去除空格和换行，而innerHTML会保留空格和换行
- 设置内容时的区别：
innerText不会识别html，而innerHTML会识别
案例代码
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今天是：</strong> 2019';
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>常用元素的属性操作
获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值
案例代码
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
// 修改元素属性 src
// 1. 获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注册事件 处理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
</script>
</body>表单元素的属性操作
获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。
案例代码
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
// 表单里面的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}
</script>
</body>点操作符和中括号操作符使用
- 是某一个具体的属性值是，用点操作符。
- 当是某一个变量时，用中括号操作符，中括号里面放这个变量。
<div id="box" title="123">456</div>
<script>
var oDiv = document.getElementById(box");
// 1.获取title属性值
var t= oDiv["title"];
console.log(t);
// 2.设置title属性
oDiv["title"] = "web全栈";
// 3.中括号操作符的正确使用场景
var tit = ‘title’;
console.log(oDiv[tit]); // 当是变量时，就只能使用中括号操作符，不能使用点操作符
</script>注意：当把属性名赋值给一个变量的时候，就可以通过使用中括号 []来操作变量，就可以操作这个属性
样式属性操作
元素样式是写在 style 标签或 style 属性中，用来设置元素的外观的。
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
js操作的样式全部属于行内样式
常用方式
方式1：通过操作style属性
语法：
- 获取元素样式属性：元素.style.样式
- 设置元素样式属性：元素.style.样式名 = “样式值”
<body> <div></div> <script> // 1. 获取元素 var div = document.querySelector('div'); // 2. 注册事件 处理程序 div.onclick = function() { // div.style里面的属性 采取驼峰命名法 div.style.backgroundColor = 'purple'; div.style.width = '250px'; } </script> </body>方式2：通过操作className属性
元素对象.className = 值;
因为class是关键字，所有使用className。
-
案例代码
<body> <div class="first">文本</div> <script> // 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用 var test = document.querySelector('div'); test.onclick = function() { // this.style.backgroundColor = 'purple'; // this.style.color = '#fff'; // this.style.fontSize = '25px'; // this.style.marginTop = '100px'; // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况 // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器 // this.className = 'change'; this.className = 'first change'; } </script> </body>cssText
-
cssText 本质是什么？
cssText 的本质就是设置 HTML 元素的 style 属性值。
-
cssText 怎么用？
-
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";cssText 返回值是什么？
在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号，比如：
document.getElementById("d1").style.cssText = "color:red; font-size:13px;"; alert(document.getElementById("d1").style.cssText);在 IE 中值为：FONT-SIZE: 13px; COLOR: red
-
cssText的使用优势
-
一般情况下我们用js设置元素对象的样式会使用这样的形式：
var element= document.getElementById(“id”); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px red”;样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。
-
cssText问题
语法为：
|
这样就可以尽量避免页面reflow，提高页面性能。
但是，这样会有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
cssText累加的方法
|
IE中解决兼容问题
上面cssText累加的方法在IE中是无效的。
可以在前面添加一个分号来解决这个问题
|
内嵌样式不会被覆盖掉
如果前面有样式表文件写着 div { text-decoration:underline; }，这个会被覆盖吗？
不会！因为它不是直接作用于 HTML 元素的 style 属性。
<style>
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script>
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];
for (var i = 0; i < oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function ()
{
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
}
}
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>
</body>
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
