为啥要学JavaScript
JavaScript web开发人员必须学习的3门语言中的一门
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
表单验证——减轻服务器端压力
页面动态效果
什么是JavaScript
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
JavaScript特点
- 向HTML页面中添加交互行为
- 脚本语言,语法和Java类似
- 解释性语言,边执行边解释
JavaScript组成
JavaScript的基本结构
语法
<script type="text/javascript">
<!-
JavaScript 语句;
->
</script>
经验
<script>...</script>可以包含在文档中的任何位置,只要保证这些代码
在被使用前已读取并加载到内存即可
JavaScript的执行原理
- 客户端请求某个网页,即我们在上网时在地址栏中输入某个网址,浏览器接收到网址之后,向远程web服务器提出请求
- web服务器响应请求,web服务器找到请求的页面,并将整个页面包含javaScript的脚本代码作为相应的内容,发送回客户端机器
- 客户端浏览器解释并执行带脚本的代码,客户端浏览器打开回应的网页文件内容,从上往下逐行读取并显示其中的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 运算符返回值如下
- undefined:变量被声明后,但未被赋值
- string:用单引号或双引号来声明的字符串
- boolean:true or false
- number:整数或浮点数
- 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 | 域的内容被改变 |