JavaScript基础（变量、数据类型）

web三大标准：HTML(结构) + CSS（样式） +JavaScript(行为)

JavaScript

动态效果+数据交互

编程语言

编程 让计算机为解决某个问题而使用某种程序设计语言编写程序代码，最终得到结果

是什么？

世界上最流行的语言之一，是一种运行在客户端的脚本语言

脚本语言 不需要编译， 运行过程中 由js解析器(js引擎)逐行来进行解释并执行

现在也可以基于Node.js技术来进行服务器端编程

JavaScript作用

• 表单动态校验

• 网页特效

• 服务端开发(nodejs)

• 桌面程序

• APP

• 控制硬件---物联网

• 游戏开发

浏览器执行js

浏览器分为： 渲染引擎 和 js引擎

渲染引擎 ：用来解析HTML和CSS，俗称内核，比如谷歌浏览器 blink

js引擎: js解析器，用来读取网页中的javascript代码，对其处理后运行，比如谷歌的v8

逐行执行每一句代码

js的组成*

ECMAScript语法，BOM，DOM

js的几种引入方式

行内式

• 可以将单行或少量js代码写在HTML标签的事件属性中(以on开头的属性) 比如onclick

• 单双引号要错开使用，HTML中推荐使用双引号，js中使用单引号

• 可读性差，在html中编写大量js代码，不方便阅读，引号容易弄混

 <input type="button" value="点我" onclick="alert('hello 17期学员 大家晚上好')">

 

内嵌式

• 可以将多行js代码写到script标签中

• 内嵌js是学习最常用的方式

<script>
    alert(123)
    alert(9)
</script>

外部式

• 适合js代码量比较大的情况

• 利于HTML代码的结构化，把大段的js代码独立到HTML页面之外，方便复用

• 引用外部js文件的script标签中间不可以写代码

  新建一个js文件，xxx.js

  html页面中通过script引入js文件

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

   

js注释

// 单行注释   ctrl+/
​
    /* 多行注释 alt +shift+a */

js输入输出语句

alert("浏览器弹出警示框")
        console.log("浏览器控制台输出信息")
​
        // 浏览器弹出输入框，用户可以输入，有确定和取消按钮
        prompt("输入一个数字")

变量

什么是变量

变量就是一个装东西的盒子（大白话）

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

变量在内存中存储

变量是程序在内存中申请的一块用来存放数据的空间，类似我们酒店的房间，一个房间可以看作是一个变量

变量使用

1.变量声明

/* 
        var是js的关键字，用来声明变量的，用该关键字声明的变量，计算机会自动为变量声明内存空间，不需要程序员管
         name是程序员定义的变量名，我们要通过变量名来访问变量
        */
        var name;   //声明了一个名称为name的变量

2.变量赋值

// 2.变量赋值
        /* 
         把等号右边的值赋值给左边的变量，变量值就是程序员保存到变量空间里的值
        */
        name = "张三";   //给name这个变量赋值为 "张三"

3.变量初始化

 // 3.变量初始化
        var aa = 123;  //声明变量并赋值---称为变量的初始化

4.变量的扩展

/* 
        一个变量被重新赋值，原来的值会被覆盖，变量值将以最后一次赋的值为准
        */
        var bb = 123;
        bb = 44;

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

        var  age =23,n=34,sex="男";

5.变量的特殊情况

     var cc;
        console.log(cc);   //只声明不赋值，默认值是undefined

        // console.log(dd);   //不声明 不赋值 直接使用   报错:dd is not defined

        ee = 45;
        console.log(ee);   //不声明 只赋值  45

6.变量的命名规范

• 由字母，数字，下划线，$组成，如：num01，_age, $axios...

• 严格区分大小写， var a 和var A 是两个变量

• 不能以数字开头

• 不能是关键字，保留字 var for if else while do ....

• 要有语义化

• 遵守驼峰命名法，首字母小写，后面单词的首字母要大写 myFirstName

数据类型

变量存储的数据，可以是各种类型的数据

分两类

1、简单数据类型

 

Number数值

 

