JavaScript入门基础、类型、变量

叁歲伎倆 2023-03-02 10:10 23阅读 0赞

# JavaScript #

完整的Javascript语言由三部分组成：

*  核心（ECMAScript）
 *  文档对象模型（DOM,Document Object Model）
 *  浏览器对象模型（BOM,Browser Object Model）  
    ![在这里插入图片描述][20200728163455242.png_pic_center]

# 为什么学习Javascript #

*  所有主流浏览器都支持Javascript
 *  目前，全世界大部分网页都是用Javascript
 *  它可以让网页呈现各种动态效果
 *  作为Web开发工程师，如果你想提供漂亮的网页，另用户满意的上网体验，Javascript是必不可少的工具

# 浏览器内核 #

浏览器内核负责页面内容的渲染，主要由两部分组成：

*  内容排版引擎——解析HTML/CSS
 *  脚本解释引擎——解析Javascript  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]

## 第一个JavaScript程序 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<title>我的第一个js程序<title>
    		<meta charset="utf-8">
    	</head>
    	<body>
    		<script>
    			alert("欢迎来到JavaScript的世界！");
    		</script>
    	</body>
    </html>

## 如何插入Javascript ##

*  网页中直接插入脚本块
    
    使用

## JS在页面中的位置 ##

*  我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。  
    **放在部分**  
    最常用的方式是在页面中head部分放置

## JS的代码错误 ##

*  解释性语言，若某行代码错误，则解释器终止此次执行；
 *  但不影响后续块的执行，以及后续HTML元素的解析

## 编写JS代码 ##

*  语句——会被Javascript引擎解释执行的代码
    
     *  由表达式，关键字，运算符组成；
     *  大小写敏感
     *  使用分号或换行结束；
 *  注释——不会被Javascript引擎解释执行的代码
    
     *  单行注释 ：//
     *  多行注释： /\* \*/

## 大小写敏感 ##

*  在Javascript程序中大小写是敏感的
    
     *  userName ,UserName是不同的
     *  getCity(), GetCity是不同  
        ![在这里插入图片描述][20200728165016650.png]

## 换行与空格 ##

*  换行，分号

![在这里插入图片描述][20200728165204613.png]

*  空格, TAB

![在这里插入图片描述][20200728165228205.png]

# 变量 #

## 什么是变量 ##

1.  变量是存储信息的容器
2.  在代数中，使用字母（比如：x）来保存值（比如：2）
    
    x=2; y=3; sum=x+y; 通过三个语句，就能计算出sum的值为5
3.  Javascript中，这些字母就被称为变量

## 变量的声明 ##

*  使用关键字var声明变量，如: var username;
    
    虽然声明变量时可以省略var关键字，推荐不要省略
 *  使用“=”为变量赋值 var num = 100;
 *  没有初始化的变量自动取值为undefined
    
    var a;
    
    alert(a);
 *  一条语句中可以声明多个变量，变量名使用“,”分割
    
    var name1,name2,name3;
    
    var num1,num2=20;

## 变量的命名要求符合语法 ##

*  不允许使用语言关键字和保留字作为变量名  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 1]
 *  预保留的关键字
    
     *  class, int ,float等

## 命名规范 ##

*  可以包含字母，数字，下划线，美元符号（$）
 *  不能以数字开头
 *  常用表示函数，变量等的名称
 *  名称最好有明确的含义
 *  可以采用“小驼峰命名法”，“大驼峰命名法”，“下划线命名法”等，在开发团队内进行协调统一

## 未经初始化的变量 ##

*  变量定义之后，在使用前从未赋过值，值为undefined

var num;	//定义变量，但未赋值
    
    alert(num);	//直接使用未被赋值的变量

*  变量未被定义过，而直接使用，属于语法错误

alert(num);	//直接使用从未定义的变量

## 初始化变量 ##

### 在变量声明时初始化 ###

可以在定义变量时立即进行初始化

var age=10;
    
    var gender=“男”；
    
    var email=“wangming@163.com”;

### 第一次使用前初始化 ###

变量也可以先声明，再赋值

var name;
    var age;
    name=“wangming”;
    age=“30”;
    alert(name);

## 对变量的值进行存取操作 ##

*  获取变量的值——get操作
    
    var name=“zhangsan”;
    
    var name2 = name;
 *  重新设置变量的值——set操作
    
    var password= “123”;
    
    password=456”;
    
    newPassword=password;

# 数据类型 #

*  能够表示并操作的值的类型称作数据类型（type）
 *  Javascript数据类型分为两类：原始类型和引用类型（对象类型），原始类型包括特殊类型

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 2]

## String类型 ##

*  表示一系列的文 本字符数据，如性别，姓名，住址等
 *  由Unicode字符，数字，标点符号组成的序列
 *  Javascript不像Java语言那样严格区分字符和字符串类型
 *  首尾由一对单引号或者双引号括起来
 *  特殊字符需要转移符

