01-JavaScript基础
核心知识点
- javaScript书写位置
- javaScript变量
- javaScript数据类型
- javaScript数据类型转换
- javaScript运算符
今日学习目标
- 能够定义一个变量并完成变量的赋值
- 能够说出每一种具体的数据类型
- 能够数据类型之间的相互转化
- 能够掌握各种运算符的作用
序言
JavaScript发展历史(js)
1. 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办 法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。2. 1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运 行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。3. 网景公司动了心，决定与Sun公司结成联盟4. 34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他,他只用10天时间就把Javascript设计出来了。 （多肽语言）5. (1)借鉴C语言的基本语法; (2)借鉴Java语言的数据类型和内存管理; (3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位; (4)借鉴Self语言，使用基于原型(prototype)的继承机制。
JavaScript是什么？
JavaScript： 基于对象和事件驱动，运行在浏览器客户端的脚本语言。[js]✔ js的运行环境： 运行在浏览器端的一种语言✔ 最后将所有的js代码都要以对象的形式去执行，都要通过事件的方式去触发执行【DOM】对象： 现实世界中的对象： 将任何一个具体的事物都是一个对象【万事万物皆对象】编程中的对象： 对现实中对象的抽象描述面向对象特征： 封装 继承 多态编程思想：✔面向对象：【推荐】代码执行都要以一个具体的对象为整体去执行✔面向过程：代码执行的时候，一行一行执行的。
JavaScript能干什么？
☞ 常见的网页效果【表单验证，轮播图。。。】☞ 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】☞ 实现应用级别的程序【 http://naotu.baidu.com】☞ 实现统计效果【http://echarts.baidu.com/examples/】☞ 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】☞ 在线学编程【https://codecombat.163.com/play/】☞ js可以实现人工智能 【面部识别】☞ 可以实现服务端功能 nodejs
JavaScript组成
☞ ECMASCRIPT 定义了javascript的语法规范,描述了语言的基本语法和数据类型☞ BOM （Browser Object Model） 即浏览器对象模型。浏览器对象模型,一套操作浏览器功能的API,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等☞ DOM (Document Object Model) 文档对象模型,一套操作页面元素的API,DOM可以把HTML看做是文档树，通过 DOM提供的API可以对树上的节点进行操作 【js+HTMl+css】
JavaScript书写位置
内嵌式写法
☞ 在html页面内部设置<script type="text/javascript">js</script>注意：该标签可以放到head标签中或者body标签中
外联式写法[推荐写法]
☞ 1. 新建js文件2. 通过script标签引用到当前页面中<script type="text/javascript" src="test.js"></script>注意：1. 不能将代码写到外联式标签中。2. 一个网页中可以同时调用多个外部js文件<script type="text/javascript" src="test.js"></script><script type="text/javascript" src="test.js"></script><script type="text/javascript" src="test.js"></script><script type="text/javascript" src="test.js"></script>
行内式写法（不推荐）
☞ 将js代码写到标签内部
<div onclick="js代码"></div>注意：onclick 是一个点击事件： 当点击div的时候，会触发该事件，执行该事件中的代码
JavaScript中输入消息方式
alert();document.write('<h1>我是一段文字</h1>'); 在网页中输出信息prompt("请输入姓名","测试"); //接收用户输入的confirm("确定不听课么");console.log("adsadsfafds"); //在控制台中输出消息总结：1. 在js中如果希望输出一个具体的文本信息，必须带引号2. 在使用document.write();的时候，可以在方法内输出html标签，加引号。
变量（重点）
变量概念
☞ 变量： 变量指的是在程序中保存数据的一个容器
定义变量及赋值
☞ 定义变量var 变量名;☞ 赋值变量名 = 值;☞ 总结：1. 一个变量一次只能保存一个值2. 最后一次的赋值结果3. 变量是区分大小写（js区分大小写）
变量命名规范
☞ 规则 必须遵守的，不遵守的话 JS引擎 发现并报错 1. 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：var usrAge, num01, _name2. 区分大小写 强调：JS 严格区分大小写 ，var app; 和 var App; 是两个变量3. 不能 以数字开头，或者汉字定义变量名4. 不能 是关键字、保留字 和 代码符号，例如：var、for、while、&, class5. 不能出现空格☞ 规范 建议遵守的，不遵守的话 JS引擎 也不会报错1. 变量名必须有意义2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。
课堂测试
1.下面四个变量声明语句中，哪一个变量的命名是正确的？A．var for B．var txt_name C．var myname myval D．var 2s2.下面哪一个语句定义了一个名为 Myval 的变量并将它的值赋为2205？A．var myval=2205 B．var MyVal = 2205C．var Myval=2205 D．Myval=2205 【不规范】3. 气温表示方式有两种：摄氏度和华氏度华氏度=9/5*摄氏度+32请使用代码完成：让用户输入任意的摄氏度，得到对应的华氏度。4. 交换两个变量的值var a = 1;var b = 2;最后通过程序的方式将变量a的值改为 2，变量b的值改为15. 定义两个变量，求和
数据类型（重点）
数据类型
☞ 数据类型： 数据类型指的是变量的数据类型
简单数据类型
- 数字类型(number)
☞ 凡是数字都属于该类型【整数，小数，负数】☞ 只要变量的值是一个具体的数字，那么当前变量的数据类型就是数值类型☞ number类型表示的数字大小： 最大值是±1.7976931348623157乘以10的308次方 Number.MAX_VALUE 最小值是±5 乘以10的-324次方 Number.MIN_VALUE
- 字符串类型(string)
☞ 字符串可以是引号中的任意文本。可以使用单引号或双引号☞ 在js中一般写字符串类型的变量时候，推荐使用单引号。☞ 注意：1. 单引号和双引号之间的嵌套例如： 输出 我是"高帅富"程序猿; 2. 转义字符\n 换行\\ 斜杠\' 单引号\" 双引号\r 回车符例如：var strMsg = 'I'm the GOD of my world ~!'; //输出：I'm the GOD of my world ~!var strMsg2 = "I"m the GOD of my world ~!"; //输出：I"m the GOD of my world ~!var strMsg3 = '反斜杠是这个 \\，神奇！'; //输出：反斜杠是这个 \，神奇！
- 布尔类型(boolean)
☞ true 和 false
- undefined类型（了解）
//如果一个变量没有赋值，该变量的默认是undefinedvar n1;//如果一个变量的值是undefined，那么该变量的数据类型就是undefined类型
复杂数据类型（目前不讲）
- object类型
课堂测试
请说出如下变量分别对应的数据类型是什么？var a1=123; var a2="123"; var a3=true; var a4="false"; var a5="1.63";var a6; var a8="null"
数据类型判断
☞ 使用 typeof 变量 可以得到对应变量的数据类型☞ 例如：var n1 = 123;//获取n1的数据类型console.log(typeof n1);var n2 = '123';console.log(typeof n2);var n3 = true;console.log(typeof n3);
判断一个变量是不是数字
isNaN(x) 方法例如：var usrAge = 21;var isOk = isNaN(usrAge);console.log(isNum); // false ，21 不是一个 非数值var usrName = "James";console.log(isNaN(usrName));//true ，"James"是一个 非数值
数据类型转换
- 转数值类型
☞Number(变量)：总结：1. 可以通过该方法将数据类型转换为数值类型var n1 = '123';console.log(typeof n1);//方法一：通过Number()n1 = Number(n1);console.log(typeof n1);2. 在转换的过程中可以将原来的值保留，遇到小数直接保留下来，不会舍去3. 如果变量无法转换为数值类型，那么返回的结果是NaN； 对应的数据类型依然是数值类4. 如果将布尔类型转换为数值类型，true 转化后的结果是 1 false 转化后的结果是0☞parseInt(变量)var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN备注：1 只会保留整数部分，通过该方式进行数据类型转换后得到就是一个整数2. 如果一个变量中的值无法转换为具体数字，那么返回的结果是一个 NaN 的值3. NaN (not a number) ----NaN对应的数据类型是数值类型4. 通过该方法可以将其他数据类型转为数值类型☞parseFloat(变量)总结：1. 通过该方法可以将其他数据类型转换为数值类型2. 在转换过程中，如果遇到小数，那么会直接将小数部分保留3. 如果转化不成功过，返回的结果NaNparseFloat()把字符串转换成浮点数
- 转字符串类型
☞ 变量.toString()var num = 5;console.log(num.toString());☞ String(变量)备注：String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null
- 转布尔类型
☞ Boolean() 备注：0 |''(空字符串) | null | undefined | NaN 会转换成false 其它都会转换成 true
算数运算符
+ 运算总结：1. 如果是数值类型的变量相加，结果就是一个数值类型的结果2. 如果是一个字符串类型的变量相加，最后的结果就是字符串（加号起到的作用就是拼接字符串的功能）-运算总结：1. 如果是数值类型的变量相减，结果就是一个数值类型的结果2. 如果是数字的字符串相减，得到的结果也是一个数值类型结果（发生了隐式类型转化）var n1 = '123';var n2 = '123';3. 如果是非数字的字符串相减，得到的结果是NaN*运算/运算1.如果是数值类型的变量相除，结果就是一个数值类型的结果2. 如果是数字的字符串相除，得到的结果也是一个数值类型结果（发生了隐式类型转化）3. 如果是非数字的字符串相除，得到的结果是NaN4. 如果除数是0 ，得到的结果是 Infinity （无穷大的值）%取余（获取余数）
赋值运算符
+= | -= | *= | /= | %= var a += b ; =====> 等价于 a = a+b;
一元运算符
-
前置++ 和 后置 ++
-
前置-- 和 后置–
比较运算符
1. > 2. <3. >= 大于 或者 等于，只要有一个满足即可4. <= 小于 或者 等于，只要满足一个即可5. == 只用来比较变量中的值是否相等，不考虑数据类型6. === 用来判断值和数据类型必须同时相等7. != 判断值是否不相等，不考虑数据类型8. !== 判断值和数据类型☞ 总结：✔ 通过比较运算符得到的结果只有两个结果，一个是正确的，一个是错误的✔ 通过比较运算符得到的结果 只有 true[正确] 和 false[错误]
逻辑运算符
1. || 或： 条件只要有一个满足即可总结：1. 如果条件中有一个结为true(代表有一个条件满足了)，那么通过或运算后最后的结果为true2. 如果条件中结果都不满足，那么通过或运算后结果为false2. && 且： 要求所有的条件都必须满足才可以总结：1. 如果条件都为真（true），那么通过且运算后最后的结果也是真（true）2. 如果条件中自少有一个条件不满足（false），那么通过且运算后的结果为false3. ! 非（取反） :
运算符优先级（了解）
优先级从高到底1. () 优先级最高2. 一元运算符 ++ -- !3. 算数运算符 先* / % 后 + -4. 关系运算符 > >= < <=5. 相等运算符 == != === !==6. 逻辑运算符 先 && 后 ||7. 赋值运算符
![[HZNOI #koishi] Magic](https://images.cnblogs.com/cnblogs_com/rvalue/1402429/o_47079034_p0.png)
