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

编程

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

计算机程序

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

留神：任何可能执行代码的设施都能够称为计算机例如：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基础知识及变量1

编程

计算机程序

计算机语言

机器语言

汇编语言

高级语言

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

计算机根底

数据存储单位

程序运行的程序

初识javascript

javascript是什么?

javascript的作用

HTML/CSS/Javascript的关系

浏览器执行Javascript的过程

js的组成

js初体验

行内的js

内嵌JS

外链JS

js正文

JS中的输入输出语句

变量

变量的应用

变量的初始化

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

编程

计算机程序

计算机语言

机器语言

汇编语言

高级语言

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

计算机根底

数据存储单位

程序运行的程序

初识javascript

javascript是什么?

javascript的作用

HTML/CSS/Javascript的关系

浏览器执行Javascript的过程

js的组成

js初体验

行内的js

内嵌JS

外链JS

js正文

JS中的输入输出语句

变量

变量的应用

变量的初始化

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复