JavaScript 第一章 基本语法 1~3节
JavaScript 第一章 基本语法 1~3节
1 、为什么学习 JavaScript ？
通常在表单验证与处理页面动态效果方面使用 JavaScript
应用场景 1 （注册页面的输入验证）：
应用场景 2 （图片无缝滚动效果）：
应用场景 3 （内容切换效果）：
2 、 JavaScript 是什么？
2.1 ）先看看 JavaScript 代码的 基本结构（初次体会），如下：
<html>
<head>
<title> 脚本的基本结构 </title>
<!-- JavaScript 代码写在 head 标签下的 script 标签内 -->
<script language= " javascript " >
var number = 3; // 定义一个变量 number
// 输出内容到页面
document.write( " 这是使用 JavaScritp 输出的内容！ " );
// 循环输出内容到页面
for(var i = 0; i < number; i++){
document.write( " <strong> 欢迎使用 JavaScript</strong> " );
}
</script>
</head>
<body>
……
</body>
</html>
请打开记事本（强烈推荐初学者在最初的学习过程中使用记事本等纯文本编辑工具编写代码，这是训练基本功的一种非常好的方法哦）编写以上代码并保存为 html 文件执行
从以上代码我们可以总结出 JavaScript 脚本的基本结构：
<script language= “ javascript ” >
<!-- 这里加 html 注释，不支持 JavaScript 的浏览器会忽略注释中的代码
这里写 JavaScript 代码
-->
</script>
2.2 ）再讲讲 JS 执行原理：
当浏览器打开 html 页面时，页面中的 HTML 标签和 JavaScript 代码将由浏览器来解析（理解）并执行，执行顺序是从上到下顺序执行
3 、掌握 JavaScript 的基本语法 :
3.1 ）想想上面的那段代码，是不是与 Java 语言有很多类似的地方，比如：
变量、输出语句、 for 循环、代码注释等等，我们将从以下 5 个方面学习 JS 的基本语法：
3.3 ） JavaScript 提供了 4 种基本数据类型
数值型 ( 整数、小数 ) 、
字符串 ( 用 ' 字符串 ' 或 ” 字符串 ” 表示 ) 、
布尔型 (true 或 false) 、
空值 (null)
3.4 ）变量的声明
JavaScript 采用弱类型 ，变量定义不区分类型，统一用 var 声明 或者不声明直接使用，如下：
声明变量的语法： var 合法变量名 ;
情况 1 ，使用 var 声明变量：
var count = 100;// 整数变量
var name = “ 张三 ” ;// 字符串变量
var flag = true;// 布尔型变量
var obj = null;// 对象
情况 2 ，不使用 var 直接声明变量 ( 这种方式容易出错不推荐使用 ) ：
count = 100;
name = " 张三 ";
JavaScript 的变量命名规范：
第一个字符只能是英文字母、美元符号 "$" 、下划线 "_"
其余字符可以是英文字母、美元符号 "$" 、下划线 "_" 、数字
不能使用 JavaScript 中已定义的关键字，比如： new 、 for 、 var 、 true 等
注意：尽量使用骆驼命名法与 Java 编码风格保持一致
3.5 ） JavaScript 中的运算符
1. 算术运算符
=======================================
运算符 运算符说明 示例 示例说明
+ 加法 x + y 如果 x 为整数 2,y 为整数 5, x+y 等于 7
如果 x 为字符串 ”text1”, y 为字符串 ”fun”,
x + y 则等于 ”text1fun”
- 减法 x - y
* 乘法 x * y
/ 除法 x / y
% 相除求余数 x % y 如果 x 等于 10, y 等于 3, x%y 结果等于 1
++ 递增 x++ 如果 x 等于 10, x++ 等于 11
-- 递减 y-- 如果 y 等于 10, y-- 等于 9
=======================================
2.关系运算符
=======================================
运算符 运算符说明 示例 示例说明
== 等于 x == y 如果 x 等于 2, y 等于 2, 则 x==y
=== 全等于 , x===y 如果 x 等于整数 2, y 为字符串 ”2”,
值相等 , 则 x===y 不成立
数据类型也相等
> 大于 x > y
>= 大于等于 x >= y
< 小于 x < y
<= 小于等于 x <= y
!= 不等于 x != y
!== 不全等于 x !== y
=======================================
3.逻辑运算符
=======================================
运算符 运算符说明 示例 示例说明
&& 与 (and) x < 10 && y > 1
! 非 (not) !(x==y)
|| 或 (or) x==8 || y==8
=======================================
4.赋值运算符
=======================================
运算符 运算符说明 示例 示例说明
＝ 赋值 x = 5 将整数 5 这个值赋给变量 x
=======================================
注意：请注意赋值 (=) 和等于 (==) 的区别
5.运算符优先级
下表按从最高到最低的优先级列出 JavaScript 运算符，
具有相同优先级的运算符按从左至右的顺序求值
=======================================
运算符 描述
. [] () 字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
< <= > >= instanceof 小于、小于等于、大于、大于等于、 instanceof
== != === !== 等于、不等于、严格相等、非严格相等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
?: 条件
= oP= 赋值、运算赋值
, 多重求值
=======================================
3.6 ）逻辑控制语句，与 Java 等语言的语法基本一致
条件语句 语法：
if( 表达式 ){
JavaScript 语句 ;
}else{
JavaScript 语句 ;
}
swith( 表达式 ){
case 常量值 1:
JavaScript 语句 ;
case 常量值 2:
JavaScript 语句 ;
......
default:
JavaScript 语句 ;
}
for 循环语句 语法：
for( 初始化 ; 条件 ; 增量或减量 ){
JavaScript 语句 ;
}
while 循环语句 语法：
while( 条件表达式 ){
JavaScript 语句 ;
}
3.7 ）注释
单行注释，以 ”//” 开头，如： // 这里写注释
多行注释，以 ”/*” 开头，以 ”*/” 结尾，如：
/*
这里写注释
*/
3.8 ）类型转换：
情况 1 ，将字符串转换为整数：
parseInt("69"); // 将字符串 "69" 转换为整数 69
情况 2 ，将字符串转换为浮点数：
parseFloat("18.68"); // 将字符串 "18.68" 转换为浮点数 18.68
情况 3 ，转换数字与其他字符的混合字符串：
parseFloat("69.96abcd"); // 转换后为浮点数 69.96
情况 4 ，转换非数字字符串 :
parseInt("abcd69"); // 返回 "NaN" ， 表示非数字
情况 5 , 验证字符串是否是数字 , 使用系统函数 isNaN(" 数字字符串 ") ：
isNaN("abcd"); // 返回 true ， 表示不是数字
isNaN("200"); // 返回 false ， 表示是数字