Day1基本语法.docx

1、Day1基本语法学习方法一、 键盘指法二、 编程习惯三、 大胆动手四、 保持好奇心五、 乐观面对错误就业能力一、 分析能力二、 独立思考能力三、 程序阅读能力四、 程序排错能力五、 独立编写程序能力六、 团队协作能力七、 学习能力八、 善于总结的能力专业技能JS基本语法一、 Javascript基本介绍及发展趋势(一) JavaScript概述1. 概念：JavaScript是一种基于对象和事件驱动的客户端脚本语言1) JavaScript最初的设计是为了检验HTML表单输入的正确性。2) JavaScript起源于Netscape(网景)公司的LiveScript语言2. 作用：JavaSc

2、ript 诞生于 1995 年。它当时的目的是为了验证表单输入的验证。因为在 JavaScript问世之前，表单的验证都是通过服务器端验证的。而当时都是电话拨号上网的年代，服务器验证数据是一件非常痛苦的事情。1995 年，当时工作在 Netscape(网景)公司的布兰登(Brendan Eich)为解决类似于“向服务器提交数据之前验证”的问题。在 Netscape Navigator 2.0 与 Sun 公司联手开发一个称之为LiveScript 的脚本语言。为了营销便利，之后更名为JavaScript3. 标准：第一个标准的诞生ECMA-262（Jscript和JavaScript）1) 组

3、成部分：a) 语法b) 类型c) 语句d) 关键字e) 保留字f) 操作符g) 对象4. JavaScript组成1) ECMAScript（核心）2) DOM：Document Object Model（文档对象模型）3) BOM：Browser Object Model（浏览器对象模型(二) 发展趋势：自从上世纪90年代中期发行以来，JavaScript就已经成为最流行的Web开发语言之一了。在2012年9月份，行业分析公司RedMonk就公布了JavaScript在开发语言里已经处于遥遥领先的地位。这主要归功于JavaScript提供丰富的、动态的网页内容的能力，以及JavaScript

4、的轻便性和高易用性。尽管JavaScript最初只是一个浏览器脚本语言，但是近几年，我们已经能够明显看到它在不断地演变：在桌面端、移动设备和服务端Web App领域都有所发展。在不久的将来，JavaScript有望成为IT企业里占据主导地位的开发语言最终取代现在普遍使用的C，C+和Java开发语言。二、 JS和H5的关系HTML5实际上并没有多少与HTML有关，它其实就是JavaScript。HTML本身有什么变化？不过一些新标签而已，况且那个新标签都不难理解。HTML5的威力在于让你能用JavaScript来创建这些标签。假如没有后台代码通过Canvas来创建动画、游戏，或者通过它来实现一些

5、数据的可视化，这个标签也没有大用处。从浏览器开始支持Canvas开始，我已经看到了Asteroids（行星游戏）的上百个实现，那都是开发人员为熟悉这个新特性所做的练习。有的比较粗糙一些，而有的则极其精美。这些完全都要归功于JavaScript。由此可见，HTML5并不是以尖括号为特征的标签语言的一次大的改进，其实质是赋予了JavaScript更强大的能力。WebGL库（当前还羽翼未丰）支持在HTML5的画布中绘制实时的3D图形。HTML5的地理位置支持在浏览器中实现LBS（Location Based Service）应用这都是手机的基本配置。而持久存储以及离线功能则为开发能与桌面应用媲美，但

6、却在浏览器中运行的全功能应用奠定了基础。目前，就连增加多点触摸事件的实验性的库也已经出现了。凡此种种，无一不是实实在在的JavaScript特性。HTML5只是为这些高级功能的发挥提供了舞台。退一步讲，不依赖于HTML5的浏览器端开发库也取得了长足的进步。长久以来，JavaScript一直都是在HTML中实现动态效果的不二之选。可两个问题迟迟得不到解决：一是浏览器兼容性问题，二是直接操作DOM太麻烦。jQuery让这两个问题霎那间消失得无影无踪，这个库已经成为现代基于浏览器的客户端开发的基本配置。不过，并非只有jQuery。Protovis、还有D3，都可以让你直接在浏览器中创建复杂的交互性数

