Javascript基础
JavaScript 基础
为什么学习JavaScript？
学习JavaScript的目的：
1.客户端表单验证(及时给出错误提示)
2.页面动态效果(可以编写响应鼠标单击等事件的代码，创建动态页面特效，从而高效地控制页面的内容。)
3.jQuery的基础
什么是JavaScript？
JavaScript可以实现验证表单、制作特效等功能。
JavaScript是一种描述性语言，也是一种基于对象和事件驱动的，并具有安全性能的脚本语言。
JavaScript的特点：
1.JavaScript主要用来在HTML页面中添加交互行为。
2.JavaScript是一种脚本语言，语法和java类似。
3.JavaScript一般用来编写客户端的脚本。
4.JavaScript是一种解释性语言，边执行边解释。
ECMAScript是一种脚本语言标准，JavaScript语言就是遵循ECMAScript标准的一种实现。
- JavaScript的组成
ECMAScript BOM DOM
- ECMAScript标准
ECMAScript是一种开放的、被国际上广为接受的、标准的脚本语言规范。它不与任何浏览器绑定。
主要描述内容：语法、变量和数据类型、运算符、逻辑控制语句、关键字和保留字、对象。
- 浏览器对象模型(Browser Object Model，BOM)，提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。
如：网上常见的弹出窗口，前进后退等功能都是浏览器对象控制的。
- 文档对象模型(Document Object Model，DOM)，是文档模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档。
如：网上商城常见的随鼠标移动显示大的图片、弹出小提示等都是文档对象的功劳。
- JavaScript的基本结构
<script type=”text/Javascript”>
JavaScript语句
</script>
其中type是<scrit>标签的属性，用于指定文本使用的语言类别为text/JavaScript。
注意：
js是以对象和事件驱动的执行原理：浏览器直接解析js代码
代码中，document.write()用来向页面输出可以包含HTML标签的内容。把document.write()语句包含在<script>与</script>之间，浏览器就会把它当作一条JavaScript命令来执行，这样浏览器就会向页面输出内容。
JavaScript的执行原理：
浏览器客户端与应用服务器端采用请求/响应模式进行交互。
过程：
(1) 浏览器客户端向服务器端发送请求：一个用户在浏览器的地址栏中输入要访问的页面（页面中包含JavaScript程序）。
(2) 数据处理：服务器端将某个包含JavaScript的页面进行处理。
(3) 发送响应：服务器端将含有JavaScript的HTML文件处理页面发送到浏览器客户端，然后浏览器客户端从上至下逐条解析HTML标签和JavaScript，并将页面效果呈现给用户。
使用客户端脚本的好处：
- 包含JavaScript的页面只要下载一次即可，这样能减少不必要的网络通信。
- JavaScript程序由浏览器客户端执行，而不是由服务器端执行，因此能减少服务器端的压力。
- 在网页中引用JavaScript的方式
三种方式：
A：内部
<script>
....
</script>
B：外部
<script src="文件路径"></script>
C： 直接在HTML标签中
注意：外部的js文件写的时候不能在<script>标签中 会报错
应用场合：
内部JavaScript文件适用于JavaScript特效代码量少，仅用于单个页面。
外部js文件则适用于代码较多，重复应用于多个页面。
直接在标签中写JavaScript则适合于极少代码，仅用于当前标签，但是这种方式增加了HTML代码，因此这种方式在实际开发中应用极少。
JavaScript核心语法
- 变量的声明和赋值
JavaScript是一种弱类型语言，没有明确的数据类型，也就是说，在声明变量时，不需要指定变量的类型，变量的类型由赋值给变量的值决定。
声明变量的同时赋值：
var width=20; //在声明变量的width的同时，将数值20赋给了变量的width
var x,y,z=10; //在一行代码中声明多个变量时，各变量之间用逗号分隔
需要强调的是，JavaScript区分大小写，所以大小写不同的变量名表示不同的变量。另外，由于JavaScript是一种弱类型语言，因此允许不声明变量而直接使用，系统将会自动声明该变量，例如：
x=30; //没有声明变量x，直接使用
声明：var 变量名=值；
赋值：var name="tom";
var age=20;
var sex;
sex="男";
2.数据类型
undefined(未定义类型) 声明了但是没有值 例子： var age;
null(空类型) 空 和undefined一样
number(数值类型) 数字 包括整数和小数
boolean(布尔类型) true false
string(字符串类型) 字符串 用‘’ “ ”
object(复杂的数据类型) 对象 数组 null的返回值
typeof（变量或值）判断值或变量属于哪种数据类型
字符串的定义：var a=”…”;
字符的属性和方法：
属性：length(); 表示字符串的长度
语法：字符串对象.方法名();
String对象常用的方法
|
方法 |
描述 |
|
indexOf(str,index) |
查找某个指定的字符串在字符串中首次出现的位置 |
|
charAt(index) |
返回在指定位置的字符 |
|
toLowerCase() |
把字符串转化为小写 |
|
toUpperCase() |
把字符串转化为大写 |
|
substring(index1,index2) |
返回位于指定索引index1和index2之间的字符串，并且包括索引index1 对应的字符，不包括index2对应的字符 |
|
split(str) |
将字符串分割为字符串数组 |
- 数组
语法：
var 数组名称=new Array(size);
new是用来创建数组的关键字，Array表示数组的关键字，而size表示数组中可以存放的元素总数。
为数组元素赋值：
var fruit=new Array(“apple”,”orange”,”peach”,”banana”);
也可分别赋值：
var fruit=new Array(1);
fruit[0]=”apple”;
访问数组元素：
数组名[下标]
数组的常用属性和方法
|
类别 |
名称 |
描述 |
|
属性 |
Length |
设置或返回数组中元素数目 |
|
方法 |
Join() |
把数组的所有元素放入一个字符串，通过一个分隔符进行分隔 |
|
Sort() |
对数组排序 |
|
|
Push() |
向数组末尾添加一个或多个元素，并返回新的长度 |
- 运算符号
常用的运算符号
|
类别 |
运算符号 |
|
算术运算符 |
+、-、*、/、++、-- |
|
比较运算符 |
>、<、>=、<=、==、!=、===、!== |
|
逻辑运算符 |
&&、||、! |
|
赋值运算符 |
=、+=、-= |
- 逻辑控制语句
- 条件结构
- if结构
if(表达式){
//JavaScript语句1;
}else{
//JavaScript语句2;
}
- swich结构
swich(表达式){
case值1:
//JavaScript语句1;
break;
case值2:
//JavaScript语句2;
break;
- · · · · ·
default;
//JavaScript语句n;
break;
}
- 循环结构
for(初始化;条件;增量或减量){
//JavaScript语句;
}
while(条件){
//JavaScript语句;
}
do{
//JavaScript语句;
}while(条件);
for(变量 in 对象){
//JavaScript语句;
}
中断循环：
break;可以立刻退出整个循环
continue;只是退出当前的循环，根据判断条件决定是否进入下一循环。
- 注释
单行注释：//
多行注释：/* */
- 关键字和保留字
JavaScript的关键字
|
关键字 |
关键字 |
关键字 |
关键字 |
关键字 |
|
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 |
JavaScript的保留字
|
保留字 |
保留字 |
保留字 |
保留字 |
保留字 |
|
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 |
|
volatile |
|
|
|
|
- 常用的输入/输出
- 警告(alert)
Alert(“提示信息”);
- 提示(prompt)
Prompt()方法会弹出一个提示对话框。等待用户输入一行数据。
Prompt(“提示信息”，“输入框的默认信息”);
- 语法约定
1.大小写的区分：
js的关键字，如for和if，永远都是小写
内置对象如Math和Data是以大写字母开头的
对象的名称通常是小写。但其方法经常是多个单词的大小写混合，通常第一个字母是小写，之后单词的首字母是大写
2.变量、对象和函数的名称
名称可以包括大小写字母、数字、下划线和$，但是必须以字母、下划线和$开头
3.分号
开发者自行决定是否已分号结束一行代码，如果没有分号，JS就将代码的结尾看做该语句的结尾。有时，我们看到的JS中一行结束后没有使用分号也可以正常运行，但是不推荐使用，因为他们不属于规范的代码编写风格
程序调试
- Chrome开发人员工具
- 确定设置断点的位置
- 单步调试
- 修改错误
- alert()方法
通过alert()方法将不确定的数据以信息框的方式展示，以此来判断出现错误的位置。
JavaScript常用语法——函数
- 常用系统函数
parseInt() 可以解析字符串，并返回一个整数
语法：parseInt("字符串");
在判断字符串是否为数字之前，parseInt()和parseFloat()都会分析该字符串。
parsetFloat() 可以解析字符串，并返回一个浮点数
语法：parseFloat("字符串");
isNaN() 用于检查其参数是否是非数字
语法：isNaN(x)
- 自定义函数
定义函数
语法：function 函数名(参数1,参数2,参数3,…){
//js语句
[return 返回值]
}
- 变量的作用域
如果写在函数体中 局部变量 当前函数中使用
写在函数体外面 全局变量 任何地方都可以用
- 事件
|
名称 |
事件 |
|
onload |
一个页面或一幅图像完成加载 |
|
onclick |
鼠标单击某个对象 |
|
Onmouseover |
鼠标指导移到某元素上 |
|
onkeydown |
某个键盘按键被按下 |
|
onchange |
域的内容被改变 |
浙公网安备 33010602011771号