关于javascript:javascript基础知识及变量1

32次阅读

共计 10933 个字符，预计需要花费 28 分钟才能阅读完成。

编程

何为编程，计算机为解决某个问题而应用某种程序设计语言编写的程序代码，并最终失去后果的过程

计算机程序

能够通过计算机语言的一系列指令汇合来管制计算机

留神：任何可能执行代码的设施都能够称为计算机 例如：ATM 手机 智能机器人等等

计算机语言

计算机语言是指人类与计算机之间通信的语言，是人类与计算机之间传递信息的媒介。

计算机语言：机器语言 汇编语言 高级语言

计算机最终辨认的都是二进制语言，二进制语言是由 0 和 1 组成

机器语言

机器语言是由二进制组成的 二进制语言泛指 0 和 1

汇编语言

汇编语言和机器语言实质雷同 都是间接对计算机硬件进行操作，但指令符采纳英文缩写的标识符，更便于记忆和缩写

高级语言

高级语言指 C ++ JAVA PHYthon go 语言 javascript 等等

标记语言和编程语言的区别

  • 标记语言是被读取的 没有逻辑性可言
  • 编程语言能够被动读取的 具备逻辑性

计算机根底

数据存储单位

程序运行的程序

注意事项

程序执行时，会将程序的代码从硬盘中转移到内存中，cpu 从内存中读取数据

内存用的是电 而硬盘用的是机械 所有 cpu 从内存中读取数据

初识 javascript

javascript 的发明者：布兰登. 艾奇，在 1995 年仅利用 10 天的工夫便创造 javascript, 最后在网景公司命名为 Livescript, 后改名为 javascript

javascript 是什么?

运行在客户端的脚本语言，服务器端的脚本语言：NodeJS，从上到下顺次执行

javascript 的作用

  • 表单验证
  • 网页交互
  • APP 开发
  • 服务端开发
  • 游戏开发

HTML/CSS/Javascript 的关系

  • HTML CSS 属于标记语言，被动读取数据
  • Javascript 属于编程语言，会被动读取数据，具备很强的逻辑性

浏览器执行 Javascript 的过程

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

  • 渲染引擎：俗指浏览器内核 次要是用来解析 HTML CSS 等等
  • JS 引擎：次要是用来解析 Js 代码，最有名的 js 引擎：chorme v8 引擎

注意事项：JS 引擎也就是常说的编译器，浏览器自身并不执行 js 语句，js 引擎会把 js 语句逐行进行编译并执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js 引擎会逐行执行 js 代码  解析一行运行一行
        alert("尧子陌");
        alert('临风笑却世间');


    </script>
</head>
<body>
    
</body>
</html>

js 的组成

Javascript:ECMAscript(js 的语法外围) DOM(文档对象模型) BOM(浏览器对象模型)

  • ECMAscript:javascript（网景）JScript(微软) 外围语言性能
  • DOM: 提供拜访和操作网站内容的接口和办法
  • BOM: 提供与浏览器交互的接口和办法

js 初体验

行内的 js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <input type="button" value="China" onclick="alert(' 中国 我爱你 ')">
</body>
</html>

内嵌 JS

外链 js


    <script type="text/javascript">
        alert("hello 中国")

    </script>

外链 JS

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

 </script>

注意事项

js 正文

js 中的正文能够分为单行正文 多行正文

  • 单行正文：//
  • 多行正文 / /

快捷键

JS 中的输入输出语句

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 输出语句
        prompt("请输出“china")
        // 输入语句
        alert("祝贺你 输出正确")
        // 在控制台打印
        console.log("2020")
    </script>
</head>

<body>

</body>

</html>

变量

变量：变量仅仅是用来保留值的占位符而已，通过变量名能够获取数据，甚至批改数据

注意事项
实质：变量是从内存中申请的空间，用来存取数据

