JS(进阶)慕课学习笔记(1).doc
《JS(进阶)慕课学习笔记(1).doc》由会员分享,可在线阅读,更多相关《JS(进阶)慕课学习笔记(1).doc(251页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、Four short words sum up what has lifted most successful individuals above the crowd: a little bit more.-author-dateJS(进阶)慕课学习笔记(1)让你认识JS让你认识JS3什么是变量3给变量取个名字(变量命名)4确定你的存在(变量声明)5多样化的我(变量赋值)5表达出你的想法(表达式)6我还有其它用途( +号操作符)7自加一,自减一 ( +和- -)7较量较量(比较操作符)8我与你同在(逻辑与操作符)8我或你都可以 (逻辑或操作符)9是非颠倒(逻辑非操作符)9保持先后顺序(操作符优
2、先级)10一起组团(什么是数组)10组团,并给团取个名(如何创建数组)11谁是团里成员(数组赋值)12团里添加新成员(向数组增加一个新元素)13呼叫团里成员(使用数组元素)13了解成员数量(数组属性length)13二维数组14做判断(if语句)15二选一 (if.else语句)15多重判断(if.else嵌套语句)16多种选择(Switch语句)17重复重复(for循环)19反反复复(while循环)21来来回回(Do.while循环)22退出循环break23继续循环continue24什么是函数25定义函数26函数调用27有参数的函数27返回值的函数28什么是事件28鼠标单击事件( on
3、click )29鼠标经过事件(onmouseover)29鼠标移开事件(onmouseout)30光标聚焦事件(onfocus)31失焦事件(onblur)32内容选中事件(onselect)33文本框内容改变事件(onchange)34加载事件(onload)35什么是对象37Date 日期对象38返回/设置年份方法39返回星期方法39返回/设置时间方法40String 字符串对象40返回指定位置的字符40返回指定的字符串首次出现的位置41字符串分割split()42提取字符串substring()42提取指定数目的字符substr()43Math对象44向上取整ceil()45向下取整f
4、loor()46四舍五入round()46随机数 random()47Array 数组对象48数组连接concat()49指定分隔符连接数组元素join()50颠倒数组元素顺序reverse()51选定元素slice()51数组排序sort()52window对象53JavaScript 计时器54计时器setInterval()55取消计时器clearInterval()55计时器setTimeout()56取消计时器clearTimeout()57History 对象58返回前一个浏览的页面window.history.back()59返回下一个浏览的页面window.history.fo
5、rward()59返回浏览历史中的其他页面window.history.go(number)59Location对象60Navigator对象61userAgent61screen对象62认识DOM63getElementsByName()方法65getElementsByTagName()方法66区别getElementByID,getElementsByName,getElementsByTagName67getAttribute()方法68setAttribute()方法69节点属性69访问子结点childNodes70访问子结点的第一和最后项71访问父节点parentNode71访问兄
6、弟节点72插入节点appendChild()74插入节点insertBefore()74删除节点removeChild()75替换元素节点replaceChild()77创建元素节点createElement78创建文本节点createTextNode79浏览器窗口可视区域大小80网页尺寸scrollHeight81网页尺寸offsetHeight81网页卷去的距离与偏移量81让你认识JS你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已。我们还需使用Ja
7、vaScript增加行为,为网页添加动态效果。准备好,让JavaScript带你进入新境界吧!JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)JS进阶篇学习什么?在JavaScript入门篇中,我们学习了如何插入JS、输出内容及简单的DOM操作,JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作,制作简单的网页动态效果。什么是变量什么是变量? 从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒
8、子,盒子用来存放物品,物品可以是衣服、玩具、水果.等。给变量取个名字(变量命名)我们为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。我们赶快给变量取个好名字吧!变量名字可以任意取,只不过取名字要遵循一些规则:1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。如下:正确: mysum _mychar $numa1 错误: 6num /开头不能用数字 %sum /开头不能用除(_ $)外特殊符号,如(% + /等) sum+num /开头中间不能使用除(_ $)外特殊符号,如(% + /等)2.变量名区分大小写,如:
9、A与a是两个不同变量。3.不允许使用JavaScript关键字和保留字做变量名。确定你的存在(变量声明)我们要使用盒子装东西,是不是先要找到盒子,那在编程中,这个过程叫声明变量,找盒子的动作,如何表示:声明变量语法: var 变量名; var就相当于找盒子的动作,在JavaScript中是关键字(即保留字),这个关键字的作用是声明变量,并为变量准备位置(即内存)。var mynum ; /声明一个变量mynum当然,我们可以一次找一个盒子,也可以一次找多个盒子,所以Var还可以一次声明多个变量,变量之间用,逗号隔开。var num1,mun2 ; /声明一个变量num1注意:变量也可以不声明,
10、直接使用,但为了规范,需要先声明,后使用。多样化的我(变量赋值)我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢?我们使用=号给变量存储内容,看下面的语句:var mynum = 5 ; /声明变量mynum并赋值。这个语句怎么读呢? 给变量mynum赋值,值为5。我们也可以这样写:var mynum; /声明变量mynummynum = 5 ; /给变量mynum赋值注:这里=号的作用是给变量赋值,不是等于号。盒子可以装衣服、玩具、水果.等。其实,变量是无所不能的容器,你可以把任何东西存储在变量里,如数值、字符串、布尔值等,例如:var num1 = 123; / 12
11、3是数值var num2 = 一二三; /一二三是字符串var num3=true; /布尔值true(真),false(假)其中,num1变量存储的内容是数值;num2变量存储的内容是字符串,字符串需要用一对引号括起来,num3变量存储的内容是布尔值(true、false)。表达出你的想法(表达式)表达式与数学中的定义相似,表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。我们先看看下面的JavaScript语句:生活中“再见”表达方法很多,如:英语(goodbye)、网络语(88)、肢体语(挥挥手)等。在JavaScript表达式无处不在,所以一定
12、要知道可以表达哪些内容,看看下面几种情况:注意:串表达式中mychar是变量注意:数值表达式中num是变量注意:布尔表达式中num是变量我还有其它用途( +号操作符)操作符是用于在JavaScript中指定一定动作的符号。(1)操作符看下面这段JavaScript代码。sum = numa + numb;其中的=和+都是操作符。JavaScript中还有很多这样的操作符,例如,算术操作符(+、-、*、/等),比较操作符(、=、 90”,所以小红考试成绩高。其中大于号 就是比较操作符,小红考试成绩和小明考试成绩就是操作数,并且是两个操作数。也就是说两个操作数通过比较操作符进行比较,得到值为真(t
13、rue)和假(false)。在JavaScript中,这样的比较操作符有很多,这些操作符的含义如下:看看下面例子:var a = 5;/定义a变量,赋值为5var b = 9; /定义b变量,赋值为9document.write (a=b); /a大于或等于b的值吗? 结果是假(false)document.write (a!=b); /a不等于b的值吗? 结果是真(true)document.write (a=b); /a等于b的值吗? 结果是假(false)我与你同在(逻辑与操作符)数学里面的“ab”,在JavaScript中还表示为ab;数学中的“b大于a,b小于c”是“aba & ba
14、 |ab; /ba是true,ab是false,c是true逻辑或操作符值表:注意:如果A为真,A |B为真,不会在执行B; 反之,如果A为假,要由 B 的值来决定A | B 的值。是非颠倒(逻辑非操作符)!是逻辑非操作符,也就是不是的意思,非真即假,非假即真。好比小华今天买了一个杯子,小明说:杯子是白色的,小亮说:“杯子是红色的”,小华说:小明说的不是真话,小亮说的不是假话。猜猜小华买的什么颜色的杯子,答案:红色杯子。逻辑非操作符值表:看看下面代码,变量c的值是什么:var a=3;var b=5;var c;c=!(ba); / ba值是true,! (ba)值是falsec=!(ba);
15、 / ba值是false, ! (b10 & numb * 32; /结果为false一起组团(什么是数组)我们知道变量用来存储数据,一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果需要存储更多数据,那就会变的更麻烦。我们用数组解决问题,一个数组变量可以存放多个数据。好比一个团,团里有很多人,如下我们使用数组存储5个学生成绩。数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值。我们知道变量用来存储数据,一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩
16、,就需要10个或20个变量来存储,如果需要存储更多数据,那就会变的更麻烦。我们用数组解决问题,一个数组变量可以存放多个数据。好比一个团,团里有很多人,如下我们使用数组存储5个学生成绩。数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值。组团,并给团取个名(如何创建数组)使用数组之前首先要创建,而且需要把数组本身赋至一个变量。好比我们出游,要组团,并给团定个名字“云南之旅”。创建数组语法:var myarray=new Array(); 我们创建数组的同时,还可以为数组指定长度,长度可任意指定。var myarray= new Array(8);
17、/创建数组,存储8个数据。 注意:1.创建的新数组是空数组,没有值,如输出,则显示undefined。2.虽然创建数组时,指定了长度,但实际上数组都是变长的,也就是说即使指定了长度为8,仍然可以将元素存储在规定长度以外。谁是团里成员(数组赋值)数组创建好,接下来我们为数组赋值。我们把数组看似旅游团的大巴车,大巴车里有很多位置,每个位置都有一个号码,顾客要做在哪个位置呢?第一步:组个大巴车第二步:按票对号入座 大巴车的1号座位是张三 大巴车的2号座位是李四数组的表达方式:第一步:创建数组var myarr=new Array(); 第二步:给数组赋值 myarr1= 张三; myarr2= 李四
18、;下面创建一个数组,用于存储5个人的数学成绩。var myarray=new Array(); /创建一个新的空数组myarray0=66; /存储第1个人的成绩myarray1=80; /存储第2个人的成绩myarray2=90; /存储第3个人的成绩myarray3=77; /存储第4个人的成绩myarray4=59; /存储第5个人的成绩注意:数组每个值有一个索引号,从0开始。我们还可以用简单的方法创建上面的数组和赋值:第一种方法:var myarray = new Array(66,80,90,77,59);/创建数组同时赋值第二种方法: var myarray = 66,80,90,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JS 进阶 学习 笔记
限制150内