JavaScript的引入方式和基础语法~

news2025/1/11 21:49:07

JavaScript简介：

JavaScript是一门跨平台，面向对象的脚本语言，来控制网页行为的，它能使网页可交互

W3C标准：网页主要由三部分组成

结构：HTML
表现：CSS
行为：JavaScript

JavaScript和java是完全不同的语言，无论是概念还是设计，但是基础的语法是相似的

JavaScript(简称JS)在1995年由Brenddan发明，并于1997年称为一部ECMA标准，ECMAScript 6(ES6)是最新的JavaScript版本(发布于2015年)

JavaScript引入方式：

内部脚本：

将JS代码定义在HTML页面中

在HTML中，JavaScript代码必须位于<script>与</script>标签之间

<script>
	alert("hello JS~");
</script>

提示：

在HTML文档中可以在任意地方，放置任意数量的<script>

一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示

举例：

<script>
        alert("hello js");
</script>

右击选择显示的浏览器：

在这里插入图片描述

显示如下：

在这里插入图片描述

外部脚本：

将JS代码定义在外部JS文件中，然后引入到html页面中

外部文件：demo.js

alert("hello JS~")

引入外部js文件：

<script src="../js/demo.js></script>

举例：

创建外部脚本myjs.js：

在这里插入图片描述

第一步：书写js代码

alert("hello myjs");

第二步：引入外部脚本

<script  src="../js/myjs.js"></script>

显示如下：

在这里插入图片描述

注意：

外部脚本不能包含<script>标签

<script>标签不能自闭和，如下所示：

若出现srcipt标签自闭和，那么页面效果将无法显示

<srcipt src="../js/myjs.js"/>

书写语法：

1：区分大小写：与java一样，变量名，函数名以及其他一切东西都是区分大小写的

2：每行结尾的分号可有可无

3：注释：

单行注释：//注释内容
多行注释：*/注释内容*/

4:大括号表示代码块

if(count==3){
	alert(count);
}

输出语句：

1：使用window.alert()写入警告框，window可省略
举例：

<script>
    window.alert("hello,js1");
</script>

显示如下：

在这里插入图片描述

2：使用document.write()写入HTML输出

举例：

<script>
    document.write("hello,js2");
</script>

显示如下：

在这里插入图片描述

3：使用console.log()写入浏览器控制台

举例：

<script>
    console.log("hello,js3");
</script>

在网页右击，然后点击检查：

在这里插入图片描述

显示如下：

在这里插入图片描述

变量：

JavaScript中用var关键字(varable的缩写)来声明变量

var test=20;
test="张三";

JavaScript是一门弱类型语言，变量可以存放不同类型的值

举例：

<script>
    var test=19;
    alert(test);
</script>

显示如下：

在这里插入图片描述

<script>
    var test=19;
    test="小明";
    alert(test);
</script>

显示如下：

在这里插入图片描述

变量名需要遵循如下规则：

1：组成字符可以是任意字母，数字，下划线(_)或者美元符号($)
2：数字不能开头
3：建议使用驼峰命名

变量的特点：

1：var的作用域范围很广泛，相当于是一个全局变量

在Java中，定义的变量只在代码块中有效，但JavaScript并非如此

举例：

<script>
    {
        var test="你好";
    }
    alert(test);
</script>

显示如下：

即使我们在代码块外部访问该变量，也依然可以

在这里插入图片描述

2：变量可以重复定义

在Java中同一个变量是不允许重复定义的，但JavaScript并非如此

如下所示：

<script>
    {
        var test="你好";
        var test=1;
    }
    alert(test);
</script>

显示如下：

它不但没有报错，而且输出的var变量为第二次定义的，因为第二次定义的把第一次定义的覆盖了

在这里插入图片描述

ECMAScript 6新增关键字：

let关键字：

ECMAScript 6新增了let关键字来定义变量，它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

举例：

如下所示，在浏览器中打开，会发现页面一片空白，并无警示框出现

<script>
    {
        let test=100;
    }
    alert(test);
</script>

右击点击检查—>控制台,如下所示：

在这里插入图片描述
如下所示，在浏览器中打开，会发现页面一片空白，并无警示框出现

<script>
    {
        let test=100;
        let test=10;
    }
    alert(test);
</script>

右击点击检查—>控制台,如下所示：

在这里插入图片描述

const关键字：

ECMAScript 6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变

举例：

如下所示，在浏览器中打开，会发现页面一片空白，并无警示框出现

<script>
    {
        const test=100;
        test=20;
    }
    alert(test);
</script>

右击点击检查—>控制台,如下所示：

在这里插入图片描述

