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

 一、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);  // 20console.log(100 - 10); // 90console.log(10 * 2);   // 20console.log(10 / 5);   // 2</script>

取余运算符: 

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

 自增自减运算符:

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

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

 赋值运算符

  • 简单赋值运算符:=
  • 加法赋值运算符:+=
  • 减法赋值运算符:-=
  • 乘法赋值运算符:*=
  • 除法赋值运算符:/=
  • 取余赋值运算符:%=
    <script> // 等同于 x = x + yvar x = 2;var y = 1;console.log(x += y);  //3// 等同于 x = x - yvar x = 2;var y = 1;console.log(x -= y);  //1// 等同于 x = x * yvar x = 2;var y = 1;console.log(x *= y);  //2// 等同于 x = x / yvar x = 2;var y = 1;console.log(x /= y);  //2// 等同于 x = x % yvar 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);       // trueconsole.log(num1 === num2);      // trueconsole.log(num1 === num3);      // false</script>

逻辑运算符

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

 取反运算符:

    <!-- 取反运算符 --><script>console.log(!undefined);         // trueconsole.log(!null);              // trueconsole.log(!0);                 // trueconsole.log(!NaN);               // trueconsole.log(!"");                // trueconsole.log(!888);               // falseconsole.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);   // trueconsole.log(10 > 20 && 10 > 5);   // false</script>

 或运算符(||):

    <!-- 或运算符(||) --><script>console.log(10 < 20 || 10 > 5);   // trueconsole.log(10 > 20 || 10 > 5);   // trueconsole.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;
}

示例:

        //  多向判断语句  switchvar 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~10for(var i=1;i<=10;i++){console.log(i);}

运行结果:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/57607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins-配置使用ssh拉取仓库代码,配置自动化构建打包(三)(云效)

文章目录 准备注意&#xff1a;流程&#xff1a; 检查之前是否配置过与代码仓库的连接生成密钥对手动在服务器中与代码仓库建立连接以生成 Known hosts file代码仓库端添加公钥Jenkins System-Publish over SSH中添加私钥Jenkins中创建项目&#xff0c;并使用私钥添加ssh凭据构…

镭眸ILS-F13测量型激光雷达:超远距激光雷达专家

镭眸F13是一款超远距离测量型激光雷达&#xff0c;专为需要在超远距离内实现移动物体轮廓数据测量的用户设计。它能够以25Hz的扫描频率&#xff0c;在120米内提供3厘米的扫描精度&#xff0c;解决了现有传感器无法满足的测量距离问题。与市场上其他产品如西克&#xff08;SICK&…

windows安装deepin双系统

最近入手了一台中柏N100的小主机&#xff0c;本来只想当个机顶盒&#xff0c;没想到性能还可以&#xff0c;就打算用它做一些日常的办公&#xff0c;无聊时想着能不能再装个Linux&#xff0c;就去Deepin官网查看了下方法&#xff0c; 在此记录 另外&#xff0c;欢迎来我的博客…

SAP-FICO 月结流程

一、财务月结 1、资产会计-固定资产折旧计提AFAB 正式运行之前&#xff0c;先测试运行&#xff0c;没有问题就正式运行 可以看到&#xff0c;没有错误 因为正式系统的资产会过于庞大&#xff0c;一般都是后台运行资产的折旧 点击程序--后台执行 AFBP查看运行日志&#xff0c…

深度学习(八) TensorFlow、PyTorch、Keras框架大比拼(8/10)

一、深度学习框架概述 深度学习框架在当今人工智能和机器学习领域中占据着至关重要的地位。其中&#xff0c;TensorFlow 由 Google 开发&#xff0c;自 2015 年发布以来&#xff0c;凭借其灵活的计算图、自动微分功能以及跨平台支持等特点&#xff0c;迅速成为主流深度学习框架…

JVM—类加载器、双亲委派机制

目录 什么是类加载器 类加载器的分类 Bootstrap启动类加载器 通过启动类加载器加载用户jar包 Extension扩展类加载器和Application应用程序类加载器 通过扩展类加载器加载用户jar包 双亲委派机制 打破双亲委派机制 自定义类加载器 线程上下文类加载器 Osgi框架的类加…

flask第一个应用

文章目录 安装一、编程第一步二、引入配置三、代码解析 安装 python环境安装的过程就不重复赘述了&#xff0c;flask安装使用命令pip install Flask即可&#xff0c;使用命令pip show Flask查看flask版本信息 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供…

享元模式-实现大颗粒度对象缓存机制

详解 享元模式是一种结构型设计模式&#xff0c;其主要目的是通过共享尽可能多的相同部分来有效地支持大量细粒度的对象。它通过将对象的属性分为内在属性&#xff08;可以共享、不随环境变化的部分&#xff09;和外在属性&#xff08;根据场景变化、不能共享的部分&#xff0…

Flutter学习笔记(一)-----环境配置