var age =22;
var f =23.4;
//isNaN 判断变量是否为非数字类型 (会进行隐式转换)  返回true或者false
var  uAge =21;
var isOk = isNaN(uAge
console.log(isOk) //false
​

isNaN(NaN); // true

isNaN(undefined); // true

isNaN({}); // true

isNaN(true);// false

isNaN(null); // false

isNaN(37); // false

// strings

isNaN("37"); // false: "37"、 “37”将转换为一个数字37，所以不是一个NAN；

isNaN("37.37"); // false: "37.37" 将被转换为 37.37 ，所以不是一个 NaN

isNaN("123ABC"); // true: 字符串“123ABC”parseInt("123ABC") 方法后为 123，但是这里是使用Number（）方法， Number("123ABC")得到的结果为 NaN

isNaN(""); // false: 空字符串将被转换为数字0，它不是一个NAN，所以为false

isNaN(" "); // false: 一个空格的字符串被转换为数字0,0不是一个NAN，所以为false
isNaN("123  ")// false: 会自动将头尾的空白字符进行删除,并不删除中间的空格

// dates

isNaN(new Date()); // false

isNaN(new Date().toString()); // true // 这里使用了toString（）方法转为字符串，所以非常肯定的得出它是一个NAN;

isNaN("blabla") // true: 字符串"blabla" 将被转换为一个number. // 解析为数字失败并返回NaN

 

String字符串

 

字符串可以是引号中的任意文本，语法是双引号 " " 和 单引号 ''

 

// 字符串可以是引号中的任意文本，语法是双引号 " " 和 单引号  ''
​
var str ="欢迎大家";
var str1 = '大家好';
​
// var str3 = hello ;  报错  hello is not defined 没有使用引号，会被认为是js代码，但是js没有这个语法
​
// 单双引号要错开使用
var str3 = "我是 '高富帅'";
var str4 = '我是"高富帅"';
​
// 字符串转义符
// 类似于HTML里的特殊符号，字符串也有特殊符号，我们称为转义符
// 转义符 都是以  \ 开头的
/* 
 \n  换行符
 \\  斜杠
 '  单引号
 "  双引号
  \t tab缩进
  \b 空格
​
*/
​
alert("hello 大家好，\n\t\t\t欢迎来\b\b到 '丁鹿学堂' 17期")
​
// 检测字符串的长度  length
var str5 = "my name is lucy";
console.log(str5.length);  //15
​
// 字符串拼接  + 只要由字符串和其他类型变量/值拼接，最终的结果是字符串
console.log("沙漠"+"骆驼");    //"沙漠骆驼"
console.log("丁鹿学堂"+13) ;  //"丁鹿学堂13"
console.log("丁鹿学堂" + true); //"丁鹿学堂true"
console.log(12+13);   //25  number
console.log("12"+24);  //"1224"
​
​
​
var  age=12;
console.log("我的年齡是age岁");  //我的年齡是age岁
// 引引相加
console.log("我的年齡是"+age+"岁");  //我的年齡是12岁

 

 

 

Boolean布尔

 

布尔类型由两个值: true 和false,true表示真，false表示假

 

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

 

undefined和null

 

// 一个变量只声明不赋值，值为undefined，数据类型也是undefined
​
        var str;
        console.log(str);  //undefined
        console.log(str + 1);  //NaN
​
        var str1 = undefined;
        console.log(str1 + "hello");  // "undefinedhello"
        console.log(str1 + 1);  //NaN  not a number   undefined和数字相加，最后的结果是NaN
​
        // 一个声明的变量给null值，里面存的值为空 (学习对象，研究null)
        var space = null;
        console.log(space + "hello");  //"nullhello"
        console.log(space + 1);  //1

 

2、复杂数据类型

 

 

 

获取变量数据类型

 

获取变量的数据类型 typeof

 

// 获取变量数据类型
var num=12;
console.log(typeof num);  //number
console.log(typeof "xiaoxiao");  //string
var bol = true;
console.log(typeof bol);  //boolean
​
var boll;
console.log(typeof boll);  //undefined
var bol2 = null;
console.log(typeof bol2);  //object

 

字面量

 

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

 

数字字面量  3,2,5,6
字符串字面量   "前端"
布尔字面量   true  false

 

 

数据类型转换

 

// 数据类型转换
​
// 使用表单，prompt获取过来的数据默认都是字符串类型，不能进行简单的加法运算，需要进行数据类型转换
​
// var s = prompt("请输入一个数字");   //点确定 s的值为输入的值   点取消 s的值为null
// console.log(typeof s)
// console.log(s+3)
​
// 转换为数字型
​
// parseInt(s)  转换为整型
// console.log(parseInt(s));  // "123" ---123  "123sss"---123  "ss23"-- NaN   "2w2" ----2   "12.4"---12
console.log(parseInt(true))  //NaN
​
// parseFloat() 转换为浮点型
​
// console.log(parseFloat(s));// "123" ---123  "123sss"---123  "ss23"-- NaN   "2w2" ----2  "12.4"---12.4
console.log(parseFloat(true))  //NaN
​
// 强制转换  Number
// console.log(Number(s));  //"123" ---123  "123sss"---NaN  "ss23"-- NaN   "2w2" ----NaN  "12.4"---12.4 '  '---0  “123   ”----0
​
// 隐式转换 
console.log("23"-12) ;  //11
​
console.log("23"*12) ;  //276
​
console.log("23"/12) ;  //1.9166666666666667
​
​
// 转换为字符串型
var num = 78;
console.log(typeof num.toString())
​
var flag =true ;
console.log(typeof flag.toString())
console.log(num.toString())  //"78"
​
// String() 强制转换
console.log(typeof String(90))   //string   "90"
console.log(String(true))  //"true"
​
// 隐式转换
// 字符串和任何类型相加都是字符串
console.log("!23"+12);  //"!12312"
console.log("!23"+true);  //"!123true"
​
​
// 转换为布尔型
console.log(Boolean(null))  //false
console.log(Boolean(undefined))  //false
console.log(Boolean("123")) //true
console.log(Boolean(123))  //true
console.log(Boolean(""))  //false
console.log(Boolean(0))   //false
console.log(Boolean(1))  //true
​
console.log(true + 0)  //1
console.log(false +0 )  //0
console.log(true + 1)  //2
console.log(false +1)  //1