编程
何为编程,计算机为解决某个问题而应用某种程序设计语言编写的程序代码,并最终失去后果的过程
计算机程序
能够通过计算机语言的一系列指令汇合来管制计算机
留神:任何可能执行代码的设施都能够称为计算机 例如: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>
变量
变量:变量仅仅是用来保留值的占位符而已,通过变量名能够获取数据,甚至批改数据
注意事项
实质:变量是从内存中申请的空间,用来存取数据
变量的应用
-
- 申明变量
-
- 赋值
<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