JS 基础知识
JS简介
JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本，在Web应用中得到了非常广泛的应用。它不需要编译，而是直接嵌入在HTTP页面中，把静态页面转变成支持用户交互并响应应用的动态页面。在JavaWeb程序中，经常应用JavaScript进行数据验证，控制浏览器以及生成时钟、日历和时间戳文档等。
JS语言基础
使用方式：通过使用<script>标签
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<script type = "text/javascript">
alert("你好 世界");
</script>
</head>
<body>
</body>
</html>
效果显示：
定义变量，JavaScript语言是一种弱语言，即不需要明确指定数据类型就可以定义：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<script type = "text/javascript">
// 定义变量
var userName = "张三";
var userAge = 20;
var userSex = '男';
alert("用户姓名："+userName+"、用户年龄："+userAge+"、用户性别："+userSex);
// 基本变量类型
var Num1;
var Num2 = 1;
var Num3 = 1.0;
var Num4 = "";
var Num5 = null;
var Num6 = false;
var Num7 = [userName,userAge,userSex];
var Num8 = Num4*Num7;
alert("Num1的类型为："+typeof(Num1)); // 类型为undefined
alert("Num2的类型为："+typeof(Num2)); // 类型为number
alert("Num3的类型为："+typeof(Num3)); // 类型为number
alert("Num4的类型为："+typeof(Num4)); // 类型为string
alert("Num5的类型为："+typeof(Num5)); // 类型为object
alert("Num6的类型为："+typeof(Num6)); // 类型为boolean
alert("Num7的类型为："+typeof(Num7)); // 类型为object
alert("Num8的类型为："+typeof(Num8)+" Num8的值为："+Num8); // 值为NAN
</script>
</head>
<body>
</body>
</html>
导入外部JS文件：
首先新建一个后缀为.js的文件，然后在需要使用的html页面中引入即可，这样做可提高代码的重用性。
//js基础.js
alert("你好 世界");
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<!--
使用script引入js文件
SRC属性 引用js文件的地址
-->
<!-- 需要主要的是一旦使用了外部js文件时，不能再在script标签内使用js语句 -->
<script type = "text/javascript" src = "js基础.js"></script>
<script type = "text/javascript">
alert('世界 你好');
</script>
</head>
<body>
</body>
</html>
结果会出现两个提示框
逻辑运算：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<script type = "text/javascript">
// 等于 == 字面值比较
// 全等于 === 除了字面值比较，还比较数据类型
var a = "13";
var b = 13;
alert(a == b); // 返回true
alert(a === b); // 返回false
// 且运算 &&
// 或运算 ||
// 取反运算 !
// js中所有变量均可以作为boolean
var a = 0;
if(a){
alert("零为真");
}else{
alert("零为假");
}
a = "0";
if(a){
alert("零为真");
}else {
alert("零为假");
}
a = null;
var b = undefined;
var c = "";
if(a || b || c){
alert("null以及undefined以及空字符串为真");
}else{
alert("全为假");
}
// &&运算
// 第一种 当表达式全为真时，返回最后一个表达式的值
// 第二种 当表达式有一个为假时，返回第一个为假的表达式值
var a = "abd";
var b = true;
var c = false;
var d = null;
alert("&& 的用法");
alert(a && b);//true
alert(b && a); //true 返回abd
alert(d && c); // false 返回null
alert(c && d); // false 返回false
// ||运算
// 第一种 当表达式全为假时，返回最后一个表达式的值
// 第二种 只要有一个表达式为真时 就会返回第一个为真的表达式的值
alert("|| 的用法");
alert(c || d); //false 返回null
alert(c || a || b); //true 返回abd
</script>
</head>
<body>
</body>
</html>
数组类型：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<script type = "text/javascript">
// javascript 语言中的数组，类型可以不统一，和python的list类似
// javascript 语言中的数组，数组为可变长度
var a = ["2000",null,false,2000]; //定义数组
alert(a.length); // 结果为4
a[10] = "abcd";
alert(a.length); // 结果为11
for(var i = 0;i<a.length;i++){
// 这里面除了第一二三四个和最后一个有值外，其余的显示均是undefined
alert(a[i]);
}
</script>
</head>
<body>
</body>
</html>
js函数用法：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<script type = "text/javascript">
// 函数
// function 关键字
// function 函数名(形参列表){}
// 在js中是不允许函数重载的：因为重载是会覆盖上一个函数定义
// 定义一个无参函数
function fun1(){
alert("无参函数");
}
fun1(); //调用
// 定义一个有参函数
function fun2(a,b){
alert("有参函数 a="+a+"，b = "+b);
}
var a = 10;
var b = 12;
fun2(a,b);
// 定义一个带有返回值的函数
function fun3(a,b){
return a+b;
}
alert("有参函数返回值："+fun3(a,b));
// 函数的第二种定义方式
// var 函数名 = function(参数列表){函数体}
var fun4 = function(){
alert("第二种函数定义方式");
}
fun4();
// 函数参数列表提供了隐形参数arguments，类似于python的可变参数*args，java的Object...args
// 一般将它看作一个数组即可
function fun5(){
alert(typeof(arguments)); // 类型为object
alert(arguments.length); // 结果为arguments的长度
alert("无参函数");
}
fun5(1,"函数");
</script>
</head>
<body>
</body>
</html>
函数的简单使用：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<script type = "text/javascript">
// 利用for求各元素之和
var sum = function(num1,num2){
var result = 0;
for(var i = 0; i<arguments.length;i++){
if(typeof(arguments[i]) == 'number'){ // 过滤数值型数据
result += arguments[i];
}
}
return result;
}
alert(sum(1,2,3,4,5,6,7,8,9)); //45
alert(sum(1,2,3,4,5,"abc",6,7,8,9)); //45
</script>
</head>
<body>
</body>
</html>
对象的定义和使用：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<script type = "text/javascript">
// 对象的定义
// var 变量名 = new object()
// 对象的属性访问 变量名.属性
// 对象的函数访问 变量名.函数名()
var obj = new Object(); // 定义一个空对象
obj.name = "无名氏"; // 给obj对象属性赋值
obj.age = 10;
obj.fun = function(){ // 给obj对象函数赋值 第二种函数定义方式
alert("姓名："+this.name+" 年龄："+this.age);
}
alert(typeof(obj)); // 类型为object
obj.fun(); // 访问对象函数
// 花括号定义 自定义对象
var obj1 = {}; // 定义一个空对象
alert(typeof(obj1)); // 类型为object
// 对象内之间用','相隔,其中元素的键值对为':'，而不是用'='
var obj2 = {
// 属性名 ： 值 定义一个属性
// 函数名 ： function 定义一个函数
name : "张三",
age : 20,
fun : function(){
alert("姓名："+this.name+" 年龄："+this.age);
}
};
alert(obj2.name); //访问自定义对象的属性
obj2.fun(); // 访问自定义对象的函数
</script>
</head>
<body>
</body>
</html>
常用鼠标事件：
onload：加载完成事件 页面加载完成之后，常用于页面js代码初始化操作
onclick：单击事件 常用于按钮的点击响应操作
onblur：失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法
onchange：内容发生改变事件 常用于下拉列表个输入框内容改变后操作
onsubmit: 常用于表单提交 常用于表单提交，验证所有表单项是否合法
事件的注册：
静态注册 ： 通过html标签的事件属性直接赋予事件响应后的代码
动态注册： 是指先通过js代码得到标签的document对象，然后再通过 元素对象.事件名 = function()响应
onload静态注册：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<script type = "text/javascript">
// 静态注册
function onloadFun(){
alert("静态注册onload事件");
}
</script>
</head>
<!-- 以下为静态注册 -->
<body onload = "onloadFun();">
</body>
</html>
onload动态注册：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<script type = "text/javascript">
// 动态事件
// 通过window对象实现
window.onload = function(){
alert("动态注册的onload事件");
}
</script>
</head>
<!-- 以下为动态注册 -->
<body>
</body>
</html>
oclick事件注册方式：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基础</title>
<script type = "text/javascript">
// 静态注册onclick事件
function onClickFun(){
alert("静态注册onclick事件");
}
// 动态注册onclick事件
window.onload = function(){
// 1.获取标签对象
// get 获取
// Element 元素
// By 通过
// Id id属性
var btnObj = document.getElementById("btn1"); // 这个很重要
alert(typeof(btnObj)); // 对象类型为object
// 2. 通过元素对象定义函数
btnObj.onclick = function(){
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<!-- 静态注册onclick事件 -->
<button onclick = "onClickFun();">按钮1</button>
<!-- 动态注册onclick事件 -->
<button id = "btn1" >按钮2</button>
</body>
</html>
onchange事件注册方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js基础</title>
<script type = "text/javascript">
function onchangeFun() {
// 输出到浏览器控制台
console.log("静态注册 内容发生改变事件");
}
window.onload = function(){
// 获取标签对象
var choose = document.getElementById("choose");
// 对标签对象的相应事件定义方法
choose.onchange = function(){
console.log("动态注册 内容发生改变事件");
}
}
</script>
</head>
<body>
<div align = "center">
<select onchange = "onchangeFun();" >
<option>
敲木鱼（敲代码）
</option>
<option>
念经（看书）
</option>
<option>
修禅（修bug）
</option>
<option>
成佛（秃头）
</option>
</select>
</div>
<hr/>
<div align = "center">
<select id = "choose" >
<option>
敲木鱼（敲代码）
</option>
<option>
念经（看书）
</option>
<option>
修禅（修bug）
</option>
<option>
成佛（秃头）
</option>
</select>
</div>
</body>
</html>
onblur事件注册方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js基础</title>
<script type = "text/javascript">
function onblurFun() {
// 输出到浏览器控制台
console.log("静态注册 失去焦点事件");
}
window.onload = function(){
// 获取标签对象
var pwd = document.getElementById("pwd");
// 对标签对象的相应事件定义方法
pwd.onblur = function(){
console.log("动态注册 失去焦点事件");
}
}
</script>
</head>
<body>
<table>
<tr>
<!-- 静态注册 -->
<td align = "right">用户名：</td>
<td><input type = "text" onblur="onblurFun();"/></td>
</tr>
<tr>
<!-- 动态注册 -->
<td align = "right">密码：</td>
<td><input type = "password" id = "pwd" /></td>
</tr>
</table>
</body>
</html>
onsubmit事件注册方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js基础</title>
<script type = "text/javascript">
function onsubmitFun(){
alert("静态方式 表单提交事件");
return false; // 当提交的所有信息有不合法的内容时，此时不会跳转页面
}
window.onload = function(){
// 获取标签对象
var submit = document.getElementById("submit");
// 通过标签对象定义相应事件方法
submit.onsubmit = function() {
alert("动态注册 表单提交事件");
return false; // 当提交的所有信息有不合法的内容时，此时不会跳转页面
}
}
// 以下为对加载过程的加深理解
// 通过方法实现对对象的操作
function fun(){
// 获取标签对象
var button = document.getElementById("button");
button.onclick = function(){
alert("你点击了按键");
}
}
</script>
</head>
<body>
<!-- 静态注册 -->
<div align = "center">
<form action = "http://localhost:8080" method = "get" onsubmit = "return onsubmitFun();">
<input type = "text" name = "文本" /><br/><br/>
<input type = "submit"/>
</form>
</div>
<br/>
<!-- 动态注册 -->
<div align = "center">
<form action = "http://localhost:8080" method = "get" id = "submit">
<input type = "text" name = "文本" /><br/><br/>
<input type = "submit" />
</form>
</div>
<!-- 以下为对加载过程的加深理解 -->
<br/>
<br/>
<br/>
<button id="button" onclick = "fun();">按键</button>
</body>
</html>
filter/map/reduce高阶函数用法
以实现某一个数组小于等于555元素乘以2并最终求和为例：
// filter函数回调函数有一个要求，每次遍历一个数组元素必须返回一个boolean值
// 当返回true时，自动将回调的元素值加入到新的数组中
// 当返回false时，自动过滤该元素
// map ...
// reduce ...
// 1.filter用法
const nums = [111,555,666,222,333,444,777]
let result1 = nums.filter(function (num) {
return num<=555
})
console.log(result1);
// 2.map用法
let result2 = result1.map(function (num) {
return num * 2
})
console.log(result2);
// 3.reduce用法
let result3 = result2.reduce(function (sum,num) {
return sum+num
},0)
console.log(result3);
// 链式函数实现
let result = nums.filter(function (num) {
return num <= 555
}).map(function (num) {
return num * 2
}).reduce(function (sum,num) {
return sum + num
},0)
console.log(result);
Java Script的DOM技术
document.getElementById // 通过标签的id获取元素对象
document.getElementsByName // 通过标签的name获取元素对象集合
document.getElementsByTagName // 通过标签名获取元素集合
document.createElement // 创建一个标签
document.createTextNode // 创建一个文本节点
Object.innerHTML // 获取或者替换标签的元素内容
Object.style.property // 修改标签的样式
Object.appendChild // 添加子节点
JSON
json是一种轻量级(相对于xml)的数据交互格式
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON</title>
<script type = "text/javascript">
var jsObject = {name:"张三",
age:20,
sex:true,
books:[
{bookName:"书籍一",bookPrice:100},
{bookName:"书籍二",bookPrice:200}]};
alert(typeof(jsObject)); // 类型为Object
var jsonStr = JSON.stringify(jsObject); // 转化为json字符串
alert(jsonStr);
alert(typeof(jsonStr)); // 类型为string
jsObject = JSON.parse(jsonStr); // 转化为Object
alert(typeof(jsObject)); // 类型为Object
</script>
</head>
<body>
</body>
</html>
结果：
JavaScript的ES6标准
不多说，直接看代码…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<script>
// 数组解构
let temp1 = [1,2,3];
let [a,b,c] = temp1;
console.log(a,b,c);
// 对象解构
let temp2 = {
name:"张三",
age: 22,
addr: "湖南省湘潭市"
}
let {age,addr,name} = temp2;
console.log(age,addr,name);
// 方法参数默认值
function add(a,b=1) {
return a + b;
}
console.log("求和为："+add(21));
// 方法不定参数
function fun1(...values) {
console.log(values.length); // 求出参数列表长度
}
fun1(1,2,3,4);
fun1(1,2);
// 箭头函数的用法
let fun2 = obj => {
console.log("你好，世界！");
console.log("- "+obj);
}
fun2(new Date().toDateString());
// 简单测试
const person = {
name: "张三",
age: 21,
language: ['java','cpp','js','css']
}
let hello1 = obj => {
console.log("Hello,"+obj.name);
}
hello1(person);
let hello2 = ({name}) => {
console.log("Hello,"+name);
}
hello2(person); // 进一步简化
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<script>
const person = {
name: "张三",
age: 22,
language: ['java','cpp','js','css']
};
console.log(Object.keys(person)); // 求出参数对象所有的键，返回数组
console.log(Object.values(person)); // 求出参数对象所有的值，返回数组
console.log(Object.entries(person)); // 求出参数对象所有的键值对[Array(2)]，返回数组
const target = {a:1};
const source1 = {b:2};
const source2 = {c:3,d:4};
const source3 = {e:5,a:2};
Object.assign(target,source1,source2,source3); // 将source1,source2,source3…的所有键值对添加到target中(注意覆盖…)
console.log(target);
// 声明对象简写
const name = "张三";
const age = 22;
const human = {name,age};
console.log(human);
// 对象的函数属性简写
let people = {
name: "李四",
// 方式一：箭头函数不能使用this
eat1: foot => {
// console.log(this.name+"吃"+foot+"… "); 为空对象
console.log(people.name+"吃"+foot+"… ");
},
// 方式二
eat2(foot) {
console.log(this.name+"吃"+foot+"… ");
}
}
people.eat1("水果");
people.eat2("早餐");
// 对象深拷贝
let person1 = {name:"王五",age: 22};
let person2 = { ...person1 }; // ...解构
console.log(person2);
// 合并对象
let bookName = {name:"三体"};
let bookPrice = {price:111.5};
let book = {...bookName,...bookPrice};
console.log(book);
</script>
</body>
</html>
参考：JavaWeb从入门到精通
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
