第一章：JavaScript基础
为什么要学JavaScript
1:表单验证 2：页面动态效果
什么是JavaScript
JavaScript是一种基于对象和事件驱动的、跨平台的、并具有安全性能的脚本语言
JavaScript特点
1：向HTML页面中添加交互行为
2：脚本语言，语法和Java类似
3：解释性语言，边执行边解释
JavaScript组成
ECMAScript(核心)：
JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。
BOM（浏览器对象模型）:
对浏览器窗口进行访问和操作
DOM（文档对象模型）：
DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。
JavaScript的基本结构
语法：
<script type="text/javascript">
<!—
JavaScript语句;
—>
</script>
备注：有的网页中用缺省type="text/Javascript"，这种写法是正确的，因为HTML5中可省略type属性，HTML5默认为是text/Javascript。
JavaScript的简单应用
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("初学JavaScript");
document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>
注意： 1：<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存中即可
2：document.write()方法可以向HTML输出流中插入你传入的内容，浏览器会按着HTML元素依次顺序依次解析它们，并显示出来。
需要注意的是，如果在文档加载完成后（即HTML输出已完成），再使用document.write()方法来要求浏览器来解析你的内容
则浏览器就会重写整个document，导致最后的这个document.write()方法输出的内容会覆盖之前所有的内容。
网页中引用JavaScript的方式
1：使用<script>标签：
例如上面例子：JavaScript的简单应用
2：外部JS文件:
在外部创建js文件,然后Html页面引入
<script type="text/javascript" src="js/index.js" ></script>
3：直接在HTML标签中:
<input name="btn" type="button" value="弹出消息框" οnclick="javascript:alert('欢迎你');"/>
JavaScript核心语法
变量 数据类型 数组 运算符号 控制语句 注释 输入/输出 语法约定
核心语法—变量
先声明变量再赋值
var width; var:用于声明变量的关键字
width = 5; width:变量名
同时声明和赋值变量
var name="皮皮";
var x, y, z = 10;
注意：JavaScript区分大小写，特别是变量的命名、语句关键字等
核心语法—数据类型
undefined:
var width;
变量width没有初始值，将被赋予值undefined
null:
表示一个空值，与undefined值相等
number:
var iNum=23; //整数
var iNum=23.0; //浮点数
boolean:
true和false
String:
一组被引号（单或双引号）括起来的文本
var string="This is JavaScript";
核心语法— typeof运算符
typeof：
检测变量的数据类型
typeof运算符的返回值如下：
undefined：变量被声明但还未被赋值
String：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object：javascript中的对象、数组和null
核心语法—String对象
属性:
字符串对象.length
方法:
字符串对象.方法名();
String对象方法如下表：
| 方法名称 | 说 明 |
|---|---|
| charAt(index) | 返回在指定位置的字符 |
| indexOf(str) | 查找指定字符串在原字符串中首次出现的位置 |
| substring(index1，index2) | 返回位于指定索引 index1和index2之间的字符串（包括index1但不包括index2对应的字符） |
| split(str) | 将字符串分割为字符串数组 |
核心语法—数组
创建数组:
var 数组名称 = new Array(length);
注意：
new：数组的关键字
length：表示数组中可存放的元素总数
数组名[下标]来访问数组元素
数组的常用属性和方法下表：
| 类别 | 名称 | 描 述 |
|---|---|---|
| 属性 | length | 设置或返回数组中元素的个数 |
| 方法 | join( ) | 把数组的所有元素组合为一个字符串，通过一个分隔符进行分隔 |
| 方法 | sort() | 对数组排序 |
| 方法 | push() | 向数组末尾添加一个或多个元素，并返回新的长度 |
核心语法—运算符号
| 类型 | 运算符 |
|---|---|
| 算术运算符 | + - * / % ++ — |
| 赋值运算符 | = += -= |
| 比较运算符 | > < >= <= == != === !== |
| 逻辑运算符 | && || ! |
===与==的区别：
1、==（等于）:只比较表面值，如“2”和2 相等
2、===（绝对等于）：同时比较表面值和数据类型,所以“2”和2不相等；
核心语法—逻辑控制语句
if条件语句
switch多分支语句
for、while循环语句
for-in
示例：
var fruit=[ "apple", "orange", "peach","banana"];
for(var i in fruit){
document.write(fruit[i]+"<br/>");
}
核心语法—循环中断
break:跳出此循环 continue:跳出本次循环,进入下一次循环.
核心语法—注释
单行注释: 以 // 开始，以行末结束
多行注释: /* …… */ ，表示其中的语句是该程序中的注释
核心语法—常用的输入/输出
警告对话框:alert(“警告信息");
提示对话框:prompt("提示信息", "输入框的默认信息");
核心语法—语法约定
代码区分大小写
变量、对象和函数的名称
分号
什么是函数
函数的含义：类似于Java中的方法，是一个能够完成特定任务/功能的代码块
使用更简单：不需要定义函数属于某个类，直接使用即可
函数的分类：系统函数和自定义函数
常用系统函数
parseInt ("字符串")
将字符串转换为整型数字
如: parseInt ("86")将字符串“86“转换为整型值86
parseFloat("字符串")
将字符串转换为浮点型数字
如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字
自定义函数
有参/无参函数:
语法：
function 函数名(参数1,参数2,参数3,…){
//JavaScript语句
[return 返回值] //可有可无
}
调用函数
函数调用一般和表单元素的事件一起使用，调用格式：
语法：
事件名＝ "函数名( )";
1：调用无参函数示例：
<input name="btn" type="button" value="显示5次js" οnclick="study( )" />
//单击此按钮时，调用函数study( )，执行函数体中的代码
function study( ){
for(var i=0;i<5;i++){
document.write("<h4>js</h4>");
}
}
2：调用有参函数示例：
<input name="btn" type="button" value="请输入显示欢迎学习js的次数"
οnclick="study(prompt('请输入显示欢迎学习js的次数:',''))" />
//单击此按钮时，调用函数study (count)，执行函数体中的代码
function study(count){
for(var i=0;i<count;i++){
document.write("<h4>欢迎学习js</h4>");
}
}
变量的作用域
全局变量的作用域是全局性的，即在整个 Javascript 程序中，全局变量作用处处都存在。定义在 "script" 块中，在 "function" 函数外。
局部变量的作用域是局部性的，在函数内部或函数参数时定义，作用范围是从函数开始到结尾，即在｛｝里。
什么是事件驱动
函数：
函数被声明后 不会执行
绑定到元素上后 不会执行
触发事件后 执行
常用事件
| 名称 | 说明 |
|---|---|
| onload | 当一个页面或一幅图像完成加载时 |
| onclick | 当鼠标单击某个对象时 |
| onmouseover | 当鼠标移到某个元素上时 |
| onkeydown | 当某个键盘按键被按下时 |
| onchange | 当域的内容被改变时 |
JavaScript基础总结
JavaScript的组成和基本结构
JavaScript基本结构和在网页中引入JavaScript
核心语法：
变量的声明和赋值
数据类型
数组
运算符
逻辑控制语句
注释
语法约定
程序调试：Chrome开发工具和alert
函数：
常用系统函数
自定义函数
变量的作用域
事件
扫一扫
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