一、android 环境 android这边可以参照godot的配置 1.装java Java Downloads | Oracle x64 Compressed Archive &#xff1a;下载后直接解压到某个位置&#xff0c;不用安装 x64 installer: 下载后双击安装 注意&#xff1a;不要去百度直接搜Java安装&#xff0c;这样你最多安…

JetBrains Clion Idea 等缓存文件和配置文件迁移

JetBrains 缓存文件和配置文件迁移 文件默认路径 缓存文件默认路径&#xff1a; %userprofile%/AppData/Local/JetBrains/应用名 如 C:/Users/wbl/AppData/Local/JetBrains/CLion2021.3日志文件默认路径&#xff1a;默认在配置文件目录下的log文件夹 %userprofile%/AppData…

《AI产品经理手册》——解锁AI时代的商业密钥

在当今这个日新月异的AI时代&#xff0c;每一位产品经理都面临着前所未有的挑战与机遇&#xff0c;唯有紧跟时代潮流&#xff0c;深入掌握AI技术的精髓&#xff0c;才能在激烈的市场竞争中独占鳌头。《AI产品经理手册》正是这样一部为AI产品经理量身定制的实战宝典&#xff0c;…

2024年最全2024年最系统的网络安全自学路线,学完即可就业_安全学习路线(2),2024年最新你掌握了多少

一个人可以走的很快&#xff0c;但一群人才能走的更远&#xff01;不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人&#xff0c;都欢迎加入我们的的圈子&#xff08;技术交流、学习资源、职场吐槽、大厂内推、面试辅导&#xff09;&#xff0c;让我们一起学习成长&#xf…

前端拖拽库方案之react-beautiful-dnd

近期&#xff0c;知名 React 拖拽库 react-beautiful-dnd 宣布了项目弃用的决定&#xff0c;未来将不再维护。这一决定源于其存在的缺陷与局限性&#xff0c;促使作者转向开发一个更加现代化的拖拽解决方案——Pragmatic drag and drop&#xff08;下面会介绍&#xff09;&…

【深度学习】实验 — 动手实现 GPT【四】:代码实现Transformer、代码实现GPT模型、训练大型语言模型(LLM)

【深度学习】实验 — 动手实现 GPT【四】&#xff1a;代码实现Transformer、代码实现GPT模型、训练大型语言模型&#xff08;LLM&#xff09; 在 Transformer 块中连接注意力层和线性层代码实现Transformer 块 代码实现GPT模型文本生成训练模型计算训练集和验证集的损失 训练大…

我在命令行下剪辑视频

是的&#xff0c;你不需要格式工厂&#xff0c;你也不需要会声会影&#xff0c;更不需要爱剪辑这些莫名其妙的流氓软件&#xff0c;命令行下视频处理&#xff0c;包括剪辑&#xff0c;转码&#xff0c;提取&#xff0c;合成&#xff0c;缩放&#xff0c;字幕&#xff0c;特效等…

海外云手机是什么?对外贸电商有什么帮助?

在外贸电商领域&#xff0c;流量引流已成为卖家们关注的核心问题。越来越多的卖家开始利用海外云手机&#xff0c;通过TikTok等社交平台吸引流量&#xff0c;以推动商品在海外市场的销售。那么&#xff0c;海外云手机到底是什么&#xff1f;它又能为外贸电商卖家提供哪些支持呢…

MATLAB绘图|关于三维制图,给初学者的建议

给MATLAB的关于绘制三维图的建议 文章目录 基础知识使用基本函数设置轴标签和标题调整视角添加网格和图例绘制子图灵活使用 hold on 和 hold off保存图形总结 基础知识 了解三维坐标系统&#xff1a;三维图形有三个轴&#xff08;x、y、z&#xff09;&#xff0c;确保你理解如…

centos7配置keepalive+lvs

拓扑图 用户访问www.abc.com解析到10.4.7.8&#xff0c;防火墙做DNAT将访问10.4.7.8:80的请求转换到VIP 172.16.10.7:80&#xff0c;负载均衡器再将请求转发到后端web服务器。 实验环境 VIP&#xff1a;负载均衡服务器的虚拟ip地址 LB &#xff1a;负载均衡服务器 realserv…

opencv python笔记

OpenCV课程 OpenCV其实就是一堆C和C语言的源代码文件,这些源代码文件中实现了许多常用的计算机视觉算法。 OpenCV的全称是Open Source Computer Vision Library,是一个开放源代码的计算机视觉库OpenCV最初由英特尔公司发起并开发,以BSD许可证授权发行,可以在商业和研究领域中…

金融标准体系

目录 基本原则 标准体系结构图 标准明细表 金融标准体系下载地址 基本原则 需求引领、顶层设计。 坚持目标导向、问题导向、结果 导向有机统一&#xff0c;构建支撑适用、体系完善、科学合理的金融 标准体系。 全面系统、重点突出。 以金融业运用有效、保护有力、 管理高…