首页 > 编程语言 >JavaScript语法基础——变量,数据类型,运算符和程序控制语句(小白友好篇,手把手教你学会!)

JavaScript语法基础——变量,数据类型,运算符和程序控制语句(小白友好篇,手把手教你学会!)

时间:2024-10-31 22:47:24浏览次数:13  
标签:语句 console log JavaScript 数据类型 运算符 var

 一、JavaScript概述

JavaScript是一种高级编程语言,常用于网页开发和服务器端应用程序。它是一种动态类型语言,可以在浏览器中直接解释执行,而不需要编译。

脚本(Script)是一种与计算机程序相关的指令集或代码块,用于执行特定的任务或操作。脚本通常用于自动化重复性的任务或进行特定功能的扩展。脚本语言是一种专门用于编写脚本的编程语言,与传统的编译型语言不同,脚本语言通常不需要编译,可以直接解释执行。脚本语言具有易学易用、灵活、动态和交互式等特点。

二、 怎么在网页中使用JavaScript

要在网页中使用JavaScript,有三种方法:行内式内嵌式外链式

 1、输出方式

在介绍使用方法前先讲一下 JavaScript 的3种输出方式:

(1)使用 console.log():console.log()是JavaScript提供的一种输出到控制台的方法。它通常用于调试和测试代码,可以在浏览器的开发者工具控制台(按F12直接打开)中查看输出结果。

例如:

console.log("第一种:通过浏览器控制台进行输出!此方法最常用!"); 

 

(2)使用 alert():alert()用于在浏览器中弹出一个警告框,显示指定的文本内容。它主要用于简单的弹窗提示,通常用于调试和测试代码。 

 例如:

alert("第二种:通过浏览器弹出框进行输出"); 

(3)使用 document.write():document.write()方法可以将指定的内容直接写入到HTML文档中。它通常用于在网页中动态生成内容。

 例如:

document.write("第三种:直接在网页页面中进行输出"); 

 

 2、行内式(在HTML标签内添加脚本)

行内式是指在HTML标签的属性中直接使用JavaScript代码。这种方法适用于简单的、短小的代码片段,一般需要监听事件(非常不推荐,了解即可!)。

可以在HTML标签中使用事件属性(如onclick、onload等)来执行JavaScript代码。例如,要在按钮点击时触发一个弹出窗口:

<input type="submit" value="登录" onclick="javascript:alert('登录失败');"/>

点击登录时就会显示弹窗 “登录失败” 。 

 3、内嵌式(在HTML文档中嵌入脚本程序) 

 内嵌式就是可以在HTML文档中任意位置内嵌js脚本,添加<script>标签,并将JavaScript代码放在其中。

例如, HTML文档中打印输出内容:

    <script> 
        document.write("你好,云中医计算机学院"); //document.write()向网页输出内容
    </script>

 4、外链式(链接脚本文件) 

在实际开发中,为了更好地组织代码、提高可维护性,建议使用外链式将JavaScript代码放在外部文件中,并通过<script>标签的"src"属性引用外部文件。  


创建一个 JavaScript 文件:首先,在你的项目中创建一个扩展名为 .js 的 JavaScript 文件。你可以使用任何文本编辑器来创建并编辑这个文件。例如,你可以创建一个名为script.js的文件。

编写 JavaScript 代码:在刚刚创建的 JavaScript 文件中,编写你想要运行的 JavaScript 代码。例如,你可以在script.js文件中编写以下代码:

document.write("外链式引用JS脚本");

将 JavaScript 文件链接到 HTML 文件:在 HTML 文件中,添加一个<script>标签来链接你的 JavaScript 文件。在<script>标签中使用 src 属性来指定 JavaScript 文件的路径。

<!DOCTYPE html>
<html>
<head>
    <title>JS的使用方式</title>
</head>
<body>
    
    <!-- 其他HTML内容 -->
    
    <script src="script.js"></script>
</body>
</html>
 

通过以上步骤,你就可以在网页中使用外链式(链接脚本文件)的方式来使用 JavaScript 了。这种方式适用于较大的 JavaScript 代码,可以将代码分离到不同的文件中,并通过链接到 HTML 文件中来使用它们。这样可以使代码更清晰、易于维护。

三、数据类型 

在JavaScript中,有多种数据类型用于存储不同类型的值。

以下是JavaScript中的常见数据类型: 

1. 字符串(String):用单引号“ ' ”或者双引号“ " ”来说明,用于表示文本。

        var str="Good morning!"; 
        document.write(str + " -> 数据类型:"+ typeof str + "<br>"); 