7、据可视化效果，有史以来第一次让浏览器成为了展示数据的一个重要媒介。三、 编写JS及如何运行JS(一) 使用1. 标签的属性1) Language=”javascript”已废弃。原来用于代码使用的脚本由于大多数浏览器忽略它，所以不用了。2) Src表示要引入的外部文件3) Type表示脚本语言的类型2. 输出方法1) document.write方法a) 在页面中输出内容2) Alert方法a) alert():带有一个确定按钮的警告框i. 如果括号中是数字就不须要加引号ii. 如果是其它非数字数据要加引号（不区分单引号或双引号），在JS中只要加上引号就叫做字符串。引号嵌套时要注意不能交叉使用

8、引号 JS语言中，所有的标点符号都是英文半角状态3) console.log方法a) 在控制台输出，是程序员最常用的排错工具4) 如何输出换行a) 如果是document.write就用标签换行b) 如果是alert就用转义字符n(表示换行)t :表示横向跳格（一次8个空格）5) 原样输出标签（<代表）3. 注释1) 作用a) 给程序加解释文字b) 注销代码2) 表示符a) 单行注释 /b) 多行注释 /* */4. 引入JS文件的方式1) 内部添加2) 外部引入js文件3) 注：a) 必须是双标签b) 从外部引入JS文件时，script标签中不允许写入任何内容，系统不会执行标签中的任何

9、内容四、 变量命名规则和关键字的介绍(一) 标识（志）符：标识变量、数组、函数等的有效字符序列。(二) 标识符的命名规则1. 名字中只能包含字母、数字、下划线、$、（中文）2. 不能以数字开头3. 不能是保留字或关键字4. 具有相关含义5. 驼峰命名1) 大驼峰：如ZhongHuaRenMinGongHeGuo2) 小驼峰：如zhongHuaRenMinGongHeGuo6. 匈牙利命名法：1) Int iNum:以i开头的变量存储整数2) Float fNum:以f开头的变量存储小数3) Boolean bBoo:以b或bo开头的变量存储布尔变量4) String sStr:以s开头的变量存

10、储一个字符串5) Char cCh:以c开头的变量存储一个字符6) Object obj:以o开头的变量存储对象7) Array arr:以arr开头的变量存储数组8) Function fn:以fn开头的变量存储函数(三) 关键字和保留字：系统将一些特定字符用于特殊使用的，称为保留字。关键字：break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof保留字：ab

11、stract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public 五、 变量的概念及基本运算(一) 变量的概念：在内存中开辟一块空间，用于存储数据，且随着程序的运行，数据有可能发生变化，所以称为变量(二) 变量的声明

12、：1. 显示声明：var 变量名;（varible:变量）1) var 变量名 = 常量/变量/表达式;a) 如：var num; var num = 3 + 2;2) 显示声明可一次声明多个变量，变量之间以逗号（英文半角）分隔a) 如：var numOne,str = “”,bo = false;2. 隐式声明：变量名 = 常量/变量/表达式;1) 如：num = 4 / 2;3. 变量的赋值：1) 变量的初始化：定义变量的同时就给变量赋值2) 先声明后赋值4. 松散类型（弱类型）：声明变量不须要确定是什么类型的变量。强类型：C语言 int num;(三) 算术运算符1. 表达式：由变量、常

13、量和操作符组成。单独一个变量或常量也叫表达式2. 算术运算符1) * ：乘a) 数字类型相乘，正常相乘b) 数字(字符串）类型乘以字符串（数字）类型，先将字符串自动转换为数字，如果可以转换，则正常相乘，如果转换不了数字，结果是NaNc) 乘以布尔值时，先将true转为1 false转为0 再计算d) 乘以null时，先将nulll转为0再计算e) 乘以undefined时，先将undefined转为数字，不能转，所以转成了NaN，结果就是NaNf) 如/console.log(4*4); /16/console.log(4*a); /NaN:Not a Number 类型是：Number/co

