JavaScript概全

JacaScript
JavaScript是一种解释型 基于对象的动态脚本语言
引入
在标签中使用例如
<input type="button" value="yes" onclick="alert("ok")>
单独的script标签
<script type="text/javascript"> js代码</script>
type=“text/javascript” language="javascript"两个属性可以都写上 也可以都不写
script成对出现 一般出现在body标签内 且一般靠下部分
<script type="text/javascript" src= > 中间的js代码不会被执行</script>
基础语法
1 所有变量都通过var声明
2 通过console.log();方法在控制台输出内容
3 注释 // /xxxx/ 与其他大多数语言都一样
4 数据类型 number string boolean null(只有对象指空这一种情况会出现null）
undefined 未定义的 例如 var num;或者接受了没有返回值的函数
object 对象
5 typeof 返回数据类型

var type  = typeof null;
console.log(type);

上面那个例子 null 属于object类型的数据
6 numer数据类型有两个属性
Number.Max_Value 1.7976931348623157e+308
Number.Min_Value 5e-324
js中不要去用小数去验证小数 这是一种缺陷 语言本身的bug
7 isNan(); 判断是不是一个数字 is not a number 如果不是一个number类型的数据返回true
如果是一种number类型的数据 返回false
8转义字符与其他语言基本相同
9字符串的拼接
+
两个字符串无论是什么值 用+拼接都不会发生自动转换的情况
-
当两个字符串的值是number类型时 用-拼接会发生转换计算的情况

var str1 ='10';
var str2='5';
console.log(str1-str2);//5

强制转换
parseInt(str) 转整数
parseFloat()转小数
tostring（） 转字符串
Boolean() 转boolean值
0 空字符串 null unfined 都转换成false
Strng
属性 length
方法:

//测试string对象中的方法
var str="hello world";
str1 = str.bold();
document.write(str1,"<br/>");
str2=str.fontcolor("blue");
document.write(str2,"<br/>");
str3 =str.fontsize(5);
document.write(str3,"<br/>");
str4 = str.link("../index.php");
document.write(str4,"<br/>");
str5=str.sub();
str6=str.sup();
document.write(str5+str,"<br/>");
document.write(str+str6,"<br/>");
str7 = str.concat(str2);
document.write(str7,"<br/>");
/*上面7个函数都是针对html的
* 并且调用方法 不对元字符串产生影响 返回一个新的字符串
* /

var str = "new world";
var char = str.charAt(4);//从1开始数 不是0基
document.write(char,'</br>');
var index = str.indexOf('w');
document.write(index,'</br>');//返回下标 0基 不存在时返回-1
var str1 = "n-e-w-w-o-r-l-d";
var split = str1.split('-');
document.write(typeof split);
document.write(split,'</br>');
var replace = str.replace('w','88');//会替代第一个
document.write(replace,'</br>');
var strsub = str.substr(2,4);
document.write(strsub,'</br>');//w wo
var substring = str.substring(2,4);
document.write(substring,'</br>');//不包括4 w

Array
属性； length
方法；

var arr1 = new Array('a','b','c','d');
var arr2 = ['e','f','g','h'];
var arr3 = arr1.concat(arr2);
document.write(arr3[4]);//并不是把整个数组转换成一个字符串拼接 就是正常的数组拼接
document.write(arr3,'<br/>');
var arr4 = arr3.join('*');
document.write(arr4,'<br/>');//a*b*c*d*e*f*g*h 返回一个新的数组 以制定字符分割
var arr5 = arr3.push('i');
document.write(arr5,'<br/>');//返回数组新长度
document.write(arr3,'<br/>');//abcdefghi改变原数组
var arr6 = arr3.pop();
document.write(arr6,'<br/>');//返回能去除的那个字符
document.write(arr3,'<br/>');//abcdefgh

Date对象
获取当前时间 var date = new Date();但此时的时间格式并不是我们所熟知的格式
转换时间格式 date.toLocalString（）
得到年 getFullYear()
得到月getMonth()
得到星期getDay()外国人 0代表星期天 1-6分别代表星期一=>星期六
得到日期 getDate()1-31
得都小时 getHours()
得到分钟 getMinutes()
得到秒getSeconds()
得到时间戳 getTime()
Math
Math下面都是静态方法 由Math.方法名调用

abs(x)绝对值
ceil(x)向上取整
float(x)向下取整
round(x)四舍五入
random() 0-1随机数
max(a,b,c);
min(a,b,c);
pow(x,y)x的y次方

JS全局函数
eveal()参数为js代码 直接执行js代码
isNan()判断是不是数字
以及强制转换函数
函数重载
JS中不存在重载 但是可以利用虚拟数组arguments模拟重载
调用方法的所有参数 都会存在这个方法的arguments数组中

var sum =0;
function add(){
  for(var a=0;a<arguments.length;a++){
    sum +=arguments[a];
  }
  return sum;
}
var add1 = add(1,2);
var add2 = add(1,2,3);
var add3 = add(1,2,3,4);
document.write(add1,'<br/>');
document.write(add2,'<br/>');
document.write(add3);

---

BOM
Browser Object Model
主要提供了 navigator screen location history window 这几个对象
其中 window对象是其他对象的父类
调用window 中的方法时通常都会省略window
navigator导航器
提供浏览器的信息 Navigator.appName浏览器的名字属性
screen屏幕
提供屏幕信息 Screen.width Screen.height屏幕的宽 高 属性
history
提供浏览历史的URL信息
history.back();返回打开了此页面的页面A->B 在B中调用back返回A
history.forward()进入下一个页面A->B->A 在A中调用forward进入B
history.go() 参数为-1时与back相同 参数为1时与forward相同
Window
重点 顶层对象
方法；

alert("helloworld");
var judge = confirm('sure delete?')//根据用户操作返回true或false
if(judge){
    document.write("yes");
}else{
    document.write("no");
}
var value = prompt("account",888888);//第一个参数为提示语  第二个参数为默认值 返回用户输入的值
document.write('<br/>',"account is "+value);
function openIndex(){
    open('03close.html',"","width=100 height=80");//第一个参数为url 第二个参数为新的窗口名 第三个参数中描述窗口的宽 高 
}
function closeNow(){
    close();//关闭当前窗口 只能关闭由open方法打开的窗口
}

window对象中还有两种作为定时器的方法 很重要

var iid =  setInterval("alert('interval test')",3000);
function closeIntervaltest(){
    clearInterval(iid);
}
var tid = setTimeout("alert('time test')",1000);
clearTimeout(tid);

---

DOM
Document Object Model
利用DOM里提供的对象 使用这些对象的方法对标记性文档进行操作
第一步 : 把HTML里面的标签 属性 文本内容 都封装成对象
封装对象的第一步是利用DOM先解析HTML
在内存中分配一个树形结构 根据HTML的层级结构
html节点是根节点(有且只有一个
从属性结构中可以得到以下对象
document整个HTML文档的对象
element各个节点的对象 例如body span title等
属性对象
文本对象
Node节点对象从另一个角度分析出来的对象 是上面所有对象的父类
Document
doument对象作为整个文档的对象 可以获得所有内容
获得标签对象
getElementById()参数为标签的ID 返回这个 标签对象(element类型）
getElemensByName()参数为标签属性name的值 返回一个对象集合 需要遍历才能获得具体对象getElementsByTagName()参数标签名 返回该标签的所有对象集合
获标签属性
标签对象直接调用属性即可 例如 ·element.name
获得标签文本
利用innerHtml属性获得中间的文本内容
例如div.innerHtml
innerHtml虽然不是DOM的组成部分但是在各大浏览器都支持
利用innerHtml属性可以直接获得标签内的内容以及向标签中设置内容
创新标签
createElement参数为标签名称 新增一个便签对象
创建文本节点
createTextNode新增一个文本对象 参数为文本值
弹窗案例

<html>
    <body>
        姓名:&nbsp;<input type="text" id="name" />
        <br/>
        ID:&nbsp;&nbsp;<input type="text" id="id" />
        <br/>
        <input type="button" value="选择" onclick="open1()"/>
        <script type="text/javaScript">
        function open1(){
            open("05user.html","","width=480 height=300");
        }
        </script>
    </body>
</html>
<html>
    <body>
        <table border="1">
            <tr>
                <th>选择</th>
                <th>姓名</th>
                <th>ID</th>
            </tr>
            <tr>
                <th><input type ="button" value="选择" onclick="find1('刘备',001)"></th>
                <th >刘备</th>
                <th >001</th>
            </tr>
            <tr>
                    <th><input type ="button" value="选择" onclick="find2('关羽',002)"></th>
                    <th>关羽</th>
                    <th>002</th>
                </tr>
            <tr>
                    <th><input type ="button" value="选择" onclick="find3('张飞',003)"></th>
                    <th>张飞</th>
                    <th>003</th>
                </tr>
        </table>
        <script type="text/javaScript">
        function find1(name1,id1){
            var pwin =  window.opener;
            pwin.document.getElementById('id').value=id1;
            pwin.document.getElementById('name').value=name1;
            window.close();
        }
        function find2(name1,id1){
            var pwin =  window.opener;
            pwin.document.getElementById('id').value=id1;
            pwin.document.getElementById('name').value=name1;
            window.close();
        }
        function find3(name1,id1){
            var pwin =  window.opener;
            pwin.document.getElementById('id').value=id1;
            pwin.document.getElementById('name').value=name1;
            window.close();
        }
        </script>
    </body>
</html>

Element
标签对像由document的三个get方法得到
放回子标签集合 :
可以利用父标签的属性 childNodes返回一个子标签集合 但是浏览器兼容性很差
唯一有效方法 : 让父类标签调用getElementsByTagName() 参入子类标签名 可以获得这个系列的子类标签名例如uli.geteLElementsByTagNmae('li');

<html>
    <body>
        <div>
            <ul type=1 id='ul1'>
                <li>刘备</li>
                <li>关羽</li>
                <li>张飞</li>
            </ul>
        </div>
        <input type="button" value="新增" onclick="append()"/>
        <script type="text/javaScript">
        function append(){
            var ul =document.getElementById('ul1');
            var li =document.createElement('li');
            var text = document.createTextNode('赵云');
            li.appendChild(text);
            ul.appendChild(li);
        }
        </script>
     </body>
</html>

Node

	标签	属性	文本
nodeType	1	2	3
nodename	标签名	属性名	#text
nodeValue	具体值	具体值	具体值

方法
getAttributeNode由父类标签对象引用 参数为属性名 得到属性节点对象
appendChild由父类节点引用 再其子类节点后方加入一个节点 参数为要加入的节点对象
对BOM树的操作
属性：
firstchild lastchild childNodes由父类节点引用
parentNode由子类节点引用
nextSibling previousbling由同辈节点引用
方法；
appendChild添加子类节点到末尾 父类调用 子类作为参数
insertBefrore添加子类节点插队到某个节点前面 父调用 两个参数 第一个参数为新节点 第二个参数为 被插队旧节点
removeChild删除节点 父类调用 子类作为参数
replaceChild替换节点 父类调用 两个参数 第一个参数为新节点 第二个参数为被替换的旧节点
cloneChild克隆节点 自己调用 参数为boolean值