变量的应用

    1. 申明变量
    1. 赋值

    <script>
        // 1. 申明变量
        var age;
        // 2. 赋值
        age=18;

        // 在控制台打印
        console.log(age)
    </script>


后果

变量的初始化

何为变量的初始化，在申明变量的同时且赋值 var 是一个操作符 而变量名相当于标识符


    <script>
    // 申明变量的同时间接赋值
        var name = "尧子陌";
        console.log(name)


    </script>



** 后果 **

![image.png](/img/bVbKTkw)


## 变量案例


### 案例 1：在控制台打印本人个人信息


<script>
    // 申明变量
    var name ="尧子陌";
    var age = 24;
    var  sex = "男";
    var site = "南阳";
    // 在控制台进行打印
    console.log(name);
    console.log(age);
    console.log(sex);
    console.log(site)



</script>



![image.png](/img/bVbKTkB)

### 案例 2：用户输出本人的姓名，并在网页中弹进去

<script>
    /* 用户输出本人的姓名 并在网页中弹进去 */
    
    var username =prompt("请输出姓名");
    alert(username)

 </script>



![image](/img/bVbKTkG)

## 变量的扩大


### 更新变量

** 变量被从新赋值后，原来的值会被笼罩掉，变量以最初一次赋值为准 **

<script>
    // 初始化变量
    var age = 12;

    // 从新赋值
    age = 20;

    // 在控制台打印
    console.log(age) //20



</script>


![image.png](/img/bVbKTkM)



### 同时申明多个变量
** 同时申明多个变量  两头用英文状态下的逗号相隔 **
<script>
    // 同时申明多个变量
    var name = '尧子陌',
        age = '18',
        sex = '男',
        site = '南阳';
    // 在控制台打印
    console.log(name, age, sex, site)




</script>



![image.png](/img/bVbKTkX)


### 其它状况

 **1. 只申明 不赋值的状况下 **
 **2. 不申明 只赋值的状况下 **
 **3. 不申明 不赋值的状况下 **

<script>
    // 只申明  不赋值的状况下
    var age;
    console.log(age) //undefined

    // 不申明 只赋值的状况下
    sex = 20;
    console.log(sex) //20

    // 不申明 不赋值的状况下
    
    console.log(num) // 会报错
    



</script>




![image.png](/img/bVbKTk2)


### 变量名的规定


-  1. 严格辨别大小分
-   2. 由字母 下划线 数字 $ 组成
-  3. 不能以数字结尾
-   4. 变量名要有意义
-   5. 遵循驼峰式命名，即首字母小写，前面单词的首字母须要大写
-   6. 不能应用 js 中的关键字和保留字

** 留神 **

*   不能应用 name 作用变量名

![image.png](/img/bVbKTlc)

### 案例：替换两个变量

** 思路 **

*   1. 申明一个长期变量 temp
*   2. 把 num 的值赋值给 temp
*   3. 把 num2 的值赋值给 num1
*   4. 把 temp 的值赋值给 num2

** 留神：左边的值赋值给右边 **

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
    // 替换两个变量的步骤

    /* 
    * 1. 申明一个长期变量
    * 2. 把 num 的值赋值给 temp
    * 3. 把 num2 的值赋值给 num
    * 4. 把 temp 的值赋值给 num2
    */
    
    // 申明长期变量
    var temp; 

    // 申明变量 num num2
    var num = 20;
    var num2 = 40;

    // 替换变量
    var temp = num;
    var num = num2;
    var num2 = temp;

    console.log(num)
    console.log(num2)

 </script>

</head>
<body>

</body>
</html>

![image.png](/img/bVbKTlf)



###  变量的总结

![image.png](/img/bVbKTls)

## 数据类型


> 在计算机中，数据占用存储空间不同，定义的数据类型不同。**JS 属于弱类型语言, 只有在赋值的状况下，能力确定数据类型 **

<script>
    var num = 20;
    console.log(num); //20  数值型

    var str = "hello";
    console.log(str);//hello 字符串型


