JS基础学习笔记（一）

1.JS介绍

js是一种脚本语言，用于web和html，它是轻量级的，并且它是一个弱语言类型的编程语言；

如何加入js代码：
1.用<script></script>标签
2.可放于body或者head中，一般放于head中
3.不限制script标签数量

js代码语法注释规则：
1.执行顺序，按照代码顺序，顺序执行。
2.单行注释：//
3.多行注释：/**/

2.JS异常的捕获

 function demo(){
     var string =document.getElementById("txt").value;
     try{
         if(string==""){
         throw "sssss";
         }
       }catch(err){
         alert(err);
         }
      }

3.JS事件与事件处理

所有事件列表：
onClick 点击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚焦事件
onBlur 移动光标事件
onLoad 网页加载事件
onUnload 关闭网页事件

事件处理：
HTML事件处理：直接添加到HTML结构中
DOM0级事件处理： btn.οnclick=demo();
DOM2级事件处理： btn.addEventListener(“click”,demo);
IE事件处理程序： btn.attachEvent(“onclick”,demo);

事件对象
在触发DOM事件的时候会产生一个对象event：
type：获取事件类型
target：获取事件目标
stopPropagation：阻止事件冒泡
preventDefault：阻止事件默认行为

4.DOM操作HTML

改变HTML输出流：
key:绝对不要在文档加载完成之后使用document.write（）。这会覆盖该文档。
寻找元素可以通过id获取标签名寻找到；寻找到元素之后，可以通过innerHTML修改展示数据；

DOM对象控制HTML方法：
getElementsByName: 获取name
getElementsByTagName: 获取元素
getAttribute :获取元素属性
setAttribute: 设置元素属性
childNodes: 访问子节点
parentNode :访问父节点
createElement: 创建元素节点
createTextNode: 创建文本节点
insertBefore :插入节点
removeChild: 删除节点
offsetHeight: 网页 尺寸
scrollHeight: 网页尺寸

DOM EventListener
document.getElementById(“btn”).addEventListener(“click”,hello); document.getElementById(“btn”).addEventListener(“click”,world); document.getElementById(“btn”).removeEventListener(“click”,world);
使用dom eventlistener的好处是可以减少代码量，并可以重复监听一个事件。

5.JS内置对象

5.1 如何创建自定义对象
方式1：

 people = new Object();
 people.name="guxuewu";
 people.age="20";
 document.write("name=>"+people.name+",age=>"+people.age);

方式2：

people={name:"guxuewu",age:"30"};      document.write("name=>"+people.name+",age=>"+people.age);

方式3：

function people(name,age){
        this.name=name;
        this.age=age;
    }
people=new people("sss",33);
document.write("name=>"+people.name+",age=>"+people.age);

5.2 Date日期对象
处理日期和时间的常用方法:
getFullYear: 获取年份
getTime: 获取毫秒
setFullYear: 设置具体的日期
getDay :获取星期
eg:时钟代码：

function freshTime(){
            var date=new  Date();
            var h=date.getHours();
            var m=date.getMinutes();
            var s=date.getSeconds();
            m=check(m);
            s=check(s);        document.getElementById("timetxt").innerHTML=h+":"+m+":"+s;
            t=setTimeout(function (){
                freshTime();
            },1000);
        };
        function check(i){
            if(i<10){
                i="0"+i;
            }
            return i;
        }

5.3 数组对象
常用方法：
concat 合并数组；
sort 排序：通过一个function，设置倒序还是正序；
push 末尾追加元素；
reverse 数组元素翻转；

5.4 Math对象
常用方法：
round ：四舍五入
random： 返回0到 1之间的随机数
max ：返回最高值
min： 返回最低值
abs ：返回绝对值

6.JS浏览器对象

6.1 window对象
window尺寸：
window.innerHeight
window.innerWidth
window 方法：
window.open() 打开新窗口
window.close() 关闭当前窗口

6.2 计时器：
通过计时器可以再特定时间间隔之后，再延时执行一个方法：
setInterval 间隔指定毫秒数不停地执行指定代码
clearinterval 清除一直执行的指定代码
setTimeout 暂停指定的毫秒数之后执行指定的代码
clearTimeout 清除延时任务

6.3 History对象
window.history对象包含浏览器的历史记录
方法：
history.back 返回上一个页面
history.forward 前进到前一个页面
history.go（具体数字） 指定跳转到第几个页面

6.4 Location对象
属性：
location.hostname:返回web主机域名
location.pathname:返回当前页面的路径和文件名
location.port:返回web主机的端口
location.protocol:返回web协议
location.href: 返回当前页面的URL
loacation.assign(): 加载新的文档

6.5 Screen对象
对象包含了有关对象屏幕的信息
属性
可用宽高度：availWidth,availHeight
实际宽高度：width，height