JavaScript是什么?
JavaScript:基于对象和事件驱动,运行在浏览器客户端的脚本语言.
基于浏览器的脚本语言
js引擎(js解析器) : 执行js代码
渲染引擎 : 也称为内核, 用于执行html和css
js的运行环境 : 运行在浏览器端的一种语言
最后将所有的js代码都要以对象的形式去执行 , 都要通过事件的方式去触发执行[ DOM]
对象:
现实世界中的对象: 将任何一个具体的事物都是一个对象(万事万物皆对象)
编程中的对象 : 对现实中对象的抽象描述
JavaScript的语言特征?
脚本语言: 没有编译过程 , 直接通过解释器执行 , 代码在执行时读取一行, 解释执行一行
JavaScript[js]的组成
ECMAScript ---DOM---BOM
ECMAScript : 定义了JavaScript的语法规范,描述了语言的基本语法和数据类型
BOM :(Browser Object Model) 是浏览器对象模型
浏览器对象模型, 一套操作浏览器功能的API , 通过BOM可以操作浏览器窗口
DOM : (Document Object Model) 文档对象模型 ,一套操作页面元素的API , DOM可以吧HTML看做是文档树 , 通过DOM提供的API可以对树上的节点进行操作
JavaScript书写位置
内嵌式写法 在html页面内部设置
行内式写法( 不推荐 ) 将js代码写到标签内部
外链式写法 : ( 推荐写法 )
1, 新建js文件
2 , 通过script 标签引用到当前页面中
<script type="text/javascript" src="test.js"></script>
注意 :
1 . 不能将代码写到外链式标签中
2 . 一个网页中可以同时调用多个外部js文件
变量
变量 : 指的是在程序中保存数据的一个容器
变量是计算机内存中存储数据的标识符 , 根据变量名称可以获取到内存中存储的数据
定义变量及赋值
定义变量 --- var 变量名;
赋值 --- 变量名 = 值 ;
-----var 变量名 = 数据 ;
总结 :
1, 一个变量一次只能保存一个值
2, 变量使用时 , 使用的是最后的一次赋值结果
//声明多个变量并且赋值
var num1 = 10,num2=20,num3=30;
//变量的交换第一个思路:使用第三方的变量进行交换
var num1 = 10;
var num2 = 20;
//把num1的这个变量的 值取出来放在temp中
var temp = num1;
//把num2的这个变量的值取出来放在num1 变量中
num1 = num2;
//把temp变量的值取出来放在num2变量中
num2 = temp;
console.log(num1)//20
console.log(num2)//10
//第二种方式交换:一般适用于数字交换
var num1 = 10;
var num2 = 20;
//把num1的变量中的值和num2变量中的值,取出来相加,重新赋值给num1这个变量
num1 = num1 + num2;//30
//num1变量的值和num2变量的值取出来,相减的结果重新赋值给num2
num2 = num1 - num2;//10
//num1变量的值和num2变量的值取出来,相减的结果重新赋值给num1
num1 = num1 - num2;//20
console.log(num1,num2);//20,10
(ctrl+shift+L 快捷格式化文档)
变量的命名规范
规则: 必须遵守的, 不遵守的话 JS引擎发现并报错
1, 由字母( A-Z a-z), 数字 ( 0 - 9 ) , 下划线( _ ), 美元符号( $)组成
2, 区分大小写 强调: JS 严格区分大小写
3, 不能以数字开头 ,或者把汉字定义变量名
4, 不能是 关键字, 保留字 和 代码符号 列如系统自带的( var for while & class 等)
5, 不能出现空格
规范 : 建议遵守的,不遵守的话 JS引擎 也不会报错
1. 变量名必须有意义
2. 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。
数据类型
数据类型 指的是变量的数据类型
分简单数据类型和复杂数据类型
简单数据类型分5个:
number, string, boolean, null, undefined, object
number : 数字类型 ( 整数和小数 )
string:字符串类型(的值一般都是用单引号或者是双引号括起来)"34"
boolean:布尔类型(值只有两个,true(真/1),false(假/0))
null:空类型,值只有一个:null, 一个对象指向为空了,此时可以赋值为null)
undefined:未定义,值只有一个:undefined(变量声明了没有赋值结果是undefined--函数没有明确返回值,如果接受了结果也是undefined---如果一个变量的结果是undefined和一个数字进行计算,结果:NaN不是一个数字,也没有意义)
数值类型 ( number )
凡是数字都属于该类型【整数,小数,负数】
只要变量的值是一个具体的数字,那么当前变量的数据类型就是数值类型
number类型表示的数字大小:(了解)
最大最小值是±1.7976931348623157乘以10的308次方 Number.MAX_VALUE
最小精度值是±5 乘以10的-324次方 Number.MIN_VALUE
//不要用小数去验证小数,( 不准确)
//不要用NaN验证是不是NaN(如何验证这个结果是不是NaN ,应该使用isNaN---是不是不是一个数字---不是数字true ---是数字fales)
字符类型( string )
字符串可以是引号中的任意文本。可以使用单引号或双引号
在js中一般写字符串类型的变量时候,推荐使用单引号。字母,汉字,符号作为数据存在必须要用引号包含不管是什么数据如果用引号包含就变成字符串类型
注意 : 1 , 单引号和双引号之间的嵌套
2 转义符
n----换行 ----斜杠 ' --- 单引号 "---双引号 r --- 回车符
布尔类型 ( boolean )( boo ) :
只有两个返回值 true ( 真 ) 和 false( 假 )
null 空类型
undefined 类型
如果一个变量没有赋值 ,该变量默认 undefined
如果一个变量的值是undefined , 那么该变量的数据类型就是undefined类型
字面量
在源代码中一个固定值得表示法
表达式和语句
表达式 一个表达式可以产生一个值 , 有可能是运算,函数调用, 可能是字面量 , 表达水可以放在任何需要值得地方
语句 可以理解为一个行为, 循环语句和判断语句就是电箱的语句 , 一个程序有很多个语句组成
数据类型判断
typeof 值或变量 --- 用于检测基本数据类型值的类型, 用于检测类型 从而确定功能 ---得到的是数据对应类型名称 字符串结构
isNaN( ) 方法 检测值是否为非数字===>是数字 false ==>不是数字true
数据类型转换
1. 转数值类型
Number ( 变量 ):
1. 可以通过该方法将数据类型转换为数值类型
2. 在转换的过程中可以将原来的值保留,遇到小数直接保留下来,不会舍去
3. 如果变量无法转换为数值类型,那么返回的结果是NaN; 对应的数据类型依然是数值类
4. 如果将布尔类型转换为数值类型,true 转化后的结果是 1 false 转化后的结果是0
NaN:not a number【number类型】--- 遇到非数字会停止转换 返回NaN
paraseInt( 变量 )---专门用来对数值和字符串进行操作 ---去取整数部分
当遇到非数字停止转换, 返回转换过额整数部分
如果第一个字符不是数字或者符号就返回NaN
parseFloat( 变量 ) ---取出整数和小数部分 ---同上
转字符串类型
变量 . toString( )---强制转换操作
var num = 5;
console.log( num.toString( ) );---没有undefined和null功能
String(变量)---有些值没有toString( ),这个时候可以使用String( )。比如:undefined和null
1 ,值或变量.toString();
console.log(true.toString( ) );//'true'
var num = 100;
console.log(num.toStrinng) ); //'100'
常见报错形式:cannot read property ‘toString’ of XXX 不能读取XXX的toString功能
2 ,String(值或变量 ) 任意值均可进行转换 unll和undefined也可以转为字符串
强制转换:
通过任意数据和字符串进行+操作 规则:数据 + 字符串会进行内容的拼接,连接后为字符串类型 console.log(1 + 'abc');// '1abc' console.log('200' + 30);// '20030' 注意: 类型转换的基本原则是不能改变原值的 可以 100 + ‘’空字符串 console.log(100 + ''); // '100' 空字符串在前或后不影响
转换为数值类型
强制转换 :
1 ,Number(值或变量)
console.log(Number(‘100’));// 100
var str = '200' console.log(Number(str))//200
记忆时主要记字符串转换为数值的结果
-- console.log(Number(null));//0 true为1
2,,parseInt(值或变量)取出整数部分,取整,专门用来对数值和字符串进行操作 检测从左到右 ,检测到非数值就停止啦 检测失败显示NaN
3,,parseFloat(值或变量)可以取出整数和小数部分,专门用来对数值和字符串进行操作 如console.log(parseFloat(true)); //NaN console.log((parseInt));//NaN null和undefined也都是NaN
隐式转换 :
1,1 + -正负号 如+100是正100 如console.log(+‘100’)//100 console.log((+'100abc'))//NaN无法转换数值类型,因为含有非数值
1,2 -减法 *乘法 /除法 %取余(如100%3取余1) console.log(‘100’ - 2)//98;两边的值会进行数值相减 所以应该-0 *乘法的话乘1原值不变 /除法 除1原值不变,%取余 如(console.log(’100‘ % Infinity))//100
布尔类型
强制转换 :
Boolean(值或变量)注意:主要记忆的是转为false的值一共六个 false,0 ,null,undefined,NaN,’‘空字符串, 剩下的全为true 只有’‘空字符串为false剩下的字符串类型全为true
隐式转换 :
!!(值或变量)console.log(!!100);//true 跟Boolean功能一样
运算符
算数运算符
+ - * / %
小数计算精度问题 console.log(0.1+0.2);//0.3000000004 解决方式:将小数通过倍数扩大方式变成整数后将进行计算如console.log((0.1*10 + 0.2*10)/ 10);//0.3 console.log((0.001*1000 + 0.002*1000)/ 1000);//0.003 console.log(parseInt(17 / 3));//5(只取整数部分) console.log((17 / 3).toFixed(4));//5.6667(取小数后的几位数) 会进行四舍五入的方式
一元运算符
指参与运算的操作数只有一个// 操作数:指参与运算的数据值,列如1+2中的1和2就是操作数// 以前使用过的一元运算符有 typeof 正负号 新学的 自增自减运算符++和-- ~~自增自减运算符只能给变量使用 ~~单独使用时:前值和后置没有区别,表示变量自身的值增加1 var num = 100; num++; console.log(num );//101~~与其他运算一起使用时前置和后置的区别是++在前现加后用 ++在后先用后加,
比较运算符
> < >= <= 特点:所有的比计较运算符都会根据式子真假返回布尔类型值 如console. log(2>1);true console.log(-12>=18);false 如参与比较运算符的操作数是非数值,会隐式转换后操作 console.log(’100‘ > 2); //true ’100‘会隐式转换为数值后在进行比较 但是 console .log (’abc‘ > 6);//false 'abc'无法转换为数值,结果为false ’100abc‘也是false因为含有不是数值的值 true和null转换数值后为0
相等运算符
是比较运算符中的一部分功能 也都会根据式子真假返回布尔类型值
1 相等比较:== 和!=(不等于) 如console.log(100==100);true 100和100 是相等的 console.log(’100‘==100);true 注意:如果进行相等比较运算的两个操作数不是同一类型,会发生隐式转换,所以不推荐使用
2 全等比较(严格相等比较):===和!== 规则:两个数值必须完全一致(值和类型都相等)才会全等 如console,log(100===’100‘);//false console.log(100!==’100‘);//true
特殊规则:1null和undefined是相等关系,但是不全等 2 NaN进行任意的(正向)比较操作时,都返回false 就连NaN和自己NaN都是false 但是NaN!=NaN为true NaN!==NaN为true,
逻辑运算符
1.1 逻辑与:操作数&&操作数 console.log(true && true);// true 有一假则为假 1.2 逻辑或: 操作数||操作数 console.log(false || false);// false 有一true则为true 没有则为false
1.3 逻辑非: !操作数 console.log(!true);//false 真为假,假为真(取反)
当操作数均为布尔类型值时:基本规则为1.1 上面的内容 当某个操作数为非布尔类型值时(还可以称为逻辑中断或短路操作):
1 从左侧向右侧执行
2 如果某个操作数为非布尔类型,会隐式转换为布尔类型
3 那个操作数可以直接决定式子结果,就返回那个操作数原值 逻辑非:如果操作数不是布尔类型,隐式转换后取反,返回的就是布尔值
赋值运算符
赋值运算符=表示赋值
如var num num=200 num =’abc‘ num= true 取最后一次值 num= true
+= , -+ , *= ,/= ,%= (功能修改变量自身的原值 进行+ - * / %) 如 num=200; num+=30//就是num+30=230;也可以一起写 如 num+= 2 + 3 / 4 % 5
三元运算符
指参与运算的操作数有三个 语法形式 : 条件操作数 ? 式子1 : 式子2 ; 规则:条件操作数为true时,(执行)并(返回式子1的结果) 条件操作数为false时,(执行)并(返回式子2的结果) 注意:如果条件操作数为非布尔类型,会隐式转换后使用 如 var result = true ? 100 :200;console.log(resule);//100
优先级从高到低
1. () 优先级最高
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符
var num = prompt('请输入华氏度:');
var num1 = 9 / 5 * Number(num) + 32;
console.log(num1);
工资超过2000删除
// 方式1
var arr = [1222, 4444, 5555, 6622, 1111, 1222, 1222, 1333, 1444];
var str = [];
for (var i = 0; i<arr.length;i++) {
if(arr[i]<2000) {
str.push(arr[i]);
}
}
console.log(str);
// 方式二
var arr = [1222, 4444, 5555, 6622, 1111, 1222, 1222, 1333, 1444];
arr = arr.filter(function(item, index) {
if (item < 2000) {
return true;
}
return false;
});
console.log(arr);
求三位数的个十百位和
var num = prompt('请输入三位数:');
var num1 = Number(num) / 100;
var num1 = parseInt(num1);
var num2 = Number(num) / 10 % 10;
var num2 = parseInt(num2);
var num3 = Number(num) % 10;
// console.log(num1, num2, num3);
alert(num1);
alert(num2);
alert(num3);
// 求和
alert(num1 + num2 + num3);