javascript基础知识及变量(1)

javascript之流程控制语句(2)

javascript循环(3)

javascript数组 (4)

javascript函数(5)

javascript作用域（6）

编程

何为编程，计算机为解决某个问题而使用某种程序设计语言编写的程序代码，并最终得到结果的过程

计算机程序

可以通过计算机语言的一系列指令集合来控制计算机

注意：任何能够执行代码的设备都可以称为计算机例如：ATM 手机智能机器人等等

计算机语言

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

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

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

机器语言

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

汇编语言

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

高级语言

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

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

标记语言是被读取的没有逻辑性可言
编程语言可以主动读取的具有逻辑性

计算机基础

数据存储单位

程序运行的顺序

注意事项

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

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

初识javascript

[code]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语句逐行进行编译并执行。

[code]<!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

[code]<!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

[code]<script type=\"text/javascript\">alert(\"hello 中国\")</script>

外链JS

my.js

[code]alert(\"hello 中国\")

[code]<script src=\"./my.js\"></script>

注意事项

使用外链js的时候,script元素之间不要添加任何内容
尽量不要使用行内js,会增加DOM结构，使页面加载速度变慢

js注释

js中的注释可以分为单行注释多行注释

单行注释：//
多行注释 / /

快捷键

JS中的输入输出语句

[code]<!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>

变量

变量：变量仅仅是用来保存值的占位符而已，通过变量名可以获取数据，甚至修改数据

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

变量的使用

[code]<script>// 1.声明变量var age;// 2.赋值age=18;// 在控制台打印console.log(age)</script>

结果

变量的初始化

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

[code]<script>// 声明变量的同时直接赋值var name = \"尧子陌\";console.log(name)</script>

结果

变量案例

案例1：在控制台打印自己个人信息

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

案例2：用户输入自己的姓名，并在网页中弹出来

[code]<script>/* 用户输入自己的姓名 并在网页中弹出来 */var username =prompt(\"请输入姓名\");alert(username)</script>

变量的扩展

更新变量

变量被重新赋值后，原来的值会被覆盖掉，变量以最后一次赋值为准

[code]<script>// 初始化变量var age = 12;// 重新赋值age = 20;// 在控制台打印console.log(age) //20</script>

同时声明多个变量

[code]<script>// 同时声明多个变量var name = \'尧子陌\',age = \'18\',sex = \'男\',site = \'南阳\';// 在控制台打印console.log(name, age, sex, site)</script>

其它情况

1.只声明不赋值的情况下
2.不声明只赋值的情况下
3.不声明不赋值的情况下

[code]<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

注意：右边的值赋值给左边

[code]<!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 temp;// 声明变量num num2var 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属于弱类型语言,只有在赋值的情况下，才能确定数据类型

[code]<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

5.parseInt()可以转换成二进制八进制十六进制，而parseFloat()只能转换十进制

[code]<!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,参数会进行隐式转换
注意事项

isNaN(true)结果为false，因为true会转换成1，isNaN(false)结果为false,因为false会转换成0

[code]<!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)); //faleconsole.log(isNaN(\"hello\")) //true</script></head><body></body></html>

String(字符串类型)

引号里面的任意文本在JS中被称为字符串，引号可以为单引号也可以为双引号

注意事项

js中的嵌套法则，外单内双外双内单
特殊情况下，需要用到转义符

[code]<script>var str = \"hello 中国\";console.log(str)var str2 = \"我是一个\'高富帅\'的男孩子\";console.log(str2);var str3 = \"大家好\\n我的名字叫做尧子陌\";console.log(str3)</script>

转义符

String案例

[code]<script>alert(\'酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。\\n 我审视四周，这里，是我的舞台，  我就是天地间的王者。\\n 这一刻，我豪气冲天，终于大喊一声：\"收破烂啦～\"\')</script>

字符串扩展

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

[code]<!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弹出警示框

[code]<!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（假）
\’\’ 0 undefined null NaN会被转换成false，其它值会被转换成true

注意：在进行加法运算中，true会被转换成1，而false会被转换成0

[code]<!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); //2console.log(flag1+1);//1</script></head><body></body></html>

Undefined

声明未被赋值的其结果为undefined

注意：undefined与任何数值相加，其结果为NaN(不是一个数值)

