JavaScript入门宝典：核心知识全攻略（上）-阿里云开发者社区

JavaScript入门宝典：核心知识全攻略（上）

2024-06-26 11

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript入门宝典：核心知识全攻略（上）

前言

本文将带你快速了解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('不等于')
}