一、Javascript简介
1、什么是Javascript
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。
2、Javascript组成部分
ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
3、Javascript基本特点
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
注：总结其特性为：
脚本语言
基于对象
简洁
动态性
跨平台性
4、Javascript的主要用途
嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程。
5、为何学习 JavaScript
JavaScript 是 web 开发者必学的三种语言之一：
（Web开发三剑客）：
HTML 定义网页的内容（框架）
CSS 规定网页的布局（化妆）
JavaScript 对网页行为进行编程（活起来）
二、JavaScript语法
1、JavaScript的使用
标签之间。
例如：
注：旧的 JavaScript 例子也许会使用 type 属性：
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
JavaScript 不提供任何内建的打印或显示函数。
2、JavaScript 输出
JavaScript 能够以不同方式“显示”数据：
使用 window.alert() 写入警告框（常用）
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台
如：
3、JavaScript常用语法
JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。下面简单介绍常用语法
一个简单的JavaScript例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
引入JS: JavaScript 代码必须位于 <script> 与 </script> 标签之间。
1. 变量
2. JavaScript 数据类型: 字符串值，数值，布尔值，数组，对象。
3. JavaScript 函数:
function myFunction(p1, p2) {
return p1 * p2; // 该函数返回 p1 和 p2 的乘积
}
-->
<script>
var info = "打开成功!";
alert(info);
</script>
</head>
<body>
这是一个Javascript页面
</body>
</html>结果展示：
8、JavaScript中的对象
JavaScript中的对象和python中的对象类似，这里就不在过多赘述，可以进入W3c网站进行查看学习。
9、条件语句
在 JavaScript 中，我们可使用如下条件语句：
使用 if 来规定要执行的代码块，如果指定条件为 true
使用 else 来规定要执行的代码块，如果相同的条件为 false
使用 else if 来规定要测试的新条件，如果第一个条件为 false
使用 switch 来规定多个被执行的备选代码块
if (条件 1) {
条件 1 为 true 时执行的代码块
} else if (条件 2) {
条件 1 为 false 而条件 2 为 true 时执行的代码块
} else {
条件 1 和条件 2 同时为 false 时执行的代码块
}for循环：
javascript
for(var i=0; i<count; i++){
循环做的事情
}//方法:
document.getElementsByName() //返回的是一个列表对象
document.getElementById() //返回的是一个元素对象
document.createTextNode() //创建文本节点
document.createElement() //创建元素节点
nodeobj.appendCgild() //添加子节点
//属性:
object.innerHTML //当前标签对象里面嵌套的HTML信息
object.value //用户输入的信息值
object.src //获取图片的路径，通过赋值方式可以实现修改图片路径
object.checked //判断当前多选框是否被选中四、BOM浏览器对象模型
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
主要功能：
弹出新浏览器窗口的能力；
移动、关闭和更改浏览器窗口大小的能力；
可提供WEB浏览器详细信息的导航对象；
可提供浏览器载入页面详细信息的本地对象；
可提供用户屏幕分辨率详细信息的屏幕对象；
支持Cookies；
Internet Explorer对BOM进行扩展以包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象。
五、JavaScript 事件
HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
1）HTML 事件：
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子：
HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击
1、onsubmit事件
onsubmit事件：提交事件，onsubmit 事件会在表单中的确认按钮被点击时发生。
实现一个用户登录数据校验
案例：实现简单的用户登录校验：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkForm() {
//获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象, .value获取对象里面的值
var username = document.getElementsByName('username')[0].value;
// 判断用户名是否为空， 如果为空， 报错
if (username === '') {
// ==： ‘5’== 5 true 只比较值是否相等
// === '5'===5 false 比较值和类型是否相等
alert("用户名为空");
}
// 判断密码长度是否大于6， 如果不大于6， 直接报错;
var password = document.getElementById('pwd').value;
var pwd_length = password.length;
if (pwd_length < 6) {
alert("密码长度小于6位");
}
}
</script>
</head>
<body>
<div class="login">
<h1>用户登录</h1>
<!--
当提交登录信息的时候， 执行函数checkForm实现用户的校验
第一个事件类型: onsubmit
-->
<form action="#" method="get" οnsubmit="return checkForm()">
<input type="text" name="username" placeholder="用户名"><br/>
<input type="password" name="password" placeholder="密码" id="pwd"><br/>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
2、聚焦（onfocus）和离焦（onblur）事件：
onfocus事件：聚焦事件，onfocus 事件在对象获得焦点时发生。
onblur事件：离焦事件，onblur 事件会在对象失去焦点时发生。
为了使用户体验更好，在鼠标点击到用户名的框时，右边提示输入用户名和密码的要求，当离开框时，检测用户名和密码是否正确。
我们在平常的登录过程当中，用户名和密码栏后面一般会有所输入内容相关要求和提示的，并不会总是 跳出警示框，这种需求该如何实现呢？那就需要用到聚焦和离焦事件。
所以再对以上用户登录校验代码进行改进如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showUserTips() {
var usertipsObj = document.getElementById('usertips');
var info ='<span style="color: gray">用户名长度大于2</span>';
// alert(usertipsObj.innerHTML);
usertipsObj.innerHTML = info;
}
function checkUser() {
//获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象, .value获取对象里面的值
var username = document.getElementsByName('username')[0].value;
// 判断用户名是否为空， 如果为空， 报错
var usertipsObj = document.getElementById('usertips');
if (username.length <= 2) {
usertipsObj.innerHTML = '<span style="color: red">用户名长度不大于2</span>'
}else{
usertipsObj.innerHTML = '<span style="color: green;">ok</span>'
}
}
</script>
</head>
<body>
<div class="login">
<h1>用户登录</h1>
<form action="#" method="get">
<!--onfocus聚焦事件， 如果聚焦， 执行函数showUserTips()-->
<input type="text" name="username" placeholder="用户名" id='user' οnfοcus="showUserTips()" οnblur="checkUser()">
<span id="usertips"></span><br/>
<input type="password" name="password" placeholder="密码" id="pwd"><br/>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>网页展示效果如下：
未输入时：
输入用户名长度小于2时：
输入用户名长度小于2时：
正确输入用户长度时：
此时就登录成功了！
