三万字速通JavaScript
目录
一、前言
二、什么是JavaScript，有什么用?
三、HTML嵌入JavaScript的方式：
第一种方式：
第二种方式：
第三种方式：
四、JavaScript的变量
五、函数初步
函数参数中的几个场景
情景1：传入参数不足
情景2：传入参数过多
情景3：无参数传入
情景4：多个函数同名
六、变量的种类
七、js中的数据类型
八、typeof运算符
九、原始类型：
1.Undefined
2. Number
什么时候结果是一个NaN呢？
十、常见的函数：
isNaN：
parseInt：
parseFloat：
Math.ceil():
4.Boolean
5、 Null
6、String
十一、 常用函数
考点:经常问 substr和substring的区别?
7、Object
十二、创建类的方式
方式①
方式②
十三、 js中创建类和对象？
十四、null、undefined、NaN的区别
十五、等同和全等运算符
十六、js常用事件
十七、 回调函数的概念
回调函数的特点：
十八、注册事件的两种方式：
常用的写法：
十九、代码的执行顺序
load事件解决：
二十、 捕捉键盘回车事件
二十一、 void运算符
二十二、控制语句
二十三、js中创建数组
二十四、 DOM编程获取value
BOM和DOM的区别和联系？
BOM包含DOM
点击按钮得到文本框中的值
按回车把文本框1内容复制到文本框2
失去焦点后执行这段
二十五、js中的innerHTML和innerText属性
innerText和innerHTML属性有什么区别?
二十六、正则表达式
1、什么是正则表达式，有什么用?
常见的的正则表达式符号
怎么创建正则表达式对象，怎么调用正则表达式对象的方法?
正则表达式的test()方法？
二十七、 去除前后空白trim
二十八、复选框的全选和取消全选
二十九、获取系统当前时间
获取毫秒数
三十、 周期函数setInterval
三十一、 内置支持类Array
join方法链接
反转数组：reverse()
三十二、BOM编程
window中open和close方法
三十三、消息框弹出（alert、confirm）
三十四、history和location对象
三十五、什么是JSON，有什么用?
JSON的语法格式：
创建JSON数组和遍历
复杂一些的JSON对象
三十六、 eval函数
面试题：
一、前言
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站前言 – 床长人工智能教程正在上传…重新上传取消https://www.cbedai.net/gkbskc
https://www.cbedai.net/gkbskc
html和css的学习大致完成，我们进入重要的JavaScript学习阶段
二、什么是JavaScript，有什么用?
Javascript是运行在浏览器上的脚本语言。简称JS。
他的出现让原来静态的页面动起来了，更加的生动。
三、HTML嵌入JavaScript的方式：
第一种方式：
1、要实现的功能:
用户点击以下按钮，弹出消息框。
2、弹窗
JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做:鼠标单击，单词:click。并且任何事件都会对应一个事件句柄叫做:onclick。【注意:事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTML标签的属性存在的。
3、οnclick=js代码"，执行原理是什么?
页面打开的时候，js代码并不会执行，只是把这段ss代码注册到按钮的click事件上了。等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
4、 怎么使用JS代码弹出消息框?
在JS中有一个内置的对象叫做window, 全部小写，可以直接拿来使用，window代表的是浏览器对象。 window对象有一个函数叫做:alert，用法是:window.alert("消息");这样就可以弹窗了。
5、window.可以省略
下面两个等价
<input type="button" value="hello" onclick="window.alert('hello world')"/><input type="button" value="hello" onclick="alert('hello world')"/>6、设置多个alert可以一直弹窗
<input type="button" value="hello" onclick="alert(hello java")alert(hello python')alert('hello javaScript!)"/>JS中的字符串可以使用双引号，也可以使用单引号。JS中的一条语句结束之后可以使用分号";"也可以不用。
<input type="button" value="hello" onclick="alert('hello world')"/>无分号，内单外双引号<input type="button" value="hello" onclick= 'alert("hello jscode");'/> 有分号，内双外单引号整体代码：
<!doctype html>
<htm1><head><title>JavaScript第一种</title></head><body><input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick='window.alert("hello jscode")'/>
<input type="button" value="hello" onclick="alert('hello zhangsan');alert('hello lisi');alert('hello wangwu')"/></body>
</html>弹窗效果：
第二种方式：
脚本如：
<script type="text/javascript">window.alert("Hello JavaScript")</script>
- javascript的脚本块在一个页面当中可以出现多次。
- javascript的脚本块出现位置也没有要求。
如：
<script type="text/javascript">window.alert("head "); window.alert("Hello World!")</script>
<!doctype html> <html><head><title>HTML中嵌入JS代码的第二种方式</title></head><body><script type="text/javascript">window.alert("min"); window.alert("Hello World!")</script>
<input type="button"value="按钮"/>
</body></html><script type="text/javascript">window.alert("last");window.alert("Hello World!")</script>alert有阻塞当前页面加载的作用。(阻挡，直到用户点击确定按钮。
在脚本块当中的程序，在页面打开的时候执行并且遵守自上而下的顺序依次逐行执行。 (这个代码的执行不需要事件，即运行就开始)
第三种方式：
引入外部独立的js文件如，外部文件路径
<!doctype html> <html><head><title>HTM中嵌入JS代码的第三种方式:引入外部独立的js文件。</title></head> <body><!--这个src表示路径，在text目录的1.js文件 --><script type="text/javascript" src="text/1.js"></script> </body></html>
在需要的位置引入js脚本文件
引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。
①在引入的外部脚本中又加alert，则这个不会生效
②需要另外写一个才会生效
如：
<!doctype html> <html><head><title>HTM中嵌入JS代码的第三种方式:引入外部独立的js文件。</title></head> <body><!--这个src表示路径，在text目录的1.js文件 --><script type="text/javascript" src="text/1.js"><!--下面这个不会起作用 -->window.alert("hello");</script> <!--需要另外写一个脚本才会生效，如： -->
<script type="text/javascript">window.alert("hello");</script></body></html>
四、JavaScript的变量
var 变量名;如：var i;
javascript是一门弱类型的语言，没有编译阶段一个变量可以随意赋值。
var i;
i=true;
i=1.23;
i=new Object();
i="abc";这里的var可以表示任何类型。
var i;
//i没有赋初始值默认是undefined一个变量没有赋初始值，默认是undefined ，undefined在js是一个具体存在的值。
测试代码：
<!doctype html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var i;alert("i的默认值是"+i);</script></body>
</html>
一个变量如果没声明直接用则会报错
<script type="text/javascript">alert(i);//i没声明。则会报i is not define的语法错误
</script>下列的结果是：
<script type="text/javascript">var i,b,c=10;alert("i="+i+",b="+b+",c="+c); </script>
结果：
js中的变量命名规范和规则差不多，但是变量的赋值就相差很远，Java是一门强类型的语言，而JavaScript是一门弱类型的语言。
怎么理解强类型和弱类型的语言呢？
java语言存在编译阶段，假设有代码:int i;
那么在Java中有一个特点是;java程序编译阶段就已经确定了 i变量的数据类型，该i变量的数据类型在编译阶段是int类型，那么这个变量到最终内存释放，一直都是int类型，不可能变成其他类型。强制类型转化变得也只是语法面上，对象的类型还是不变。
Java中要求申明的时候是什么类型就一直的是什么类型，不可变，这就是强类型。
JavaScript是一个弱类型是因为在声明的时候不需要指定数据类型，变量的类型是有值来定的。
五、函数初步
函数必须调用才会生效
js的函数类型没有限制和参数个数没有限制，函数名是唯一标识。
函数的定义格式：
方式①：
<script type="text/javascript">function 函数名(形式参数列表){函数体; }
</script>示例：
<script type="text/javascript">function sum(a,b,c){alert(a+b+c);}
</script>//函数必须调用才能执行:
sum(10,20,30);方式②：
<script type="text/javascript">函数名= function(形式参数列表){函数体; }
</script>将函数封装在点击事件：
<!doctype html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">didi=function(a){alert("hello"+a);}</script><input type="button" value="按钮呀" onclick="didi(' everyone');"></body>
</html>
js中的函数不能重载
函数参数中的几个场景
情景1：传入参数不足
<script type="text/javascript">didi=function(a,b){alert (a+b);}didi("hello");</script>//只传了一个
结果会是第一个参数赋值，另一个没赋值的默认是undefined，所以结果是helloundefined (字符串拼接)
情景2：传入参数过多
<script type="text/javascript">didi=function(a,b){alert (a+b);}didi(1,2,3,4);</script>
//传入过多个，只会计算函数参数多少个，所以只取2个，结果是1+2=3情景3：无参数传入
<script type="text/javascript">didi=function(a,b){alert (a+b);}didi();</script>//没传参结果是NaN，NaN表示具体存在的值，这个表示不是数字(Not a Number)
情景4：多个函数同名
<script type="text/javascript">didi=function(a){alert (hello);}didi=function(a,b){alert ("hi");}didi("xiu")</script>
//结果是 hi，因为函数同名后面的会覆盖前面的
函数名不能重名，否则后面的函数会覆盖前面的，因为是自上而下执行程序
六、变量的种类
①全局变量:
在画数体之外声明的变量属于全局变量，全局变量的生命周期是:
浏览器打开时声明，浏览器关闭时销毁，尽量少用，因为全局变量会一直在浏览器的内存当中，耗费内存空间。所以尽量使用局部变量
②局部变量:
在函数体当中声明的变量。包括一个函数的形参都属于局部变量
局部变量的生命周期是:函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
这和java中的基本一致。
<!doctype html>
<html><meta charset="utf-8"><head><title></title></head><body><script type="text/javascript">var play=100;function player(){var play="张三";alert(play);}player();//调用alert(play);</script></body></html>>如果一个变量没有var修饰那他就是全局变量，和他所在的位置无关。
如：
<script type="text/javascript">function player(){play="张三";//变量要赋值}player();//调用alert(play);</script>
若是加上var修饰则，则定义在函数体内的变量则无法访问，因为他已经销毁了。
两个相同的变量和作用范围（都是全局或都是局部变量），后出现的会覆盖先出现的变量，因为执行顺序是自上而下的。
七、js中的数据类型
虽然js在声明的时候不需要指定类型，但是每个值还是有类型的。
分为：原始类型和引用类型
原始类型：Undefined、Number、String、boolean、Null
引用类型：Object和object的子类
ES规范（ECMAScript规范）：在ES6之后又在数据类型上面增加了叫Symbol的数据类型
八、typeof运算符
js中有一种运算符为typeof，这个运算符可以在程序执行过程中动态的获取变量的数据类型
typeof运算符的语法格式:
typeof 变量名
typeof运算符的运算结果是以下6个字符串之一:（注意字符串都是全部小写）
- "undefined"
- "number"
- "string"
- "boolearl"
- "object"
- "function"
在js中比较字符串是否相等用"=="来完成，js中没有equals。
例:，要求a变量和b变量将来的数据类型必须是数字，不能是其他类型。
以下定义的这个sum函效是为了完成两个数字的求和。
<script type="text/javascript">
function sum(a,b){if(typeof a=="number"&& typeof b=="number"){return a+b;}alert("a或b中有一个或两个不是数字");
}var rel=sum(false,"ab");alert(rel);//undefined,因为不符合要求所以没收到返回值,故默认是undefinedvar ral=sum(1,3);alert(ral);//4
</script>typeof数据类型小测试：
var i;
alert(typeof i);//undefinedvar n=100;
alert(typeof n);//numbervar s="abcd";
alert(typeof s);//stringvar c=null;
alert(typeof i);//object，null属于Null类型，单typeof运算结果是objectvar k=false;
alert(typeof i);//booleanfunction su(){
}
alert(typeof su);//function九、原始类型：
1.Undefined
Undefined类型只有一个值，这个值就是undefined的，当一个变量没有赋初值，系统就会给这个变量赋为undefined，undefined是一个具体的值。
例：
<script type="text/javascript">var a;var b=undefined;var c="undefined";//带""是字符串了alert((a==b)+","+(a==c));</script>运行结果：
2. Number
number包括整数、小数、负数、正数、不是数字、无穷大(10，3.14，-5，10，NaN，Infinity)都属于Number类型。
关于NaN表示Not a Number，不是一个数字，但是属于Number类型
什么时候结果是一个NaN呢？
运算结果本来应给是一个数字，但最后算完不是一个数字，结果就是NaN
如：
var i=100;
var h="块";
alert(i/h);//数字参与除法本来应该是一个数字，但是现在不会得到一个数字，所以结果是NaN
但是有字符串相加时，会进行字符串拼接，不会参与加号运算，故结果也就不会是NaN
Infinity表示无穷大(当除数为0时，结果为无穷大)
var i=100;
var h=0;
alert(i/h);//(当除数为0时，结果为无穷大)Infinity
alert(10/3);结果为3.3333333...
在js中两个数相除，会算尽
十、常见的函数：
isNaN：
判断不是一个数字，如果是数字返回false，否则true。
alert(isNaN(100));//false是一个数字
alert(isNaN("100"));//false可以转化为数字
alert(isNaN("ffff"));//true不能转为数字，不是数字parseInt：
将字符串转化为数字，并且取整数位。
alert(parseInt("3.667"));//3
alert(parseInt(5));//5不变parseFloat：
将字符串转化为数字
alert(parseFloat("3.14"));//3.14
alert(parseFloat(5.44));//5.44Math.ceil():
将一个小数向上取整(如：2.1->3,Math是一个数学类，ceil表示天花板)(向大的整数靠近)
alert(Math.ceil(2.1));//3
alert(Math.ceil(-2.1));//-24.Boolean
在js中布尔类型只有两个值，false和true.
Boolean类型终有一个函数：boolean();
语法格式为：boolean(数据)
在其他需要布尔类型是，直接写数据，js会自动调用boolean()函数。有数据会转化成true，没数据转化成false。
如：
alert(Boolean(1));//truealert(Boolean(0));// falsealert(Boolean(""));// falsealert(Boolean("abc"));// truealert(Boolean(null)):// falsealert(Boolean(NaN));//falsealert(Boolean(undefined));// falsealert(Boolean(Infinity));// true
//有数据会转化成true，没数据转化成false。如：
var kc="kong";
if(kc){alert("hello"+kc);
}else{alert("数据为空") ;}结果：
5、 Null
Null只有一个值null
<script type="text/javascript">alert(typeof null);//object
</script>
6、String
String类型:
1、在JS当中字符串可以使用单引号。也可以使用双引号。
var s1='abcdef';var s2="test";2、在JS当中，有两种方式创建字符串对象
第一种:
var s="abc";第二种(使用Js内置的支持类String):
var s2=new String("abc");需要注意的是:String是一个内置的类，可以直接用，String的父类是object。
3、无论小string还是大String，他们的属性和函数都是通用的。
①小string(属于原始类型string)
var x="king";
alert(typeof x); // "string"②大String(属于Object类型)
var y=new String("abc");alert(typeof y);// "object" 获取字符串的长度的函数
<script type="text/javascript">var x="king";
var y=new String("abc");
alert("x的长度"+x.length+",y的长度"+y.length);//3,4
</script>结果
十一、 常用函数
- indexOf 获取指定字符串在当前字符串中第一次出现处的索引
- lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
- replace 替换
- substr 截取子字符串
- substring 截取子字符串
- toLowerCase 转换小写
- toUpperCase 转换大写
- spIit 拆分字符串
indexOf & lastIndexOf
alert('abcda'.indexOf("b"));//1
alert('abcb'.lastIndexOf("b"));//3
alert('abcda'.indexOf("f"));//-1不存在的返回-1replace(只替换了第一个)
alert("next#int#oser".replace("#","%"))
在写一个可以再替换一个，其实在原来替换第一个基础上在替换第一个
alert("next#int#oser".replace("#","%").replace("#","%"))
想全部替换要使用正则表达式
考点:经常问 substr和substring的区别?
substr(startIndex,length) 参数是开始的下标和截取总长度
substring(startIndex,endIndex)参数是开始的下标和结束的下标注意:不包含结束下标
substr(startIndex,length)alert("abcdefxyz".substr(2,4));//cdefsubstring(startIndex,endIndex)注意:不包含endIndexalert("abcdefxyz".substring(2,4));//cd7、Object
Object类型:
1、0bject类型是所有类型的超类，自定义的任何类型，默认继承object。
2、Obiect类包括哪些属性?
prototype属性(常用的，主要是这个)，作用是给类动态的扩展属性和函数。 constructor属性
3、Object类包括哪些函数?
toString() valueOf()
toLocaleString()
4、在js当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。换句话说，自己定义的类中也有prototype属性。
十二、创建类的方式
js中创建类的方式和创建函数一样。
方式①
function 类名(形参){}方式②
类名=function(形参){}创建对象的语法：
new 类名();创建类和函数的方式是一样的，所以在调用上就有区别了
<script type="text/javascript">function hello(){alert("hello javascript And kongchao");}//当成方法hello();
//当成类来创建对象
var obj=new hello();
alert(obj);//[object Object]</script>运行结果：
图一弹两次窗，图二一次
在创建类的时候new对象，也得调用一次，所以共两次
JS中的类的定义，同时又是一个构造函数的定义
在JS中类的定义和构造函数的定义是放在一起来完成的。
function User(a,b,c){//abc是形参，属于局部变量。//声明属性(this表示当前对象)// User类中有三个属性:sno/sname/sage this.sno =a;this.sname=b;this.sage=c;
}
//创建对象
var u1 = new User(111,"zhangsan", 30);
//访间对象的属性
alert(u1.sno);//111alert(u1.sname); //zhangsan
alert(u1.sage);//30
//访问对象属性的另外一种写法
alert(u1["sno"]);//111
alert(u1["sname"]);//zhangsan
alert(u1["sage"]);//30通过prototype可以给一个类动态的扩展函数和属性
<script type="text/javascript">Product=function(pno,pname,price){
//属性this.pno=pno;this.pname=pname;this.price=price;
//函数this.getPrice=function(){return this.price;}}
var kong=new Product(100,"
三万字速通JavaScript相关推荐
- 三万字速通SSM框架入门知识点，快速上手CRUD
- 速通JavaScript基础部分
JavaScript基础(速通) -注: 此文章会持续保持更新.并非完整. 关于JavaScript语言的简介. JavaScript(简称"JS") 是一种具有函数优先的轻量级, ...
- 三周速通AWS Certified Solutions Architect - Associate（SAA-C03)经验分享
目录 1. 先介绍考试: 2. CLF对比SSA 3. 备考流程 3.1 Udemy 网课 3.1.1<Ultimate AWS Certified Solutions Architect As ...
- 面渣逆袭：计算机网络六十二问，三万字图文详解！速收藏！
这次给大家带来了计算机网络六十二问,三万字,七十图详解,大概是全网最全的网络面试题. 基础 1.说下计算机网络体系结构 计算机网络体系结构,一般有三种:OSI 七层模型.TCP/IP 四层模型.五层结 ...
- 5天速通JavaScript
5天速通JavaScript 一,JavaScript是什么和作用? 二,JavaScript的组成与特点 二,JavaScript入门 三,JavaScript的注释 四,浏览器控制台的使用 五,基 ...
- 《速通深度学习数学基础》
目录 序 前言 第1章 线性代数的基本概念 1.1 向量和深度学习 1.2 向量距离计算 1.3 向量的基本性质 1.4 矩阵的基本概念 1.5 一些特殊的矩阵 第2章 线性代数在深度学习中的应用 2 ...
- 寒假的一点笔记《123速通》
V123速通 2022-2-15 v1 v2 v3 总结 v1 2016年,Joseph Redmon.Santosh Divvala.Ross Girshick等人提出了一种单阶段(one-stag ...
- 面渣逆袭：三万字，七十图，详解计算机网络六十二问（收藏版）
大家好,我是老三,开工大吉,虎年第一篇,面渣逆袭系列继续! 这次给大家带来了计算机网络六十二问,三万字,七十图详解,大概是全网最全的网络面试题. 建议大家收藏了慢慢看,新的一年一定能够跳槽加薪,虎年& ...
- 从零开始速通百度云网盘
原文链接:CCR39のLazyNest 相信大家在网上冲浪时时常会下载一些资源.软件,如果你需要下载别人分享的资源时,就需要用到网盘. 百度云网盘由于早期在国内占据了一定规模的市场,拥有大量的资源与链 ...
最新文章
- 每日一皮：据说PM就是这样忍受你的！
- 微信小程序 详解 小程序支付
- 图片 存_早安图片 早上好问候语 早上好祝福语录大全 早上好表情
- linux文本处理脚本题,Linux文本处理工具sed练习题
- c#文件夹常用操作，属性设置，遍历、压缩
- 在Ubuntu 18.04上使用Nginx安装WordPress
- 第七次全国人口普查，数据来了！
- MDT+ADK网络部署操作系统
- 车辆维修管理系统mysql_4S店汽车维修管理系统的分析与设计(JSP+MySQL)
- 工具-typora-自定义快捷键
- AI之路最近的一些思考
- 用计算机打字教案,教学设计-有趣的打字练习游戏
- matlab狄利克雷函数,数论入门1——莫比乌斯函数,欧拉函数,狄利克雷卷积,线性筛,莫比乌斯反演,杜教筛...
- IMX6UL 飞凌 LINUX 学习记录（1）
- t3软件怎么生成报表_t3财务报表怎么生成
- Oracle表中序列号的添加
- 如何将caj转换成word
- 国外android内存清理工具,小内存手机有救了，这款清理神器，瞬间多出几个G的内存...
- MVG与MVS的区别和联系
- 医疗机构如何确保符合HIPAA标准 保障网络安全
热门文章
- 安徽专业计算机应用能力考试,安徽省计算机应用能力考试时间安排出炉
- English Learning - L2-15 英音地道语音语调 语音语调四步法 2023.04.17 周一
- APP+springboot订餐APP 毕业设计-附源码190711
- 全国软件工程专业大学
- python 腐蚀膨胀_opencv+python 膨胀与腐蚀
- hackbar2.1.3免费版本使用教程
- 被尘封的故事技能点bug_梦幻西游：官方都不承认存在的BUG，可以同时完成两个奇谭任务...
- 外卖cps行业风雨交加，何去何从
- pdf怎么在线阅读？一键查阅并不难
- 计算机专业同济大学和华科,学计算机专业是去华中科技大学还是同济大学好？学霸教你选择...