JavaScript基础介绍
一.简介
1.概念
JavaScript是一门客户端脚本语言
* 运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎
* 脚本语言：不需要编译，直接就可以被浏览器解析执行了
2.功能
* 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
3.发展史
* JavaScript发展史：
1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C--，后来更名为：ScriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：命名为LiveScript。后来，请来SUN公司的专家，修改LiveScript，最后命名为JavaScript
3. 1996年，微软抄袭JavaScript开发出JScript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，最终制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式。
* 现在：JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
二.ECMAScript
- 客户端脚本语言的标准
1.基本语法
1.1 与html结合方式
1. 内部JS：
* 定义<script>，标签体内容就是js代码
2. 外部JS：
* 定义<script>，通过src属性引入外部的js文件
* 注意：
1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
2. <script>可以定义多个。
a.js代码
alert(666)//弹框
console.log(123456)
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="a.js"></script>
</head>
<body>
<input type="text" value="hello">
</body>
<script>
alert(123)
</script>
</html>
运行结果
1.2 注释
1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/
1.3 数据类型
1. 原始数据类型(基本数据类型)：
1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。 字符串 "abc" "a" 'abc'
3. boolean: true和false
4. null：一个对象为空的占位符
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
2. 引用数据类型：对象
相关代码：
<script>
let a="666",b=10,c=false,d="",e=null,f;
console.log(typeof a)//string
console.log(typeof b)//number
console.log(typeof c)//boolean
console.log(typeof d)//string
console.log(typeof e)//object
console.log(typeof f)//object
console.log("---------------------")
//1.string--> number boolean-->number +
console.log(typeof +a)//number
console.log(typeof +c)//number
console.log( +a)//666
console.log( +c)//0
console.log("---------------------")
//2.number-->boolean string-->boolean !
let a1="666",b1=10,c1=false,d1="",e1=null,f1;
console.log(typeof !a1)//boolean
console.log(typeof !b1)//boolean
console.log(!a1)//false
console.log(!b1)//false
console.log(typeof a1)//string
console.log(b1)//10
console.log("111---------------------")
//3.应用--非空验证
if (d!=""&&e!=null&&f!=undefined){
console.log("三者都非空")
}else {
console.log("至少有一个空")
}
console.log(a)//string类型 666
console.log(!a)//false
console.log(!!a)//true
console.log(d)//string类型
console.log(!d)//true
console.log(!!d)//false
console.log( e)//null
console.log( !e)//true
console.log( !!e)//false
console.log("---------------------")
//应用--非空验证 简化1
if (!!d&&!!e&&!!f){
console.log("三者都非空")
}else {
console.log("至少有一个空")
}
//应用--非空验证 简化2
if (d&&e&&f){
console.log("三者都非空")
}else {
console.log("至少有一个空")
}
</script>
F12进入控制台查看
1.4 变量
* 变量：一小块存储数据的内存空间
* Java语言是强类型语言，而JavaScript是弱类型语言。
* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
* 语法：
* var/let 变量名 = 初始化值;
* typeof运算符：获取变量的类型。
* 注：null运算后得到的是object
1.5 运算符
-
一元运算符
只有一个运算数的运算符 ++，-- ， +(正号) * ++(--) 在前，先自增(自减)，再运算 * ++(--) 在后，先运算，再自增(自减) * +(-)：正负号 * 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换 * 其他类型转number： * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字） * boolean转number：true转为1，false转为0 -
算术运算符
+ - * / % ... -
赋值运算符
= += -+.... -
比较运算符
> < >= <= == ===(全等于) * 比较方式 1. 类型相同：直接比较 * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。 2. 类型不同：先进行类型转换，再比较 * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false -
逻辑运算符
&& || ! * 其他类型转boolean： 1. number：0或NaN为假，其他为真 2. string：除了空字符串("")，其他都是true 3. null&undefined:都是false 4. 对象：所有对象都为true -
三元运算符
? : 表达式 var a = 3; var b = 4; var c = a > b ? 1:0; * 语法： * 表达式? 值1:值2; * 判断表达式的值，如果是true则取值1，如果是false则取值2；
1.6 流程控制语句
1. if...else...
2. switch:
* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
* switch(变量):
case 值:
* 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. for 增强：for of for in
- 扩展
let str="hello";
for (let i = 0; i < str.length; i++) {
console.log(str[i]);
}
for(let s of str){//增强for
console.log(s);
}
for(let s in str){//输出下标
console.log(s);
}
//字符串的解构
let [a,b,c,d,e]=str;
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)
1.7 js特殊语法
1. 语句以;结尾，如果一行只有一条语句则 ;建议省略
2. 变量的定义使用var或let关键字，也可以不使用
* 用： 定义的变量是局部变量
* 不用：定义的变量是全局变量
1.8 练习
- 九九乘法表
<script>
document.write("<table align='center'>");
//1.完成基本的for循环嵌套，展示乘法表
for (var i = 1; i <= 9 ; i++) {
document.write("<tr>");
for (var j = 1; j <=i ; j++) {
document.write("<td>");
//输出 1 * 1 = 1
document.write(i + " * " + j + " = " + ( i*j) +" ");
document.write("</td>");
}
document.write("</tr>");
}
//2.完成表格嵌套
document.write("</table>");
</script>
2.基本对象
2.1 Function 函数对象
1. 创建：
1. var fun = new Function(形式参数列表,方法体);
2.
function 方法名称(形式参数列表){
方法体
}
3.
var 方法名 = function(形式参数列表){
方法体
}
2. 属性：
length:代表形参的个数
3. 特点：
1. 方法定义是，形参的类型不用写,返回值类型也不写。
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
相关代码：
<script>
//1.普通函数
function f(x,y=6) {
console.log(x,y)
}
f()//undefined 6
f(1)//1 6
f(1,2)//1 2
f(1,2,3)//1 2
//函数覆盖
function f(x,y=6,z) {
console.log(x,y,z)
}
f(1,2)//1 2 undefined
f(1,2,3)// 1 2 3
console.log("-------------")
function f(x,y=6) {
console.log(x,y)
return [x,y]
}
console.log(f(1, 2));// [1,2]
//2.匿名函数
let f1=function (x,y) {
console.log(x,y)
}
f1(3,6)
//3.动态函数
let f2=new Function("x,y","console.log(x,y)")
f2(3,6)
</script>
2.2 Array 数组对象
1. 创建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
4.let [...arr]=["hello",666];
2. 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
pop() 删除数组最后一个元素
3. 属性
length:数组的长度
4. 特点：
1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的。
5.遍历
for in for of foreach
-
遍历
//1.forEach arr1.forEach(function (e) { console.log(e) }) //2.箭头函数--简化 arr1.forEach(e =>console.log(e)) //3.entry let entries = arr1.entries(); for (const entry of arr1.entries()) { console.log(entry) }
相关代码：
<script>
//创建方式
let arr1=new Array(1,2,3.6,true,'hello');
let arr2=[1,2,3.6,true,'hello'];
let arr3=new Array(5);
arr3[0]=1;
arr3[1]=2;
let [a,b,c,d]=[1,2,3,4];
let [...arr4]=[1,2,3,4];
let [...arr5]='hello';
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);
console.log("----------------")
//常用方法
arr1.push(666);//末尾添加
console.log(arr1);
arr1.pop();//末尾删除
console.log(arr1);
console.log(arr1.join("---"));//照指定的分隔符拼接为字符串
console.log("------------")
//遍历 for for in for of
arr1.forEach(function (a) {
console.log(a);
})
//遍历简化
arr1.forEach((e) =>console.log(e));
//entry
for (const entry of arr1.entries()) {
console.log(entry)
}
</script>
2.3 Date 日期对象
1. 创建：
var date = new Date();
2. 方法：
toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
2.4 Math 数学对象
1. 创建：
* 特点：Math对象不用创建，直接使用。 Math.方法名();
2. 方法：
random():返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。
3. 属性：
PI
相关代码：
<script>
//日期
let date=new Date()
console.log(date)//Thu Jan 14 2021 16:58:03 GMT+0800 (中国标准时间)
console.log(date.toLocaleString())// 2021/1/14 下午4:58:03
console.log(date.toLocaleDateString())// 2021/1/14
console.log(date.toLocaleTimeString())// 下午4:58:03
console.log(date.getTime())//获取毫秒数，常用来比较浏览器运行时间
console.log("-----------")
//数学
console.log(Math.max(4,5,2,1))//5
console.log(Math.min(4,5,2,1))//1
console.log(Math.ceil(1.1))//2
console.log(Math.floor(1.9))//1
console.log(Math.random()*10)//
console.log(Math.round(1.4))//1
console.log(Math.abs(-1.4))//1.4
console.log(Math.pow(3,3))//27
</script>
2.5 RegExp 正则对象
1. 正则表达式：定义字符串的组成规则。
1. 单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
2. 量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省： {,n}:最多n次
* n如果缺省：{m,} 最少m次
3. 开始结束符号
* ^:开始
* $:结束
2. 正则对象：
1. 创建
1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/;
2. 方法
1. test(参数):验证指定的字符串是否符合正则定义的规范
相关代码：
<script>
let s="hello";
let reg=/[a-z]{5}/;
let reg1=new RegExp("[a-z]{5}")
console.log(reg.test(s));//true
console.log(reg1.test(s));//true
let s1="12sdf%$4&";
let s1reg=/[1][0-9][a-z]{3}[%][$][4][&]/
console.log(s1reg.test(s1));//true
</script>
2.6 Global全局对象
1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法：
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字
* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN
* NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
eval():解析 JavaScript 字符串，并把它作为脚本代码来执行。
<script>
let s1=encodeURI("天气@#")
console.log(s1);//%E5%A4%A9%E6%B0%94@#
console.log(decodeURI(s1));//天气@#
let s2=encodeURIComponent("天气@#")
console.log(s2);//%E5%A4%A9%E6%B0%94%40%23
console.log(decodeURIComponent(s2));//天气@#
let a="132456",b="12sdf123",c="sfg123";
console.log(parseInt(a));//132456
console.log(parseInt(b));//12
console.log(parseInt(c));//NaN
console.log(typeof parseInt(a));//number
console.log(typeof parseInt(b));//number
console.log(isNaN(parseInt(b)));//false
console.log(isNaN(parseInt(c)));//true
console.log(isNaN(parseInt(NaN)));//true
let s5="alert('hello')"
console.log(s5)
document.write(s5)
eval(s5)
</script>
核心总结:
1.掌握html和js的两种结合方式
2.掌握js的单行注释和多行注释
3.掌握js的5种原始数据类型
4.掌握string和boolean类型数据如何转换成number类型数据
5.掌握string和number类型数据如何转换成boolean类型数据
6.用四种方式输出99乘法表(页面输出或控制台输出)
7.以金字塔形式输出99乘法表
8.掌握函数的三种定义方式和函数的调用
9.掌握arguments实参数组实现所有参数值的求和。
作业
1.移除数组中给定的元素
2.查找数组中重复出现的元素
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-awKq1f0B-1610626175430)(imgs/1610584547614.png)]](https://i-blog.csdnimg.cn/blog_migrate/93953ccd8096966785ee1796389cf463.png)
第一题：
<script>
let arr=[1,2,2,3,4,2,2];
let item=2;
function f1(Array,number){
for (let i=0;i<Array.length;i++){
if (Array[i]==number){
Array.splice(i,1);//删除1个，从第i个下标开始
i--;
}
}
}
f1(arr,item)
console.log(arr);
</script>
第二题：
<script>
let arr=new Array(1,2,4,4,3,3,1,5,3);
arr.sort();
let arr1=new Array();
function f1(arr,arr1) {//添加重复元素
for (let i=0;i<arr.length;i++){
if (arr[i]==arr[i+1]){
arr1.push(arr[i]);
}
}
}
function f2(arr) {//删除重复元素
for (let i=0;i<arr.length;i++){
if (arr[i]==arr[i+1]){
arr.splice(i,1);
i--;
}
}
}
f1(arr,arr1);
f2(arr1)
console.log(arr1);
</script>
九九乘法表：
控制台实现：
<script>
let s=0;
for (let i=1;i<=9;i++){
for (let j=1;j<=i;j++){
s=s+j+"*"+i+"="+j*i+" ";
}
s=s+"\n";
}
console.log(s)
</script>
表格实现：
<style>
table{
border: 4px #40d5e1 solid;
mso-cellspacing: 0;
align-content: center;
/*background: burlywood;*/
}
</style>
<body>
</body>
<script>
for (let i=1;i<=9;i++){
for (let j=1;j<=i;j++){
document.write(j+"*"+i+"="+j*i);
}
}
</script>
<script>
document.write("<table border='2px' cellspacing='0'>")
for (let i=1;i<=9;i++){
document.write("<tr>")
for (let j=1;j<=i;j++){
document.write("<td>")
document.write(j+"*"+i+"="+j*i+" ");
document.write("</td>")
}
document.write("</tr>")
}
document.write("</table>")
</script>
376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
