day01 JS基本语法
javascript基本介绍及发展趋势(脚本语言)
JavaScript是一种轻量级、解释型的Web开发语言。
Javascript,从最开始的被人误解,到现在的迅速发展,无论是jQuery,还是nodejs这种服务器端的语言,都无疑变向证明了JavaScript这门语言的强大。
JS和H5的关系
JS是网页脚本语言,代表控制网页的行为。
H5是目前最流行的HTML开发语言, 配合CSS层叠样式表,专门用于布局。
web项目组成 ( UI界面(ps/AI) + 前端渲染(html+css+js) + 后端(jsp/php...) )
编写Js及如何运行Js
javascript在html中的使用和代码嵌入类似于css文件
'<script type="text/javascript" src="外部的js文件"></script>'
目前 type 属性的值依旧还是 text/javascript。不过,这个属性并不是必需的,如果没有指定这个属性,则其默认值仍为 text/javascript。
需要注意的是,带有 src 属性的标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。src属性还可以包含来自外部域的 JavaScript 文件
- 编写js:推荐使用Hbuilder/sublime/webstorm等软件
- 运行js:chrome/firefox/IE/opera/safari浏览器
对象属性和方法(window和document)
- window:web页面最大的对象.浏览器打开的一个页面
- document:html文档里面最大的对象。当浏览器打开(下载)一个网页,通常是HTML,这个HTML就叫document
变量的概念
变量:变化的 / 写入内存的 / 不可前置 / 松散类型 / 同时定义多个。
所谓变量,就是特定时间用于保存特定值的一个名字而已,并且初始化后可以再次改变的量。ECMAScript(欧洲计算机制造商协会) 的变量是松散类型的,所谓松散类型就是 可以用来保存任何类型的数据。定义变量时要使用 var 操作符(var是关键字),后面跟一个变量名(变量名是标识符)
- 变量的命名规则: 数字、字母、下划线、$符号组成,其中数字不能做开头。
- 重复的使用 var 声明一个变量,只不过是一个赋值操作,并不会报错。
- 声明多个变量的时候,可以在一行或者多行操作,只要把每个变量用逗号分隔开即可,但最好分行写,可读性佳。
- 变量命名规则(变量名应做到见名知意)(驼峰命名)从第二个单词开始首字母大写。
尽量不要使用关键字(具有特定用途)和保留字(将来被用作关键字)作为变量名
赋值、关系、数学运算符的讲解
- 赋值运算符 = 将等式右边的结果赋值给左边。
- javascript使用“ = ”运算符来给变量或者属性赋值(最低优先级)
- 复合赋值操作 +=、-=、*=、/=、%= 带操作的复合赋值运算。(更快捷,更优)。
数学运算符 + - * / %
- +:求和,连接字符作用
- %:求余数(求模)
关系运算符<、>、<=、>=、==、===、!=(不相等) !==(不全等)
- 理解=、==、===运算符之间的区别。
- 理解相等和恒等运算符
数据类型、变量不同类型之间的自动、手动转换。
数据类型
- ECMAScript 中有 5 种简单数据类型:Undefined、Null、Boolean、Number 和 String。
- 还有一种复杂数据类型——Object。
- 检测变量类型的关键字:typeof
显示转换、强制转换、手动转换
- Number(): 可以将任意类型尝试转换为数字
- String():可以将任意类型尝试转换为字符串
- Boolean():可以将任意类型尝试转换为布尔值
- parseInt() : 将括号的内容转换成对应的整数
- parseFloat() : 将括号的内容转换成对应的浮点数(小数)
逻辑运算符(条件)
&& 与、|| 或、! 非
- 逻辑与:只有在第一个操作数和第二个操作数都为真的情况下,结果为真。
- 逻辑或:只有在两个操作数都为假的情况下,结果为假。也就是说如果第一个操作数的求值结果为真,就不会对第二个操作数求值了。
- 逻辑非:逻辑非操作符首先会将它的操作数转换为一个布尔值,然后再对其求反。
- 一元运算符:自增自减运算
- 自增、自减 : 自身的值上面+1 -1;++a , a++ --a, a--
- 一元操作符:只能操作一个值的操作符++ --
- 前置型应该位于要操作的变量之前,先累加再赋值或者应用
- 后置型则应该位于要操作的变量之后,先赋值应用再累加
进制的简单介绍
当一个数字以0开头时,就表示这是一个八进制数,以0x前缀来表示一个十六进制值。
NaN的概念及应用
- 当数学计算无法得到数字结果,该变量的值为NaN
注意:因为NaN代表非数字,它不等于任何值,也不能做运算,即使alert(NaN == NaN); 结果也是false
isNaN(num)方法,该方法判断num变量的值是否是NaN(不是一个数字)
应用
1.计算两个文本框的和
2.var k=0; console.log(k+++++k+k+k++);
3.为抵抗洪水,战士连续作战89小时,编程计算共多少天零多少小时?
4.小明要到美国旅游,可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度80度)转换为摄氏度,并以华氏度和摄氏度为单位分别显示该温度。
提示:摄氏度与华氏度的转换公式为:摄氏度 = 5/9.0*(华氏度-32)保留3位小数
综合应用
1.计算两个文本框的加减乘除
要求:1) 使用parseInt/parseFloat/Number方法类型转换
2) 计算结果使用Math.round方法四舍五入为整数
关系运算符 <、>、<=、>=、==(等于)、===(全等或者恒等)、!=(不相等) !==(不全等)
alert(5=='5');//true 等于比较的是值。将字符串转换数字 ==具有隐式转换(我们看不到)。
alert(true==1);//true; true转数字1
alert(true==2);//false; 1!=2
alert(' '==0);//true
alert(''==' ');//false; 字符串的比较
显示转换的方法:Number(); String(); Boolean();
alert(Number(true));//1
alert(Number(false));//0
alert(Number(''));//0
alert(Number(' '));//0
alert(Number(123));//123
alert(Number('abc'));//NaN
alert(Number('123'));//123
alert(Number('123abc'));//NaN
alert(true=='a');
非零即真,非空即真。
console.log(Boolean(0));//false
console.log(Boolean(1));//true
console.log(Boolean('hello'));//true
console.log(Boolean(''));//false;
console.log(Boolean(' '));//true;
//typeof():检测类型方法,简写: typeof 变量
数据类型:
基本的数据类型:number/string/boolean/null(空对象/空指针)/undefined(未定义,未赋值或者初始化)
复合(引用)的数据类型:object(对象)
两个特殊的数据类型:null/undefined
var num;
alert(typeof num);//类型:undefined 值:undefined
var num=null;
alert(num);//null
alert(typeof num);//object
null和undefined除了和自己比较是true之外,其他的字符和他们比较都是false;
alert(null==null);
alert(undefined==undefined);
alert(null==undefined);
alert(true==null); null不转换
alert(''==null);
alert(0==null);
alert(false==null);
alert(1==null);
特殊情况
alert(null>0);//false null转数字0
alert(null<0);//false null转数字0
alert(null<=0);//true null转数字0
alert(null>=0);//true null转数字0
alert(null==0);//false null不转换
//&& 与、|| 或、! 非
//逻辑与:只有在第一个操作数和第二个操作数都为真的情况下,结果为真。and
alert(5>3 && 6>5);//true
alert(5<3 && 6>5);//false
alert(5<3 && fadsfdsafdsaf);//false 如果第一个参数数为假,后面的操作不会执行。
alert(5>3 && fadsfdsafdsaf);//报错
alert(1&&20);//20
alert(0&&5);//0 如果第一个参数数为假,后面的操作不会执行。输出第一个操作数的值。
alert(4&&0);//0
document.write('hello'&&'');//''空
document.write('分界');
document.write('hello'&&' ');//空字符
document.write('分界');
alert(false&&'');//false;输出第一个为假的。
alert(0&&'');//0
alert(''&&null);//''
alert(undefined&&null);//undefined
alert(null&&undefined);//null
alert(NaN && 0);//NaN
alert(NaN==NaN);//false;
alert('abc'==NaN);//false
总结:假的状态--非空即真,非0即真 , undefined,null,NaN
逻辑或:只有在两个操作数都为假的情况下,结果为假。也就是说如果第一个操作数的求值结果为真,就不会对第二个操作数求值了。or
alert(5<3 || 3>2);//true
alert(5<3 || 3<2);//false
alert(3>2||fdlaskfjkaddsafdasf)//true,第一个为真,后面忽略
alert(1||dasfkdasjfk);//1
alert(dasfkdasjfk||1);//报错 dasfkdasjfk is not defined
alert(5||6);//5
alert(''||6);//6
逻辑非:逻辑非操作符首先会将它的操作数转换为一个布尔值,然后再对其求反。
逻辑非具有隐式转换。
alert(!!!!!!!!5);
alert(!null);//true
alert(!!5);
NaN:not a number
isNaN(); 检测括号里面的数字【不是一个数字】。 返回值是布尔值。
隐式转换 数字
alert(isNaN(2));//false
alert(isNaN('2'));//false
alert(isNaN('abc'));//true
alert(isNaN(''));//false 数字
alert(isNaN(null));//false 0
alert(isNaN(undefined));//true NaN
alert(isNaN(0));//false
alert(isNaN(NaN));//true
alert(isNaN(true));//false 1
alert(isNaN(false));//false 0
alert(isNaN('123abc'));//true
js定义的数学方法
Math.round();//将括号里面的数字四舍五入成整数。
Math.ceil();//将括号里面的数字向上取整。
Math.floor();//将括号里面的值向下取整。
Math.abs();//取绝对值
Math.sqrt();//开根号
Math.random();//随机产生0-1之间的数字,不包括1
Math.pow();//将幂,里面的第一个数字,底数,第二个数字,指数
Math.max();//取括号里面的最大的数字,多个数字逗号分隔。
Math.min();//取括号里面的最小的数字
Math.PI;//3.141592653589793
alert(isNaN('2'));//false
alert(isNaN('abc'));//true
alert(isNaN(''));//false 数字