学习笔记——Javascript基础
文档规范：
一、级标题
1.级标题
A.级标题
a）四级
正文
重点突出
目录：略
一、JavaScript基础
1.JavaScript组成
A.ECMAScritp:解释器、翻译
B.DOM：Document Object Model，文档对象模型。就是语言中用到的document.它给了js操作页面的能力。
C.BOM：Browser Object Model，浏览器对象模型。就是语言中用到的windows.它给了js操作浏览器的能力。
2.变量类型
A.检测变量类型：typeof运算符
常见类型：number、string、boolean、object、function、undefined
基本类型：number、string、boolean、undefined
复合类型：object（带属性的）
B.数据类型转换(显式类型转换)
a）parseInt：转换成整数，如字符串转换为整数及小数转换为整数。
b）parseFloat：转换成浮点数
c）NaN：不是一个数字有isNaN方法。如：isNaN(num)
C.数据类型转换(隐式类型转换)
a）==，如：var a='12'; var b='5'; alert(a==b);结果为ture;
b)-,*,/，var a='12'; var b='5'; alert(a-b);结果为7;
D.变量作用域（作用范围）
a）局部变量：定义在一个函数里的变量而且只能在这个函数中使用。
b）全局变量：不定义在任何一个函数里。它可以在任何地方使用。
注：一个程序里尽量不要去用全局变量。
c)闭包：子函数可以使用父函数的变量
<script> function aaa(){ //父函数 var a=12; function bbb(){ //子函数 alert(a); } bbb(); } </script>
结果为12
3.命名规范
A.匈牙利命名法：类型前缀、首字母大写
|
类型 |
前缀 |
类型 |
实例 |
|
数组 |
a |
Array |
aItems |
|
布尔值 |
b |
Boolean |
bIsComplete |
|
浮点数 |
f |
Float |
fPrice |
|
函数 |
fn |
Function |
fnHandler |
|
整数 |
i |
Integer |
iItemCount |
|
对象 |
o |
Object |
oDiv1 |
|
正则表达式 |
re |
RegExp |
reEmailCheck |
|
字符串 |
s |
String |
sUserName |
|
变体变量 |
v |
Variant |
vAnything |
4.运算符
E.运算符优先级：括号
5.程序流程控制
6.Json:JavaScript Object Notation
//Json里存数据及数组 var obj={a:5,b:6,c:'abc',d:[1,2,3]}; alert(obj.a); //输入5 alert(obj.d[0]); //输出1 alert(obj.d.length) //输出3 //数组里存Json var arr=[{a:5,b:12},{a:6,b:12}]; alert(arr[0].a); //输出5
A.for in
var obj={a:5,b:3,c:98} var attr=' '; //attr用来存储obj中变量的名字 for(arrt in obj){ alert(attr); //分别输出a,b,c } for(arrt in obj){ alert(obj[attr]); //分别输出5,3,98 }
7.函数返回值
定义：函数执行的结果。一个函数应该只返回一种类型的值。
function sum(a,b){ return a+b; } alert(sum(12,6)) //输出18
8.函数传参
A.可变参（不定参）：arguments
定义：参数的个数可变，参数数组
例子：
//arguments function sum(){ alert(arguments.length); //输出3 laert(arguments[0]); //输出12 } sum(12,5,3) //例子1：用arguments求和 function sum(){ var result=0; var i=0; for(i=0;i<arguments.length;i++){ result+=arguments[i]; } alert(result); } sum(12,5,3) //输出20; //例子2：css函数 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:200px; height:200px; background:red;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function getStyle(obj, attr) { if(obj.currentStyle) //ie下取得当前计算后的样式 { return obj.currentStyle[attr]; } else //火狐下取得当前计算后的样式 { return getComputedStyle(obj, false)[attr]; } } function css(obj, attr, value) { if(arguments.length==2) //获取 { return getStyle(obj, attr); } else if(arguments.length==3) //设置 { obj.style[attr]=value; } } window.onload=function () { var oBtn=document.getElementById('btn1'); var oDiv=document.getElementById('div1'); oBtn.onclick=function () { css(oDiv, 'background', 'green'); //alert(css(oDiv, 'width')); } } </script> </head>
9.数组基础
A.数组的定义
//推荐方法 var arr=[1,2,3,4] //常规方法 var arr=new Array(1,2,3,4)
B.数组的属性：length
C.数组的方法
a)添加
•push(元素)：从尾部添加元素
•unshift(元素)：从头部添加元素
b)删除
•pop：从尾部删除
•shift()：从头部删除
D.排序、转换
a)排序：sort（[比较函数]）,排序一个数组
//英文字母排序 var arr=['float','zindex','xy','absolute']; arr.sort(); alert(arr); //输出absolute,float,xy,float //数字排序 var arr=[96,8,12,72,118]; arr.sort(); alert(arr); //输出118,12,72,96 arr.sort(function(num1,num2){ return num1-num2; }); alert(arr); //输出12,72,96,118
arr.sort(function(num1,num2){ return num2-num1; }); alert(arr); //输出118,96,72,12
b)转换：
•concat(数组2)
定义：链接两个数组
var arr1=[1,2,3]; var arr2=[6,7,8]; alert(arr1.contact(arr2)); //输出1,2,3,6,7,8
•jion(分隔符)
作用：可以吧数组内的元素链接起来，是数字的话就变成长串的字符串。
var arr=[1,2,3,4]; alert(arr.join('-')); //输出1-2-3-4
•split
作用：把字符串转成数组
var str='12-3-4-5'; var arr=str.split('-'); alert(arr); //输出12,3,4,5
c)插入、删除
//第一种用法：从中间删除 splice(开始位置,长度) var arr=[1,2,3,4,5,6] arr.splice(2,3) //输出1,2,6 //第二种用法：从中间插入 splice(开始位置,长度,元素……) var arr=[1,2,3,4,5,6] arr.splice(2,0,'a','b','c') //从第2个位置删除0个元素插入a,b,c输出1,2,3,a,b,c,4,5,6 //第三种用法：替换 splice(开始位置,长度,元素……) var arr=[1,2,3,4,5,6] arr.splice(1,2,'a','b','c') //从第1个位置删除2个元素插入a,b,c输出1,a,b,c,4,5,6
