JavaScript入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/h294590501/article/details/80495180

本文介绍了JavaScript的基本概念和使用方法，涵盖其在网页开发中的角色、特点、语法基础、流程控制、函数使用及变量作用域等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript

JavaScript 是一种属于网页的脚本语言，已经被广泛用于 Web 应用开发，
常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
通常 JavaScript 脚本是通过嵌入在 HTML 中来实现自身的功能的。

JavaScript 的作用

HTML 制作网页，搭建网页的结构和内容。
CSS 对网页进行美化，装饰网页。
JavaScript 让网页有交互功能，提升用户的体验。

JavaScript 的特点

解释型
解释一行，运行一行
不会生成中间文件

运行在浏览器中
只要系统有浏览器就可以执行


弱类型
可以不声明，直接使用
var username = "123";
username = "123";

JavaScript 的基础语法

JavaScript 的存放位置

//JS 主要存在两个位置：
//1_放在 HTML 网页中，用<script>标签包裹。
<body>
    <script>
        window.document.write("Hello World<br/>");
    </script>
</body>

//2_放在 HTML 外部，单独以 JS 文件的方式存在。推荐使用这种，降低代码的耦合度。
<head>
<meta charset="UTF-8">
<title>用 JS 向浏览器输出文字</title>
<script type="text/javascript" src="js/my.js"></script>
</head>

//js/my.js 文件：
window.document.write("Hello World<br/>");

//语法解释：
<script>中的 src 属性和 type 属性：
type： 指定脚本的类型，固定写法：text/javascript，默认值。
src： 指定外部 JS 文件的地址。
<script>标签个数：可以出现多个标签，每个标签会从上到下依次运行。
<script>标签出现的位置： 可以放在网页中的任何位置，甚至是放在 HTML 根元素的外面，
//建议放在<head></head>或<body></body>中。

<script>标签中关于语句后面的分号：
如果一行代码一条语句，后面的分号可以省略。
多句代码写在同一行，就会出错。
//建议每一行代码结束加上分号。

JavaScript 的注释

HTML <!-- 注释 -->

CSS /* 注释 */

JavaScript // 单行注释 /* 多行注释 */

弱类型


什么是弱类型：
一个变量可以赋值为不同的数据类型，运行时，才能确认具体数据类型。
如：
a = 10;
a = “abc”;
a = true;
最终运行时，a为布尔类型。

在JS中没有字符和字符串之分，都是字符串类型，
而且既可以使用双引号，也可以使用单引号，
原则是：外面字符串使用双引号，里面字符串就使用单引号，反之亦然。

变量定义的特点
1_var关键字可以省略，建议不要省略。
2_在JS中一个变量可以重复定义，后面的会覆盖前面的。
3_<script>标签对变量的作用域没有影响。
即后面的<script>标签内可以使用前面定义的变量。

五种原始数据类型

number  数值型：整数（314）、浮点（3.14），包括正负数

boolean 布尔类型，包含：true/false

string  包含字符和字符串，既可以使用双引号又可以使用单引号

object  对象类型，如：Array/Date

undefined   未定义类型，一个变量没有赋值之前的状态

typeof操作符

作用： 用来判断变量是什么类型。
语法：typeof(变量) 或 typeof 变量

注意：对于返回值null与undefined的区别：

null: 对象类型，已经知道了数据类型，但对象为空。
var n = null; //对象型
        
undefined：未定义的类型，并不知道是什么数据类型。
var u; //未赋值//未定义型

var i = 5;           //整型number
var f = 3.14;        //整型number
var c = 'a';         //字符串型string
var str = "abc";     //字符串型string
var b = true;        //布尔型boolean
var d = new Date();  //对象型object
var n = null;        //对象型object
var u;               //未定义型undefined

字符串转换成数字类型

全局函数（方法），就是可以在JS中任何的地方直接使用的函数，不用导入对象。
不属于任何一个对象。

转换函数
parseInt()  
将一个字符串转成整数，
如果一个字符串包含非数字字符，
那么parseInt函数会从首字母开始取数字字符，
//一旦发现非数字字符，马上停止获取内容。
如果转换失败，则返回NaN=Not a Number，不是一个数。
如：
parseInt(“123”)结果为：123
parseInt(“12ABC3”)结果为：12
parseInt(“ABC123”)结果为：NaN（Not a Number）

parseFloat()    
将一个字符串转成小数，转换原理同上。

isNaN() 转换前判断被转换的字符串是否是一个数字，非数字返回true  
isNaN = is not a number

