首页 > 编程语言 >6-JavaScript基础

6-JavaScript基础

时间：2023-05-14 09:00:43浏览次数：37  
标签：false JavaScript 基础 js 运算符 var alert

1. JavaScript 简介

JavaScript 是一门跨平台、面向对象的脚本语言，而 Java 语言也是跨平台的、面向对象的语言，只不过 Java 是编译语言，是需要编译成字节码文件才能运行的；JavaScript 是脚本语言，不需要编译，由浏览器直接解析并执行。

JavaScript 是用来控制网页行为的，它能使网页可交互

2. JavaScript 引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript 引入方式有两种：

  • 内部脚本：将 JS 代码定义在 HTML 页面中
  • 外部脚本：将 JS 代码定义在外部 JS 文件中，然后引入到 HTML 页面中

2.1 内部脚本

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

代码如下：

alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      alert("hello js1");
    </script>
  </body>
</html>

效果如下：

image-20230514083402384

从结果可以看到 js 代码已经执行了。

提示：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script>
      alert("hello js1");
    </script>
  </head>
  <body>
    <script>
      alert("hello js1");
    </script>
  </body>
</html>
<script>
  alert("hello js1");
</script>
  • 一般把脚本置于 元素的底部，可改善显示速度
  • 因为浏览器在加载页面的时候会从上往下进行加载并解析。 我们应该让用户看到页面内容，然后再展示动态的效果。

2.2 外部脚本

第一步：定义外部 js 文件。如定义名为 demo.js 的文件

项目结构如下：

image-20230514083605220

demo.js 文件内容如下：

alert("hello js");

第二步：在页面中引入外部的 js 文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script src="../js/demo.js"></script>
  </body>
</html>

注意：

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

    在 js 文件中直接写 js 代码即可，不要在 js 文件 中写 script 标签

  • <script> 标签不能自闭合

    在页面中引入外部 js 文件时，不能写成 <script src="../js/demo.js" />。

3. JavaScript 基础 语法

3.1 书写语法

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

  • 每行结尾的分号可有可无

    如果一行上写多个语句时，必须加分号用来区分多个语句。

  • 注释

    • 单行注释：// 注释内容
    • 多行注释：/_ 注释内容 _/

    注意：JavaScript 没有文档注释

  • 大括号表示代码块

    下面语句大家肯定能看懂，和 java 一样 大括号表示代码块。

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

3.2 输出语句

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

  • 使用 window.alert() 写入警告框

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      window.alert("hello js"); //写入警告框
    </script>
  </body>
</html>

    上面代码通过浏览器打开，我们可以看到如下图弹框效果

image-20230514084000911

  • 使用 document.write() 写入 HTML 输出
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      document.write("hello js 2~"); //写入html页面
    </script>
  </body>
</html>

上面代码通过浏览器打开，我们可以在页面上看到 document.write(内容) 输出的内容

image-20230514084032706

  • 使用 console.log() 写入浏览器控制台
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      console.log("hello js 3"); //写入浏览器的控制台
    </script>
  </body>
</html>

上面代码通过浏览器打开，我们可以在不能页面上看到 console.log(内容) 输出的内容，它是输出在控制台了，而怎么在控制台查看输出的内容呢？在浏览器界面按 F12 就可以看到下图的控制台

image-20230514084126307

3.3 变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值;。而在 JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数

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

js 中的变量名命名也有如下规则，和 java 语言基本都相同

  • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
  • 数字不能开头
  • 建议使用驼峰命名

JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样

  • 作用域：全局变量

    {
  var age = 20;
}
alert(age); // 在代码块中定义的age 变量，在代码块外边还可以使用

  • 变量可以重复定义

    {
  var age = 20;
  var age = 30; //JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30

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

例如：

{
  let age = 20;
}
alert(age);

运行上面代码，浏览器并没有弹框输出结果，说明这段代码是有问题的。通过 F12 打开开发者模式可以看到如下错误信息

image-20230514084246728

而如果在代码块中定义两个同名的变量，IDEA 开发工具就直接报错了

image-20230514084311076

ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。通过下面的代码看一下常用的特点就可以了

image-20230514084339254

我们可以看到给 PI 这个常量重新赋值时报错了。

3.4 数据类型

JavaScript 中提供了两类数据类型：原始类型 和 引用类型。

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

alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

  • number：数字（整数、小数、NaN(Not a Number)）

    var age = 20;
var price = 99.8;

alert(typeof age); // 结果是 ： number
alert(typeof price); // 结果是 ： number

    注意： NaN 是一个特殊的 number 类型的值，后面用到再说

  • string：字符、字符串，单双引皆可

    var ch = "a";
var name = "张三";
var addr = "北京";

alert(typeof ch); //结果是  string
alert(typeof name); //结果是  string
alert(typeof addr); //结果是  string

    注意：在 js 中 双引号和单引号都表示字符串类型的数据

  • boolean：布尔。true，false

    var flag = true;
var flag2 = false;

alert(typeof flag); //结果是 boolean
alert(typeof flag2); //结果是 boolean

  • null：对象为空

    var obj = null;

alert(typeof obj); //结果是 object

    为什么打印上面的 obj 变量的数据类型，结果是 object；这个官方给出了解释，下面是从官方文档截的图

image-20230514084617954

  • undefined：当声明的变量未初始化时，该变量的默认值是 undefined

    var a ; alert(typeof a); //结果是 undefined

3.5 运算符

JavaScript 提供了如下的运算符。大部分和 Java 语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示

  • 一元运算符：++，--

  • 算术运算符：+，-，*，/，%

  • 赋值运算符：=，+=，-=…

  • 关系运算符：>，<，>=，<=，!=，==，===…

  • 逻辑运算符：&&，||，!

  • 三元运算符：条件表达式 ? true_value : false_value

3.5.1 ==和===区别

概述:

  • ==：

    1. 判断类型是否一样，如果不一样，则进行类型转换

    2. 再去比较其值

  • ===：js 中的全等于

    1. 判断类型是否一样，如果不一样，直接返回 false
    2. 再去比较其值

代码：

var age1 = 20;
var age2 = "20";

alert(age1 == age2); // true
alert(age1 === age2); // false

3.5.2 类型转换

上述讲解 == 运算符时，发现会进行类型转换，所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。

  • 其他类型转为 number

    • string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为 NaN

      将 string 转换为 number 有两种方式：

      • 使用 + 正号运算符：

        var str = +"20";
alert(str + 1); //21

      • 使用 parseInt() 函数(方法)：

        var str = "20";
alert(parseInt(str) + 1);

      建议使用 parseInt() 函数进行转换。

    • boolean 转换为 number 类型：true 转为 1，false 转为 0

      var flag = +false;
alert(flag); // 0

  • 其他类型转为 boolean

    • number 类型转换为 boolean 类型：0 和 NaN 转为 false，其他的数字转为 true
    • string 类型转换为 boolean 类型：空字符串转为 false，其他的字符串转为 true
    • null 类型转换为 boolean 类型是 false
    • undefined 转换为 boolean 类型是 false

    代码如下：

    // var flag = 3;
// var flag = "";
var flag = undefined;

if (flag) {
  alert("转为true");
} else {
  alert("转为false");
}

使用场景：

在 Java 中使用字符串前，一般都会先判断字符串不是 null，并且不是空字符才会做其他的一些操作，JavaScript 也有类型的操作，代码如下：

var str = "abc";

//健壮性判断
if (str != null && str.length > 0) {
  alert("转为true");
} else {
  alert("转为false");
}

但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：

var str = "abc";

//健壮性判断
if (str) {
  alert("转为true");
} else {
  alert("转为false");
}

标签：false,JavaScript,基础,js,运算符,var,alert
From： https://www.cnblogs.com/NorthPoet/p/17398724.html

相关文章

  • C基础笔记
    循环之while语句知道循环次数使用for循环；不知道循环次数，知道试用条件用while循环例：从1+2+3....,加到第多少次后，值大于3033使用for循环实现：#include<stdio.h>intmain(){intsum=0,i;for(i=1;i<=100;i++){sum=sum+i;if(sum==3......
  • 【nodejs基础】Expres编写接口详解05
    一、使用Express写接口浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域接口的跨域问题刚才编写的GET和POST接口，存在一个很严重的问题：不支持跨域请求，解决接口跨域问题的方案主要有两种CORS（主流解决方案，推荐）JSONP（有缺陷：只支持GET请......
  • C基础笔记(分支语句switch开关语句)
    条件判断之Switch开关语句switch(表达式){ case1: 做值一的事 break;case2: 做是值二的事 break;……default; 如果前面都不是的事}#include<stdio.h>intmain(){ inta; scanf_s("%d",&a); switch(a) { case0: printf("零\n"); break; case1: printf("......
  • C基础笔记(for循环语句)
    循环之for语句从目一开始，连续不断做一件事，叫循环语法：for(表达式1（赋值语句初值）；表达式2（条件）；表达式3（增值的赋值语句）){ 循环要做的事(一次或多次)} #include<stdio.h>intmain(){ for(inti=1;i<=100;i++) { printf("%d\n",i); } retur......
  • C基础笔记(分支结构if-else)
    条件判断之ifelse语句//1.从上往下顺序执行//2.C语言程序将结构分为：顺序和分支//3.if（条件）//常量变量运算式比较式//{  条件成立时要做的事（一行或多行代码）//}正反两种情况#include<stdio.h>intmain(){inta;scanf_s("%d",&a);if(a%2==0){ printf("%d是偶数\n......
  • 方芳:如何激励民营企业投资农村基础设施项目
     如何激励民营企业投资农村基础设施项目     武汉市江夏区交通局      武汉市江夏区公路局     武汉市江夏区公路建筑工程公司   武汉市江夏城投集团有限公司    武汉江夏路桥工程总公司       方芳      ......
  • C基础笔记(运算符2)
    运算符（2）  //1.特殊运算符：() .  ->  []//2.算术运算符：+ - * % / ++ --//3.关系运算符:>  >= < <== == !=//4.位操作运算符：& ^ |  << >>//5.逻辑运算符:&&  || !//6.条件运算符:?://7.赋值运算符:= += -=  %= /=......
  • C基础笔记(运算符1)
    运算符（1）1.特殊运算符：()  .  ->  []2.算术运算符：+  -  *  %  /  ++  --3.关系运算符:>  >= <  <=  =  ==  !=4.位操作运算符：&  ^  |   <<  >>5.逻辑运算符:&&  ||  !6.条件运算符:  ?:7.赋......
  • Redis基础命令汇总，看这篇就够了
    本文首发于公众号：Hunter后端原文链：Redis基础命令汇总，看这篇就够了本篇笔记将汇总Redis基础命令，包括几个常用的通用命令，和各个类型的数据的操作，包括字符串、哈希、列表、集合、有序集合等在内的基本操作。以下是本篇笔记目录：通用命令字符串命令哈希命令列表命令集合命......
  • C基础笔记(常量与变量2)
    常量与变量（2）//要想使用变量必须先定义它//变量通过赋值保存东西//变量应该赋相同类型的值，如果赋值类型不一致，参考左端//变量赋值不要超过它能保存的值#include<stdio.h>  intmain()   {inti;//定义一个整型变量ii=12;//将变量赋值为12 pri......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99