数据类型：

我们上面所讲的通过var/let/const关键字定义变量是不需要指定数据类型的，但并不代表JavaScript就没有数据类型

JavaScript中分为：原始类型[类似于java中的基本类型]和引用类型

number：数字[整数，小数，NaN(Not a Number)]
string:字符，字符串，单双引皆可
boolean:布尔，true，false
null:对象为空
undefined:当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

number举例:

alert(typeof age);

举例：

<script>
	//当变量为整型时：
   var age=10;
   //当变量为浮点数时：
   var price=3.14;
   alert(typeof age);
   alert(typeof price);
</script>

在JavaScript中，无论是整数还是浮点数，其类型均为number类型

显示如下：

在这里插入图片描述

string举例：

<script>
	//当变量为单个字符时：
  var ch='a';
  //当变量为字符串时：既可以使用单引号，也可以使用双引号
  var name="张三";
  var address='北京';
  alert(typeof ch);
  alert(typeof name);
  alert(typeof address);
</script>

在JavaScript中，无论是单个字符还是字符串，其类型均为string类型

显示如下：

在这里插入图片描述

boolean举例：

<script>
  var a=false;
  var b=true;
  alert(typeof a);
  alert(typeof b);
</script>

输出：

在这里插入图片描述

null举例：

<script>
  var obj=null;
  alert(typeof obj);
</script>

显示如下：

注：typeof运算符对于null值会返回"Object",这实际上是JavaScript最初实现中的一个错误，然后被ECMAScript沿用了，现在，null被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值

在这里插入图片描述

undefined举例：

<script>
  var a;
  alert(typeof a);
</script>

显示如下：

在这里插入图片描述

运算符：

一元运算符：++，--
算术运算符：+，-，*，、，%
赋值运算符：=，+=，-=...
关系运算符：>,<,>=,<=,!=,== ,===...
逻辑运算符：&&，||，！
三元运算符：条件运算符？true_value:false_value

其他的运算符使用方法和含义与java是相同的，这里我们就不进行赘述了，这里我们主要说明以下== 和===的使用方法

==的使用方法：

举例：

如下所示，变量a为number类型的20，而变量b为string类型的20，在java中，如果使用==对变量a和b进行比较，比较结果必然为false

<script>
  var a=20;
  var b="20"
  alert(a==b);
</script>

但JavaScript中的比较结果为true，原因为：当使用==对两个变量进行比较时，首先会判断类型是否一样，如果不一样，则进行类型转换，再比较其值

显示如下：

在这里插入图片描述

===的使用方法：

举例：

<script>
  var a=20;
  var b="20"
  alert(a===b);
</script>

显示如下：

这里之所以返回false的原因为：当使用===对两个变量进行比较时，首先会判断类型是否一样，如果不一样，直接返回false，如果类型一样再比较其值

在这里插入图片描述

JavaScript中的类型转换：

string转换为number：

string：按照字符串的字面值，转化为数字，如果字面值不是数字，则转为NaN

举例：

字面值为数字时：

<script>
  var b=+"20";
  //当变量b被转为数字20，那么输出结果应为21，否则为201[字符串的链接]
  alert(b+1);
</script>

显示如下：

在这里插入图片描述

字面值不为数字时：

<script>
  var b=+"abc";
  alert(b);
</script>

显示如下：

在这里插入图片描述

上述我们是通过正负号将字面值为数字的字符串转化为数字的，但在JavaScript中，这并不是最优解，通常情况下，我们**通过parseInt进行转换**

举例：

<script>
  var b="20";
  alert(parseInt(b)+1);
</script>

显示如下：

在这里插入图片描述

boolean转换为number：

举例:

当boolean值为true时，转化为1：

<script>
  var falg=+true;
  alert(falg);
</script>

显示如下：

在这里插入图片描述

当boolean值为false时，转化为0：

<script>
  var falg=+false;
  alert(falg);
</script>

显示如下：

在这里插入图片描述

number转化为boolean:

举例：

number为0时，转化为false：

<script>
  var flag=0;
  //当if条件进行判断时，首先会将flag转化为boolean类型的，再进行判断
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

number为NaN时转化为fasle：

<script>
  var flag=+"abc";
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下：

在这里插入图片描述

number为其他数字时转化为true：

<script>
  var flag=23;
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下：

在这里插入图片描述

string转化为boolean:

当string为空字符串时，转化为false：

举例：

<script>
  var flag="";
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下：

在这里插入图片描述

当string为其他字符串时，转化为true：

举例：

<script>
  var flag="hello";
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下：

在这里插入图片描述

null转化为boolean:

