请回答出班上任意一位同学的姓名:

软件网工2001

青,取之于蓝而青于蓝;冰,水为之而寒于水。

第一周评选

进步之星:卢豪聪,谢瑶,邬亮

优秀之星:熊飞龙,胡灏哲

第二周评选

进步之星:邬亮,熊飞龙

优秀之星:卢豪聪

第三周评选

进步之星:邬亮

优秀之星:熊飞龙

第四周评选

进步之星:胡灏哲

优秀之星:卢豪聪

第五周评选

进步之星:熊飞龙

优秀之星:胡灏哲

第六周评选

进步之星:熊飞龙,邬亮

优秀之星:胡灏哲

第七周评选

进步之星:邬亮

优秀之星:谢瑶

第八周评选

进步之星:邬亮,胡灏哲

优秀之星:谢瑶,熊飞龙

知识点:

第一周: 1)JS的定义: javascript于java不同,没有任何联系。 Javascript是前端当中的编程语言。 javascript包含三部分: i)js的语法核心:ECMAScript ii)DOM:规定了js如何操作HTML和CSS iii)BOM:规定了浏览器相关的知识 2)JS语法:输出 案例:输出“世界,你好!” document.write(); 文档输出 alert() 弹出警告框 innerHTML 设置该元素内部的html结构 innerText 设置该元素内部的文本结构 3)在HTML文档当中如何引入脚本js i)<script type="text/javascript" src="相对路径"></script> ii)<script>js代码</script> iii) 事件属性<p onclick="js代码"></p> 4)延伸知识点:如果一个标签的ID是什么,获取的时候则直接写id名 5)js变量声明: 弱类型语言 语法:var 自定义变量名称 自定义变量的规范: 一般地,以英文字母或者_或者$开头 最好能体现该数据的含义,var userName; 两种命名方式:匈牙利命名法(userNameArray),驼峰式命名法(userName) 变量的赋值使用等于号=, 思维方式的转变:将该值赋给该变量,或者说该值指针指向了该变量 js当中每写一条语句,进行换行 每写完一条语句,打一个分号进行分隔 变量可以形象地比喻为一个容器,它可以装东西 6)HTML注释: CSS注释/* */ JS注释:// 单行注释 , 多行注释/* */ 7) JS的基础之流程控制: i)顺序执行 ii)循环 for循环 for循环的语法: for(初始条件;判断条件;执行完一遍之后所执行的语句){ js代码 } 作用:重复性执行操作 衔接符使用+ Hbuilder 8) 运算符 算术运算符:+ - * / %(取余数) ++(累加+1) --(累减-1) +=(累加) -=(累减) *=(累乘) /=(累除) %=(累取模) 连接运算符:+(将两个字符连接起来),+=(累计连接) 比较运算符:> < >= <= ==(等于) ===(恒等于) !=(不等于) !==(恒不等于)=>产生的结果为真true或者假false 逻辑运算符:&&(并且and) ||(或者or) !(非不是not) 三元运算符(三目运算符): (表达式)?语句1:语句2 赋值运算符:= 9) JS流程控制 i)从上往下依次读取 ii)控制语句 for循环:for(初始条件;判断条件;执行完一次之后执行的操作){} while循环:初始条件 while(判断条件){ 执行完一次之后执行的操作 } do while 变体循环:不管第一次循环有没有符号条件,都会执行一次 iii)分支语句 单分支if(){},双分支if(){}else{},多分支if(){第一条路}else if(){ 第二条路}else if(){ 第三条路}...else{ 最后一条路} switch(表达式){ case 结果1:执行第一条路; break; case 结果2:执行第二条路; break;...default:最后一条路} break:中断执行,continue:跳过本次循环 第二周 1)数组: i)定义:存储一系列数据的集合 ii)语法:var arr = new Array("张三","李四","王五"); var arr = ['张三','李四','王五']; iii)用法: 用下标(索引值)来访问数组当中的数据(成员) 比如:arr[1]来访问第二个成员,从0开始进行索引 iv)延伸知识点:数组的分类:一维数组,二维数组,多维数组 二维数组:[['张三','李四'],['王五','钱六']] v)数组长度:length获取数组的成员个数 Math.random() 产生随机数>0 && <1 Math.floor() 将小数位数去掉,保留整数 函数的定义function 自定义函数名称(){ js代码} 2) 对象基础: i)定义:对象拥有属性和方法,能够自定义属性和方法的容器,该容器被称为 对象。 ii)使用:var car = new Object(); 赋予该对象属性 car.color = 'while'; car.kinds = '宝马'; 赋予该对象方法 car.driveCar = function(){ js代码} 鉴别属性方法:如果自定义名称后面是一个非函数,则该自定义名称被称为对象属性,如果自定义名称后面是一个函数,则该自定义名称被称为对象方法 var car = {color:'white',kinds:'宝马',driveCar:function(){js代码},... ...} 类似于键值对的形式书写 访问对象成员:car[对象成员] car.对象成员 iii)应用:产出数据=>和数组结合[{对象写法},{对象写法},{对象写法}] 3)JS函数: i)定义:用来存放一系列代码的集合 ii)语法:function(){ ... ... } function 自定义名称(){ ... ...} 专有名称:声明函数/定义函数 iii)匿名函数,非匿名函数 iv)函数是可以携带参数的,在函数的定义当中,参数被称为形参(形式参数) function 自定义名称(形参1,形参2,...){ ... ...} 函数中的形参的个数>=0 v)函数不会立马执行,JS引擎会将整个函数体先存储起来 vi)匿名函数一般声明有两种方式:var func = function(){ ...} bo.onclick = function(){ ...} vii) return 语句:返回 作用1:将函数内部的结果返回出来,能够被外部访问 作用2:阻断后面所有代码的执行 viii)函数调用:(can1,can2,can3,...)用括号来调用,在括号内部可以写参数,该参数被称为实参(实际参数),实际参数的个数>=0 实参的个数>=形参的个数 viiii)可选参数和必选参数:arguments参数集合(数组) vv)闭包:函数以及能被该函数访问到的变量的总和,该函数称为闭包函数。 vvi)匿名函数自动执行 (function(){})() (function(){}()) !function(){}() +function(){}() -function(){}() ~function(){}() var bo = function(){}() 4)JS数据类型:(弱类型语言) 数组Array 、 对象Object() 、 数值Number() 、 字符串String()、布尔对象Boolean()、null空、undefined未定义 5)布尔对象:true真=>1、false假=>0 使用:var bool = new Boolean(true); var bool = true; 一切字符串和数值(0除外)转化成布尔值都为真 Number()将布尔值转化成数值 6)数值对象: 使用:var num1 = new Number(1); var num1 = 1.234; 方法:toFixed()固定小数位数为多少位 toExponential()以科学计数法方式存储数值 toPrecision() 固定数值的精度 isNaN()判断该数据是否是非数字类型 第三周 1)数组: 循环变体:for in(也能应用到对象上) / for of length属性:数组的个数 pop() 删除数组当中的最后一个成员 shift() 删除数组当中的第一个成员 push() 在数组的结尾处追加成员 unshift() 在数据的开头处追加成员 splice() 既可以删除也可以添加 concat() 将数组融合 slice() 数组截取 join() 转化成字符串,有参数 toString() 转化成字符串,无参数 indexOf() 返回数组下标 reverse() 颠倒数组 sort() 排序 forEach(循环当前值,index,array) 对数组循环 map(循环当前值,index,array) 对数组循环,返回新数组 2)字符串对象: 声明:var str = new String('今天是晴天,天气闷热'); var str = '今天是晴天,天气闷热'; 字符串对象属性:length 字符个数 字符串对象方法:indexOf()索引字符 lastIndexOf() charAt()索引位置(charCodeAt()) slice(start,end)字符串截取 substring(start,end) 字符串截取 substr(start,count) 字符串截取 replace()替换 match()匹配 toUpperCase()大写 toLowerCase()小写 split(参数)将字符串转化成数组(join(参数)toString()) search()搜索 strike()加删除线 bold()加粗 typeof 、 constructor 检测数据类型 3)日期对象 定义:var dat = new Date(); 日期对象方法: .getFullYear() 获取年份 .getMonth() 获取月份 .getDate() 获取哪一天 .getDay() 获取星期几 .getHours() 获取小时 .getMinutes() 获取分数 .getSeconds() 获取秒数 .getMilliSeconds() 获取毫秒数 .set... ...设置相应的值(setFullYear()设置年份) .getTime() 生成时间戳 延伸知识点:setInterval(function(){ ... },1000); transform:rotate(旋转度数) 第四周 1,正则表达式对象: 作用:格式校验 声明:var reg = new RegExp(); // regular expression var reg = /匹配模式/修饰符; 特殊字符:^以。。。开头 $以。。。结尾 \d代表数字 {n}有n个 =>方括号 [] i)[abc] ii)[^abc] iii)[0-9] / [a-z] / [A-Z] /[A-z] (a|b|c)<=> [abc] \d 代表数字 <=> [0-9] \D 代表非数字 \w 代表单词字符,指的是英文字母和_以及数字 \W 代表非单词字符 .任意字符,如果需要匹配.,需要使用转义符\. \s 代表空白字符 \S 代表非空白字符 \n 代表换行字符 + >=1 * >=0 ? =0 || =1 {n} =n 修饰符:g全局搜索(global),i忽略英文字母大小写(ignorcase) m多行匹配(multpleline) 正则对象方法:test() 匹配成功返回true 字符串对象方法:.replace(old,new) 替换 第五周 1)正则表达式对象: 量词 + >=1 * >=0 ? =0 || =1 {n} =n {n1,n2} >=n1 && <=n2 {n1,} >=n1 ?特殊字符: 前瞻?=,负前瞻?! 后顾?<=,负后顾?捕获性分组和非捕获性分组 RegExp.$1,$2 正则表达式方法:test(),exec()执行后返回 toString() 字符串方法:replace() match() 匹配 search()搜索 split(/\d/gi)拆分成数组 2)算术对象: 属性:PI 圆周率 方法:产生随机数Math.random() 0到1 Math.floor()向下取整 Math.ceil()向上取整 Math.round()四舍五入 Math.max()最大数值 Math.min()最小数值 Math.abs()取绝对值(absolute) Math.pow(x,y) Math.tan() / Math.asin() / Math.cos() Math.sqrt() 取平方根 3)全局对象:5+2 、5-2 数据解析: parseInt() 解析成整形 parseFloat() 解析成浮点型 isNaN()判断是否是非数字类型 eval()自动执行 Number()转化成数值 String()转化成字符串 escape() 字符串编码 unescape() 字符串解码 encodeURI() 对网址进行编码 decodeURI() 对网址进行解码 encodeURIComponent() 对查询部分进行比啊那么 decodeURIComponent()对查询部分解码 第六周 1)自定义对象: i)声明: function 自定义对象名称(首字母大写)(参数){ this.属性名 = 参数; this.方法 = function(){ } } this指的是当前对象 (构造函数) ii)自定义对象的使用:var 自定义变量 = new 自定义对象名称() class 自定义对象名称{ constructor(can1,can2,can3){ this.属性名 = can1; } 方法(){ } } iii)继承prototype原型链,创建共享 call() apply() 更大范围的形式对象.call/.apply(更小范围的实例化对象,传递参数) DOM元素操作: DOM:Document Object Model文档对象模型: 对HTML和CSS进行操纵的语言(DOM会将HTML文档转化成DOM树) 1)DOM查找元素(节点) document.getElementById() 通过id名称来查找元素 document.getElementsByClassName() 通过class类名查找元素(集合=>数组) document.getElementsByTagName() 通过标签名称来查找元素(集合=>数组) document.getElementsByName() 通过name属性来查找元素(集合=>数组) ID名称是什么,则直接使用id名来选取元素 document.querySelector() 通过CSS选择器查找元素(查找第一个) document.querySelectorAll() 通过CSS选择器查找所有元素(集合=>数组) 2)DOM查找小范围元素 parentNode 查找上级元素 children 返回的是一个子元素集合(数组) childNodes 返回的是所有子内容集合(数组) nextSibling 查找下一个节点 nextElementSibling 查找下一个元素节点 previousSibling 查找上一个节点 previousElementSibling 查找上一个元素节点 childElementCount 获取元素的总个数 firstChild 第一个子节点 firstElementChild 第一个子元素 lastChild 最后一个子节点 lastElementChild 最后一个子元素 补充:.className能够设置标签的class类名 3)DOM对HTML结构的修改(增改删) .innerText 修改内部文本(修改、设置、获取) .innerHTML 修改内部的HTML结构 .value 修改表单控件的value值 .appendChild() 追加子元素 document.creatElement() 创建一个新元素 document.crateTextNode() 创建一个新文本节点 .insertBefore(newNode,oldNode) 在元素内部某一个节点之前插入 .replaceChild(newNode,oldNode) 替换节点 .cloneNode() 克隆节点 .removeChild(oldNode) 删除子节点 如果选择的元素已经存在与HTML文档中,会发生移动现象 第七周 1)DOM对HTML属性的操作: 增删改查: setAttribute('属性','属性值') 设置元素属性 =>增,改 getAttribute('属性') 查询(获取)元素属性 =>查 removeAttribute('属性') 删除元素属性 =>删 2)DOM对文本的操作 appendData(str) 追加 deleteData(start,count) 删除数据 substringData(start,count) 截取数据 replaceData(start,count,str)替换 insertData(start,str)插入数据 splitText(start) 拆分数据 3)DOM对CSS样式的操作 元素.style.css属性 既可以获取行内样式,也可以设置 元素.style.cssText 只能用来设置多个行内样式 .className 属性 用来设置css样式 window.getComputedStyle('哪个元素',null)[css单个属性] 用来获取css样式表当中的样式 4)DOM事件 具体的事件类型: click 点击事件 mouseover 鼠标经过效果 mouseout 鼠标离开效果 dblclick 双击 focus 聚焦 blur 失焦 change 文字发生改变并且失去焦点时触发 mousemove 鼠标移动 mousedown 鼠标按下去 mouseup 鼠标松开 keydown 键盘按下去 keyup 键盘松开 keypress 按键盘 load 加载完成之后执行 error 资源发生错误时触发的事件 事件绑定方式 i)on+事件名 ii) addEventListener(‘事件名称’,function(){},boolean)添加事件监听器 attachEvent(“事件名称”,函数) 事件捕获,事件冒泡 两者的区别: on+事件只能绑定一次,会发生覆盖现象 addEventListener 可以绑定多次,不会发生覆盖现象 事件委托:事件对象,是写在函数括号内的一个参数 能为未来元素绑定事件(事件委托) target目标元素 currentTarget 目前的当前元素 srcElement 目标元素 nodeName节点名称 nodeType节点类型 nodeValue节点值 事件取消绑定 on+事件名称 = null removeEventListener() detachEvent() 阻止默认行为: preventDefault() 非IE return false; IE 取消事件冒泡: stopPropagation() 非IE cancelBubble = true; IE 事件对象的属性: keyCode键盘码 clientX/clientY 浏览器窗口的位置 pageX/pageY 页面的位置 screenX/screenY 屏幕的位置 第八周 知识点: 1)JS闭包 概念:函数以及能被函数访问的外部变量的总和 var x = 1; function show(){ console.log(x);} 模拟私有变量 2)匿名函数自执行的几种方式: (function(){})() (function(){}()) ... ... 3)DOM元素对象element属性 element.clientHeight/.clientWidth 可见高度/可见宽度 element.scrollHeight/Width 整体高度/整体宽度 element.offsetHeight/Width 元素高度/元素宽度 element.offsetLeft/Top 左偏移/上偏移 element.offsetParent 偏移容器 element.scrollTop 滚动上边距 element.scrollLeft 滚动左边距 4)BOM:browser object modeul浏览器对象模型 窗口window对象: (全局对象的方法:isNaN()判断是否是非数字类型,parseInt()解析成整形 parseFloat()解析成浮点型,escape()编码,unescape()解码,encodeURI()编码,decodeURI()解码,encodeURIComponent()编码,decodeURIComponent()解码) var x = 1; <=> window.x = 1; function show(){} <=> window.show = function(){} DOM对象也是窗口对象的成员,document.querySelectorAll() <=> window.document.querySelectorAll() window尺寸: window.innerHeight/innerWidth 内部高度/宽度 低版本IE浏览器:document.documentElement.clientHeight/Width 或者document.body.clientWidth/Height window.outerHeight/outerWidth 外部高度/宽度 window.open()打开新地址的一种方式 window.close()关闭由window.open()打开的窗口(跳转页面) window.moveTo(x,y) 移动窗口 window.resizeTo(x,y) 调整窗口 window.frames 子框架 window.name 子窗口名称获取 window.parent 父窗口 window.screenX/window.screenY 屏幕左侧距离以及顶部的距离 window.focus(),blur() 5)历史对象 history.forward()前进 history.back()后退 history.go() 前进、后退 6)location地址对象 location.hostname 获取域名(主机名) location.pathname 获取路径名 location.port 获取端口号 location.hash 获取锚点部分 location.search 获取查询部分 js页面跳转:location.href可以设置页面跳转 location.assign()跳转 location.replace()替换(window.open()) 7)alert(),confirm(),prompt() 窗口方法 window.alert() 8)屏幕对象screen screen.width / screen.height || screen.availWidth / screen.availHeight 9)定时器: setInterval(执行函数,间隔时间); 不间断地执行 clearInterval(自定义定时器名称);清除定时器 setTimeout() 一次性定时器 =>使用递归的方式,能够使得一次性定时器也能实现setInterval()的功能 clearTimeout() 取消一次性定时器 10)本地存储数据:localStorage.getItem()获取localStorage.setItem()设置数据 localStorage.removeItem()删除