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文件
行内式写法(不推荐)
☞ 将js代码写到标签内部
<div onclick="js代码"></div>
注意:
onclick 是一个点击事件: 当点击div的时候,会触发该事件,执行该事件中的代码
JavaScript中输入消息方式
alert();//在网页中以弹出窗口的形式输出消息
document.write('<h1>我是一段文字</h1>');//在网页中输出信息
prompt("请输入姓名","测试");//接收用户输入的
confirm("确定不听课么");//通过js的方式获取用户的选中操作(确定或者取消)
console.log("adsadsfafds"); //在控制台中输出消息
总结:
1.在js中如果希望输出一个具体的文本信息,必须带引号
2.在使用document.write();的时候,可以在方法内输出html标签,加引号。
document.write("<h1>我是一个标题标签</h1>");
变量(重点)
变量概念
☞ 变量:变量指的是在程序中保存数据的一个容器
定义变量及赋值
☞ 定义变量
var 变量名;
☞ 赋值
变量名 = 值;
☞ 总结:
1.一个变量一次只能保存一个值
2.最后一次的赋值结果
3.变量是区分大小写(js区分大小写)
变量命名规范
☞ 规则(必须遵守的,不遵守的话JS引擎发现并报错)
1.由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:var usrAge, num01, _name
2.区分大小写 强调:JS 严格区分大小写 ,var app; 和 var App; 是两个变量
3.不能以数字开头,或者汉字定义变量名
4.不能是关键字(具有特殊含义的单词)、保留字(在当前的js版本中没有特殊含义,但是在其他版本中具有特殊含义)和代码符号,例如:var、for、while、&, class
5.不能出现空格
☞ 规范(建议遵守的,不遵守的话JS引擎也不会报错)
1. 变量名必须有意义
2. 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。
测试
1. 气温表示方式有两种:摄氏度和华氏度
华氏度=9/5*摄氏度+32
请使用代码完成:让用户输入任意的摄氏度,得到对应的华氏度。
<script>
// 1. 先定义一个变量保存华氏度
var hsd;
// 2. 定义一个变量保存摄氏度, 将用户输入的值赋值给 ssd 变量
var ssd = prompt('请输入摄氏度');
// 3. 套公式计算
hsd = 9 / 5 * ssd + 32;
// 4. 输出最后的结果
document.write(hsd);
</script>
4. 定义两个变量,求和
<script>
var a = Number(prompt('请输入第一个值:'));
var b = parseInt(prompt('请输入第二个值:'));
var c = a + b;
alert('和为:' + c);
</script>
5. 交换两个变量的值
<script>
// 交换两个变量的值 a = 2 b = 1;
var a = 1;
var b = 2;
// 步骤:
// 1. 定义一个临时变量 (空的容器)
var c;
// 2. 将a变量中的值赋值给c变量(将a容器中的液体倒入到c中)
c = a;
// 3. 将变量b的值赋值给a
a = b;
// 4. 将变量c的值赋值给b;
b = c;
console.log(a);
console.log(b);
</script>
数据类型(重点)
数据类型
☞ 数据类型:数据类型指的是变量的数据类型
简单数据类型
- 数字类型(number)
☞凡是数字都属于该类型【整数,小数,负数】 ☞只要变量的值是一个具体的数字,那么当前变量的数据类型就是数值类型 ☞number类型表示的数字大小: 最大值是±1.7976931348623157乘以10的308次方 Number.MAX_VALUE 最小值是±5 乘以10的-324次方 Number.MIN_VALUE
- 字符串类型(string)
☞字符串可以是引号中的任意文本。可以使用单引号或双引号 ☞在js中一般写字符串类型的变量时候,推荐使用单引号。 ☞注意: 1. 单引号和双引号之间的嵌套 例如: 输出我是"高帅富"程序猿; <script> alert('我是"高富帅"程序猿'); </script> 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 中的一个,那么该变量就是布尔类型. 注意事项: 1. true 和 false 就是一个特殊的值 2. true 在程序中表示正确的,条件成立的 3. false 在程序中表示错误的,条件不成立的
- undefined类型(了解)
//如果一个变量没有赋值,该变量的默认是undefined var n1; //如果一个变量的值是undefined,那么该变量的数据类型就是undefined类型
- null 空对象类型(了解)
◆ null类型被看做空对象指针.只有一个值,即 null 值 ◆ null 空比如一个变量原先有值 可以将变量的值设置为null 代表清空变量容器中的数据 ◆ 作用为了清空对象。
复杂数据类型
- object类型
数据类型判断
☞使用 typeof 变量可以得到对应变量的数据类型
☞例如:
var n1 = 123;
//获取n1的数据类型
console.log(typeof n1);
判断一个变量是不是数字
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(变量)
parseFloat()把字符串转换成浮点数
总结:
1.通过该方法可以将其他数据类型转换为数值类型
2.在转换过程中,如果遇到小数,那么会直接将小数部分保留
3.如果转化不成功过,返回的结果NaN
- 转字符串类型
☞变量.toString()
var num = 5;
console.log(num.toString());
☞String(变量)
总结:
String()函数存在的意义:有些值没有toString(),这个时候可以使用String()。
比如:undefined和null
- 转布尔类型
☞Boolean()
当其他数据类型转化为布尔类型后,变量原来的值一定会发生改变, 是 true 或者 false
总结:
0 |''(空字符串)| null | undefined | NaN 会转换成 false 其它都会转换成 true
测试
1. 让用户输入一个三位数【整数】,使用代码分别获取到这个三位数字百位,十位,个位上的数字。
<script>
//1.先获取一个3位数, 用户输入
var num = prompt('请输入一个3位数');
//2.需要将3位数转换为真正的数字类型
num = Number(num);
//3.获取当前这个数字身上的百位十位个位上的值%获取余数
var bai = parseInt(num / 100);
var shi = parseInt(num % 100 / 10);
var ge = parseInt(num % 10);
console.log('百位是:' + bai + '十位是:' + shi + '个位是:' + ge);
</script>
2. 用户任意输入一个三位数,求这个三位数字百位,十位,个位之和。
<script>
var num = Number(prompt('请输入一个三位数:'));
var a = parseInt(num / 100);
var b = parseInt(num % 100 / 10);
var c = parseInt(num % 10)
alert('百位:' + a + ' 十位:' + b + ' 个位:' + c);
var he = a + b + c;
document.write('百位,十位,个位之和:' + he);
</script>
算数运算符
+ 运算
总结:
1.如果是数值类型的变量相加,结果就是一个数值类型的结果
2.如果是一个字符串类型的变量相加,最后的结果就是字符串(加号起到的作用就是拼接字符串的功能)
-运算
总结:
1.如果是数值类型的变量相减,结果就是一个数值类型的结果
2.如果是数字的字符串相减,得到的结果也是一个数值类型结果(发生了隐式类型转化)
var n1 = '123';
var n2 = '123';
3.如果是非数字的字符串相减,得到的结果是NaN
*运算
/运算
1.如果是数值类型的变量相除,结果就是一个数值类型的结果
2.如果是数字的字符串相除,得到的结果也是一个数值类型结果(发生了隐式类型转化)
3.如果是非数字的字符串相除,得到的结果是NaN
4.如果除数是0 ,得到的结果是 Infinity (无穷大的值)
%取余(获取余数)
如有不足,请多指教,
未完待续,持续更新!
大家一起进步!