编程
何为编程，计算机为解决某个问题而应用某种程序设计语言编写的程序代码，并最终失去后果的过程
计算机程序
能够通过计算机语言的一系列指令汇合来管制计算机
留神：任何可能执行代码的设施都能够称为计算机 例如：ATM 手机 智能机器人等等
计算机语言
计算机语言是指人类与计算机之间通信的语言，是人类与计算机之间传递信息的媒介。
计算机语言：机器语言 汇编语言 高级语言
计算机最终辨认的都是二进制语言，二进制语言是由0和1组成
机器语言
机器语言是由二进制组成的 二进制语言泛指0和1
汇编语言
汇编语言和机器语言实质雷同 都是间接对计算机硬件进行操作，但指令符采纳英文缩写的标识符，更便于记忆和缩写
高级语言
高级语言指C++ JAVA PHYthon go语言 javascript等等
标记语言和编程语言的区别
- 标记语言是被读取的 没有逻辑性可言
- 编程语言能够被动读取的 具备逻辑性
计算机根底
数据存储单位
程序运行的程序
注意事项
程序执行时，会将程序的代码从硬盘中转移到内存中，cpu从内存中读取数据
内存用的是电 而硬盘用的是机械 所有cpu从内存中读取数据
初识javascript
javascript的发明者：布兰登.艾奇，在1995年仅利用10天的工夫便创造javascript,最后在网景公司命名为Livescript,后改名为javascriptjavascript是什么?
运行在客户端的脚本语言，服务器端的脚本语言：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>变量
变量：变量仅仅是用来保留值的占位符而已，通过变量名能够获取数据，甚至批改数据
注意事项
实质：变量是从内存中申请的空间，用来存取数据
变量的应用
- 申明变量
- 赋值
<script> // 1.申明变量 var age; // 2.赋值 age=18; // 在控制台打印 console.log(age) </script>
后果
变量的初始化
何为变量的初始化，在申明变量的同时且赋值 var是一个操作符 而变量名相当于标识符
<script> // 申明变量的同时间接赋值 var name = "尧子陌"; console.log(name) </script>**后果**## 变量案例### 案例1：在控制台打印本人个人信息<script> // 申明变量 var name ="尧子陌"; var age = 24; var sex = "男"; var site = "南阳"; //在控制台进行打印 console.log(name); console.log(age); console.log(sex); console.log(site)</script>### 案例2：用户输出本人的姓名，并在网页中弹进去<script> /* 用户输出本人的姓名 并在网页中弹进去 */ var username =prompt("请输出姓名"); alert(username) </script>## 变量的扩大### 更新变量**变量被从新赋值后，原来的值会被笼罩掉，变量以最初一次赋值为准**<script> // 初始化变量 var age = 12; // 从新赋值 age = 20; // 在控制台打印 console.log(age) //20</script>### 同时申明多个变量**同时申明多个变量 两头用英文状态下的逗号相隔**<script> // 同时申明多个变量 var name = '尧子陌', age = '18', sex = '男', site = '南阳'; // 在控制台打印 console.log(name, age, sex, site)</script>### 其它状况 **1.只申明 不赋值的状况下** **2.不申明 只赋值的状况下** **3.不申明 不赋值的状况下**<script> //只申明 不赋值的状况下 var age; console.log(age) //undefined //不申明 只赋值的状况下 sex = 20; console.log(sex) //20 // 不申明 不赋值的状况下 console.log(num) //会报错 </script>### 变量名的规定- 1.严格辨别大小分- 2.由字母 下划线 数字 $组成- 3.不能以数字结尾- 4.变量名要有意义- 5.遵循驼峰式命名，即首字母小写，前面单词的首字母须要大写- 6.不能应用js中的关键字和保留字**留神*** 不能应用name作用变量名### 案例 ：替换两个变量**思路*** 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>
### 变量的总结## 数据类型> 在计算机中，数据占用存储空间不同，定义的数据类型不同。**JS属于弱类型语言,只有在赋值的状况下，能力确定数据类型**<script> var num = 20; console.log(num); //20 数值型 var str = "hello"; console.log(str);//hello 字符串型</script>### 数据类型的分类- 简略数据类型：Undefined Null Number String Boolean- 简单数据类型：Object### 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>
### 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>
### String(字符串类型)> 引号外面的任意文本 在JS中被称为字符串，引号能够为单引号也能够为双引号**注意事项**1. js中的嵌套法令，外单内双 外双内单2. 非凡状况下，须要用到本义符<script> var str = "hello 中国"; console.log(str) var str2 = "我是一个'高富帅'的男孩子"; console.log(str2); var str3 = "大家好\n我的名字叫做尧子陌"; console.log(str3)</script>### 本义符# String案例<script> alert('炎热难耐，火辣的太阳底下，我高耸的身姿，成为了最为独特的风光。\n 我扫视周围，这里，是我的舞台，我就是天地间的王者。\n 这一刻，我豪气冲天，终于大喊一声："收破烂啦～"')</script>### 字符串扩大- 字符串+任意类型 = 拼接之后的新的字符串 **口诀：数值相加 字符相连**- 通过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>
### 年龄案例**步骤**- 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>
### 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>
### 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>### Null**null在与数值相加时，值会被转换成0**Null：示意一个空对象指针
<script> // Null示意空对象指针 var car =null; console.log(car+1);//1 console.log(car+"2020"); //null2020 </script>### 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>### 通过控制台的色彩来辨别数据类型<script> console.log(10); console.log("尧子陌"); console.log(true) console.log(undefined) console.log(null) </script>### 字面量> 字面量：一个固定值的表示法* 数字字面量：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>### 转换成数值型* 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>### 年龄案例**计算用户的年龄****步骤如下*** 弹出一个输入框，用户输出本人的出世年份（输出年龄）* 把用户的年份用变量保存起来，用往年的年份减去用户输出的变量值，从而失去本人的后果（程序外部解决）* 弹出警示框，输出变量，即可失去后果。<!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>
### 简略的加法器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>
### 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>
## 编译性语言和解释语言的区别> 编译性语言和解释性语言惟一的区别：在于翻译的工夫点不同。**例子** 如同请客吃饭，编译性语言相当于把菜上齐才吃饭，而解释性语言相当于吃火锅，边涮边吃## 标识符 关键字 保留字* 标识符是指开发人员为变量 函数 属性起的名字。* 关键字是指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>
## 总结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