一． 基础
现在主流的前端框架：
jQuery,LayUI,EasyUI,Bootstrap,React,Vue,Angular,Ext JS,DWZ
学习JavaScript的目的主要有以下三点：
1． 客户端表单验证
2． 页面动态效果
3． jQuery的基础
JavaScript是一种描述性语言，也是一种基于对象(Object)和事件驱动(Event Driven)的，并具有安全性能的脚本语言，JQuery是对JS的封装。
特点：主要用来在HTML页面添加交互行为
是一种脚本语言，语法与Java类似
一般用来编写客户端的脚本
是一种解释性语言，边执行边解释
JavaScript是遵循ECMAScript标准的一种实现。
一个完整的JavaScript是由
- ECMAScript标准
不与任何具体浏览器绑定，主要描述了：
l 语法
l 变量和数据类型
l 运算符
l 逻辑控制语句
l 关键字、保留字
l 对象
- 浏览器对象模型(Browser Object Model,BOM)
提供独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互
- 文档对象模型(Document Object Model,DOM)
是HTML文档对象(HTML DOM)定义的一套标准方法，用来访问和操纵HTML文档
JS的基本结构：可以位于任何地方body、head、html中都可以
<script type="text/javascript">
JavaScript 语句;
</script>
执行原理
浏览器客户端向服务器发送请求
数据处理：服务器处理
发送响应:服务器向客户端发送最终效果
好处：包含JavaScript的页面只要下载一次即可，这样能减少不必要的通信
JavaScript程序由客户端执行，能减轻服务器压力
引用JavaScript嵌入网页的方式
- 内部JavaScript文件
直接使用<script>标签，适用于代码较少，并且网站中的每个页面使用JavaScript均不同的情况
- 使用外部JavaScript文件
适用在几个页面中实现相同的效果
<script type="text/javascript" src="文件名"></script>
- 直接在HTML标签中
适用于极少代码，仅用于当前标签，当时增加了HTML代码
<input type="button" name="btn" id="btn" value="弹出消息框" onclick="javascript:alert('欢迎你')"/>
- onclick点击
变量的声明和赋值
变量是var声明的，语法：
var 合法变量名；
如：var whidth=20;
命名规则：由数字、字母、下划线和$组成，首字母不能为数字。
JS区分大小写
可以不通过声明直接使用，但容易出错
JS中的基本数据类型：
undefined (未定义类型)
null (空类型)
number (数值类型)
String (字符串类型)
boolean (布尔类型)
object
1.typeof:用来判断一个值或变量究竟属于哪种数据类型
语法:typeof(变量或值)
返回值：
l undefined：本类型的变量，返回本类型的结果
l number：本类型的变量，返回本类型的结果
l String：本类型的变量，返回本类型的结果
l boolean：本类型的变量，返回本类型的结果
l object:如果变量是null类型,或是一种引用类型,如函数、对象、数组，则返回object。
2.undefined类型
此类型只有一个值，即undefined。当声明的变量未初始化时，该变量的默认值为undefined。例：var width;没有初始值，被赋予undefined。
3.null类型
可以用来检测某个变量是否被赋值。undefined时unll派生的，因此js把他们定义为相等的。
4.number类型
既可以表示32位整数，又可以表示64位浮点。
其中整数可以表示位八进制或十六进制，八进制首数字必须位0其后可以为(0~7),十六进制首字母必须为0，后可以是(0~9和A~F)
NaN(Not a Number)表示非数，是number类型
5.String类型
定义:字符串是被单引或双引括起来的文本
如：var string1=’string’或”string”;
属性和方法:有一个length属性，表示字符串长度(包括空格)
格式：字符串对象.length;
var 字符串对象 = “str ing”;
var strLength = str.length;
strLength返回长度为7。
字符串对象的使用语法：字符串对象.方法名;
String对象常用方法
|
方法 |
描述 |
|
indexOf(str,index) |
查找某个指定的字符串在字符串位置中首次出现的位置，如果没有，返回-1 |
|
char(index) |
返回在指定位置出现的字符 |
|
toLowerCase() |
把字符串转化为小写 |
|
toUpperCase() |
把字符串转化为大写 |
|
substring(index1,index2) |
返回位置于指定索引index1和index2之间的字符串，包含index1位置不包含index2 |
|
split(str) |
将字符串分割为字符串数组 |
6.boolean类型
是ECMAScript中常用的类型之一,包含true和false
数组
创建数组:var 数组名 = new Array(长度);
或：var 数组名 = [“one”,”two”,”three”,”four”];
访问数组元素：数组名[下标];0代表第一个元素
常用的属性和方法
|
类别 |
名称 |
描述 |
|
属性 |
length |
设置或返回数组中元素的数目 |
|
方法 |
join() |
把数组的所有元素放入一个字符串，通过一个分隔符进行分割 |
|
sort() |
对数组排序 |
|
|
push() |
向数组末尾添加一个或多个元素，并返回新的长度 |
length
返回值类型为整型，如果创建时指定了长度，则返回指定长度
join()
指定一个分隔符把数组元素放在一个字符串中：join(分隔符);
<script type="text/javascript">
var fruit = "apple,orange,peach,banana";
var arrList = fruit.split(",");
var str = arrList.join("-");
document.write("分割前:"+fruit+"<br/>");
document.write("使用"-"重新连接后"+str)
</script>
运算符号
|
类别 |
符号 |
|
算术运算符 |
+、-、*、/、%、++、-- |
|
比较运算符 |
>、<、>=、<=、==、!=、===、!== |
|
逻辑运算符 |
&&、||、! |
|
赋值运算符 |
=、+=、-= |
==表示等于，===表示恒等，!==表示不恒等，==可以在比较时转换数据类型，===只要类型不匹配，就返回false
逻辑控制语句：
条件结构：
if结构：
if(表达式){
//语句
}else{
//语句
}
如果if或else后只有一条语句，可以省略大括号
switch结构：
switch(表达式){
case 1:
语句1
break;
case 2;
语句2
break;
default:
语句n
break;
}
循环结构：
for:
for(初始化;条件;增量或减量){
语句;
}
while:
while(条件){
语句；
}
do-while:
do{
语句
}while(条件)
for-in:用于对数组或对象的属性进行循环
for(变量 in 对象){
语句;
}
中断循环：
break:立即退出整个循环
continue：退出当前循环，根据条件判断是否进入下一次循环
注释：
单行://
多行：/*开始 结束*/
|
关键字 |
||||
|
break |
case |
catch |
continue |
defaule |
|
delete |
do |
else |
finally |
for |
|
function |
if |
in |
instanceof |
new |
|
return |
switch |
this |
throw |
try |
|
typeof |
var |
void |
while |
with |
保留字是某种意义上为将来的关键字而保留的单词
|
保留字 |
||||
|
abstract |
boolean |
byte |
char |
class |
|
const |
debugger |
double |
enum |
export |
|
extents |
final |
float |
goto |
implements |
|
import |
int |
interface |
long |
native |
|
package |
private |
protected |
public |
short |
|
static |
super |
synchronized |
throws |
transient |
|
voaltile |
|
|
|
|
常用的输入/输出
警告(alert)：alert(“提示信息”); 将弹出对话框，内容为变量的值或表达式的值
提示(prompt):prompt(“提示信息”,”输入框的默认内容”); 如果取消，返回null
大小写：JavaScript关键字永远都是小写；内置对象以大写字母开头；对象名称通常是小写，但其方法经常是开头小写，之后大写
变量、函数、对象的名称
可以包括大小写字母、数字、下划线、$符号，但必须以字母、下划线、$开头
分号
允许自行决定是否使用，但是不符合标准
网页开发人员工具
Elements:查看和编辑当前页面中的HTML和SCC元素；
Console:显示脚本中所输出的调试信息，或运行测试脚本等；
Sources:查看和调试当前页面所加载的脚本源文件；
Network:查看HTTP请求的详细信息；
TimeLine:查看脚本执行时间、页面元素渲染时间等；
Profiles:查看CPU执行时间与内存占用信息；
Resource:查看当前页面所请求的资源文件；
Audits:优化前端页面、加速网页加载速度等；
alert()方法
将不确定的数据以信息框的方式显示。
常用系统函数
parseInt():可解析一个字符串，并返回一个整数数字，会查看位置0处的字符，如果不是数字，返回NaN，如果是，返回到不是数字的字符为止
parseInt(“字符串”);
parseFloat():可解析一个字符串，并返回一个浮点数,第一个小数点是有效字符，第二个小数点之后的数字被看作无效
parseFloat(“字符串”);
isNaN():用于检测参数是否是非数字，如果是数字返回false,是非数字值返回true
isNaN(值);
系统函数：
var 函数名= parseInt(‘长得像数字的字符串’);
var 函数名= parseFloat(‘长的像数字的字符串’);
定义函数
带参函数
function 函数名(参数1，参数2，参数3，……){
语句;
[return返回值]
}
不带参函数
function 函数名(){
语句；
}
匿名函数：
(function(){
语句；
})();
参数可选，没有类型检查和类型限定
调用函数：调用时必须指定函数名及其后面的参数(如果带参)
事件名 = “函数名()”;
如果有同名的，则以最后一个为准
变量的作用域
全局变量：是在函数之外的脚本中声明的变量，作用范围是该变量之后所有的语句
局部变量：在函数内声明，只在该函数中且位于该变量之后的语句可以使用
事件
事件是网页特效的灵魂，当与浏览器进行交互的时候浏览器会触发各种事件。
常见事件
|
名称 |
说明 |
|
onload |
一个网页或图片完成加载 |
|
onlick |
鼠标单击某个对象 |
|
onmouseover |
鼠标指导移到某元素上 |
|
onkeydown |
某个键盘按键被按下 |
|
onchange |
域的内容被改变 |