前言
本文将带你快速了解JavaScript的核心知识，包括定义、使用、变量、数据类型、函数、作用域和条件语句。
一、JavaScript的定义
JavaScript是运行在浏览器端的脚步语言, 是由浏览器解释执行的, 简称js, 它能够让网页和用户有交互功能, 增加良好的用户体验效果。
前端开发三大模块：
HTML：负责网页结构CSS：负责网页样式JavaScript：负责网页行为， 比如:网页与用户的交互效果
JavaScript是运行在浏览器端的脚步语言，它的作用就是负责网页和用户的交互效果。
二、JavaScript的使用方式
1. 行内式（主要用于事件）
<input type="button" name="haha" onclick="alert('haha!');">
2. 内嵌式
<script type="text/javascript"> alert('haha!'); </script>
3. 外链式
<script type="text/javascript" src="js/index.js"></script>
三、变量和数据类型
1. 定义变量
var 变量名 = 值；
var iNum = 123; var sTr = 'haha'; var iNum=1,sTr='hahaha',sCount='3';
2. JavaScript注释
<script type="text/javascript"> // 单行注释 var iNum = 123; /* 多行注释 1、... 2、... */ var sTr = 'hello'; </script>
3. 数据类型
js中有六种数据类型，包括五种基本数据类型和一种复杂数据类型(object)。
五种基本数据类型：
- number 数字类型
- string 字符串类型
- boolean 布尔类型
- undefined 变量声明未初始化
- null 空对象
一种复合类型：
object 后面学习的数组、函数和JavaScript对象都属于复合类型
//1.1 数字 number var iOne = 10.1; //1.2 字符串 string var sStr = '1234'; //1.3 布尔 boolean; var bIsTrue = false; //1.4 未定义 undefined var unData; //1.5 null 表示空对象 var nullData = null; //1.6 object 表示对象类型 var oObj = { name:"隔壁老王", age:88 } // 获取变量的类型 var type = typeof(oObj); alert(type); // 获取对象的name属性 alert(oObj.name);
4. 变量命名规范
- 区分大小写
- 第一个字符必须是字母、下划线（_）或者美元符号（$）
- 其他字符可以是字母、下划线、美元符号或数字
5. 匈牙利命名风格
- 对象o Object 比如：oDiv
- 数组a Array 比如：aItems
- 字符串s String 比如：sUserName
- 整数i Integer 比如：iItemCount
- 布尔值b Boolean 比如：bIsComplete
- 浮点数f FLoat 比如：fprice
- 函数fn Function 比如：fnHandler
四、函数定义和调用
1. 函数定义
<script type="text/javascript"> // 函数定义 function fnAlert(){ alert('hello!'); } </script>
2. 函数调用
<script type="text/javascript"> // 函数定义 function fnAlert(){ alert('hello!'); } // 函数调用 fnAlert(); </script>
3. 定义有参数有返回值的函数
<script type="text/javascript"> function fnAdd(iNum01,iNum02){ var iRs = iNum01 + iNum02; return iRs; alert('here!'); } var iCount = fnAdd(3,4); alert(iCount); //弹出7 </script>
五、变量作用域
1. 局部变量
局部变量 就是在函数内使用的变量，只能在函数内部使用。
<script type="text/javascript"> function myalert(){ // 定义局部变量 var b = 23; alert(b); } myalert(); // 弹出23 alert(b); // 函数外使用出错 </script>
2.全局变量
全局变量 就是在函数外定义的变量，可以在不同函数内使用。
<script type="text/javascript"> // 定义全局变量 var a = 12; function myalert(){ // 修改全局变量 a++; } myalert(); alert(a); // 弹出13 </script>
六、条件语句
1. 语法
if 语句- 只有当指定条件为 true 时，使用该语句来执行代码if...else 语句- 当条件为 true 时执行代码，当条件为 false 时执行其他代码if...else if....else 语句- 使用该语句来判断多条件，执行条件成立的语句
2. 比较运算符
假如 x = 5, 查看比较后的结果:
| 比较运算符 | 描述 | 例子 |
| == | 等于 | x == 8 为 false |
| === | 全等(值和类型) | x === 5 为 true; x === “5” 为 false |
| != | 不等于 | x != 8 为 true |
| > | 大于 | x > 8 为 false |
| < | 小于 | x < 8 为 true |
| >= | 大于或等于 | x >= 8 为 false |
| <= | 小于或等于 | x <= 8 为 true |
比较运算符示例代码:
var iNum01 = 12; var sNum01 = '12'; if(iNum01==12){ alert('相等！'); } else{ alert('不相等！') } // "==" 符号默认会将符号两边的变量转换成数字再进行对比，这个叫做隐式转换 if(sNum01==12){ alert('相等！'); } else{ alert('不相等！') } // "===" 符号不会转换符号两边的数据类型 if(sNum01===12){ alert('相等！'); } else{ alert('不相等！') } // 多条件判断 var sFruit = "苹果"; if (sFruit == "苹果") { alert("您选择的水果是苹果"); } else if (sFruit == "鸭梨") { alert("您选择的水果是鸭梨"); } else { alert("对不起，您选择的水果不存在!") }
3. 逻辑运算符
假如 x=6, y=3, 查看比较后的结果:
| 比较运算符 | 描述 | 例子 |
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x == 5 || y == 5) 为 false |
| ! | not | !(x==y) 为 true |
逻辑运算符示例代码:
var x = 6; var y = 3; if(x < 10 && y > 1){ alert('都大于'); } else{ alert('至少有一个不大于'); } if(x > 5 || y > 7 ){ alert('至少有一个大于'); } else{ alert('都不大于'); } if(!(x == y)){ alert('等于') } else{ alert('不等于') }
