JS 基础知识

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)); // 类型为undefinedalert("Num2的类型为："+typeof(Num2)); // 类型为numberalert("Num3的类型为："+typeof(Num3)); // 类型为numberalert("Num4的类型为："+typeof(Num4)); // 类型为stringalert("Num5的类型为："+typeof(Num5)); // 类型为objectalert("Num6的类型为："+typeof(Num6)); // 类型为booleanalert("Num7的类型为："+typeof(Num7)); // 类型为objectalert("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); // 返回truealert(a === b); // 返回false// 且运算 &&// 或运算 ||// 取反运算 !// js中所有变量均可以作为booleanvar 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);//truealert(b && a); //true 返回abdalert(d && c); // false 返回nullalert(c && d); // false 返回false// ||运算// 第一种 当表达式全为假时，返回最后一个表达式的值// 第二种 只要有一个表达式为真时 就会返回第一个为真的表达式的值alert("|| 的用法");alert(c || d); //false 返回nullalert(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); // 结果为4a[10] = "abcd";alert(a.length); // 结果为11for(var i = 0;i<a.length;i++){// 这里面除了第一二三四个和最后一个有值外，其余的显示均是undefinedalert(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)); // 类型为objectalert(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)); //45alert(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)); // 类型为objectobj.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)); // 类型为Objectvar jsonStr = JSON.stringify(jsObject); // 转化为json字符串alert(jsonStr);alert(typeof(jsonStr)); // 类型为stringjsObject = JSON.parse(jsonStr); // 转化为Objectalert(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: "李四",// 方式一：箭头函数不能使用thiseat1: 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>