JS基础输出语句、变量与基本数据类型

发布时间：2024年01月12日

前端三层

语言功能
结构层HTML搭建结构、放置部件、描述语义
样式层CSS美化网页、实现布局
行为层JavaScript实现交互效果、数据收发、表单验证等

1、JS书写位置

  • 在 <body> 中的 <script> 标签中书写 JS 代码
  • 将 JS 代码单独保存为 .js 文件，然后在 HTML 文件中使用 <script src=""></script> 引入
在body中书写JS代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 在 HTML5 之前，必须要加上 type 属性，并且里面的内容一定要正确！-->
    <!-- 
    <script type="text/javascript">
    </script> 
    -->

    <!-- 目前都是使用 HTML5，所以不用写 type 属性，默认就是 JS -->
    <!-- 推荐把 <script> 写到 body 的末尾（避免 JS 发生阻塞时页面受到牵连）-->
    <script>
        // 弹窗输出一句话
        // 每一句 JS 代码以分号结尾！
        alert('你好，JavaScript！');
    </script>
</body>

</html>
将 JS 代码单独保存为 .js 文件

将 JS 代码单独保存为 .js 文件，然后在 HTML 文件中使用 <script src=""></script> 引入

  • 文件结构
    在这里插入图片描述

  • index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
    <script src="./js/index.js"></script>
	-->
</head>

<body>
    <!-- 也可以放在 body 末尾（推荐）-->
    <script src="./js/index.js"></script>
</body>

</html>
  • index.js
alert('你好，JavaScript！');

2、输出语句

  • alert()：弹出消息框
  • console.log()：控制台输出
2-1 弹窗输出——alert

alert可以无对象调用，在首页，会优先于其他代码显示

  • alert：消息、警报

【功能】
在浏览器（JavaScript 引擎 例如：Chrome V8）解析到 JS 文件中的 alert() 语句时，便会中断 JS 脚本的执行，同时弹出消息框，直到用户单击确定后，才继续执行后续的 JS 脚本。

        alert(111);
        window.alert(123);

在这里插入图片描述
在这里插入图片描述

2-2 控制台输出——console.log()
  • console：控制台
  • log：记录、日志

【功能】
在浏览器（JavaScript 引擎 例如：Chrome V8）解析到 JS 文件中的 console.log() 语句时，会直接在浏览器控制台输出语句，并自动继续执行后续的 JS 脚本。

3、变量

  • 定义变量可以使用： var 、 let 、 const
    • var：可以控制变量提升 -----> 推荐
    • let：let定义的变量必须先定义再使用
    • const：const是用来定义常量 ----> 常量必须有初始值

变量提升：

  • 当浏览器开辟出供代码执行的栈内存后，代码并没有自上而下立即执行，而是继续做了一些事情：把当前作用域中所有带var/function关键字的进行提前的声明和定义 => 变量提升机制
  • 变量声明的提升：可以提前使用一个稍后才声明的变量，而不会引发异常
  • 在执行所有代码前，JS 有预解析阶段，会预读所有变量的声明（不会提升赋值，只会提升定义）
        //使用var定义变量
        var m = 25 ;
        var n = 'HELLO';
        //使用变量   —— 这里直接使用输出语句，将变量在控制台打印
        console.log(a);   //25
        console.log(b);   //HELLO
        //改变变量的值
        var m = 54;
        console.log(m);  //54
3-1 变量的命名

  • 命名规则

    • 只能由 字母、数字、_、$ 组成，但不能以数字开头（建议普通代码一律以字母开头）
    • 不能是 关键字 或 保留字
    • 变量名大小写敏感，a 和 A 是两个不同的变量

    函数、类名、对象的属性等也都要遵守这个标识符的命名规则！


  • 默认的命名风格
    • 小驼峰命名法：mathTestScore -----> 推荐
    • C 风格变量命名法：math_test_score

  • 一个变量只定义，但没有赋初值，默认值是 undefined（未定义）
  • 一个变量只有被 var 定义，并赋初值之后，才算正式初始化完成

