JS |数据存储单位+JS初体验+ 变量+数据类型+数据类型转换

目录

数据存储单位

JS初体验

JavaScript是什么

JavaScript的作用

浏览器执行JS简介

JS的组成

ECMAScript

DOM---文档对象模型

BOM---浏览器对象模型

JS书写位置

行内式 JS

内嵌 JS

外部 JS文件

JavaScript 输入输出语句

 变量

变量的概述

变量的使用

1.声明变量

2. 赋值

3. 变量的初始化

案例-变量的使用

变量的语法拓展

更新变量

同时声明多个变量

声明变量的特殊情况

变量命名规范

案例-交换两个变量的值

数据类型

        变量的数据类型

        数据类型的分类

简单数据类型（基本数据类型）

         数字型Number

        字符串型String

案例：显示年龄

        布尔型Boolean

        Undefined 和 Null

获取变量数据类型

 获取检测变量的数据类型

字面量

数据类型转换

转换为字符串string

转换为数字型number

案例1：计算年龄

案例 2：简单加法器

转换为布尔型Boolean

---

数据存储单位

bit

• 位（bit）：1bit可以保存一个0或者1（最小的存储单位）
• 字节（Byte）：1B=8b
• 千字节（KB）：1KB=1024B
• 兆字节（MB）：1MB=1024KB
• 吉字节（GB):1GB=1024MB
• 太字节（TB)：1TB=1024GB

JS初体验

JavaScript是什么

• JavaScript是一种运行在客户端的脚本语言（script是脚本的意思）

• 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行

• 现在也可基于node.js技术进行服务器端编程

JavaScript的作用

• 表单动态检验（密码强度检测）  JS产生最初的目的

• 网页特效

• 服务端开发（Node.js）

• 桌面程序（electron）

• APP（Cordova）

• 控制硬件-物联网（ruff）

• 游戏开发（cocos2d-js）

浏览器执行JS简介

浏览器分为两部分 渲染引擎 和 JS引擎

• 渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
• JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。

JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

JS的组成

JavaScript组成：ECMAScript（JavaScript语法） 

                            DOM（页面文档对象模型） 

                            BOM（浏览器对象模型）

ECMAScript

ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM---文档对象模型

文档对象模型（Document Object Model）是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小，位置，颜色等）。

BOM---浏览器对象模型

BOM（Browser Object  Model）是指浏览器对象模型，它提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框，控制浏览器跳转，获取分辨率等。

JS书写位置

JS 有3种书写位置，分别为行内、内嵌和外部。

行内式 JS

• 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
• 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
• 可读性差， 在html中编写JS大量代码时，不方便阅读；
• 引号易错，引号多层嵌套匹配时，非常容易弄混；
• 特殊情况下使用

内嵌 JS

