JavaScript 基础

为啥要学JavaScript

JavaScript web开发人员必须学习的3门语言中的一门

1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 网页的行为

表单验证——减轻服务器端压力
页面动态效果

什么是JavaScript

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

JavaScript特点

• 向HTML页面中添加交互行为
• 脚本语言，语法和Java类似
• 解释性语言，边执行边解释

JavaScript组成

JavaScript的基本结构

语法
	<script type="text/javascript">
	<!-
		JavaScript 语句;
	->
	</script>
经验
	<script>...</script>可以包含在文档中的任何位置，只要保证这些代码
	在被使用前已读取并加载到内存即可

JavaScript的执行原理

1. 客户端请求某个网页，即我们在上网时在地址栏中输入某个网址，浏览器接收到网址之后，向远程web服务器提出请求
2. web服务器响应请求，web服务器找到请求的页面，并将整个页面包含javaScript的脚本代码作为相应的内容，发送回客户端机器
3. 客户端浏览器解释并执行带脚本的代码，客户端浏览器打开回应的网页文件内容，从上往下逐行读取并显示其中的html或者脚本语言，脚本是从服务器端下载到客户端，然后在客户端进行的，即不占用服务器端的资源，因此通过客户端脚本，客户端分担了服务器的任务,大大的减轻了服务器的压力，从而间接地提升了服务器的性能。

网页中引用JavaScript的方式

 -使用<script></script>标签
 - 外部JS文件
 	<script src="export.js" type="text/javaScript"></script>
 - 直接在HTML标签中
 	<input name="btn" type="button" value="弹出消息框" onclick="Java
 	script:alert('欢迎你')"; />
 	

核心语法——变量

 1. 先声明变量再赋值
 	var width;
 	width=5;
 2. 同时声明和赋值变量
 	var catName="皮皮";
 	var x,y,z=10;
 3.不声明直接赋值
 	width=5;
 
 经验：变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，
 不推荐使用

核心语法——数据类型

数据类型	解释
undefined	var width(变量width没有初始值，将被赋予值undefined)
null	表示一个空值，与undefined值相等
number	var iNum=23;//整数 var iNum=23.0;//浮点数
boolean	true and false
string	一组被引号（单引号或双引号）括起来的文本

typeof运算符

• typeof 检测变量的返回值
• typeof 运算符返回值如下
  1. undefined：变量被声明后，但未被赋值
  2. string：用单引号或双引号来声明的字符串
  3. boolean：true or false
  4. number：整数或浮点数
  5. object：javascript中的对象、数组和null

String对象

方法名称	说 明
charAt(index)	返回在指定位置的字符
indexof(str，index)	查找某个指定的字符串在字符串中首次出现的位置，如果没有查找到则返回-1
substring（index1，index2）	位置位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
split(str)	将字符串分割为字符串数组

数组

创建数组

var 数组名称=new Array(size);

为数组元素赋值

 1. var fruit=new Array("apple","orange","peach","banana");
 2. var fruit=new Array(4);
 	fruit[0]="apple";
 	fruit[1]="orange";
 	fruit[2]="peach";
 	fruit[3]="banana";
 	

访问数组

数组名[下标]

数组的常用属性和方法

类别	名称	描述
属性	length	设置或返回数组中元素的数目
方法	join()	把数组的所有元素放入一个字符串，通过一个的分隔符进行分割
	sort()
	push()	向数组末尾添加一个或更多元素，并返回新的长度

运算符号

类型	运算符
算术运算符	+ 、- 、 * 、/ 、 % 、++ 、–
赋值运算符	= 、+= 、-=
比较运算符	> 、< 、>= 、<= 、== 、!= 、=== 、!==
逻辑运算符	&& 、或者、!

逻辑控制语句

if条件语句

if(条件)
{
	//JavaScript代码;
}	
else
{
	//JavaScript代码;
}

switch多分支语句

switch(表达式)
{
	case 常量1:
		JavaScript语句1;
		break;
	case 常量2:
		JavaScript语句2;
		break;
	...
	default:
		JavaScript语句3;
		break;
}

for、while循环语句

循环代码块一定的次数
for(初始化；条件；增量)
{
	JavaScript代码;
}
当指定的条件为true时循环指定的代码块
while(条件)
{
	JavaScript代码;
}

for-in循环语句

循环遍历对象的属性
for(var i in object)
{
		document.write(object[i]);
}

循环中断

break(退出循环)

continue(退出本次循环，继续下一次循环)

这里不做太多的解释，详细的可以去 菜鸟教程

注释

• 单行注释以 // 开始,以行末结束
• 多行注释以 /* 开始，以 */ 结束，符号之间的为注释的内容

常用的输入/输出

alert()

语法

alert("提示信息");//输出

prompt()

语法

prompt("提示信息"，"输入框的默认信息");//输入	

函数

函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
使用更简单：不用定义属于某个类，直接使用
函数分类：系统函数和自定义函数

常用的系统函数

parseInt(“字符串”)

• 将字符串转换为整型数字

parseFloat(“字符串”)

• 将字符串转换为浮点型数字

isNaN()

• 用于检查其参数是否是非数字

自定义函数

定义函数

语法
function 函数名（参数1,参数2,参数3,...）
{
	//JavaScript语句
	[return 返回值]
}

调用函数

• 函数调用一般和表单元素的事件一起使用，调用格式

语法
	事件名="函数名（）";
eg:
	<input name="btn" type="button" value="调用函数" 
								onclick="函数名()" />

变量的作用域

全局变量

局部变量

这里不做过多的解释。。。

事件

名称	说明
onload	一个页面或一幅画像完成加载
onclick	鼠标单击某个对象
onmouseover	鼠标指导移到某元素上
onKeyDown	某个键盘按键被按下
onchange	域的内容被改变

归纳