后端程序员的前端基础-前端三剑客之JavaScript
后端程序员工作中需要用的前端技术，内容精简极致，目标核心掌握即可
本模块分三部分，另外两篇请戳→
后端程序员的前端基础-前端三剑客之一：HTML后端程序员的前端基础-前端三剑客之二: CSS后端程序员的前端基础-前端三剑客之三:本篇
文章目录
- 1 JavaScript简介
-
- 1.1 JavaScript简介
- 1.2 JavaScript组成部分
- 1.3 JavaScript发展史
- 2 JavaScript基本语法
-
- 2.1 JS的引入方式
- 2.2 JS的输出方式
- 2.3 JS定义变量
- 2.4 JS数据类型
- 2.5 JS数据类型转换
- 2.6 JS运算符
- 2.7 JS控制流程语句
- 2.8 JS数组
-
-
-
- js中的数组定义方式：
- js中的数组的特点：
-
-
- 2.9 JS函数
- 2.10 JS事件
- 3 DOM（Document Object Model）
-
- 3.1 获取元素节点
- 3.2 操作文本节点
- 3.3 操作属性节点
- 3.4 操作元素节点
- 4 BOM(Broswer Object Model)
-
- 4.1 Window
- 4.2 Screen
- 4.3 Navigator
- 4.4 History
- 4.5 Location
- 4.6 定时器
1 JavaScript简介
1.1 JavaScript简介
- JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
- 它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。
1.2 JavaScript组成部分
ECMAScript语法
文档对象模型（DOM Document Object Model）
浏览器对象模型(BOM Browser Object Model)
1.3 JavaScript发展史
- 它是由Netscape公司的Brendan Eich用10天设计出来一门脚本语言，JavaScript是甲骨文公司的注册商标。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
- Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。两者都属于ECMAScript的实现，为了互用性，ECAM（欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。ECMAScript最新版本是2015发布的 ECMAScript 6（ES6）。
2 JavaScript基本语法
2.1 JS的引入方式
JS的两种引入方式
1、直接在页面中添加script标签(任意位置)，然后编写js代码
2、将js代码写到js文件中，然后再引入到当前页面中
注意：
1、js可以写在页面的任意位置，但是js是解释性语言，从上往下依次执行，建议将js代码写在末尾
2、导入外部的js需要单独一个script标签，即不能再导入js的标签中写代码，否则会不执行
<script>
//页面弹窗
alert("hello，js");
script>
<script src="js/test.js">script>
2.2 JS的输出方式
alert(“输出内容”); 通过弹窗输出内容
console.log(“输出内容”); 通过控制台输出内容
document.write(“输出内容”) 将内容输出在页面上
<script>
//alert("通过弹框输出数据");
//console.log("通过控制台输出数据")
document.write("直接在页面上输出数据")
script>
2.3 JS定义变量
js是弱类型语言。在编码期间数据无需定义类型。然后运行期间动态的识别类型
var 变量名 = 值;
注意：
1、js中var用来表示数据类型(字符串不区分单双引号)
2、var可以省略不写，建议不要省略
3、变量的命名规则：与java一致
<script>
var a = 10;
var b = "aa";
var c = true;
var d = 'cc';
e = 20.2
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)
script>
2.4 JS数据类型
js是一门弱类型语言。
JS中的数据类型
基本类型：
- Number、String、boolean、undefined、null
引用类型（即java中的对象类型）
- Object、数组、函数
<script>
//基本类型
var a = 10;
console.log(typeof a);
var b = 10.2;
console.log(typeof b);
var c = "hello";
console.log(typeof c);
var d = 'world';
console.log(typeof d);
var e = true;
console.log(typeof e);
var f;
console.log(typeof f); //undefined 未定义类型
var g = null;
console.log(typeof g); //null
//引用类型
var date = new Date();
console.log(date);
console.log(typeof date);
//
/**
* json对象
* 简单格式： {key:value,key:value,key:value,...}
* 复杂格式： {key:value,key:value,key:{key:value,key:value,key:value,...}}
*/
var product = {name:"红米手机",price:20,num:10000}
console.log(product.name);
console.log(product.price);
console.log(product.num);
console.log(typeof product);
var emp = {ename:"smith",job:"java开发",dept:{dname:"开发部",location:"武汉"}}
console.log(emp.ename);
console.log(emp.job);
console.log(emp.dept.dname);
console.log(emp.dept.location);
script>
注意：
- number类型的特殊值
- NaN not a number 不是数字
- Infinity 无穷大
2.5 JS数据类型转换
string
1、任何类型与String使用+运算的结果都是String类型
2、String类型进行除了+运算以外都会将转换成number类型
3、String类型要想进行+运算，那么需要将其转换成number类型
number类型、string类型、undefind 、object、null都可以转成boolean类型
1、number类型 非0即真
2、string类型 非""即真
3、object类型 真的
4、undefined类型 假的
5、null类型 假的
<script>
var a = "123";
console.log(a+1);
console.log(parseInt(a)+1);
console.log(a-1);
console.log(a*2);
//var b = "1";
//var b = -1;
//var b ;
//var b = null;
var b = new Date();
if(b){
console.log("真的");
}else{
console.log("假的");
}
script>
2.6 JS运算符
- 算术运算符
- 关系运算符
- 赋值运算符
- 逻辑运算符
- 三目运算符
<script>
var a = 5;
console.log(a/2);
var b = "12";
var c = 12;
console.log(b == c); //true 比较内容是否相等
console.log(b === c); //false 比较内容是否相等，同时比较类型是否相等
script>
2.7 JS控制流程语句
- if分支
- switch分支
- for循环、while循环、do while循环
<script>
// for(var i = 0 ; i < 10 ;i++){
// console.log("hello"+i)
// }
// var arr = [1,2,3,4,5,6,7];
// for(var i = 0 ; i < arr.length ; i++){
// console.log(arr[i])
// }
// for(var index in arr){
// console.log(index)
// }
//九九乘法表,输出在页面上
document.write("")
for(var i = 1 ; i < 10 ; i++){
document.write("")
for(var j = 1 ; j <= i ; j++){
document.write("")
document.write(j+"*"+i + "=" + i*j)
document.write(" ")
}
document.write(" ")
}
document.write("
")
script>
2.8 JS数组
js中的数组定义方式：
- 静态定义
- var 数组名 = [值1,值2,…];
- 动态定义
- var 数组名 = new Array(值1,值2,…);
- var 数组名 = new Array(数组的长度);
js中的数组的特点：
数组的长度是可以改变的
- 如果数组的长度变长，那么后面的元素用undefined表示
- 如果数组的长度变短，那么后面的元素就被删除掉了
- 如果数组的长度为0，那么表示清空数组
数组中可以存储任意数据类型
for in循环和for循环的区别：
- forin循环会默认过滤掉多余的undefined元素(扩容之后数组中的undefined元素)
数组常用的方法：
- 数组名.push(元素); 向数组的最后一个位置添加元素
- 数组名.pop(); 从数组中移除最后一个元素
<script>
// var arr = [1,2,3,4,5];
// console.log(arr[2]);
//var arr = new Array(1,2,3,4,5);
//console.log(arr[0]);
// var arr = new Array(3);
// console.log(arr[0]);
var arr = [1,'a',undefined,new Date,undefined,undefined];
// for(var i in arr){
// console.log(arr[i])
// }
//arr.length = 6;
//arr.length = 3;
//arr.length = 0;
//console.log(arr);
// for(var i = 0 ; i < arr.length; i++){
// console.log(arr[i])
// }
arr.push(6);
arr.pop();
for(var i in arr){
console.log(arr[i])
}
script>
2.9 JS函数
java中的方法定义：
访问修饰符 修饰符 返回值类型 方法名(参数列表){
方法体;
}
js中方法的定义：
<script>
function f1(){
console.log("f1函数...")
}
//函数调用
//f1();
function f2(name,age){
console.log(name);
console.log(age);
}
//函数调用
//f2("cxk",30);
var f3 = function(){
console.log("匿名函数...")
}
//函数调用
//f3();
var f4 = function(a,b){
//console.log(a+"======"+b)
console.log(arguments.length);
var sum = 0;
for(var i = 0 ;i < arguments.length ; i++){
sum += arguments[i];
}
console.log(sum);
}
//f4(10,20,30);
//f4(10);
//f4(10,20,30,40,50);
function f5(){
console.log("js中的函数")
}
function f5(a,b){
console.log("js中的函数（重载）")
}
//f5(10,20);
function f6(a,b){
return a+b;
}
var result = f6(10,20);
console.log(result);
script>
2.10 JS事件
JS事件组成：
- 事件源
- 事件的源头（可以是页面上任意一个元素，如：button、img等等、键盘、鼠标…）
- 事件类型
- 不同的事件类型。如：单击事件、双击事件、鼠标移入、鼠标移除、键盘按下、输入框失去焦点、内容改表等等
- 事件监听
- 监听事件类型
- 事件回调函数
- 当事件触发之后执行的函数
| 事件名称 | 描述 |
|---|---|
| onchange | HTML 元素内容改变 |
| onclick | 用户点击 HTML 元素 |
| ondblclick | 双击 |
| onmouseover | 用户将鼠标移入一个HTML元素中 |
| onmousemove | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeyup | 键盘按键按下后抬起 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
| onsubmit | 表单提交 |
| onblur | 当输入框失去焦点 |
| oninput | 输入框内容改变 |
<script>
//页面加载完成之后执行
window.onload = function(){
console.log(document.getElementById("username"))
}
script>
<button onclick="f1()">点击一下button>
<button ondblclick="f2()">双击两下button>
<input type="text" name="username" onblur="f3()" id="username"/><span id="uSpan">span>
<select onchange="f4()" id="sel">
<option value="1">1option>
<option value="3">3option>
<option value="5">5option>
select>
<img src="images/8.jpg" width="200px" height="200px" onmouseover="f5()" onmouseout="f6()">
<input oninput="f7()" type="text" name="searchName" />
<form action="" method="get" onsubmit="return f3()">
用户名：<input type="text" name="username" onblur="f3()" id="username"/><span id="uSpan">span>
<input type="submit" value="登录" />
form>
<script>
function f1(){
alert("按钮被点击了...");
}
function f2(){
alert("按钮被双击了...");
}
function f3(){
//1、获取输入框中的内容 2、判断是否合法
var username = document.getElementById("username").value;
if(username.length >= 6){
document.getElementById("uSpan").innerHTML = "用户名可用";
document.getElementById("uSpan").style.color = 'green';
return true;
}else{
document.getElementById("uSpan").innerHTML = "用户名不可用";
document.getElementById("uSpan").style.color = 'red';
return false;
}
//alert("失去了焦点...");
}
function f4(){
alert("下拉框内容改变..."+document.getElementById("sel").value);
}
function f5(){
console.log("进来了...");
}
function f6(){
console.log("出去了...");
}
function f7(){
console.log("改变了....")
}
window.onkeydown = function(e){
//console.log("键盘按下....")
if(e.keyCode == 13){
console.log("执行登录操作....")
}
//console.log(e.keyCode)
}
function f8(){
console.log("表单提交了....")
}
script>
3 DOM（Document Object Model）
元素：标签以及标签所包含的内容
元素属性：标签的属性
节点：元素、属性、文本统称为节点（元素—标签节点、属性—属性节点、文本—文本节点）
节点名称：标签节点的节点名就是标签名，属性节点的节点名就是属性名，文本节点的节点名是text
3.1 获取元素节点
- document对象指代的就是一个网页文档，document对象提供属性、函数大多都是获取网页文档中的元素
通过标签的id属性获取元素节点 单个
- document.getElementById(“id名称”)
通过class样式名获取元素节点 多个
- document.getElementsByClassName(“class名称”)
通过标签名称获取元素节点 多个
- document.getElementsByTagName(“元素节点”)
通过name属性获取元素节点 多个 返回数组
- document.getElementsByName(“name名称”)
<p id="p1">这是一个p标签p>
<input type="text" id="in">
<button class="btn">这是一个按钮button>
<button class="btn">这是另一个按钮button>
<input type="checkbox" name="hobby" />篮球
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />排球
<script>
// var p = document.getElementById("p1");
// alert(p);
// var inp = document.getElementById("in");
// alert(inp);
// var btn = document.getElementsByClassName("btn");
// alert(btn[0]);
// var p = document.getElementsByTagName("p");
// alert(p[0]);
var inputs = document.getElementsByName("hobby");
alert(inputs.length);
script>
3.2 操作文本节点
两个标签之间的内容为文本节点
- 元素节点.innerHTML 获取|设置元素的文本节点
- 元素节点.innerText 获取|设置元素的文本节点（不包含元素标签）
<p id="p1"><span>这是一个p标签span>p>
<button onclick="f1()">获取文本内容button>
<button onclick="f2()">设置文本内容button>
<script>
//1、获取元素节点
var p = document.getElementById("p1");
function f1(){
//获取文本节点上的内容
//alert(p.innerHTML);
alert(p.innerText);
}
function f2(){
//设置文本节点上的内容
p.innerHTML = "这是设置上去的值";
}
script>
3.3 操作属性节点
元素节点.属性名 设置|获取元素节点的属性值
<img src="images/1.jpg" width="200px" height="200px">
<button onclick="f1()">切换图片button>
<input type="text" name="username">
<button onclick="f2()">获取输入框中的内容button>
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />排球
<button onclick="f3()" id="btn">全选button>
<script>
function f1(){
//1、获取img这个元素节点
var img = document.getElementsByTagName("img")[0];
//2、修改src属性
if(img.src == 'http://127.0.0.1:8848/03_JavaScript/images/8.jpg'){
img.src = "images/1.jpg";
}else{
img.src = "images/8.jpg";
}
}
function f2(){
//1、获取input这个元素节点
var input = document.getElementsByName("username")[0];
alert(input.value);
}
function f3(){
var btn = document.getElementById("btn");
if(btn.innerHTML == '全选'){
//1、获取所有的复选框
var hobbys = document.getElementsByName("hobby");
//2、改变checked
for(var i = 0 ; i < hobbys.length ; i++){
hobbys[i].checked = true;
}
//3、将按钮上的字改成全不选
btn.innerHTML = '全不选';
}else{
//1、获取所有的复选框
var hobbys = document.getElementsByName("hobby");
//2、改变checked
for(var i = 0 ; i < hobbys.length ; i++){
hobbys[i].checked = false;
}
//3、将按钮上的字改成全不选
btn.innerHTML = '全选';
}
}
script>
3.4 操作元素节点
- 创建元素：document.createElement()
- 追加元素：appendChild()
- 删除当前元素的指定子元素
- removeChild()
- 删除当前元素及其所有的子元素
- remove()
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<ul id="city">
<li>北京li>
<li id="wh">武汉li>
<li>上海li>
<li>杭州li>
ul>
<input type="text" name="name" id="name" />
<button id="btn1">点击添加(默认在最后)button>
<button id="btn2">点击添加(指定的位置之前)button>
<button onclick="f3()">点击删除button>
<a href="19_jsBOM对象.html">123a>
<script>
document.getElementById("btn1").onclick = function(){
//1、获取输入框中的内容
var name = document.getElementById("name").value;
if(name == null || name == '' || name == undefined){
alert("输入内容不能为空");
return;
}
//创建li标签
var li = document.createElement("li");
//给li标签设置文本节点
li.innerHTML = name;
//将创建的li标签添加到ul中
var ul = document.getElementById("city");
ul.appendChild(li);
}
document.getElementById("btn2").onclick = function(){
//1、获取输入框中的内容
var name = document.getElementById("name").value;
if(name == null || name == '' || name == undefined){
alert("输入内容不能为空");
return;
}
//创建li标签
var li = document.createElement("li");
//给li标签设置文本节点
li.innerHTML = name;
//将创建的li标签添加到ul中并且在指定的wh之前
var ul = document.getElementById("city");
ul.insertBefore(li,document.getElementById("wh"))
}
function f3(){
//获取ul标签
//var ul = document.getElementById("city");
//删除当前元素的指定子元素
//ul.removeChild(document.getElementById("wh"));
var wh = document.getElementById("wh");
//删除当前元素及其所有的子元素
wh.remove();
}
script>
body>
html>
4 BOM(Broswer Object Model)
4.1 Window
指整个浏览器对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
4.2 Screen
包含屏幕信息
- 可用宽度：screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
- 可用高度：screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
console.log(screen.availWidth);
console.log(screen.availHeight);
4.3 Navigator
包含浏览器内部信息
- 浏览器代号:navigator.appCodeName
- 浏览器名称: navigator.appName
- 浏览器版本:navigator.appVersion
- 硬件平台:navigator.platform
- 用户代理:navigator.userAgent
<div id="example">div>
<script>
txt = "浏览器代号: "
+ navigator.appCodeName + "";
txt+= "浏览器名称: "
+ navigator.appName + "";
txt+= "浏览器版本: "
+ navigator.appVersion + "";
txt+= "启用Cookies: "
+ navigator.cookieEnabled + "";
txt+= "硬件平台: "
+ navigator.platform + "";
txt+= "用户代理: "
+ navigator.userAgent + "";
txt+= "用户代理语言: "
+ navigator.systemLanguage + "";
document.getElementById("example").innerHTML=txt;
script>
4.4 History
相当于浏览器上的前进后退
- window.history 对象包含浏览器的历史。
- history.back()
- history.forward()
- history.go(n)
4.5 Location
浏览器地址栏信息
//跳转到指定的页面
location.href = "http://www.baidu.com";
//刷新页面
location.reload();
4.6 定时器
- setTimeout 只执行一次
- 参数1：定时任务的函数， 参数2：多长时间之后执行(毫秒)
- setInterval 执行多次
- 参数1：定时任务的函数， 参数2：执行的周期(毫秒)
- clearInterval(t); 结束定时任务
<script>
//setTimeout：任务只会执行一次 参数1：定时任务的回调函数 参数2：延迟时间
// window.setTimeout(function(){
// console.log("定时器执行了")
// },2000)
var t ;
function f1(){
//setInterval：任务会多次执行 参数1：定时任务的回调函数 参数2：执行周期
t = window.setInterval(function(){
console.log("定时器执行了")
},1000);
}
function f2(){
//结束定时器 参数：定时器对象
window.clearInterval(t);
}
</script>