2. 数字(Number):用于表示数字,可为整数和浮点数。 浮点数可以包含小数点,也可以包含一个e(大小写均可,表示10的幂),或者同时包含这两项。

        
        // 小数
        var x1=65.30;
        document.write(x1 + " -> 数据类型:"+ typeof x1 + "<br>");
        // 数字
        var x2=65;
        document.write(x2 + " -> 数据类型:"+ typeof x2 + "<br>");
        // 117*10的3次方
        var y=117e3;
        document.write(y + " -> 数据类型:"+ typeof y + "<br>");
        // 117*10的-3次方
        var z=117e-3;
        document.write(z + " -> 数据类型:"+ typeof z + "<br>");


3. 布尔值(Boolean):用于表示真(true)或假(false)的值。

        var x=true;
        document.write(x + " -> 数据类型:"+ typeof x + "<br>");

 


4. 对象(Object):用于存储复杂数据和方法。

5. 数组(Array):用于存储多个值的有序集合。

        // 对象 object   (对象类型下的数组类型)
        var persons=new Array("Tom","Jack","Kate");
        document.write(persons + " -> 数据类型:"+ typeof persons + "<br>");

 


6. undefined:用于表示未定义的值。

        var person1;
        document.write(person1 + " -> 数据类型:"+ typeof person1 + "<br>");


7. null:用于表示空值或不存在的对象。

        // 特殊情况:尽管 null 是一个表示空值的特殊关键字,
        // 但 typeof null 会返回 "object"。
        // 这是一个著名的 JavaScript 特性,
        // 虽然有些令人困惑,但已经存在了很长时间(知道一下就行,不必理会)
        var person2=null;
        document.write(person2 + " -> 数据类型:"+ typeof person2 + "<br>");

 了解和正确使用不同的数据类型是编写JavaScript代码的关键。这些数据类型使你能够在代码中存储和操作不同类型的值。

四、变量 

JavaScript 中的变量用于存储和操作数据。使用变量可以在代码中存储和引用不同类型的值。 

1、变量的命名

在JavaScript中,变量的命名需要遵循一些规则和约定。以下是一些关于变量命名的指导原则:

  1. 使用有意义的变量名:选择能够清楚描述变量用途的名称。这可以使代码更易读和易于理解。

  2. 变量名不能以数字开头:变量名必须以字母、下划线(_)或美元符号($)开头。

  3. 变量名区分大小写:JavaScript是区分大小写的语言,因此 myVariable和 myvariable是不同的变量。

  4. 避免使用JavaScript保留字:JavaScript有一些保留字(如 varfunctionif、true等),它们具有特殊的含义,不能用作变量名。

  5. 使用驼峰命名法:在多个单词组成的变量名中,第一个单词小写,后续单词首字母大写。例如:myVariablefirstName

2、变量的声明

在 JavaScript 中,你可以使用 varlet 或 const 来声明变量。这些关键字的使用方式略有不同:

  • var:在整个函数作用域范围内都可见,如果变量在函数之外声明,它将成为全局变量。
  • let:具有块级作用域,在花括号 {} 内部声明的变量仅在该块范围内可见。
  • const:也具有块级作用域,用于声明常量,声明后的值无法修改。

 例如:

var name = "John";
console.log("My name is " + name);

let age = 25;
age = age + 1;
console.log("Next year, I will be " + age);

const PI = 3.14;
console.log("The value of PI is " + PI);
 

在上面的例子中,name 是一个使用 var 声明的变量,age 是一个使用 let 声明的变量,PI 是一个使用 const 声明的常量。然后可以使用变量名来引用和操作其值。

使用 console.log 来将变量的值输出到控制台。输出的结果分别是:

变量提升现象

 变量提升是JavaScript解释器在执行代码之前的一个步骤,它会将变量和函数的声明提升到作用域顶部,但不会提升变量的初始化或赋值。

        // 原来写的语句(变量先用后声明)
        console.log(num);
        var num = 10; 

        // 实际运行效果(变量提升现象)
        var num;
        console.log(num);
        num = 10; 

五、运算符

运算符是一种用于执行操作的符号或关键字。在JavaScript中,有多种类型的运算符,包括算术运算符、赋值运算符、比较运算符、逻辑运算符等。

下面用代码来操作解释:

