| javascript组织结构图 javascript的组成及每部分的作用 | 您所在的位置：网站首页 › javascript的组成部分和作用 › javascript组织结构图 javascript的组成及每部分的作用 |
javascript组织结构图 javascript的组成及每部分的作用
|
1 JavaScript的组成和书写位置 Javascript:运行在客户端(浏览器)的脚本语言，JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，与java没有直接的关系。 Java:服务器端的编程语言。 API:Application Programming Interface,应用程序编程接口。 1.1 JavaScript的组成
eg:DOM把整个页面映射为一个多层节点结构。 Sample PageHello World! 在DOM中，页面可以通过如下分层节点图表示：
1.2 JavaScript的书写位置 在HTML页面中插入JS的主要方法，就是使用元素，其中有6个属性： async:可选，异步脚本，[async或async="async"]告诉浏览器立即下载脚本，但不妨碍页面中其他操作。只对外部脚本有效。charset:可选，表示通过src属性指定的代码的字符集。defer:可选，延迟脚本，[defer="defer"]告诉脚本可以延迟到文档完全被解析和显示之后再执行[脚本将延迟到遇到标签后再执行]。只对外部脚本有效。src:可选，表示包含要执行代码的外部文件。type:可选，可以看成是language的替代属性。language:废弃。使用元素方式有三种：直接在页面中嵌入JS（包含行内、嵌入样式）和包含外部JS文件。嵌入JS代码时，只须为其指定type属性。 //行内 //嵌入样式,放在元素中，其中type属性可不写 alert('Hello World!'); //外部js:写在外部main.js文件中，在页面引入，src属性必写的，它指向外部JS文件的链接 2 基本概念语法： 区分大小写标识符：就是指变量名、函数名、属性名、函数的参数名，一般采用驼峰格式。比如firstSecond、myCar、doSomethingImportant。注释：单行注释(//)、多行注释(/*...*/)。严格模式语句:分号结尾。2.1 变量变量：计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。ECMAScript的变量是松散类型的，可以用来保存任何类型的数据。 目的：使用变量可以方便的获取或者修改内存中的数据。 2.1.1 如何使用变量 定义变量: var操作符[var是一个关键字]+变量名[即一个标识符]。var操作符定义出来的变量，它的作用域属于局部变量。 //var声明变量，会保存一个特殊的值 = undefined[默认值] //给age赋值后，age保存的数据变成10 var age; age =10 //同时声明多个变量并赋值,message声明没有赋值会保存一个特殊的值defined。 var age = 10, name = 'zs',message; //var作用域定义的变量属于局部变量 function test(){ var message001="hi"; //局部变量 message002="hello";//全局变量，不过不推荐，很难维护 } test() alert(message001); //错误！原因：调用函数时，会创建该变量并为其赋值，在此变量会销毁。 alert(message002); //"hi"2.1.2 变量的命名规则和规范 变量的命名规则和规范 规则-必须遵守的，不遵守会报错 由字母、数字、下划线、$符号组成，不能以数字开头不能是关键字和保留字，例如：for、while区分大小写规范-建议遵守的，不遵守不会报错 变量名必须有意义遵守驼峰命名法，首字母小写，后面单词的首字母需要大写，例如：userName、userPasswd案例 交换2个变量的值思路1：使用三方的变量进行交换 思路2：一般适用于数字的交换 不使用临时变量，交换两个数值变量的值2.2 数据类型5种简单数据类型：Number、String、Boolean、Undefined、Null。 1种复杂数据类型：Object[本质上是一组无序的明值对组成的]。 6种数据类型，如何进行检测给定变量的数据类型：typepf操作符。 //typeof操作符的操作数可以是变量(message)、也可以是数值字面量,操作符返回下列字符串 "undefined":这个值未定义 "boolean"：布尔值 "string":字符串 "number":数值 "object":对象或null "function"：函数 eg: var message="some string"; alert(typeof message); //"string" alert(typeof(message)); //"string" alert(typeof 95); //"number"2.2.1 Number类型 1.数值字面量：数值的固定值的表示法。 十进制：就是正常的数字八进制：以0开头[0~7]十六进制：0x开头[0~9及A~F]//十进制 var num = 9; //进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。 //十六进制 var num = 0xA; //数字序列范围：0~9以及A~F //八进制 var num1 = 070; // 对应八进制的56 var num2 = 019; // 无效的八进制数值，解析为十进制的19 var num3 = 08; //无效的八进制数值，解析为十进制的8 数字序列范围：0~7 //PS:如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析//1.浮点数值：数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。 //保存浮点数值需要的内存空间是保存整数值的两倍 eg: var floatNum1=1.1 var floatNum1=0.1 //极大或极小的值，用e表示法（即科学计数法)表示的浮点数值表示，e前面的数值乘以10的指数次幂。 var n = 3.125e7; //等于31250000 //浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数 var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004 console.log(0.07 * 100); // 不要判断两个浮点数是否相等 //2.数值范围 最小值：Number.MIN_VALUE，这个值为： 5e-324 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308 无穷大[正无穷]：Infinity 无穷小[负无穷]：-Infinity //3.NaN // NaN：not a number(非数值),一个特殊的数值，返回数值的操作数未返回数值的情况，NaN 与任何值都不相等，包括他本身 // isNaN: is not a number,isNaN（）函数，接受一个参数，可以是任何类型，而函数会帮我们确定这个参数是否"不是数值"。在接收一个值之后，会尝试将这个值转换为数值。 //任何不能被转换为数值的值都为true。 eg: alert(isNaN(NaN)); //true alert(isNaN(10)); //false（10是一个数值） alert(isNaN("10")); //false（可以被转换成数值10） alert(isNaN("blue")); //true（不能转换成数值） alert(isNaN(true)); //false（可以被转换成数值1）2.数值转换,3个函数可以把非数值转换为数值：number()、parseInt()、parseFloat()。 2.1 number转换规则boolean值：true和false分别被转换为1和0.数字值：简单的传入和返回.null:返回0.undefined：返回NaN.字符串： 只包含数字（转换为十进制数值，忽略前导值）有效的浮点（转换为对应的十进制浮点数值，忽略前导值）有效的十六进制格式（0xf,转换为相同大小的十进制整数值）字符串为空（转换为0）字符串其他格式（转换为NaN）对象：调用valueOf（）方法，按规则返回值，如果转换后是NaN(),调用对象toString()方法，然后再次依照前面的规则转换返回的字符串值。//Number()函数 eg: var num1=Number("Hello world!") //NaN var num2=Number("") //0 var num3=Number("00011") //11 var num4=Number(true) //1 //parseInt()函数，是否符合数值模式，默认找第一个非空格字符。 //第一个字符是数字字符，会往后解析，直到解析完所有后续字符或者遇到一个非数字字符 //可以识别出各种整数格式，以0x开头的数字字符，当成16进制，以0开头的数字字符，当成8进制来解析 eg: var num1=parsetInt("1234blue") //1234 var num2=parsetInt("") //NaN var num3=parsetInt("0xA") //10(十六进制） var num4=parsetInt("22.5") //22 var num5=parsetInt("070") //56（八进制），ECMAScript3认为是58（八进制），ECMAScript 5认为是0（十进制），前导的0会被认为无效 var num6=parsetInt("70") //70（10进制） var num7=parsetInt("0xf") //15（十六进制数） //指定基数会影响到转换的输出结果 eg: var num1=parsetInt("10"，2) //2(按二进制解析) var num2=parsetInt("10"，8) //8(按八进制解析) var num3=parsetInt("10"，10) //10 (按十进制解析) var num4=parsetInt("10"，16) //16(按十六进制解析) //parseFloat()可以识别前面讨论过的所有浮点数值格式，也包括十进制整数格式 eg: var num1=parseFloat("1234blue") //1234 var num2=parseFloat("0xA") //0，忽略前导的0 var num3=parseFloat("22.5") //22.5 var num4=parseFloat("22.34.5") //22.34，忽略后面那个点 var num5=parseFloat("09008.5") //9008.5 var num6=parseFloat("3.125e7") //312500002.2.2 String类型 //string类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。可以由单引号或双引号表示. eg: 'abc' "abc" //1.字符串字面量,字符串长度， length属性用来获取字符串的长度 '程序猿'，'程序媛' var str = '程序猿 Hello World'; console.log(str.length); //输出str的长度 //2.字符串拼接,字符串拼接使用 + 连接 console.log(11 + 11); console.log('hello' + ' world'); console.log('100' + '100'); console.log('11' + 11); console.log('male:' + true); PS: // 1. 两边只要有一个是字符串，那么+就是字符串拼接功能 // 2. 两边如果都是数字，那么就是算术功能。 //3.转换为字符串，将一个值转换为一个字符串有两种方式：toString（）方法和String（）方法。 eg://数值、布尔值、对象和字符串值都有toString（）方法。调用toString()方法不必传递参数，调用数值的toString()方法时，可以传递一个参数：输出数值的基数。 var age=11; var ageAsString=age.toString(); //字符串"11" var found=true; var foundAsString=found.toString(); //字符串"true" //String转换函数：String(),这个函数能够将任何类型的值转换为字符串，String()函数遵循下列转换规则 toString()方法：调用，返回相应的结果 null：则返回null,无toString()方法 undefined:返回undefined，无toString（）方法 eg: var value1=10; var value2=true; var value3=null; var value4; alert(String(value1)); //"10" alert(String(value2)); //"true" alert(String(value3)); //"null" alert(String(value4)); //"undefined"2.2.3 Boolean类型 Boolean转换规则:
- Boolean字面量：true和false，区分大小写。- 计算机内部存储：true为1，false为0 2.2.4 Undefined和Null 1. undefined表示已声明未赋值的变量，变量只声明的时候值默认是undefined。2. null表示一个空，变量的值如果想为null，必须手动设置。 2.2.5 复杂数据类型 对象：一组数据和功能的集合。对象可以通过执行new操作符后要跟创建的对象类型的名称来创建。 Object //创建自定义对象 var o=new Object() Object的每个实例都具有下列属性和方法： Constructor:保存着用于创建当前对象的函数。构造函数（constructor）就是Object(). hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。比如：hasOwnProperty("name")。 isPrototypeOf(object):用于检查传入的对象是否是另一个对象的原型。 PropertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。 toLocalString():返回对象的字符串表示，该字符串与执行环境的地区对应。 toString():返回对象的字符串表示。 valueOf():返回对象的字符串、数值或布尔值表示。2.2.6 数据类型转换 字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的。 Js中的原始数据类型：number、string、boolean、null、undefined、object。 //转换成字符串类型：toString()和String() var num = 5; console.log(num.toString()); //PS：有些值没有toString()，这个时候可以使用String()。比如：undefined和null //拼接字符串方式,num + ""，有字符串拼接时，默认其他字符转换成字符串，并返回字符串 //转换成数值类型：Number() //Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN //parseInt() var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束 var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN //parseFloat() //parseFloat()把字符串转换成浮点数，parseFloat()和parseInt非常相似，不同之处在与parseFloat会解析第一个. 遇到第二个.或者非数字结束。如果解析的内容里只有整数，解析成整数- +，-0等运算 var str = '500'; console.log(+str); // 取正 console.log(-str); // 取负 console.log(str - 0); //转换成布尔类型:0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true2.3 操作符操作符：描述了一组用于操作数据值的操作符。包含算数操作符（如加号、减号）、位操作符、关系操作符、相等操作符。适应于很多值：字符从、数字值、布尔值、对象。在操作对象时，相应的操作符通常都会调用对象的valueOf()和（或）toString()方法，以便取得可以操作的值。 2.3.1 位操作符 位操作符：按内存中表示数值的位来操作数值，按64位格式存储。对于有符号的整数，32位中的前31位用于表示整数的值，第32位用于表示数值的符号（0为正，1位负）。 数值18的二进制：
左移：
右移：
2.3.2 一元操作符(一元运算符) A.一元操作符：只能操作一个值的操作符。 //1.递增和递减操作符[前置型和后置型] //前置型位于操作变量之前，以变量为中心，先变更变量的值，在进行运算。 //前置递增、前置递减与执行语句的优先级相等，整个语句从左到右被求值。 eg1: var age=29; ++age; //类似于 age=age+1; //前置递增，从29变更为30 --age; //类似于age=age-1; //前置递减，从29变更为28 eg2: var age=29; var anotherAge=--age+2; alert(age) //输出28 alert(anotherAge) //输出30 //后置型位于操作变量之后，递增和递减操作是在包含它们的语句被求值之后才执行的。 eg3: var num1=2; var num2=20; var num3=num--+num2; //等于22 var num4=num1+num2; //等于21 **总结** **前置++：先自身加1，后参与运算** **后置++：先参与运算，后自身加1** **上面两个理解后，下面两个自通** **前置-- ：先减1，后参与运算** **后置-- ：先参与运算，后减1**递增(++)和递减(--)操作符遵循的规则： 应用包含有效数字字符的字符串时，先将其转换为数字值，再执行加减1的操作。字符串变量变成数值变量。应用不包含有效数字字符的字符串时，将变量的值设置为NaN,字符串变量变成数值变量。应用布尔值false时，先将其转换为0再执行加减1的操作。布尔值变成数值变量。应用布尔值true时，先将其转换为1再执行加减1的操作。布尔值变成数值变量。应用浮点值时，执行加减1的操作应用于对象时，先调用对象的valueOf()方法，以取得一个可供操作的值，如果结果为NaN,则在调用toString()方法后再应用前述规则。对象变量变成数值变量。eg: var s1="2"; var s2="z"; var b=false; var f=1.1; var o={ valueOf:function(){ return -1; } }; s1++; //数值为3 s2++; //数值为NaN b++; //数值为1 f--; //数值为0.10000000000000009 o--; //值变成了-2B.一元加和减操作符 //一元加和减操作符主要用于基本的算数运算。 //一元加操作符，该操作符会像Number()转型函数一样对这个值执行转换。 eg: var s1="01"; var s2="1.1"; var s2="z"; var b=false; var f=1.1; var o={ valueOf:function(){ return -1; } }; s1=+s1; //值变成数值1 s2=+s2; //值变成数值1.1 s3=+s3; //值变成NaN b=+b; //值变成数值0 f=+f; //值未变，仍然是1.1 o=+o; //值变成数值-1 //一元减操作符，主要用于表示负数，例如将1转换成-1. var num=25; num=-num; //变成了-252.3.3 算术操作符 一、乘性操作符，主要包含3个：乘法、除法、求模。如果参与乘法计算的某个操作数不是数值，后台会先使用Number（）转型函数将其转换为数值。空字符串将被当做0，布尔值true将被当作1。 A.乘法操作符遵循的规则： 如果操作数是数值，常规乘法计算；如果乘积超过数值的表示范围，则返回Infinity或-Infinity.如果有一个操作数是NaN,则结果是NaNInfinity与0相乘，则结果是NaNInfinity与非0数值相乘，则结果是Infinity或-Infinity，取决于有符号操作数的符号如果是Infinity与Infinity相乘，则结果是Infinity如果有一个操作数不是数值，则在后台调用Number()将其转换为数值，然后在应用上面的规则//1.乘法操作符（*），由一个星号（*）表示，用于计算两个数值的乘积。 eg: var result=34*56;B.除法操作符由一个斜线符号(/)表示，执行第二个操作数除第一个操作数的计算。 除法操作符遵循的规则： 如果操作数都是数值，执行常规除法计算，超出数值的表示范围，则返回Infinity或-Infinity.如果有一个操作数是NaN，则结果是NaN如果是Infinity被Infinity除，则结果是NaN如果是零被零除，则结果是NaN如果是非零的有限数被零除，则结果是Infinity或-Infinity，取决于有符号操作数的符号如果是Infinity被任何非零数值除，则结果是Infinity或-Infinity，取决于有符号操作数的符号。如果有一个操作数不是数值，则在后台调用Number()将其转换为数值，然后再应用上面的规则//除法 var result=66/11;C.求模（余数）操作符由一个百分号(%)表示
求模操作符遵循的规则： 如果操作数都是数值，执行常规的除法计算，返回除得的余数如果被除数是无穷大值而除数是有限大的数值，则结果是NaN如果被除数是有限大的数值而除数是0，则结果是NaN如果是Infinity被Infinity除，则结果是NaN如果被除数是有限大的数值而除数是无穷大的数值，则结果是被除数如果被除数是零，则结果是零。如果有一个操作数不是数值，则在后台调用Number()将其转换为数值，然后再应用上面的规则//求模,结果为1 var result=26%5二 加性操作符 A.加法操作符(+)遵循的规则 如果两个操作符都是数值，执行常规的加法计算如果一个操作数是NaN,则结果是NaN如果是Infinity+Infinity，则结果是Infinity如果是Infinity+Infinity，则结果是Infinity如果是-Infinity加-Infinity，则结果是-Infinity如果是Infinity加-Infinity，则结果是NaN如果+0加+0，则结果是+0如果-0加-0，则结果是-0如果+0加-0，则结果是+0如果两个操作数都是字符串，则进行拼接如果只有一个操作数是字符串，则将另一个操作数转换为字符串，再进行拼接B.减法操作符(-)是另一个极为常用的操作符 如果两个操作符都是数值，执行常规的算术减法操作如果一个操作数是NaN,则结果是NaN如果是Infinity-Infinity，则结果是NaN如果是Infinity-Infinity，则结果是NaN如果是Infinity减-Infinity，则结果是Infinity如果是-Infinity减Infinity，则结果是-Infinity如果+0减+0，则结果是+0如果-0减-0，则结果是-0如果+0减-0，则结果是+0如果有一个操作数是字符串、布尔值、null或undefined，则现在后台调用Number()函数将其转换为数值，然后在根据前面的规则执行减法计算，如果转换的结果是NaN，则减法的结果就是NaN。如果有一个操作数是对象，则调用对象的valueOf()方法以取得表示该对象的数值，如果得到的值是NaN,则减法的结果是NaN.如果对象没有valueOf()方法，则调用toString()方法并将得到的字符串转换为数值。//减法 var result=2-1; var result1=5-true; //4,true被转换成了1 var result2=NaN-1; //NaN var result3=5-3; //2 var result4=5-""; //5, ""被转换成了0 var result5=5-"2"; //3，"2"被转换成了2 var result6=5-null; //5，null被转换成了02.3.4 逻辑运算符（布尔操作符） 布尔操作符 = 相等操作符，布尔操作符有3个：非（NOT）、与（AND）、或（OR）。 A.逻辑非操作符的规则： 操作数是一个对象，返回false操作数是一个空字符串，返回true操作数是一个非空字符串，返回false操作数是数值0，返回true操作数是任意非0数值（包括Infinity）,返回false操作数是null，返回ture操作数是NaN,返回true操作数是undefined，返回true//逻辑非 alert(!false) //true alert(!0) //true alert(!NaN) //true alert(!"") //true alert(!"blue") //false alert(!12345) //false //2个逻辑非操作符，会模拟Boolean()转型函数的行为。 alert(!!0) //false alert(!!NaN) //false alert(!!"") //false alert(!!"blue") //true alert(!!12345) //trueB.逻辑与 逻辑与操作符由两个和号（&&）表示，有2个操作数。 逻辑与遵循的规则： 第一个操作数是对象，则返回第二个操作数第二个操作数是对象，则只有在第一个操作数的求值结果为true的情况下才会返回该对象如果两个操作数都是对象，则返回第二个操作数如果有一个操作数是null，则返回null如果有一个操作数是NaN,则返回NaN如果有一个操作数是undefined，则返回undefined//逻辑与操作可以应用于任何类型的操作数 //逻辑与操作属于短路操操作，第一个操作数是false，则无论第二个操作数是什么值，都不会执行 eg1: var found = true; var result=(found && someUndefinedVariable); //发生错误 alert(result); //这一行不会执行 eg2: var found = false; var result=(found && someUndefinedVariable); //不会发生错误 alert(result); //会执行falseC.逻辑或 逻辑或操作符由两个(||)表示，有2个操作数。 逻辑或遵循的规则： 第一个操作数是对象，则返回第二个操作数第二个操作数是对象，则只有在第一个操作数的求值结果为true的情况下才会返回该对象如果两个操作数都是对象，则返回第二个操作数如果有一个操作数是null，则返回null如果有一个操作数是NaN,则返回NaN如果有一个操作数是undefined，则返回undefined//逻辑或操作可以应用于任何类型的操作数 //逻辑或操作属于短路操操作，第一个操作数的求值结果为true,就不会对第二个操作数求值了。 eg1: var found = true; var result=(found || someUndefinedVariable); //不会发生错误 alert(result); //会执行true eg2: var found = false; var result=(found && someUndefinedVariable); //会发生错误 alert(result); //这一行不会执行2.3.5 关系运算符（比较运算符） > < >= >>=2.3.7 运算符的优先级 优先级从高到低 () 优先级最高一元运算符 ++ -- ！算数运算符 先* / % 后 + -关系运算符 > >= < = 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true // 练习2 var num = 10; 5 == num / 2 && (2 + 2 * num).toString() === '22'2.4 表达式和语句表达式：可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。 语句：一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下，分割一个一个的语句。 流程控制：程序的三种基本结构。 顺序结构：从上到下执行的代码就是顺序结构、程序默认就是从上到下顺序执行的。 分支结构：根据不同的情况，执行对应代码。 循环结构：重复做一件事情。 2.4.1 分支结构-if语句 语法结构： //condition（条件）可以是任意表达式；而且对这个表达式求值的结果不一定是布尔值，会通过Boolean()转换函数将这个表达式的结果转换为一个布尔值 if (condition1) { // 执行语句1 } if (condition1){ // 成立执行语句1 } else { // 否则执行语句2 } if (condition1){ // 成立执行语句1 } else if (condition2){ // 成立执行语句2 } else if (condition3){ // 成立执行语句3 } else { // 最后默认执行语句4 } eg: if (i >25) { alert("Greater than 25."); }else if (i < 0) { alert("Less than 0."); }else { alert("between 0 and 25,inclusive.") }
案例： 求两个数的最大数 判断一个数是偶数还是奇数 分数转换，把百分制转换成ABCDE |
【本文地址】
公司简介
联系我们