14、nsole.log(4*4a);/console.log(4 * true); /4/console.log(4 * false); /0/console.log(4 * null); /0/console.log(4 * undefined); /NaN2) / :除a) 规则同*b) 注：console.log(0/4);console.log(4/0); /Infinity无穷console.log(0/0); /NaN3) % ：模（取余）a) 规则同*b) 如：console.log(4%3); /1console.log(4%2); /0console.log(4%5); /4co

15、nsole.log(4%6); /4console.log(4%3.3);4) - ：减a) 规则同*b) 如：console.log(8 - 4);console.log(8 - 4a);console.log(8 - true);console.log(8 - false);console.log(8 - null);console.log(8 - undefined);5) + ：加a) 如果加号两边有一个是字符串，就进行连接作用b) 数字（不包含NaN）加上 true (1) 、false(0) 、null(0)c) 数字（包含NaN）加上undefined、NaN，结果都是NaNd)

16、 如:document.write(3 + 3);document.write();document.write(3 + true + false + null);document.write();document.write(3 + NaN);document.write();document.write(3 + undefined);/document.write(3 + true + false);document.write(4 + 4 + 8 + null + undefined);第二节：应用一、 为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？二、 小明要到美国旅游

17、，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。提示：摄氏度与芈氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)保留3位小数第三节一、 扩展：数据类型(一) 基本数据类型1. Number：数字类型 3 -3.3 64位浮点数形式存储（相当于C语言中的Double）2. String:字符串类型 ab bc 只要加引号的就是字符串3. Boolean:布尔类型 true(真) false(假)(二) 特殊数据类型1. null:表示空，它的类型是Object（对象）2. undefined:未定义它的类型

18、是Undefined类型(三) 复杂数据类型1. Array：数组它的类型是Object(对象）2. Object：对象(四) 官方类型标准：1. 简单类型(基本数据类型)：Number/String/Boolean/null/undefined2. 复杂类型（复合数据类型）：Object二、 自增自减运算符(一) + ：递增（每次加1） /常用在循环语句中。(二) - - :递减（每次减1）(三) 运算逻辑：1. i+:（后缀自增）先取出变量i中的值参与运算，再将i的值加12. +i:(前缀自增）先将i的值加1，再取i的值参与运算3. i-与-i同上三、 关系运算符（结果是布尔值：true、

19、false)(一) :大于1. 数字类型比较：正常比较2. 数字类型和字符串类型比较：将字符串转成数字，如果可以正常转成数字，正常比较，如果不能转成数字，则转成NaN，结果为false3. 字符串类型比较，依次比较4. 一律不能正常比较的，结果都是false(二) = :大于或等于1. 规则同大于(四) 3);alert(4 3);alert(4 100);alert(4 a);alert(98 a);alert(2 100);alert(我你);alert(4 true)alert(4 undefined);alert(4 NaN);alert( 3 = 3);alert(3 = 3);al

20、ert(3 = 3);alert(false = null);alert(NaN = NaN);alert(NaN = NaN);(一十一) 切记：1. alert(null = undefined); /true2. alert(null = ); /false3. alert(null = 0); /false4. alert(null = false); /false5. alert(null = undefined); / false四、 逻辑运算符：0:表示假，其它非0的数据表示真表示假：NaN、undefined、false、null、”(一) ！：非真即假，非假即真1. 如：al

21、ert(!0); alert(!1); alert(!-2); alert(!null); alert(!undefined); alert(!NaN); alert(!中); alert(!(3=3); alert(!3 = 0); alert(!0 !=1); alert(!(null = undefined); alert(!(null = );alert(!(null = 0);(二) &:与（并且）1. 逻辑关系：先判断&左边的表达式，如果表达式的值为false,则返回左边表达式的值（此时为&的短路问题）。如果表达式的值为true，则继续判断右边表达式的值，返回右边表达式的值。2.

22、如：alert(3-3&8); alert(3=3&8); var a = 3;alert(!(3=3)&(a = 8); console.log(a); var a = 3;alert(!(3=3)&(a = 8); console.log(a); (三) |:或（或者）1. 逻辑关系：先判断|左边的表达式，如果表达式值为true时，则返回左边表达式的值（此时，为| 的短路问题)。如果表达式值为false时，返回右边表达式的值。2. 如：var a = 3;alert(!(3=3)|(a = 8); console.log(a); var a = 3;console.log(!(3=3)|(

23、a = 8); console.log(a); (四) 练习：1. 输出下列表达式的值。1) (1003)&(ac)2) (1003)|(ac)3) !(1003)2. 构造一个表达式来表示下列条件：1) number等于或大于90，但小于100 2) ch不是字符q也不是字符k 3) number界于1到9之间（包括1不包括9），但是不等于54) number不在1到9之间3. 判断这个字符是空格，是数字，是字母4. 有3个整数a,b,c，判断谁最大，列出所有可能5. 判断year表示的某一年是否为闰年，用逻辑表达式表示。闰年的条件是符合下面二者之一：1) 能被4整除但不能被100整除2)

