day01 JavaScript、变量、数据类型

目录

一、JavaScript

二、变量

三、数据类型

四、案例

---

一、JavaScript

1.JS 的组成

①ECMAScript

ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

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

②DOM ——文档对象模型

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

③BOM ——浏览器对象模型

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

2.写法

①行内式 JS

<input type="button" value="点我试试" οnclick="alert('Hello World')" />

②内嵌 JS

<script>
    alert('Hello  World~!');
 </script>

③外部 JS文件

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

3.JavaScript 注释

①单行注释

//  用来注释单行文字（  快捷键   ctrl  +  /   ）

②多行注释

/* */  用来注释多行文字（ 默认快捷键  alt +  shift  + a ）

3.JavaScript 输入输出语句

二、变量

1.概述

变量是用于存放数据的容器。

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

①声明变量  
var age; //  声明一个 名称为age 的变量     

②赋值

age = 10; // 给 age  这个变量赋值为 10  

③变量的初始化

var age  = 18;  // 声明变量同时赋值为 18 

2.使用

①弹出一个输入框，提示用户输入姓名。
②弹出一个对话框，输出用户刚才输入的姓名。

  <script>
        // 1. 用户输入姓名  存储到一个 myname的变量里面
        var myname = prompt('请输入您的名字');
        // 2. 输出这个用户名
        alert(myname);

 </script>

3.语法扩展

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

var age = 18;

age = 81;   // 最后的结果就是81因为18 被覆盖掉了  

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

var age = 10,  name = 'zs', sex = 2;   

③声明变量特殊情况

 
4.命名规范

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

5.交换变量案例

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

var temp; // 声明了一个临时变量为空
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1; // 把右边给左边
apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);

6.小结

三、数据类型

①JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

        var x = 6;           // x 为数字
        var x = "Bill";      // x 为字符串    

①JS 把数据类型分为两类：

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

2.简单数据类型

①数字型 Number

var age = 21;       // 整数
var Age = 21.3747;  // 小数  

②数字型进制

 // 1.八进制数字序列范围：0~7
 var num1 = 07;   // 对应十进制的7
 var num2 = 019;  // 对应十进制的19
 var num3 = 08;   // 对应十进制的8
  // 2.十六进制数字序列范围：0~9以及A~F
 var num = 0xA; 

③数字型范围

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

④数字型三个特殊值

alert(Infinity);  // Infinity ，代表无穷大，大于任何数值

alert(-Infinity); // -Infinity ，代表无穷小，小于任何数值

alert(NaN);       // NaN，Not a number，代表一个非数值

⑤ isNaN()

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

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum);            // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName));  // true ，"andy"是一个非数字

①字符串型 String

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

var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
//  常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

②字符串转义符

③字符串长度

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

④字符串拼接

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112

①布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1);  // 2
console.log(false + 1); // 1

②Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

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

3.获取变量数据类型

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

var num = 18;
console.log(typeof num) // 结果 number      

②字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
数字字面量：8, 9, 10
字符串字面量：'程序员', "前端"
布尔字面量：true，false

4.数据类型转换

 ①转换为字符串

②转换为数字型

 

 ③转换为布尔型

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

四、案例

1.计算年龄

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

 <script>
        var year = prompt('请您输入您的出生年份');
        var age = 2018 - year; // year 取过来的是字符串型  但是这里用的减法 有隐式转换
        alert('您今年已经' + age + '岁了');
 </script>

2.简单加法器

计算两个数的值， 用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。

 var num1 = prompt('请您输入第一个值：');
 var num2 = prompt('请您输入第二个值：');
 var result = parseFloat(num1) + parseFloat(num2);
 alert('您的结果是:' + result);