web前端有三层:
HTML:从语义的角度,描述页面结构
CSS:从审美的角度,描述样式(美化页面)
JavaScript:从交互的角度,描述行为(提升用户体验)
一、JavaScript概述
1、什么是JavaScript:
JavaScript是一种描述性的语言,也是基于对象(Object)和事件(Event Driven)的、并具有安全性能的的脚本语言。它与HTML(超文本标记语言)一起,在一个Web页面中链接多个对象,与Web客户实现交互。
特点:
JavaScript主要用来向HTML页面中添加交互行为。
JavaScript是一种脚本语言,语法和Java类似。
JavaScript一般用来编写客户端的脚本。
JavaScript是一种解释性的语言,边执行边解释。
2、JavaScript历史背景介绍:
一开始JavaScript叫做LiveScript,但是由于当时Java这个语言特别火,所以为了傍大牌,就改名为JavaScript。
同时期还有其他的网页语言,比如VBScript、JScript等等,但是后来都被JavaScript打败了,所以现在的浏览器中,只运行一种脚本语言就是JavaScript
JavaScript是由公司开发而成的,问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织,牵头制定JavaScript的标准,取名为ECMAScript。
简单来说,ECMAScript不是一门语言,而是一个标准。符合这个标准的比较常见的有:JavaScript、Action Script(Flash中用的语言)。就是说,你JavaScript学完了,Flash中的程序也就轻而易举了。
ECMAScript在2015年6月,发布了ECMAScript 6版本,语言的能力更强(也包含了很多新特性)。但是,浏览器的厂商不能那么快去追上这个标准。
http://2008.sina.com.cn/
http://2012.sina.com.cn/
上面三个网站可以感受一下网页技术的发展。
2003年之前,JavaScript被认为“牛皮鲜”,用来制作页面上的广告,弹窗、漂浮的广告。什么东西让人烦,什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。
2004年,JavaScript命运开始改变,那一年,谷歌公司开始带头使用Ajax技术,Ajax技术就是JavaScript的一个应用。并且,那时候人们逐渐开始提升用户体验了。Ajax有一些应用场景。比如,当我们在百度搜索框搜文字时,输入框下方的智能提示,可以通过Ajax实现。比如,当我们注册网易邮箱时,能够及时发现用户名是否被占用,而不用调到另外一个页面。
2007年乔布斯发布了第一款iPhone,这一年开始,用户就多了上网的途径,就是用移动设备上网。
JavaScript在移动页面中,也是不可或缺的。并且这一年,互联网开始标准化,按照W3C规则三层分离,JavaScript越来越被重视。
2010年,人们更加了解HTML5技术,HTML5推出了一个东西叫做Canvas(画布),工程师可以在Canvas上进行游戏制作,利用的就是JavaScript。
2011年,Node.js诞生,使JavaScript能够开发服务器程序了。
如今,WebApp已经非常流行,就是用网页技术开发手机应用。手机系统有iOS、安卓。比如公司要开发一个“携程网”App,就需要招聘三队人马,比如iOS工程师10人,安卓工程师10人,前端工程师10人。共30人,开发成本大;而且如果要改版,要改3个版本。现在,假设公司都用web技术,用html+css+javascript技术就可以开发App。也易于迭代(网页一改变,所有的终端都变了)。
虽然目前WebApp在功能和性能上的体验远不如Native App,但是“WebApp慢慢取代Native App”很有可能是未来的趋势。
3、JavaScript的组成部分:(JavaScript基础分为三个部分:)
(1)ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、关键字、保留字、对象、函数、if语句、for循环语句等。ECMAScript是一个描述,规定了脚本语言的所有属性、方法和对象的标准,因此使用web客户端脚本语言编码时一定要遵循ECMAScript标准。
(2)DOM:操作网页上的元素的API。比如让盒子移动、变色、轮播图等。提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型就可以实现与HTML交互。
(3)BOM:操作浏览器部分功能的API。比如让浏览器自动滚动。是HTML文档对象模型定义的一套标准方法,用来访问和操纵HTML文档。
4、JavaScript的基本结构
结构如下:
<script type='text/Javascript'> <!-- Javascript语句 --> </script>
type是<script>标签的属性,用于指定文本使用的语言类别为JavaScript。
<!--语句-->是注释标签
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> document.write("张无忌") document.write("<h1>周芷若</h1>") </script> </head> <body> </body> </html>
5、执行原理
(1):浏览器客户端向服务器端发送请求:一个用户在浏览器的地址栏中输入要访问的页面(页面中要包含JavaScript程序)。
(2):数据处理:服务器端将某个包含JavaScript的页面进行处理。
(3):发送响应:服务器端将含有JavaScript的HTML文件处理页面发送到浏览器客户端,然后由浏览器客户端从上而下逐条解析HTML标签和JavaScript,将页面呈现给用户。
好处:
包含JavaScript的页面只要下载一次即可,这样能减少不必要的网络通信。
JavaScript程序由浏览器客户端执行,而不是由服务器执行的,因此减少服务器的压力。
6、JavaScript的引入方式
(1):直接使用<script>标签将JavaScript代码加到了HTML文档中。适合js代码较少的情况下。(第4个中的示例)
(2):使用外部JavaScript文件,将JavaScript代码写入一个外部文件中,以*.js扩展名保存,然后将该文件指定给<script>标签中的src属性。
test.js文件代码 document.write("张无忌") document.write("<h1>周芷若</h1>") test.html代码
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="test.js" type="text/javascript"> </script> </head> <body> </body> </html>
(3) 直接在HTML标签中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('赵敏')"> </body> </html>
二、JavaScript核心语法
1、变量的声明和赋值
(1)语法:
var 合法的变量名;
var width = 20;
var x,y = 10;
(2)命名规范:
1)区分大小写;大小写字母是不能互相替换的。
JavaScript的关键字,如if和for,永远都是小写的。
内置对象,如Math和Data是以大写字母开头的。
对象的名称通常是小写,如fruit。但其方法经常是多个单词的大小写混合,通常是一个字母小写,之后的单词的首字母是大写,如charAt()。
2)变量、对象和函数的名称
当声明使用的变量、对象或函数是,名称可以包括大写字母、小写字母、数字、下划线和$,但是必须以字母、下划线或$开头。
3)分号
JavaScript允许开发者自行决定是否以分号结束一行代码,如果没有分号,JavaScript就将行代码的结尾看作该语句的结尾。
4)不能使用关键字;不可以不经过声明而直接使用。
(3)关键字:
break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with
2、数据类型:
(1)undefined类型:当声明的变量未初始化时,该变量的默认值时undefined。
例如:var width; 这样声明变量withd,此变量没有初始值,将被赋予值undefined。
(2)null类型:只有一个值的类型是null,是一个表示什么都没有的占位符,用来检测某个变量是否被赋值。
例:alert(null==undefined); //返回值为true
null和undefined这两个值相等,但含义不同,undefined表示的是声明了变量但未对该变量赋值,null表示的是对改变了赋了一个空值。
(3)number类型:可以表示32位整数,又可以表示64位的浮点数。
var iNum = 23;
var iNum = 23.0;
整数也可以表示为八进制或十六进制,八进制首数字必须是0,其后的数字可以是任何八进制数字(0-7);十六进制首数字也必须是0,后面是任意的十六进制数字和字母(0-9和A-F)。
var iNum = 070;//070等于十进制的56
var iNum = 0x1f; //0x1f等于十进制的31
对于非常大或非常小的数,可以用科学记数法表示浮点数,也是number类型。另外一个特殊值NaN(Not Number)表示非数,它也是number类型。
typeof(NaN); // 返回值是number
(4)String类型:
1)字符串定义:
var str = "This is a string"; //定义了一个字符串str
var oc = "a";
2)字符的属性和方法
有一个length属性。表示字符串的长度(包括空格等),语法:
字符串对象.length;
var str = "This is a javascript";
var sl = str.length;
方法的语法:
字符串对象.方法名();
常用方法:
方法 | 描述 |
toString | 返回字符串 |
toLowerCase() | 把字符串转换为小写 |
toUpperCase() | 把字符串转换为大写 |
charAt(index) | 返回在指定位置的字符 |
indexOf(str,index) | 查找某个指定字符串在字符串中首次出现的位置 |
substring(index1,index2) | 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符 |
split(str) | 将字符串分割为字符串数组 |
length | 返回长度 |
trim() | 移除空白 |
trimLeft() | 移除左边的空白 |
trimRight() | 移除右边的空白 |
concat(value,...) | 拼接 |
slice(start,end) | 切片 |
拼接字符串一般使用“ + ”
slice和substring的区别:
string.slice(start,stop)和string.substring(start,stop): 两者的相同点: 如果start等于end,返回空字符串 如果stop参数省略,则取到字符串末 如果某个参数超过string的长度,这个参数会被替换为string的长度。 substring()的特点: 如果start>stop,start和stop将被交换 如果参数是负数或者不是数字,将会被0替换 slice()的特点: 如果start>stop不会交换两者 如果start<0,则切割从字符串末尾往前数的第abs(start)个字符开始(包括该位置的字符) 如果stop<0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
(5)boolean类型:称为布尔型数据或逻辑型数据,它有两个值:true和false。
检测变量的具体数据类型:typeof
语法:
typeof(变量或值)
返回结果:
undefined:如果变量是undefined类型的,返回undefined类型的结果。
number:如果变量是number类型的,返回number类型的结果。
String:如果变量是String类型的,返回String类型的结果。
boolean:如果变量是boolean类型的,返回boolean类型的结果。
object:如果变量是null类型,或者变量是一种引用类型,如对象,函数,数组,则返回object类型的结果。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> document.write("<h2>对变量或值调用typeof运算符返回值:</h2>"); var width,height = 10,name = 'rose'; var date = new Date(); //获取日期时间对象 var arr = new Array(); //定义数组 document.write("width:"+typeof(width)+"<br/>"); document.write("height:"+typeof(height)+"<br/>"); document.write("name:"+typeof(name)+"<br/>"); document.write("date:"+typeof(date)+"<br/>"); document.write("arr:"+typeof(arr)+"<br/>"); document.write("true:"+typeof(true)+"<br/>"); document.write("null:"+typeof(null)+"<br/>"); </script> </head> <body> </body> </html> 结果: 对变量或值调用typeof运算符返回值: width:undefined height:number name:string date:object arr:object true:boolean null:object
3、数组
(1)创建数组:
语法:var 数组名称 = new Array(size);
new是用来创建数组的关键字,Array表示数组的关键字,而size表示数组中可存放的元素总数,因此size用整数来表示。
var fruit = new Array(5); //表示创建了一个名为fruit,有5个元素的数组。
(2)为数组元素赋值
在声明数组时,可以直接为数组元素赋值。
语法:var fruit = new Array("apple","orange","peach","bananer");
可以分别为元素赋值:
var fruit = new Array(4);
fruit [0] = "apple";
fruit [1] = "orange";
fruit [2] = "peach";
fruit [3] = "bananer";
除了Array对象外,数组还可以方括号“ [ ]”来定义:
var fruit = ["apple","orange","peach","bananer"];
(3)访问数组元素
可以通过数组的名称和下标直接访问数组元素,访问数组的表示形式:数组名[下标]。例如fruit[0]表示访问数组中的第一个元素,fruit是数组名,0表示下标。
(4)数组的常用属性和方法
数组是JavaScript中的一个对象,它有一组属性和方法。
类别 | 名称 | 描述 |
属性 | length | 设置或返回数组中元素的数目 |
join() | 把数组的所有元素放入一个字符串,通过一个分隔符进行分割 | |
方法 | sort() | 对数组排序 |
push() | 向数组末尾添加一个或更多元素,并返回新的长度 |
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var fruit = "apple,orange,peach,bananer"; var arrlist = fruit.split(","); var str = arrlist.join("-"); document.write("分割前:"+fruit+"<br/>"); document.write("使用\"-\"重新链接后:"+str+"<br/>"); </script> </head> <body> </body> </html> 结果: 分割前:apple,orange,peach,bananer 使用"-"重新链接后:apple-orange-peach-bananer
4、运算符
常用运算符:
类别 | 运算符号 |
算术运算符 | +、-、*、/、%、++、-- |
比较运算符 | >、<、>=、<=、==、!= |
逻辑运算符 | &&、||、! |
赋值运算符 | = |
5、逻辑控制语句
(1)条件结构
if结构 语法:
if(表达式){
//JavaScript语句1;
}
else {
//JavaScript语句2;
}
如果if或else后只有一条语句,则可以省略大括号;如果if或else有多行执行语句,则JavaScript语句必须括在大括号里面。
(2)switch结构
语法:
switch(表达式){
case值1:
//JavaScript语句1;
break;
case值1:
//JavaScript语句1;
break;
......
default:
//JavaScript语句n;
break;
}
示例:
var weekday = "星期一";
switch (weekday){
case "星期一":
alert("新的一周开始了")
break;
case "星期五":
alert("明天就可以休息了")
break;
default:
alert("努力工作!")
break;
}
(3)循环结构
1)for循环 语法:
for(初始化;条件;增量或增减){
//JavaScript语句;
}
其中,初始化参数告诉循环的开始值,必须赋予变量初始值;条件用于判断循环是否终止,若满足条件,则继续执行循环体中的语句,否则跳出循环;
增量或增减量定义循环控制变量在每次循环式怎么变化,三个条件之间,必须使用(;)隔开。
2)while循环 语法:
while(条件){
//JavaScript语句;
}
其特点式先判断后执行,当条件为真时,就执行JavaScript语句;当条件为假时,就退出循环。
3)do-while循环 语法:
do{
//JavaScript语句;
}while(条件);
该语句表示反复执行JavaScript语句,知道条件为假时才退出循环,与while循环语句的区别在于,do-while循环语句先执行后判断。
4)for-in循环 语法:
for (变量 in 数组){
//JavaScript语句;
}
for-in 循环常用于数组的操作,其中变量为数组的索引下标。
示例:
var f = ["张无忌","周芷若","赵敏","小昭"]; for (var i in f) document.write(f[i] + "<br/>")
5)中断循环:break、continue
break:可以立即退出整个循环。
continue:只是退出当前的循环,根据判断条件决定是否可以进行下一次循环。
6、注释:
(1)单行注释:单行注释以//开始,以行末结束。
示例:
alert("我是张无忌,喜欢周芷若!"); //在页面上弹出我是张无忌,喜欢周芷若!的提示对话框
(2)多行注释:多行注释以/*开始*/结束,
/* 在页面上输出5次”周芷若我喜欢你!“ */ for (var i = 0; i<=5; i++){ document.write("周芷若我喜欢你!") }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var userName = "rose"; var string1 = "我的名字叫rose"; alert("Hello 张无忌"); alert("我的名字叫"+userName); alert(string1); </script> </body> </html>
告警对话框是当前运行的网页弹出来的,在对话框做出处理前,当前网页将不可用,后面代码也不会执行,只有告警对话框进行处理后(单击“确定”按钮或直接关闭),当前网页才会继续显示后面的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var people = prompt("请输入你喜欢的人:","张无忌"); </script> </body> </html>
结果:
![](https://i-blog.csdnimg.cn/blog_migrate/17b3032ea45f118f6fb1643d233c19d6.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="text-align: center"> <script type="text/javascript"> var t = prompt("请输入一个整数:"); if(t>5){ for(var i=t;i>0; i--){ for(var j=0;j<i;j++){ document.write("* "); } document.write("</br>"); } } else{ for (var k = t; k<0; k--) { for (var m = 0; m<k; m++) { document.write("* "); } document.write("</br>") } for(var n=1;n<=t;n++){ for(var h=0;h=0;h++){ document.write("* ") } document.write("</br>") } } </script> </body>
三、JavaScript常用语法—函数