算术运算符

  • 加法运算符:+
  • 减法运算符:-
  • 乘法运算符:*
  • 除法运算符:/
  • 取余运算符:%
  • 自增运算符:++
  • 自减运算符:--

 加减乘除运算符:

    <!-- 加减乘除运算符 -->
    <script> 
        console.log(10 + 10);  // 20
        console.log(100 - 10); // 90
        console.log(10 * 2);   // 20
        console.log(10 / 5);   // 2
    </script>

取余运算符: 

    <!-- 取余运算符 -->
    <script> 
        console.log(13 % 5);  // 3
    </script>

 自增自减运算符:

自增和自减运算符有一个需要注意的地方,就是放在变量之后,会先返回变量操作前的值,再进行自增/自减操作(先取值,后操作);放在变量之前,会先进行自增/自减操作,再返回变量操作后的值(先操作,后取值)

    <script> 
        var a = 1;
        var b = 1;
        console.log(++a);  // 2
        console.log(--b);  // 0
    </script>

    <script> 
        var x = 1;
        var y = 1;
        // 放在变量后
        console.log(x++);  // 1  即返回: x
        console.log(x);    // 2 
        // 放在变量前
        console.log(++y);  // 2  即返回: y+1
    </script>

 赋值运算符

  • 简单赋值运算符:=
  • 加法赋值运算符:+=
  • 减法赋值运算符:-=
  • 乘法赋值运算符:*=
  • 除法赋值运算符:/=
  • 取余赋值运算符:%=
    <script> 
        // 等同于 x = x + y
        var x = 2;
        var y = 1;
        console.log(x += y);  //3

        // 等同于 x = x - y
        var x = 2;
        var y = 1;
        console.log(x -= y);  //1

        // 等同于 x = x * y
        var x = 2;
        var y = 1;
        console.log(x *= y);  //2

        // 等同于 x = x / y
        var x = 2;
        var y = 1;
        console.log(x /= y);  //2

        // 等同于 x = x % y
        var x = 2;
        var y = 1;
        console.log(x %= y);  //0
    </script>

 比较运算符

  • 相等运算符:==
  • 不等运算符:!=
  • 全等运算符:===
  • 不全等运算符:!==
  • 大于运算符:>
  • 小于运算符:<
  • 大于等于运算符:>=
  • 小于等于运算符:<=
    <script>
        var num1 =  10 ;
        var num2 =  10 ;
        var num3 = "10";
        console.log(num1 == num2);       // true
        console.log(num1 === num2);      // true
        console.log(num1 === num3);      // false
     </script>

逻辑运算符

  • 逻辑与运算符:&&
  • 逻辑或运算符:||
  • 逻辑非(取反)运算符:!

 取反运算符:

    <!-- 取反运算符 -->
    <script>
        console.log(!undefined);         // true
        console.log(!null);              // true
        console.log(!0);                 // true
        console.log(!NaN);               // true
        console.log(!"");                // true
        console.log(!888);               // false
        console.log(!'you are my baby'); // false
     </script>

其中,NaN的意思是“Not a Number”,即“非数值”或“不是一个数值”,它用于表示一个本来要返回数值的操作数未返回数值的情况。NaN通常出现在数学运算中,以下几种情况可能导致NaN的产生:除以0:在进行除法运算时,如果除数为0,那么结果就无法定义,通常会被设置为NaN。非法数学运算:当进行一些非法数学运算时,比如对负数进行平方根运算,结果也会被设置为NaN。数据类型不匹配:在类型转换时,如果类型转换失败或者转换后的结果不是有效数值,结果也会被设置为NaN。

数值溢出:当进行数值计算时,如果计算结果超出了所能表示的范围,结果也会被设置为NaN。

缺失数据:在某些数据分析任务中,如果数据中存在缺失值,那么在进行数据计算时,结果也会被设置为NaN。

且运算符(&&): 

    <!-- 且运算符(&&) -->
    <script>
        console.log(10 < 20 && 10 > 5);   // true
        console.log(10 > 20 && 10 > 5);   // false
    </script>

 或运算符(||):

    <!-- 或运算符(||) -->
    <script>
        console.log(10 < 20 || 10 > 5);   // true
        console.log(10 > 20 || 10 > 5);   // true
        console.log(10 > 20 || 10 < 5);   // false
    </script>

六、程序控制语句

1、if 和 if...else条件语句 

if if...else 是JavaScript中常用的条件语句,用来根据条件执行不同的代码块。 

1. if语句: if语句根据给定的条件判断是否执行某个代码块。

语法:

if (条件) {
  // 条件为真时执行的代码块
}