</script>


![image.png](/img/bVbKTlv)



### 数据类型的分类

- 简略数据类型：Undefined Null Number String Boolean
- 简单数据类型：Object

![image.png](/img/bVbKTlB)


### Number

** 注意事项 **

1.Number 包含整数 浮点数（小数）八进制 十六进制 Number.MAX_VALUE(最大值) Number.MIN_VALUE(最大值) Infinity(正无穷) -Infinity(负无穷) NaN(非数值)

2. 八进制后面数字加 0(0~8) 十六进制后面增加 ox(0~9 A-F)

3. 所有的八进制和十六进制会被转换成十进制


4.isFinite()函数 位于最大值和最小值之间会返回 true

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dcument</title>
<script>
    var num = 20;
    console.log(num); // 整数

    var num2 = 1.314;
    console.log(num2) // 浮点数

    var num3 = 050;
    console.log(num3) // 八进制

    var num4 = 0x5;
    console.lohg(num4) // 十六进制


    console.log(Number.MAX_VALUE) // 最大值
    console.log(Number.MIN_VALUE); // 最小值

    console.log(Infinity) // 正无穷大
    console.log(-Infinity) // 负无穷大

    console.log("Hello"-123); //NaN(非数值)
    
 </script>

</head>
<body>

</body>
</html>


![image.png](/img/bVbKTlL)


### isNaN()函数

> isNaN()函数：判断外面的参数是否为非数值 为非数值则显示 true 反之则显示 false, 参数会进行隐式转换

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
    // 判断是否是非数值

    console.log(isNaN(20)); //fale

    console.log(isNaN("hello")) //true
    ` console.log(isNaN('20')) //true`
 </script>

</head>
<body>

</body>

</html>


![image.png](/img/bVbKTlZ)


### String(字符串类型)

> 引号外面的任意文本 在 JS 中被称为字符串，引号能够为单引号也能够为双引号

** 注意事项 **

1.  js 中的嵌套法令，外单内双 外双内单
2.  非凡状况下，须要用到本义符

<script>
    var str = "hello 中国";
    console.log(str)

    var str2 = "我是一个' 高富帅 '的男孩子";
    console.log(str2);

    var str3 = "大家好 \n 我的名字叫做尧子陌";
    console.log(str3)
</script>


![image.png](/img/bVbKTml)

### 本义符

![image.png](/img/bVbKTmp)


# String 案例


![image.png](/img/bVbKTmx)

<script>
    alert('炎热难耐，火辣的太阳底下，我高耸的身姿，成为了最为独特的风光。\n 我扫视周围，这里，是我的舞台，我就是天地间的王者。\n 这一刻，我豪气冲天，终于大喊一声：" 收破烂啦～"')


</script>


![image.png](/img/bVbKTmH)


### 字符串扩大

- 字符串 + 任意类型 = 拼接之后的新的字符串 ** 口诀：数值相加 字符相连 **
- 通过 length 属性能够获取字符串的长度
- 字符串能够和变量相加，后果仍是字符串类型

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
    var str = "my name is 尧子陌";
    console.log(str.length)  // 通过 length 属性能够获取字符串的长度

    var str = "hello";
    console.log(str+"尧子陌"); // 拼接之后的字符串
    alert(str+"尧子陌") // 拼接之后的字符串
    
 </script>

</head>
<body>

</body>
</html>


![image](/img/bVbKTmU)

### 年龄案例

** 步骤 **

-   1. 弹出一个输入框，用户输出年龄
-   2. 把输出的后果用变量的模式保存起来，与所须要的字符串拼接起来
-   3. 应用 alert 弹出警示框

<!DOCTYPE html>
<html lang=”en”>

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
    /*
    1. 弹出一个输入框，用户输出年龄
    2. 把输出的后果用变量的模式保存起来，与所须要的字符串拼接起来
    3. 应用 alert 弹出警示框
    */
    var age = prompt('请输出你的年龄');

    var str = "你往年" + age + "岁";

    alert(str)