当为null时，转化为false：

<script>
  var flag=null;
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下：

在这里插入图片描述

undefined转化为boolean:

当为undefined时，转化为false：

举例：

<script>
  var flag=undefined;
  if(flag){
    alert("转为true");
  }else{
    alert("转为false");
    }
</script>

显示如下：

在这里插入图片描述

其他类型转化为boolean类型可以简化书写：

很多时候，我们定义了许多字符串，当我们要将这些字符串传递给方法进行使用时，首先需要对字符串进行健壮性的判断，看该字符串是否有值，如果没有值，那么就不再使用它了

//一般的判断方法
if(str!=null&&str.length>0){
//通过上面的学习，我们直接可以将代码优化为下述这样
 if(str){
    alert("转为true");
  }else{
    alert("转为false");
 }

流程控制语句：与java的用法相同

if:

举例：

<script>
  var count=10;
  if(count>0)
  {
    alert("该数是正数");
  }
</script>

显示如下：

在这里插入图片描述

switch:

举例：

<script>
  var number=2;
  switch(number){
      case 1:
      {
          alert("星期一");
          break;
      }
      case 2:
      {
          alert("星期二");
          break;
      }
      case 3:
      {
          alert("星期三");
          break;
      }
      case 4:
      {
          alert("星期四");
          break;
      }
      case 5:
      {
          alert("星期五");
          break;
      }
      case 6:
      {
          alert("星期六");
          break;
      }
      case 7:
      {
          alert("星期天");
          break;
      }
      default:
      {
          alert("输入有误，请重新输入");
          break;
      }
  }
</script>

显示如下：

在这里插入图片描述

for:

举例：

<script>
     var sum=0;
     //注意不要将变量i的类型根据习惯写成int了，JavaScript中并没有int类型
     //不使用var定义的原因是由于var所定义的变量是一个全局变量，即使循环结束，i的值依然可以被沿用
     for(let i=0;i<=100;i++)
     {
        sum+=i;
      }
      alert(sum);
</script>

显示如下：

在这里插入图片描述

while:

举例：

<script>
     var sum=0;
     var i=0;
     while(i<=100){
         sum+=i;
         i++;
     }
     alert(sum);
</script>

显示如下：

在这里插入图片描述

do…while:

举例：

<script>
     var sum=0;
     var i=0;
     do{
         sum+=i;
         i++;
     }while(i<=100)
     alert(sum);
</script>

显示如下：

在这里插入图片描述

函数：

函数(方法)是被设计为执行特定任务的代码块

定义：JavaScript函数通过function关键字进行定义

定义方式1：

function functionName(参数1，参数2....){
要执行的代码块
}

注意：

形式参数不需要类型，因为JavaScript是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

举例：

<script>
     function add(a,b)
     {
        return a+b;
     }
     var result=add(3,2);
     alert(result);
</script>

显示如下：

在这里插入图片描述

定义方式2：

var functionName=function(参数列表){
要执行的代码；
}

在js中，函数的调用可以传递任意数量的参数

传递的参数等于形参个数时：

举例：

<script>
     var add=function(a,b){
         return a+b;
     }
     let result=add(1,2);
     alert(result);
</script>

显示如下：

在这里插入图片描述

传递的参数个数小于形参个数时

举例：

<script>
     var add=function(a,b){
         return a+b;
     }
     let result=add(1);
     alert(result);
</script>

由于在函数调用时，只传递了一个值，那么a=1，b没有传值，则b为NaN,二者相加依然是NaN

显示如下：

在这里插入图片描述

传递的参数个数大于形参个数时

举例：

<script>
     var add=function(a,b){
         return a+b;
     }
     let result=add(1,3,7);
     alert(result);
</script>

由于在函数调用时，传递了3个值，那么a=1，b=2，实参7没有接收它的形参,则它不参与运算，实际函数调用为前两个数的求和

显示如下：

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大数据技术架构(组件)8——Hive：Function Cases UDF/UDTF/UDAF 1

大数据技术架构(组件)8——Hive：Function Cases UDF/UDTF/UDAF 1

1.3、Function Cases1.3.1、窗口函数row_number&#xff1a;使用频率 ★★★★★rank &#xff1a;使用频率 ★★★★dense_rank&#xff1a;使用频率 ★★★★rank/dense_rank/row_number对比first_value&#xff1a;使用频率 ★★★last_value&#xff1a;使用频率 ★lead&am…
阅读更多...
下班前几分钟，我彻底弄懂了并查集

下班前几分钟，我彻底弄懂了并查集

目录一、并查集的由来二、代表元法2.1 初始化2.2 查询2.3 合并2.4 设计理念三、并查集的应用3.1 合并集合3.2 连通块中点的数量3.3 亲戚3.4 省份数量References一、并查集的由来 考虑这样一个场景。 现有 nnn 个元素&#xff0c;编号分别为 1,2,⋯,n1,2,\cdots,n1,2,⋯,n&…
阅读更多...
【JVM】详解直接内存

【JVM】详解直接内存

文章目录1. 直接内存概述2. 直接内存的使用2.1 Java缓冲区2.2 直接内存3. 直接内存的释放3.1 直接内存释放原理4. 禁用显式回收对直接内存的影响1. 直接内存概述 下面是 《深入理解 Java 虚拟机 第三版》2.2.7 小节 关于 Java 直接内存的描述。 直接内存&#xff08;Direct Me…
阅读更多...
从零开始的数模（七）层次分析法

从零开始的数模（七）层次分析法

一、概念 1.1定义 应用场景&#xff1a; 1、最佳方案选取 2、评价类问题 3、指标体系的优选 步骤&#xff1a; 1、建立层次结构模型&#xff1b; 2、构造判断(成对比较)矩阵&#xff1b; 3、层次单排序及其一致性检验&#xff1b; 4、层次总排序及其一致性检验&#xff1b; …
阅读更多...
Mybatis 分页插件使用

Mybatis 分页插件使用

1、分页插件的使用步骤 需求分析&#xff1a; 我们在前端界面获取用户表的时候&#xff0c;在界面上一次显示出成百上千条数据&#xff0c;用户体验&#xff0c;软件性能都会很糟糕&#xff0c;假设数据库内存储十万条记录&#xff0c;后端一次性返回这么多数据&#xff0c;前…
阅读更多...
C语言深度解剖-关键字（2）

C语言深度解剖-关键字（2）

目录 1.关键字 static 源文件与头文件 static修饰全局变量 static修饰局部变量 写在最后&#xff1a; 1.关键字 static 源文件与头文件 平时我们在练习的时候&#xff0c;都只会开一个用来测试的源文件&#xff0c; 但是&#xff0c;当我们在写一个项目的时候&#xff…
阅读更多...
Hal GPIO控制--LED/Delay实现

Hal GPIO控制--LED/Delay实现

环境配置在CubeMx Pinout view 中点击可以设置管脚模式 &#xff0c;右击 可以配置管脚名称这里以点PB8灯为例&#xff0c;可以设置灯输出电平 &#xff0c;模式为输出&#xff0c;不进行上下拉&#xff0c; 速度 模式设置以及用户自定义名称。。时钟树配置&#xff0c;使用HSI…
阅读更多...
FreeRTOS源码获取--＞FreeRTOS移植--＞FreeRTOS源码文件了解 | FreeRTOS二

FreeRTOS源码获取--＞FreeRTOS移植--＞FreeRTOS源码文件了解 | FreeRTOS二

目录 说明&#xff1a; 一、获取源码 1.1、FreeRTOS官网获取 1.2、正点原子开发板A盘资料\6&#xff0c;软件资料\13&#xff0c;版本-->V10.4.6 二、移植源码 2.1、移植步骤 2.1.1、添加源码、头文件路径 2.1.2、添加FreeRTOSConfig.h文件路径 2.1.3、添加或修改相…
阅读更多...
VisualSVN Server Enterprise 5.1.1 Crack

VisualSVN Server Enterprise 5.1.1 Crack

VisualSVN Server 提供以下主要功能。 Active Directory 单点登录 允许用户使用他们当前的 Active Directory 域凭据访问 VisualSVN Server。使用安全 Kerberos V5 或 NTLM 身份验证协议。支持双因素身份验证和智能卡。 多站点存储库复制 使用 VisualSVN 分布式文件系统 (VDF…
阅读更多...
MySQL基础（1）—— 卸载与安装

MySQL基础（1）—— 卸载与安装

文章目录MySQL卸载【windows】1、停止MySQL服务2、软件的卸载2.1 通过控制面板卸载软件2.2 通过360软件管家等第三方软件进行删除2.3 通过MySQL安装包提供的卸载功能卸载3、残余文件的清理4、清理注册表5、删除环境变量配置MySQL安装【windows】1、下载安装包2、安装3、配置环境…
阅读更多...
Sharding-JDBC（六）5.1.0版本，实现按月分表、自动建表、自动刷新节点

Sharding-JDBC（六）5.1.0版本，实现按月分表、自动建表、自动刷新节点

目录1.Maven 依赖2.创建表结构3.yml 配置4.TimeShardingAlgorithm.java 分片算法类5.ShardingAlgorithmTool.java 分片工具类6.ShardingTablesLoadRunner.java 初始化缓存类7.SpringUtil.java Spring工具类8.源码测试9.测试结果10.代码地址背景&#xff1a; 项目用户数据库表量…
阅读更多...
vscode运行C/C++程序

vscode运行C/C++程序

一、vsocde对C/C的支持 Visual Studio Code对C/C语言的支持由Microsoft C/C扩展程序提供。它使得C/C在Windows、Linux和macOS等跨平台开发成为可能。 二、安装扩展程序 打开VS Code软件选择任务栏上的扩展视图图标&#xff08;下图红色方框&#xff09;或使用快捷键(CtrlShif…
阅读更多...
【自然语言处理】情感分析（四）：基于 Tokenizer 和 Word2Vec 的 CNN 实现

【自然语言处理】情感分析（四）：基于 Tokenizer 和 Word2Vec 的 CNN 实现

情感分析&#xff08;四&#xff09;&#xff1a;基于 Tokenizer 和 Word2Vec 的 CNN 实现本文是 情感分析 系列的第 444 篇&#xff0c;前三篇分别是&#xff1a; 【自然语言处理】情感分析&#xff08;一&#xff09;&#xff1a;基于 NLTK 的 Naive Bayes 实现【自然语言处…
阅读更多...
服务发现Discovery和Eureka自我保护机制

服务发现Discovery和Eureka自我保护机制

目录 一、服务发现Discovery ​二、Eureka自我保护 &#xff08;一&#xff09;故障现象 &#xff08;二&#xff09;导致原因 &#xff08;三&#xff09;怎么禁止自我保护 三、Eureka2.0的停更 一、服务发现Discovery 对于注册进eureka里面的微服务&#xff0c;可以通…
阅读更多...
外挂、破解软件理论与实战

外挂、破解软件理论与实战

外挂、破解软件理论与实战 1 理论 1.1 不同操作系统下的可执行文件 Windows【PE】 PE 格式&#xff0c;可移植可执行格式&#xff08;Portable Executable&#xff09;&#xff0c; 是 Windows 下的主要可执行文件格式。别被名字迷惑了&#xff0c;PE 文件必须是 Windows 下…
阅读更多...
第四十六章 动态规划——状态机模型

第四十六章 动态规划——状态机模型

第四十六章 动态规划——状态机模型一、通俗理解状态机DP1、什么是状态机2、什么是状态机DP二、例题1、AcWing 1049. 大盗阿福&#xff08;1&#xff09;问题&#xff08;2&#xff09;分析a.状态定义b.状态转移c.循环设计d.初末状态&#xff08;3&#xff09;代码2、AcWing 10…
阅读更多...
C++学习/温习：新型源码学编程（三）

C++学习/温习：新型源码学编程（三）

写在前面(祝各位新春大吉&#xff01;兔年如意&#xff01;) 【本文持续更新中】面向初学者撰写专栏&#xff0c;个人原创的学习C/C笔记&#xff08;干货&#xff09;所作源代码输出内容为中文&#xff0c;便于理解如有错误之处请各位读者指正请读者评论回复、参与投票&#xf…
阅读更多...
01 课程简介、HTML标签【尚硅谷JavaWeb教程】

01 课程简介、HTML标签【尚硅谷JavaWeb教程】

1. 课程体系设计 2. HTML标签 服务器—浏览器&#xff08;字符串"" &#xff09; demo01.html 1&#xff09;html语言是解释型语言&#xff0c;不是编译型 浏览器是容错的 2&#xff09;html页面中由一对标签组成&#xff1a; < html>称为 开始标签 < /htm…
阅读更多...
Java基础语法——数组概念、数组内存图解（一个数组、二个数组）及二元数组的应用

Java基础语法——数组概念、数组内存图解（一个数组、二个数组）及二元数组的应用

目录 数组概述 数组定义格式 数组概念 数组的定义格式 数组的初始化 数组初始化概述 数组的初始化方式 Java中的内存分配 Java中一个数组的内存图解 Java中二个数组的内存图解 两个数组指向同一个地址的内存图解 数组操作中两个常见的小问题 二维数组 二维数组概述…
阅读更多...
c++11 标准模板（STL）（std::forward_list）（十一）

c++11 标准模板（STL）（std::forward_list）（十一）

定义于头文件 <forward_list> template< class T, class Allocator std::allocator<T> > class forward_list;(1)(C11 起)namespace pmr { template <class T> using forward_list std::forward_list<T, std::pmr::polymorphic_…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023