24、能被400整除五、 三元运算符（三目运算符、条件运算符）(一) 格式：（条件）？表达式1：表达式21. 如果（条件成立）？则执行表达式1；否则：执行表达式2(二) 逻辑关系：先计算条件的值，值为true时，执行？后面的表达式1，值为false时，执行：后面的表达式2(三) Demo:1. 求一个三位数的和2. 判断一个年份是闰年还是平年1) 能被4整除但不能被100整除或能被400整除的年份是闰年3. 判断一个数是偶数还是奇数4. 判断一个数是正数还是负数六、 赋值运算符(一) 简单赋值：= 将赋值号右边表达式的值存入左边变量(二) 复合算术赋值：+= -= *= /= %=(三) 运算逻辑：

25、取运算符左边变量中的值与运算符右边表达式的值进行相应的算术运算，运算后的结果再次赋值给左边的变量。1. 如：var a = 5;a += 4; /a = a + 4;(四) 练习：var i=5;var a=3;a+=+i + +i - i+ + i+;var b=a+ + i+ + +a + a+ + a+;求：i、a、b的值分别是多少？七、 特殊运算符(一) typeof ：检测简单数据类型1. 如：console.log(typeof -4); /Number 返回值”numberconsole.log(typeof ); /String 返回值stringconsole.log(typ

26、eof false); /Boolean 返回值booleanconsole.log(typeof null); /Object 返回值 objectconsole.log(typeof undefined); /Undefined 返回值：undefinedconsole.log(typeof typeof 3); /String string/typeof 3 number/typeof number string(二) new :创建对象1. 如：var oNum = new Number();(数字对象)var oStr = new String(); (字符串对象)var oBoo

27、= new Boolean(); (布尔对象)var oArr = new Array(); (数组对象)var oRe = new RegEXP(); (正则表达式对象)var obj = new Object(); (对象)八、 类型的转换(一) 自动类型转换(二) 强制类型转换1. isNaN();判断括号中的表达式的值是否是NaN,如果是NaN,则返回true,否则返回false1) 如：/console.log(isNaN(love);/console.log(isNaN(888 666);console.log(isNaN(3+undefined);2. parseInt():将字

28、符串强制转换成整数（必须以有效数字开头才会转成数字，否则转成NaN）1) 如：console.log(parseInt(23.45abc);console.log(parseInt(abc123);3. parseFloat():将字符串强制转换成小数（必须以有效数字开头才会转成小数，否则转成NaN）1) 如：console.log(parseFloat(34.45.56.abc);console.log(parseFloat(sa33);4. Number():将字符串强制转换成数字（整个字符串必须是有效的数字才可以转，否则转成NaN）1) 如：console.log(Number(34.2

29、3);console.log(Number(23 34);console.log(Number(2.3.4);5. 扩展：eval():将字符串强制转换成表达式并返回表达式的值1) console.log(eval(3+4);console.log(eval(3+undefined);九、 八进制和十六进制的介绍(一) 八进制：逢八进一 0开头的数字表示八进制(二) 十六进制：逢十六进一 0x开头的数字表示十六进制1. 0 1 2 3 4 5 6 7 8 9 A B C D E F一十、 扩展：代码规范(一) 代码缩进（JS/html）(二) 运算符两边的空格(三) 语句最后的;号(四) 小括号的嵌套要加空格(五) 双