</script>

</head>

<body>

</body>

</html>


![image](/img/bVbKTnl)

### Boolean 布尔值

> 布尔值有两个值 true（真）false（假）** 留神：在进行加法运算中，true 会被转换成 1，而 false 会被转换成 0 **

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
    var flag = true;
    var flag1 = false;

    console.log(flag+1); //2
    console.log(flag1+1);//1
    



</script>

</head>
<body>

</body>
</html>


![image.png](/img/bVbKTnq)

### Undefined

> 申明未被赋值的 其后果为 undefined

** 留神：undefined 与任何数值相加，其后果为 NaN(不是一个数值)**

<script>
    // 申明未赋值的 其后果为 undefined
    var age;
    console.log(age);//undefined

    var result= age+"2";
    console.log(result);
    
     var result2 = age+2;
    console.log(result2)//NaN
    
</script>



![image.png](/img/bVbKTnK)


### Null
**null 在与数值相加时，值会被转换成 0 **

Null：示意一个空对象指针

<script>

    // Null 示意空对象指针
    var car =null;
    console.log(car+1);//1
    console.log(car+"2020"); //null2020
    
</script>


![image.png](/img/bVbKTn1)


### typeof

> typeof: 检测数据类型

<script>
    // 应用 typeof 检测数据类型
    var num = 10;
    console.log(typeof num); //number

    var str ="hello";
    console.log(typeof str);//string

    var flag = true;
    console.log(typeof flag);//boolean

    var  age;
    console.log(typeof age); //undefined 

    var N = null;
    console.log(typeof null) //object
    

    var username = prompt("请输出年龄");
    console.log(typeof username)
</script>



![image.png](/img/bVbKTob)

### 通过控制台的色彩来辨别数据类型

<script>
    console.log(10); 
    console.log("尧子陌"); 
    console.log(true) 
    console.log(undefined) 
    console.log(null) 
</script>


![image.png](/img/bVbKToB)


### 字面量

> 字面量：一个固定值的表示法

*   数字字面量：8 20 50 等等
*   字符串字面量 :"hello" "work"
*   布尔值表示法：true false

## 数据类型转换


> 一种数据类型的变量转换成另一种数据类型

### 转换成字符串类型


-   利用 toString()办法转换成字符串
-   利用 String 函数进行转换
-   利用 + 号进行隐式转换


<script>
    // 利用 toString()办法转换成字符串
    var  num = 20;
    console.log(num.toString()) // 转换成字符串 10

    // 利用 String 函数进行转换
    var num2 = 25;
    console.log(String(num2));

    // 利用 + 号进行隐式转换
    var num4 = 30;
    console.log(""+num4);
    
    
</script>



![image.png](/img/bVbKToK)

### 转换成数值型

*   parseInt(): 转换成整数
*   parseFlaot(): 转换成浮点数
*   Number(): 强制转换
*   利用算数运算符中的 - \* / 进行隐式转换
*   parseInt 和 parseFloat 及 number 遇到非数字结尾的参数，会显示 NaN


<script>
    // 利用 paeseInt 进行转换成整数
    var str = "20";
    console.log(parseInt(str)) //20 

    // 利用 parseFloat 转换成浮点数
    var str2 = '1.314';
    console.log(parseFloat(str2)); //1.314

    // 利用 Number 进行转换
    var str3 = '20.55';
    console.log(Number(str3));
    console.log(Number(NaN)); //NaN

    // 利用算数运算中的 - * / 进行转换
    var str4 = '205';
    console.log(str4 - "");

</script>


![image.png](/img/bVbKTpe)





### 年龄案例

** 计算用户的年龄 **

** 步骤如下 **

