Day01 js基本语法

作者: azure_1122 | 来源:发表于2018-01-08 11:46 被阅读0次

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 数字