[code]<script>// 声明未赋值的 其结果为undefinedvar age;console.log(age);//undefinedvar result= age+\"2\";console.log(result);var result2 = age+2;console.log(result2)//NaN</script>

Null

[code]Null：表示一个空对象指针

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

typeof

typeof:检测数据类型

[code]<script>//使用typeof 检测数据类型var num = 10;console.log(typeof num); //numbervar str =\"hello\";console.log(typeof str);//stringvar flag = true;console.log(typeof flag);//booleanvar  age;console.log(typeof age); //undefinedvar N = null;console.log(typeof null) //objectvar username = prompt(\"请输入年龄\");console.log(typeof username)</script>

通过控制台的颜色来区分数据类型

[code]<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函数进行转换
利用+号进行隐式转换
利用toString()可以转换2进制 8进制 10进制 16进制

[code]    <script>// 利用toString()方法转换成字符串var  num = 20;console.log(num.toString()) //转换成字符串10//利用String函数进行转换var num2 = 25;console.log(String(num2));//利用+号进行隐式转换var num4 = 30;console.log(\"\"+num4);// 利用toString()可以输出2进制 8进制 16进制等等var num6 = 20;console.log(num6.toString(2)) //转换成2进制console.log(num6.toString(8)) //转换成8进制console.log(num6.toString(10)) //转换成10进制console.log(num6.toString(16)) //转换成16进制</script>

转换成数值型

parseInt():转换成整数
parseFlaot():转换成浮点数
Number():强制转换 \”\”会转换成0 true会转换成1 false会被转换成0
利用算数运算符中的 – * / 进行隐式转换
parseInt和parseFloat及number遇到非数字开头的参数，会显示NaN

[code]<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));//利用算数运算中的 - * /进行转换var str4 = \'205\';console.log(str4-\"\");</script>

年龄案例

计算用户的年龄

步骤如下

弹出一个输入框，用户输入自己的年龄（输入年龄）
把用户的年龄用变量保存起来，用今年的年份减去用户输入的变量值，从而得到自己的结果（程序内部处理）
弹出警示框，把结果输入进去即可。

[code]<!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.弹出输入框 用户输入自己的年龄var  age = prompt(\'请输入出生的年份\')//2.把用户输入的年龄用变量的方式保存起来，拿今年的月份减去变量名即可得到结果var userName = 2020-age;//3.弹出结果alert(\'你的年龄为\'+userName+\'岁\')</script></head><body></body></html>

简单的加法器

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

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

3.引用数据类型转换成数值型，两个值进行相加

4.用alert弹出结果即可

[code]<!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.引用数据类型转换成数值型，两个值进行相加4.用alert弹出结果即可*/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

[code]<!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>//下面的值会被转换成falseconsole.log(Boolean(\'\')) //falseconsole.log(Boolean(null)); //falseconsole.log(Boolean(NaN)); //falseconsole.log(Boolean(0)); //falseconsole.log(Boolean(undefined)); // false//下面的值会被转换成trueconsole.log(Boolean(\'hello\'));console.log(Boolean(2020));</script></head><body></body></html>

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

编译性语言和解释性语言唯一的区别：在于翻译的时间点不同。

例子
如同请客吃饭，编译性语言相当于把菜上齐才吃饭，而解释性语言相当于吃火锅，边涮边吃

标识符关键字保留字

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

关键字及保留字

个人信息案例

[code]注意：要用到输入框 alert弹出框 字符串拼接 转义符等等

[code]<!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>![image.png](/img/bVbLbuy)var name = prompt(\"请输入名字\");var age = prompt(\"请输入年龄\");var sex = prompt(\"请输入性别\");alert(\'姓名:\'+name+\'\\n\'+\'年龄:\'+age+\'\\n\'+\'性别:\'+sex+\'\\n\')</script></head><body></body></html>

总结

[code]1.NaN == NaN 这句话是错误的，NaN与任何值都不相等 包括NaN本身2.isNaN（）函数是用来检测里面的参数是否为非数值，isNaN(true)的值为false,因为true会默认转换成13.isNaN(false)的值为false ，因为false会默认转换成04.在if语句中，会自动执行相对应的Boolean转换5.undefined == null 这句话是正确的 undefined衍生于Null

特别注意事项

js中逗号保留原始数据类型，而加号是拼接字符串（对控制台而言）
使用alert时，要使用加号