*   弹出一个输入框，用户输出本人的出世年份（输出年龄）*   把用户的年份用变量保存起来，用往年的年份减去用户输出的变量值，从而失去本人的后果（程序外部解决）*   弹出警示框，输出变量，即可失去后果。

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
   
     var  age = prompt('请输出出世的年份')

 

     var userName = 2020-age;


     alert('你的年龄为'+userName+'岁')
</script>

</head>
<body>

</body>
</html>


![image](/img/bVbKTpD)
### 简略的加法器

1. 弹出第一个输入框 用户输出数字 用变量名保存起来

2. 弹出第二个输入框 用户输出数字 用变量名保存起来

3. 采纳 parseFloat 将变量转换成数值型，两个值进行相加

4. 用 alert 弹出后果即可

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
 
    var  userName1= prompt("请输出第一个数字");
    var userName2 = prompt("请输出第二个数字");
    var result = parseFloat(userName1) + parseFloat(userName2);

    alert(result) 
</script>

</head>`
<body>

</body>
</html>

![image](/img/bVbKTqR)

### Boolean（）> Boolean(): 否定的值会被转换 false 其它的值会被转换成 true

*   0 "" null undefined NaN 会被转换成 false
    
*   其余的值会被转换成 true

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
    // 上面的值会被转换成 false
    console.log(Boolean('')) //false
    console.log(Boolean(null)); //false
    console.log(Boolean(NaN)); //false
    console.log(Boolean(0)); //false
    console.log(Boolean(undefined)); // false
    
    // 上面的值会被转换成 true
    console.log(Boolean('hello'));
    console.log(Boolean(2020));
    
    
    
</script>

</head>
<body>

</body>
</html>


![image.png](/img/bVbKTrh)


## 编译性语言和解释语言的区别


> 编译性语言和解释性语言惟一的区别：在于翻译的工夫点不同。** 例子 ** 如同请客吃饭，编译性语言相当于把菜上齐才吃饭，而解释性语言相当于吃火锅，边涮边吃

![image.png](/img/bVbKTro)


## 标识符 关键字 保留字


*   标识符是指开发人员为变量 函数 属性起的名字。*   关键字是指 JS 曾经应用的字 不能当做变量名 函数名
*   保留字是行将将来将被应用的关键字

** 关键字及保留字 **



### 个人信息案例

留神：要用到输入框 alert 弹出框 字符串拼接 本义符等等

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
    var name = prompt("请输出名字");
    var age = prompt("请输出年龄");
    var sex = prompt("请输出性别");
    alert('姓名:'+name+'\n'+'年龄:'+age+'\n'+'性别:'+sex+'\n')

</script>

</head>
<body>

</body>
</html>

![image](/img/bVbKTsN)

## 总结

1.NaN == NaN 这句话是谬误的，NaN 与任何值都不相等 包含 NaN 自身
2.isNaN（）函数是用来检测外面的参数是否为非数值，isNaN(true) 的值为 false, 因为 true 会默认转换成 1
3.isNaN(false)的值为 false，因为 false 会默认转换成 0
4. 在 if 语句中，会主动执行绝对应的 Boolean 转换
5.Number(“”) 值为 0 Number(true)值为 1 Number(false)会被转换成 0 Number(undefined)会被转换成 NaN Mumber(NaN)会被转换成 NaN
6.parseInt(true) parseInt(false)的值均为 NaN parseInt(“”)也为 NaN
7.parseInt(): 能够解析二进制 八进制 十六进制，而 parseFloat()只能解析十进制
8.toString(): 能够解析二进制 八进制 十六进制
9.undefined == null 这句话是正确的 undefined 衍生于 Null

正文完
javascript
发表至： javascript
2020-08-06
 0
【译】TypeScript中的React高阶组件
关于javascript:Java异步非阻塞编程的几种方式
关于javascript:开发一个抽奖大转盘-Luckyspin
关于javascript:漂亮的时钟及倒计时页面样式