• 可以将多行JS代码写到
  • 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况

  JavaScript 输入输出语句

  

  prompt('请输入您的年龄');

  

   alert('计算的结果是：');

  

  console.log('我是程序员能看到的');

  

  ---

   变量

  变量的概述

  变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。

  本质：变量是程序 在内存中申请的一块 用来存放数据的 空间。

  变量的使用

  变量在使用时分为两步： 1. 声明变量   2. 赋值

  1.声明变量

          // 1.声明了一个 age 变量
          var age;
  

  • var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
  • age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

  2. 赋值

          // 2.赋值 把值存入变量中
          age = 21; //是赋值的意思 不是等于
  

  3. 变量的初始化

  声明一个变量并且给它赋值  就是变量的初始化

          // 4.变量的初始化
          var myname = '美女';
          console.log(myname);
  

  案例-变量的使用

  

  变量的语法拓展

  更新变量

  一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

          // 1.更新变量
          var myname = '美女';
          console.log(myname);
          myname = '就是我';
          console.log(myname);
  

  最后的结果 “美女” 覆盖掉了    

  同时声明多个变量

  同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。

          // 2.声明多个变量
          var myname = '姓名',
              age = 18,
              address = '你猜';
  

  声明变量的特殊情况

  1. 只声明，不赋值    undefined未定义的

             var sex;
             console.log(sex);
     

  2. 不声明 不赋值直接使用    报错

             console.lo(tel);
     

     

  3. 不声明 直接赋值使用   正常输出 但不建议

             //3.3 不声明 直接赋值使用
             qq = 1120;
             console.log(qq);
     

  变量命名规范

  •  由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
  • 严格区分大小写。var app; 和 var App; 是两个变量
  • 不能 以数字开头。  18age   是错误的
  • 不能 是关键字、保留字。例如：var、for、while
  • 变量名必须有意义。  
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

  案例-交换两个变量的值

  要求：交换两个变量的值 ( 实现思路：使用一个 临时变量 用来做中间存储 )

  ---

  数据类型

  在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

          变量的数据类型

  JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定

  js的数据类型只有在程序运行过程中 根据等号右边的变量值来确定他的数据类型

          var num = 10;//这里的num是数字型
  

  js是动态语言 变量的数据类型是可以变化的，JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

          var num = 10;//这里的num是数字型
          num = 'pink';//这里的num是字符串型
  

          数据类型的分类

  JS 把数据类型分为两类：  

  • 简单数据类型 （Number,String,Boolean,Undefined,Null）  
  • 复杂数据类型 （object)

  简单数据类型（基本数据类型）

  

           数字型Number

  最常见的进制有二进制、八进制、十进制、十六进制。

  1. 八进制 0~7 我们程序里面 数字前面 加 0 表示八进制

             var num1 = 010;
             console.log(num1);// 010   八进制  转换为 十进制 就是 8
             var num2 = 017;
             console.log(num2);//017   八进制  转换为 十进制 就是 15
     

  2. 十六进制  0~9  a~f  数字的前面加0x 表示十六进制

             var num3 = 0x9;
             console.log(num3); //十进制 是 9
             var num4 = 0xf;
             console.log(num4);//十进制 是 15
     

     在JS中  八进制前面加0， 十六进制前面加 0x  

          数字型范围

  最大值：console.log(Number.MAX_VALUE);

  最小值：console.log(Number.MIN_VALUE);

          数字型三个特殊值

  • Infinity ，代表无穷大，大于任何数值
  • -Infinity ，代表无穷小，小于任何数值
  • NaN ，Not a number，代表一个非数值

          //无穷大
          console.log(Number.MAX_VALUE * 2);
  
          //无穷小
          console.log(-Number.MAX_VALUE * 2);
  
          //非数字
          console.log('pink老师' - 100);
  

   

          isNaN()

  用来判断一个变量是否为非数字的类型，返回 true 或者 false

  

          //isNan()这个方法用来判断非数字 并且返回一个值  如果是数字返回的是false  如果不是数字 返回的是true
          console.log(isNaN(12));  //返回false
          console.log(isNaN('pink')); //不是数字 返回true
  

          字符串型String

  字符串型可以是引号中的任意文本，其语法为 双引号 "  " 和 单引号'  '
  因为 HTML 标签里面的属性使用的是双引号，JS 这里我们 更推荐使用单引号。

  var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
  var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
  

          字符串引号嵌套

  JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

  var strMsg = '我是"高帅富"程序猿';   // 可以用''包含" "
  var strMsg2 = "我是'高帅富'程序猿";  // 也可以用" " 包含''
  

          字符串转义符

  
                  转义字符要写到 引号 里面

           

         ;

           字符串长度

           字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

          // 1.检测获取字符串的长度
          var str = 'my  name is andy';
          console.log(str.length);//16个
  

          字符串拼接

  • 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

          // 2.字符串的拼接 +
          console.log('沙漠' + '骆驼');//  字符串的‘沙漠骆驼’
          console.log('pink老师' + 18);//  pink老师18
          console.log(12 + 23);//35
          console.log('12' + 23);//1223
  

  + 号总结口诀：数值相加 ，字符相连

          字符串拼接加强
  • 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
  • 变量是不能添加引号的，因为加引号的变量会变成字符串

  案例：显示年龄

  弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年 xx 岁啦”（xx 表示刚才输入的年龄）

          布尔型Boolean

  布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

  布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

          var flag = true;//布尔型
          var flag1 = false;//当 0 来看
          console.log(flag + 1);//true参与加法运算 当 1 来看
  

          Undefined 和 Null

  一个声明后没有被赋值的变量会有一个默认值 undefined

          var str;
          console.log(str);
          console.log(str + 'pink老师');//undefinedpink老师
          console.log(str + 12);//NaN    
  

  一个声明变量给 null 值，里面存的值为空

          var space = null;
          console.log(space + 'pink');//spacepink
          console.log(space + 12);//12
  

  ---

  获取变量数据类型

   获取检测变量的数据类型

  typeof  可用来获取检测变量的数据类型

          console.log(typeof num)；

          var num = 10;
          console.log(typeof num);//number类型
          var str = 'pink老师';
          console.log(typeof str);//string 字符串型
          var flag = false;
          console.log(typeof flag);//Boolean布尔型
          var vari = undefined;
          console.log(typeof vari);//undefined类型
          var timer = null;
          console.log(typeof timer);//object
  

  字面量

  字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

  • 数字字面量：8, 9, 10
  • 字符串字面量：'黑马程序员', "大前端"
  • 布尔字面量：true，false

  ---

  数据类型转换

  把一种数据类型的变量转换成另外一种数据类型。

  转换为字符串string

  

          // 1.把数字型转换成字符串型  变量.tostring();
          var str = num.toString();
  
          // 2.我们利用String(变量);
          console.log(String(num));
  
          // 3.利用拼接字符串  +   后面加上空字符串
          console.log(num + '');
  

  三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

  转换为数字型number

  

  • 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
  • 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

          // 1.parseInt(变量);  可以把字符型转换成数字型  得到的是整数
          console.log(parseInt(age));
          console.log(typeof parseInt(age));
          console.log(parseInt('210px'));//会自动去掉px这个单位
          console.log(parseInt('aaa210px')); //NaN
  
          // 2.parseFloat(变量);  可以把字符型的转换为数字型  得到的是小数  浮点数
          console.log(parseFloat(age));
          console.log(parseFloat(3.1415926));
  

          // 3.利用Number(变量);
          var str = '3124';
          console.log(Number(str));
          // 4.利用了算是运算 - * /实现隐式转换
          console.log('213');//string  213
          console.log('12' - 0);//number 12
          console.log('123' - '214');//number -91
  

  案例1：计算年龄

  此案例要求在页面中弹出一个输入框，我们输入出生年份后， 能计算出我们的年龄。

  案例 2：简单加法器

  转换为布尔型Boolean

  

  • 代表空、否定的值会被转换为 false  ，如 ' '、0、NaN、null、undefined  
  • 其余值都会被转换为 true

  console.log(Boolean('')); // false
  console.log(Boolean(0)); // false
  console.log(Boolean(NaN)); // false
  console.log(Boolean(null)); // false
  console.log(Boolean(undefined)); // false
  console.log(Boolean('小白')); // true
  console.log(Boolean(12)); // true