JS基础

一．          基础

如今主流的前端框架：

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	域的内容被改变