javascript入门基础
一.js基本概述
l js是编程语言，它可以控制网页上的元素；
l js是面向对象，浏览器是它的宿主；
l js 的引入方式：1.直接使用<script></script>标签
2.<script type="text/javascript" src=”XX.js”></script>
二.变量
通过var 定义 是属于松散类型,即可以保存任何数据类型;
变量也分为局部变量和全局变量,,局部变量可以访问全局变量,全局变量不可以访问局部变量,如果再函数中var定义一个变量,那么函数退出后就会被销毁 .
定义变量时省略 关键字var 会默认为全局变量;
变量获取对象时是指向其对象的栈; 是引用对象
三.数据类型
检测数据类型的方法是typeof ;
“undefined” 如果这个值未定义
“ boolean” 布尔型
“string” 字符串型
“number” 数值型
“ object” 对象型或null
“function” 函数型
String number Boolean null undefined 属于基本类型 相当于传值;
Object array function 属于复杂类型 属于引用类型
Undefined : 只有一个值 var声明变量但未对其初始化时,这个变量就是undefined;
Null : 只有一个值 ,它表示一个空对象指针;var cc=null,使用typeof 检测null时 会返回”object”;定义变量时如果准备用于保存对象可以初始化为 null;
Null==undefined 返回true 是因为 相等操作符会强制将他们转换成操作数 即null==0,undefined==0; 所有会返回true;
Boolean : 该类型有两个字面值 true和false ;
|
Boolean |
True |
False |
|
String |
任何非空字符 |
“”(空字符串) |
|
Number |
任何非零数值 |
0和NaN |
|
Object |
任何对象 |
Null |
|
Undefined |
不适用 |
Undefined |
Number : 浮点数值 .如果小数点后面没有任何数字,将作为整数保存;
NaN 非数值,它用来表示一个本来要返回数值操作数但没有返回数值,
特点一 :涉及NaN的操作都会返回NaN,
特点二: 不与任何值相等包括它本身;
ECMAScript定义了isNaN( )函数 任何不能被转换为数值的值都会被返回 true;
数值转换 : Number( ) \ parseInt( ) \ parseFloat( );
Number(): 布尔值 true为1 ,false 为 0;
数值 直接返回
Null 返回0;
Undefined 返回 NaN
字符串 数字字符串会返回数字值 ;为空时会返回0; 其他给返回NaN;数字空格加数字的字符串也会返回NaN;
对象 会调用 valueof( ) ;转换返回的值 ,如果返回的值为NaN 则调用toString( );再进行转换;
parseInt( ) :如果是字符串 空字符串会返回 NaN ;如果遇到第一个字符是数字会依次往下解析,直到遇到非数字;:如果第一个字符不是数子会直接返回NaN;
parseFalat( )也是如此,区别是能识别小数点;
String : 它是由单引号或双引号 表示 , 转换字符串的方法是toString( ) ,是什么值就返回什么字符串,例如值是undefined就返回”undefined”;值是null就返回”nul” ;
Object : 对象可以通过new 关键字来创建 或者使用字面量
对象是一种复合值，它将很多值聚合在一起，可通过名字访问这些值。对象也可看作是属性的无序集合，每个属性都是一个 名/值 对。属性名是字符串，因此我们可以把对象看成是从字符串到值的映射。除了可以保持自有的属性，JS还可以从一个称为原型的对象继承属性。
除了字符串，数字，true, false, null, undefined之外，JS中的值都是对象。
对象最常见的用法是创建，设置，查找，删除，检测和枚举它的属性。
属性包括名字和值。属性名可以是包含空字符串在内的任意字符串，但对象中不能存在两个同名的属性。值可以是任意JS值，或者是一个getter或setter函数。
除了名字和值之外，每个属性还有一些与之相关的值，称为“属性特性”：
可写 —— 表明是否可以设置该属性的值
可枚举 —— 表明是否可以通过for/in循环返回该属性
可配置 —— 表明是否可以删除或修改该属性
除了包含属性之外，每个对象还拥有三个相关的对象特性：
对象的原型（prototype）—— 指向另外一个对象，本对象的属性继承自它的原型对象
对象的类（class）—— 是一个标识对象类型的字符串
对象的扩展标记（extensible flag）—— 指明了是否可以向该对象添加新属性
三类JavaScript对象：
内置对象（native object）—— 是由ECMAScript规范定义的对象或类。例如，数组，函数，日期和正则表达式都是内置对象
宿主对象（host object）—— 是由JS解释器所潜入的宿主环境定义的（如浏览器）。
自定义对象 —— 是由运行中的JS代码创建的对象
两类属性：
自有属性 —— 是直接在对象中定义的属性
继承属性 —— 是在对象的原型对象中定义的属性
四.操作符
一元操作符: 只能操作一个值;
递增和递减(++ 和 - -)操作符遵循下列规则:
- 包含有效数字字符的字符串时先将其转换为数字值再执行加减1 的操作;
- 不包含有效数字字符串时,变量值将设为NaN;
- 布尔值 false 为 0;true为1;
- 应用对象时会先调用 valueOf()方法,如果结果是NaN,再调用toString( )方法,再转换有效数字;
一元加 和减操作符:
加操作符会按照Number() 对值进行操作;
减主要表示负值;遇到非数值时会像加操作符一样最后将值变为负数;
比较操作符
<, >, <=, >=, ==, !=
其中=是赋值，==才是等于
逻辑操作符
b>a && b<c并且
b>a b<c 或
c = !(b>a) 逻辑非
操作符优先级：
算术操作符 >比较操作符 > 逻辑操作符 > "="赋值符号
逻辑运算符
&& || !
乘性运算符 *
除性运算符 / % 表示取模;
加性运算符:
如果都是字符串会将两个操作数拼接起来; 如果只有一个字符串,会将另外一个操作数变为字符串,然后再拼接起来;
如果是对象,数值,布尔值会调用toString() 方法将取得相应的字符串;
Undefined与null 则调用String()函数将其变为字符串”undefined” 和”null”;
减性运算符 :
如果有一个操作数是是字符串 布尔值 null 或者 undefined;则会调用Number() 函数,转换成数值,再根据计算规则计算, 如果转换结果是NaN则计算结果是NaN;
如果操作数是对象 则调用valueOf() 方法获取数值;如果得到的值是NaN则结果是NaN; 如果没有valueOf()方法,则使用toString(),将获取的字符串转换为数值,进行计算;
总结:加性运算符与减性运算符
加性运算符出现非数字值时会以连接字符串处理;
减性运算符会将值转换成数字进行处理结果;
五.函数 function
函数三种声明方法:
1.标准式:function funName(){
code....
return;
}
2.表达式式: var funName=function(){code ...}
3.Function构造函数方式:var funNamne=new Function(参数、参数、函数体)
注意: 函数的这种声明方式, 传参必须是字符串, 不建议用这种方式；
function的 this属性和argument属性
this属性是指向调用函数的执行环境; argument是一个传递的参数的数组 对象也会打包属性或者信息传递给argument;
六.控制语句
控制结构：顺序、选择、循环
if-else、switch-case、for 、while 、do-while、for-in；
label语句:可以在代码中添加标签通常与for等循环语句配合使用;使用break continue来引用;
for in:循环是遍历对象属性 例如:for(var i in obj){ console.log(onj.i)}; };
A.forEach( function(obj,index))***IE9+****;
类似于jQ中的each(function(index,obj))方法;
七 . js对象
- String对象
String.charAt( ) //返回字符串中的第n个字符
String.concat( ) //连接字符串
String.indexOf( ) //检索字符串
String.length() //字符串长度
String.localeCompare( ) //用本地特定的顺序比较两个字符串
String.replace( ) //替换一个与正则表达式匹配的子串
String.slice(start,end ) // 抽取一个子串
String.split() //将字符串分割成数组
String.substr(start,length ) //抽取一个字符串
String.substring( from,to) //返回一个字符串的子串
String.toLocaleLowerCase( ) //将字符串转换成小写
String.toLocaleUpperCase( ) //将字符串转换成大写
String.valueOf( ) //返回字符串
String.toString( ) //返回字符串类型
- Array对象
Array.pop() //从后删除一个元素
Array.push() //从后添加一个元素
Array.shift() //从后移除一个元素
Array.unshift() //从前添加一个元素
Array.concat() //连接数组
Array.join() //数组构成字符串
Array.length() //数组长度
Array.reverse() //颠倒数组顺序
Array.slice(start,end) //返回数组一部分
Array.sort() //对数字排序
汉字排序 //object.sort(function(a,b){
return a.localeCompare(b,'zh');
})
大小排序 // function compare(a,b){
if (a<b){
return -1;
}
else if (a>b){
return 1;
}
else{
return 0;
}
}
Array.splice(a,b,c) //插入删除替换数组 从第a个下标删除b个元素,在丛中添加元素c;
Array.toLocaleString() //转换成局部字符串
- Date对象
Date.getDate( ) //返回一个月中的某一天
Date.getDay( ) //返回一周中的某一天
Date.getFullYear( ) //返回Date对象的年份字段
Date.getHours( ) //返回Date对象的小时字段
Date.getMilliseconds( ) //返回Date对象的毫秒字段
Date.getMinutes( ) //返回Date对象的分钟字段
Date.getMonth( ) //返回Date对象的月份字段 ***是从0-11 调用时需要加一;
Date.getSeconds( ) //返回Date对象的秒字段
Date.getTime( ) ///返回Date对象的毫秒表示
Date.toLocaleString( ) 将Date转换为本地已格式化的字符串
Date.toLocaleTimeString( ) 返回Date对象的时间部分作为本地已格式化的字符串
Date.toString( ) 将Date转换为字符串
Date.valueOf( ) 将Date转换成毫秒表示
///倒计时数值转换
var nt=new Date(2017,6,24,0,0);
var date=new Date();
var timer=Math.floor((nt-date)/1000);
if(nt-date<0){
return span[0].innerHTML="0天0时0分0秒";
}
var day=Math.floor(timer/3600/24);
var hours=(Math.floor(timer/3600))%24;
var minute=(Math.floor(timer/60))%60;
var second=(Math.floor(timer%60));
span[0].innerHTML=num(day)+"天"+num(hours)+"时"+num(minute)+"分 "+num(second)+"秒";
- Boolean对象
- Math()对象
- RegExp对象
- Function对象
- Event对象
八 . DOM 对象
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
DOM节点层次图：
HTML文档可以说是由节点构成的集合，DOM节点有：
元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签
文本节点：向用户展示的内容
属性节点：元素属性
节点属性：
方法有:
nodeName返回一个字符串，其内容是给定节点的名字
nodeType返回一个整数，这个数值代表给定节点的类型
nodeValue返回给定节点的当前值
在DOM中，每个节点都是一个对象。DOM节点有三个重要的属性：
nodeName：节点的名称，只读
元素节点的nodeName与标签名相同
属性节点的nodeName是属性的名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document.
nodeValue：节点的值
元素节点的nodeValue是undefined或null
文本节点的nodeValue是文本自身
属性节点的nodeValue是属性的值
nodeType：节点类型，只读
元素：节点类型为 1
属性：节点类型为 2
文本：节点类型为 3
注释：节点类型为 8
文档：节点类型为 9
遍历节点树：
方法:
childNodes返回一个数组，该数组由给定元素节点的子节点构成
firstChild返回第一个子节点
lastChild返回最后一个子节点
parentNode返回一个给定节点的父节点
nextSibling返回给定节点的下一个子节点
previousSibling返回给定节点的上一个子节点
children 返回标签属性子节点不包含#text节点;
DOM操作：
方法
createElement(element)创建一个新的元素节点
createTextNode()创建一个包含着给定文本的新文本节点
appendChild()指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore ( newnode , node )将一个newnode节点插入到node节点的前面
removeChild()从一个给定元素中删除一个子节点
replaceChild ( newnode , oldnode )把一个给定父元素里的一个子节点替换为另一个节点
innerHTML解析标签 innerText只能添加文本;
获取节点:
document.getElementById("container");//按id找
document.getElementsByTagName("p")[i];//按标签找
document.getElementsByClassName("row")[i];//按照类名来找
document.getElementsByName("username")[i];//按照name查询
getAttribute()&setAttribute()
getAttribute()，通过元素节点的属性名称获取属性的值 可获取自定义属性;
九 .JavaScript对象,Browser对象,HTML DOM对象,HTML对象
详见 :http:/www.w3school.com.cn/jsref/index.asp;
十 .DOM Event:
http://www.runoob.com/jsref/dom-obj-event.html