高级语言中的三种基本结构： 顺序、判断、循环。

流程控制语句

if语句
在一个指定的条件成立时执行代码。
if(条件表达式) {
    //代码块;
}
if..else语句
在指定的条件成立时执行代码，当条件不成立时执行另外的代码。
if(条件表达式) {
    //代码块;
}
else {
    //代码块;
}
if..elseif..else语句
使用这个语句可以选择执行若干块代码中的一个。
if (条件表达式) {
    //代码块;
}
else if(条件表达式) {
    //代码块;
}
else {
    //代码块;
}

JS中，判断条件除了true/false外，还可以使用非布尔类型的结果。
数据类型        
number  非0为真    0为假
string  非空串为真   空串""为假
object  非空为真    null为假
undefined       为假
NaN(Not a Number)       为假

switch多分支
case后使用变量
switch(变量名) {
  case 常量值:
     break;
  case 常量值：
     break;
  default:
      break;
}
case后使用表达式
switch(true) {  //这里的变量名写成true
  case 表达式:     //如：n > 5 && n < 10
    break;
  case 表达式:
    break;
  default:
    break;
}

消息框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。 
window.alert("警告信息");

确认框

确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。 
当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
window.confirm("确认信息");

提示框

提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。
如果用户点击取消，那么返回值为 null。
window.prompt("提示信息","默认值");

<script>
    //提示用户输入成绩
    var strScore = window.prompt("输入成绩","0");
    //如果用户输入的是数字类型
    var flag = isNaN(strScore);
    //如果是数字类型
    if(!flag){
        //将string转成number
        var scores = parseInt(strScore);
        switch(true){
            case scores < 60 : tip = "你不及格";break;
            case scores >= 60 && scores < 80 : tip = "合格";break;
            case scores >= 80 && scores < 90 : tip = "良好";break;
            case scores >= 90 : tip = "优秀";break;
            default : tip = "未知错误" ;break;
        }
        alert(tip);
    }else{
        alert("成绩必须是number类型");
    }
</script>

while语句
当指定的条件为 true 时循环执行代码。
最少执行0次循环。
while (条件表达式) {
    需要执行的代码;
}

do-while语句
当指定的条件为 true 时循环执行代码。
最少执行1次循环。
do {
    需要执行的代码;
}while (条件表达式);

for语句
循环指定次数。
最少执行0次循环。
for (var i=0; i<10; i++) {
    需要执行的代码;
}

break和continue语句
break: 结束循环，跳出while/do-while/for语法。
continue：跳过本次循环，执行下一次循环，没有跳出while/do-while/for语法。

函数的使用

函数function（小写字母）
是当它被调用时可重复使用的代码块，JS中的函数类似于Java中的方法。

JS中函数分为： 有名/命名函数和无名/匿名函数。

有名/命名函数的格式：[]表示可选。
function 函数名( [参数列表] ) {
    函数体;
    [return 返回值];
}
 
无名/匿名函数的格式：
var 变量名 =  function([参数列表]) {
    函数体;
}

参数列表：
add(num1,num2)是对的。
add(var num1,var num2)是错的，无需声明。

//定义一个函数实现加法功能。
<head>
    <meta charset="UTF-8">
    <title>有名/命名函数</title>
    <script>
        //定义一个函数
        function add(num1,num2){

            return num1 + num2;
        }

    </script>

</head>
<body>
    <script>
        document.write(add(100,200)+"<br/>");
    </script>
</body>

<head>
    <meta charset="UTF-8">
    <title>无名/匿名函数</title>
    <script>
        //定义一个函数
        var add = function(num1,num2){
                        return num1 + num2;
                  }
    </script>
</head>
<body>
    <script>
        //调用
        document.write(add(100,200));
    </script>
</body>

注意：

1_形参的类型不用指定，因为是弱类型，前面var省略。

2_函数的返回值，如果有返回值就使用return返回，如果没有返回值不写return。

变量的作用域

局部 JavaScript 变量

函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，
因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，局部变量就会被删除。

全局JavaScript 变量

不是声明在函数体内部的变量，网页上的所有脚本和函数都能访问它。

注意：当全局变量和局部变量同名时，在获取值时，采用就近原则。

向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。 

如：name="123";    //注：前面没有var

将声明一个全局变量，//哪怕这个变量是声明在函数内部它也是一个全局变量。


建议：
//局部变量声明在函数内，全局变量声明在函数外。
//局部变量和全局变量声明时，都带var关键字。