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

前端三层

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

1、JS书写位置

  • 中的 引入
在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>Documenttitle>
head>

<body>
    
    

    
    
    <script>
        // 弹窗输出一句话
        // 每一句 JS 代码以分号结尾!
        alert('你好,JavaScript!');
    script>
body>

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

将 JS 代码单独保存为 .js 文件,然后在 HTML 文件中使用 引入

  • 文件结构
    JS基础输出语句、变量与基本数据类型_第1张图片

  • 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>Documenttitle>
    
head>

<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);

JS基础输出语句、变量与基本数据类型_第2张图片
JS基础输出语句、变量与基本数据类型_第3张图片

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

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

3、变量

  • 定义变量可以使用: varletconst
    • 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 检测结果 值举例
数字类型 number 52.5-0.5
字符串类型 string '前端'"后端"'3.14'
布尔类型 boolean truefalse
undefined 类型 undefined undefined
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()将字符串转为浮点数
parseFloat('3.14');		// 3.14

parseFloat('3.14是圆周率');		// 3.14
parseFloat('3.14.15');		   // 3.14



5-2 其他值–>字符串
  • String()
//传入Num类型
String(123);		// '123'
String(123.4);		// '123.4'
String(2e3);		// '2000'
Stiing(NaN);		// 'NaN'
//Infinity 无穷大   -Infinity无穷小
String(Infinity);	// 'Infinity'
//进制数,会先转换成十进制再输出
String(0xf);		// '15'

//传入布尔值或特殊值
String(true);		// 'true'
String(false);		// 'false'

String(undefined);	// 'undefined'
String(null);		// 'null'

你可能感兴趣的:(javascript,开发语言,ecmascript)