一．          基础

现在主流的前端框架：

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是由

  1. ECMAScript标准

不与任何具体浏览器绑定，主要描述了：

l  语法

l  变量和数据类型

l  运算符

l  逻辑控制语句

l  关键字、保留字

l  对象

  1. 浏览器对象模型(Browser Object Model,BOM)

提供独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互

  1. 文档对象模型(Document Object Model,DOM)

是HTML文档对象(HTML DOM)定义的一套标准方法，用来访问和操纵HTML文档

 

JS的基本结构：可以位于任何地方body、head、html中都可以

<script type="text/javascript">

          JavaScript 语句;

   </script>

执行原理

浏览器客户端向服务器发送请求

数据处理：服务器处理

发送响应:服务器向客户端发送最终效果

 

好处：包含JavaScript的页面只要下载一次即可，这样能减少不必要的通信

JavaScript程序由客户端执行，能减轻服务器压力

 

引用JavaScript嵌入网页的方式

  1. 内部JavaScript文件

直接使用<script>标签，适用于代码较少，并且网站中的每个页面使用JavaScript均不同的情况

  1. 使用外部JavaScript文件

适用在几个页面中实现相同的效果

<script type="text/javascript" src="文件名"></script>

  1. 直接在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

域的内容被改变