4、基本数据类型

typeof

type of 用来判断数据类型

  • 5种基本数据类型的 typeof 检测结果
类型名typeof 检测结果值举例
数字类型number5、2.5、-0.5
字符串类型string'前端'、"后端"、'3.14'
布尔类型booleantrue、false
undefined 类型undefinedundefined
null 类型object（可以理解为空对象）null
4-1 Number(数字)类型
  • 整数、小数都是number类型
typeof 925; // number
typeof 0.5; // number
typeof -24; // number

  • 支持科学计数法表示数字
3e8;			// 300000000
typeof 3e8;		// number

3e-4;			// 0.0003
typeof 3e-4;	// number

  • 可以使用不同进制的数字
    • 二进制—— b
    • 八进制—— o
    • 十六进制—— x
        //进制表示
        //二进制——b
        var num6 = 0b111;    //15
        console.log(num3);
        //八进制——o
        var num3 = 0o17;    //15
        console.log(num3);
        //十六进制——x
        var num4 = 0xF;    //15
        console.log(num3);

  • 特殊的数字型值—— NaN
    NaN ? 不是数字的数字；是一个特殊的值；不是数字，但数据类型是number
        //字符串相减(-*/)的结果就是NaN
        //0/0 = NaN
        //NaN == NaN  结果是false
        console.log(typeof(NaN));
        console.log('a'-'a');



4-2 String（字符串类型）
  • js中没有字符型，只有字符串型
    字符串用引号包裹，双引号或者单引号均可
        //string
        //js中没有字符型，只有字符串型
        var s1 = "a";
        console.log(typeof(s1));   //string
        var s2 = 'a';
        console.log(typeof(s2));    //string
        
        //=== 全等于 值/地址都必须相等
        console.log(s1===s2);    //true

  • 字符串拼接
    • 字符串与字符串拼接
    • 字符串与变量拼接
    • 空字符串与变量拼接
          //字符串与字符串拼接
          console.log('HELLO' + 'World');   //HELLO World
          //字符串与变量拼接
          console.log('Lily'+20);    //Lily20
          //空字符串与变量拼接 ---> 主要目的是将数字转换为字符串
          console.log(' '+100);   //'100' 字符串的100

  • 字符串的常用方法
方法功能
charAt()得到指定位置字符
substring()提取子串（左闭右开）
substr()提取子串
slice()提取子串
toUpperCase()将字符串变为大写
toLowerCase()将字符串变为小写
indexOf()检索字符串 （返回查询字符的下标[不存在返回-1 ]）
trim()删除首尾空格
trimStart()删除首部空格
trimEnd()删除尾部空格

5、数据类型的转换

5-1 其他值 —> Number
  • Number() 转换为数字
Number('-123.45');		 // -123.45
// 字符串中不支持有非数值字符
Number('123年');	    	// NaN
Number('2e3');			// 2000
Number('');				// 0

// 字符串不支持是数学表达式
Number('1+1');			// NaN
// 除了字符串外，还可以直接放一个表达式
Number(1+1);			// 2

Number(true);			// 1
Number(false);			// 0

Number(undefined);		// NaN
Number(null);			// 0

  • parseInt()将 字符串 或 浮点数 转为 整数。
//自动截掉第一个非数字字符之后的所有字符
parseInt('3.14');		  // 3
parseInt('3周吉瑞.14');	// 3
parseInt(-3.14);		  // -3

//如果字符串以非数字开头，则转为 NaN
parseInt('圆周率是3.14');	// NaN

//true、false、undefined、null 转为 NaN
parseInt(true);			// NaN
parseInt(false);		// NaN	
parseInt(undefined);	// NaN
parseInt(null);			// NaN

  • parseFloat()将字符串转为浮点数
    7.1.3
文章来源:https://blog.csdn.net/m0_54034052/article/details/135531253
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章