## Number类型 ##

*  数字类型，既可表示32位整数，也可表示64位的浮点数
 *  整数
    
     *  十进制， 逢十进一的整数，如：13242
     *  十六进制： 逢十六进一的整数：如：0x123
 *  浮点数
    
     *  使用小数点近路数据：如：93.2 ，3.1415
     *  使用指数记录数据：如：4.3e23, 4.3E-23

## boolean类型 ##

*  布尔类型
    
    有两个值，true和false
    
     *  也代表 1和0
     *  实际运算中true = 1, false = 0
 *  多用于控制结构语句

# 隐式转换 #

*  Javascript属于松散类型的程序语言
    
     *  变量类型在声明时不需要指定数据类型
     *  变量由赋值操作确定数据类型
 *  不同类型数据在计算过程中会自动进行转换
    
    数字+字符串：数字转换为字符串
    
    数字+布尔值：true转换为1，false转换为0
    
    字符串+布尔值：布尔值转换为字符串true或false
    
    布尔值+布尔值：布尔值转换为数值1或0
    
    typeof()函数可用于检测 当前数据的类型

// 隐式转换
                // 数据与字符串
                var a=2,b="xyz"
                var c=a+b;
                console.log(c+"---"+typeof(c));
    
                // 数据和布尔类型
                var a=2;
                var b=a+true
                console.log(b+"---"+typeof(b));
    
                // 字符串和布尔类型
                var a="xyz";
                var b=a+true
                console.log(b+"---"+typeof(b));
    
                // 布尔类型和布尔类型
                var a=true+false
                console.log(a+"---"+typeof(a));

![隐式转换的结果][20200728171938898.png]

# 数据类型转换函数 #

使用数据类型转换函数进行显式类型转换

**toString()**

转换成字符串，所有数据类型均可转换为string类型

// 显式转换
                // 转换为字符串类型
                var a=123;
                var str=a.toString();
                console.log(str+"----"+typeof(str));

**parseInt()**

解析出一个string或number的整数部分
    
    如果没有可转换的部分，则返回NaN（Not a Number）

// 显式转换
    
                // 转换为Int类型
                var a=123.456,c="123xyz789.456";
                var b=parseInt(a);
                var d=parseInt(c);
                console.log(b+"---"+typeof(b));
                console.log(d+"---"+typeof(d));

**parseFloat()**

解析出一个string的浮点数部分
    
    如果没有可以转换的部分，则返回NaN

// 显式转换
    
                // 转换为Float类型
                var a=123.456;c="1234xyz.9";
                var b=parseFloat(a);
                var e=parseFloat(c);
                console.log(b+"---"+typeof(b));
                console.log(e+"---"+typeof(e));

**Number()**

把一个string解析为number
    
    如果包含非法字符，则返回NaN

// 显式转换
    
                // 转换为number类型
                var a="123.4a";
                var b=Number(a);
                console.log(b+"---"+typeof(b));

![显式转换据结果][20200728172229842.png]

# isNaN函数 #

isNaN()

*  用于判断其参数是否为一个“非数字（NaN）”值
 *  如果把NaN与任何值（包括其自身）相比得到的结果均是false,所以要判断某个值是否是NaN
 *  通常用于检测类型转换函数的运算结果，以判断它们表示的 是否是合法的数字。
    
        alert(isNaN("123.4a")); 结果为true
        
         alert(isNaN(parseInt("123.4a")));结果为false
        
         alert(isNaN(parseFloat("123.4a")));结果为false
        
         alert(isNaN(Number("123.4a")));结果为true

# null #

*  存在该数据，但当前还不存在确定的值
 *  Null在程序中代表“无值”或者“无对象”
 *  可以通过给一个对象赋值null来清除变量的内容

# undefined #

*  不存在该数据
 *  声明了变量但从未赋值或者对象属性不存在

[20200728163455242.png_pic_center]: /images/20230208/4c5b4dcf3c8f4244b66dd5ecc7fdcf15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]: /images/20230208/9e140143bdde413b9f2dcc012708fc1d.png
[20200728165016650.png]: /images/20230208/e6f00c1cffb6475d8d0a4b1fc1c025d3.png
[20200728165204613.png]: /images/20230208/8d71499b734946fa845fc8f441507787.png
[20200728165228205.png]: /images/20230208/a7067bbc7b764ba78ff1bab9a61dfbd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/0a45c446d15548a99aa95b0df8d3453d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/614672ee002041f89f955ee48d23cc6e.png
[20200728171938898.png]: /images/20230208/6d96e390bb944917b28e0c61c077534e.png
[20200728172229842.png]: /images/20230208/fbc59a0a15c9418dadd197f6d274123a.png