示例:

        var num = 3;
        if (num === 3) 
        {
            num++;
        }
        console.log(num);

运行结果:

 


2. if...else语句: if...else语句在条件为真时执行一个代码块,否则执行另一个代码块。

语法: 

if (条件) {
  // 条件为真时执行的代码块
} else {
  // 条件为假时执行的代码块
}

示例: 

        // if...else...语句(及其嵌套使用)
        var eat = true;
        var food = "猪肉炖粉条";
        if (eat) 
        {
            if (food == "双椒鱼头") 
            {
                console.log('就吃:双椒鱼头'); 
            }
            else
            {
                console.log("就吃:猪肉炖粉条");
            }
        } 
        else 
        {
            console.log('还没到饭点');
        }

运行结果:

 


 用三目运算符代替if...else...语句:

        // 判断一个数是奇数还是偶数(if...else...语句实现)
        var n = 100;
        if (n % 2 === 0) 
        {
            console.log("偶数");
        } 
        else 
        {
            console.log("奇数");
        }

        // 判断一个数是奇数还是偶数(三目运算符实现)
        var n = 100;
        console.log(n % 2 === 0 ? '偶数' : '奇数');

在if语句和if...else语句中,条件可以是任何可以返回布尔值的表达式。当条件为真时,if语句或if...else语句中的代码块会被执行;当条件为假时,if...else语句中的else代码块会被执行(如果存在) 

2、if...else if...和switch条件语句 

1. if...else if...语句是一种多重条件判断的语句,用于根据不同的条件执行不同的代码块。当需要判断多个条件时,if...else if...语句比只有一个if...else语句更加灵活。

语法: 

if (条件1) {
  // 当条件1为真时执行的代码块
} else if (条件2) {
  // 当条件1为假且条件2为真时执行的代码块
} else if (条件3) {
  // 当条件1和条件2都为假且条件3为真时执行的代码块
} else {
  // 当所有条件都为假时执行的代码块
}

示例:

        //  多向判断语句  if...else if...else...
        var greeting="";
        var time=new Date().getHours();
        if (time<12)
        {  greeting="现在是上午";  }
        else if (time<18)
        {  greeting="现在是下午";  }
        else
        {  greeting="现在是晚上";  }

        console.log(greeting);  

2. switch语句是JavaScript中的条件语句,用来根据不同的条件执行不同的代码块。switch语句适用于需要判断多个可能取值的情况。 

语法:

switch (表达式) {
  case 值1:
    // 当表达式等于值1时执行的代码块
    break;
  case 值2:
    // 当表达式等于值2时执行的代码块
    break;
  ...
  default:
    // 当表达式不等于所有case值时执行的代码块
    break;
}

示例:

        //  多向判断语句  switch
        var x = 3;
        switch (x)
        {   
            case 0 :  console.log("x为0");  
                      break;    //break语句用于跳出代码块或循环
            case 1 :  console.log("x为1");  
                      break;
            default : console.log("x既不是0也不是1");  
        }

运行结果:

 

3、for循环语句 

for循环语句用于重复执行一段代码块,可以根据指定的条件来控制循环执行的次数。 

 语法:

for (初始化语句; 循环条件; 循环后操作) {
    // 循环体代码块
}

  • 初始化语句:在循环开始之前执行一次的语句,通常用于设置循环变量的初始值。
  • 循环条件:在每次循环开始之前检查的条件,只有当条件为真时才会执行循环体代码块。如果条件为假,则跳出循环。
  • 循环后操作:在每次循环结束之后执行的操作,通常用于更新循环变量的值。

(都不写的话,就是永久循环(死循环),不推荐这种写法。)

 示例:

        //  递增输出1~10
        for(var i=1;i<=10;i++)
        {
            console.log(i);
        }

运行结果:

永久循环(死循环),如果确实需要永久循环,推荐这种写法: 

        while (1) 
        {
            console.log('每天早上对你说一句肉麻话: 我爱你,中国');
        }

标签:语句,console,log,JavaScript,数据类型,运算符,var
From: https://blog.csdn.net/2302_81399643/article/details/143416055

相关文章

  • 嵌入式课程day04-C语言运算符和选择结构
    2.3运算符2.3.1运算符介绍运算符:具有一定运算规则的符号。操作数:运算符的操作对象。~a   ---a就是~运算符的操作数。---单目运算符:运算符只有一个操作数3+5---35就是+运算符的操作数。---双目运算符:运算符有2个操作数    表达式1?表达式2:表达......