前端三大块
1、HTML:页面结构
2、CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript:页面行为:部分动画效果、页面与用户的交互、页面功能
javascript引入页面的三种方式:
1、内联式(行间事件): 将javascript代码通过标签的事件属性写在标签中
2、内嵌式:在head标签中插入script标签,然后在script标签中写JavaScript代码
3、外链式:将JavaScript代码写在一个js文件中,html文件中通过script标签来引入这个js文件
变量类型5种基本数据类型:
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型,变量声明未初始化,它的值就是undefined
5、null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null
1种复合类型:object
变量、函数、属性、函数参数命名规范
1、区分大小写
2、第一个字符必须是字母、下划线(_)或者美元符号($)
3、其他字符可以是字母、下划线、美元符或数字
1.定义变量一定要写 var 2.每一句js语句结尾不要遗漏分号; 3.多条语句可以合并到一行,提高效率
javascript函数
1、函数定义 用function 关键字
2、函数的预解析 函数可以先调用,再定义
条件运算符
==(隐式转换)、===(实值)、>(大于)、>=(大于等于)、<(小于)、<=(小于等于)、!=(不等于)、&&(而且)、||(或者)、!(否)
if else
if elseif else
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量
将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了
操作元素属性
var 变量 = 元素.属性名 读取属性
元素.属性名 = 新属性值 改写属性
属性名在js中的写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
innerHTML可以读取或者写入标签包裹的内容
鼠标移入事件属性(mouseover)
鼠标移出事件属性(mouseout)
匿名函数:定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联,这样可以减少函数命名,并且简化代码。函数如果做公共函数,就可以写成匿名函数的形式。
定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];
操作数组中数据的方法
1、获取数组的长度:aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出4
2、用下标操作数组的某个数据:aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4
4、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
5、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
6、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
7、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
批量操作数组中的数据,需要用到循环语句
循环语句 for(var i=0;i<iLen;i++){ 循环体 }
数组的去重结合indexOf
字符串操作方法:
1、”+” 符号两边是数字,就做加法,如果有一边是字符串,就做字符串拼接
2、parseInt() 将整数字符串转化为整数,如果是小数会去掉小数位
3、parseFloat() 将小数的字符串转化为小数
4、split() 将字符串转化为数组
5、indexOf() 获取某小段字符串在大段字符串里面的索引值 如果不存在就返回-1
6、substring() 截取字符串
定时器类型及语法
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
只执行一次的定时器:var oTimer1 = setTimeout(函数名,间隔时间) 间隔时间单位为毫秒,不用写单位
关闭只执行一次的定时器:clearTimeout(oTimer1)
反复执行的定时器:var oTimer2 = setInterval(函数名,间隔时间)
关闭反复执行一次的定时器:clearInterval(oTimer2)
Javascript调试:
输出变量和对象的方法:
1、alert ("变量")
2、console.log ("变量")
3、document.title=变量
断点调试
将Javascript代码独立成一个Javascript文件,通过chrome浏览器调试工具的sources窗口,可以对外链的js文件进行断点调试
javascript中的变量分为全局变量和局部变量
1、全局变量:在函数之外定义的变量,为整个页面公用,函数内部外部都可以访问。
2、局部变量:在函数内部定义的变量,只能在定义该变量的函数内部访问,外部无法访问。
定一变量要加var
封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数。
封闭函数:(可以在前面加分号,是为了防止解压时出错)
(function(){
alert('hello!');
})();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
alert('hello!');
}()