WEB基础：JavaScript

JS:JavaScript

• 特点
  是一种网页编程技术，用来向HTML页面添加交互行为直接潜入HTML页面
  由浏览器解释执行代码，逐行执行，不进行预编译
• 作用
  客户的数据计算
  客户端表单合法性验证
  浏览器事件的触发
  服务器的异步数据提交
• 操作对象
  其操作的目标是HTML和CSS
• 事件
  事件就是触发调用JS的时机。如：单击(onclick)，双击(ondblclick)
  JS通常是通过事件触发的，因此需要先定义事件再写JS
• js=ECMAScript+BOM+DOM.

js的使用方式

1.事件定义式:在元素上定义事件时直接写js

<input type="button" value="按钮1" onclick="alert('hi');">

2.嵌入式:在script标签里书写js.该标签可以写在head里,也可以写在body中任意位置.

<script>    //js单行注释    /*js多行注释*/    //1)js的函数都是公有的    //2)js的函数有返回值,但不用声明其类型    function f2() {        //js中单引号和双引号一样        alert("How are you?");    }   </script>

注意：此处书写js有2种方式:
1) 将js代码封装到函数里,该函数在页面加载完, //用户点击按钮时被调用.
2) 直接在此处书写js,则这些代码在页面加载时 //立刻被浏览器调用,其调用时机甚至比body还早.

3.文件调用式:在独立的js文件内书写js.该标签不能既引入js又书写js.

<script src="my.js"></script>

js中：语法规范，标识符与变量，运算符，表达式和流程控制语句很多和java类似，但仍有很多值得注意的点。

概述

由于js是一门弱类型语言，所有变量都用var来定义
变量没有类型,但是变量所引用的数据有类型。这会带来一些不一样的特性。

js数据类型：

• javascript有6种数据类型,其中5种基本类型
  
  • 原始类型/基本类型：简单的数据段
  • 引用类型：可能由多个值构成的对象
    注意：在很多语言中，字符串以对象的形式来表示，因此是引用的，但是ECMAScript放弃了这一传统。

数据类型隐式转换

字符串等级最高，任何类型和字符串相+都为字符串
boolean在+时会变为1/0
boolean在和字符串+时会变成true/false字符串
强制转换和函数
借助一些函数可以实现强转

console.log(parseInt("abc"));console.log(parseInt(""));//NaNconsole.log(typeof("11")); //typeof是操作符typeof null //Objectconsole.log(isNaN(""));//false

运算符

• ===是全等于，包括类型匹配
• NaN和任何都不相等
• 5/2=2.5;
• 0.1+0.2=0.300000000000000004; //浮点数的舍入误差
• 关于&& 和||的巧用：
  
  • 2&&1=1
  • 2||1&=2

条件表达式

js中可以用任意类型的数据做条件, 当用非布尔值做条件时,有如下原则:
所有的非空值都相当于true;
空值:undefined,NaN,0,null,””
该原则是为了简化条件表达式

var k = null;    if(k) {        console.log("ok");    }

js对象

js对象是js中非常重要的内容。

• 分类
  
  • 内置对象：
  • 外部对象
    
    • window
    • dom
  • 自定义对象

内置对象

常用分类

• String
• Number
• Boolean
• Array
• Math
• Date
• RegExp
• Fuction

这里的String，Number，Boolean是基本包装类

由于一些对象的方法和java类似就不做介绍了，具体可以查看w3c手册。

String

js中字符串直接量用单引号和双引号都可以。

属性：length
x.charCodeAt(index):返回指定位置字符的unicode编码。

Number

toFixed(num):转换为字符串，四舍五入保留小数点后num位，不够用0补充。

Array

js中的数组都是Object数组

1)如何创建数组

//已知要存的数据    var a1 = ["zhangsan",25,false];    console.log(a1[0]);    //不知要存的数据    var a2 = new Array();    a2.push("lisi");    a2.push(28);    a2.push(true);    console.log(a2[0]);

2)数组倒转

var arr = [5,12,8,1,6,4,2];    arr.reverse();    console.log(arr);

3)数组排序

arr.sort();    console.log(arr);//默认方式    arr.sort(function(a,b){   //自定义函数比较        return a-b;    });    console.log(arr);

Date

1)创建Date

    var d1 = new Date();    var d2 = new Date("2017/09/01 09:09:09");    console.log(d1);    console.log(d2);

2)转换为本地格式的字符串

console.log(d1.toLocaleDateString());console.log(d1.toLocaleTimeString());

3)读取时间分量

var y = d1.getFullYear();    //月份从0开始    var m = d1.getMonth()+1;    var d = d1.getDate();    var today = y + "年" + m + "月" + d + "日";    console.log(today);

RegExp

var str = "You can you up,no can no bb.";

1)如何创建正则对象

• 直接量语法
  /pattern/attributes 属性：i:忽略大小写，g:全局匹配
• 创建 RegExp 对象的语法：
  new RegExp(pattern, attributes);

var reg = /no/;

2)test()：检测字符串中是否包含与正则匹配的子串

console.log(reg.test(str));

3)exec()

    //普通模式下    //从字符串中检测出与正则匹配的第1个子串    console.log(reg.exec(str));    console.log(reg.exec(str));    //全局模式下    //第1次调用,则从字符串中检测出与正则匹配的第1个子串    //第n次调用,则从字符串中检测出与正则匹配的第n个子串    reg = /no/g;    console.log(reg.exec(str));    console.log(reg.exec(str));    console.log(reg.exec(str));    console.log(reg.exec(str));

Function

• 函数是按值传递的
• 每个参数都会赋值给函数中的arguments数组

function sum() {        var s = 0;        if(arguments.length) {            for(var i=0;i<arguments.length;i++) {                s += arguments[i];            }        }        return s;    }    //页面加载时立刻调用函数    console.log(sum(1,2));    console.log(sum(3,4,5,6));

window对象

调用window对象的属性或方法,可以省略”window.”,因此有些全局函数

全局函数

• 弹出框的三种类型

function f1() {        alert("你好");    }    function f2() {        var b = confirm("你吃了吗?");        console.log(b);    }    function f3() {        var v = prompt("你吃的啥?");        console.log(v);    }

• 周期性定时器

function f4() {        //启动定时器,让浏览器每1000毫秒调用一次函数.        //该方法返回定时器的ID,此ID用于停止此定时器.        var n = 5;        var id = setInterval(function(){            console.log(n--);            if(n<0) {                clearInterval(id);                console.log("DUANG");            }        },1000);        //启动定时器就相当于启动了一个支线程,        //而当前方法f4相当于主线程,2个线程是        //并发执行的,不互相等待.因此f4方法在        //启动了定时器后,立刻执行输出BOOM的代码,        //而定时器却是在1000毫秒后才执行第一次.        console.log("BOOM");    }

• 一次性定时器

    var id;    function f5() {        //启动定时器,让浏览器在10000毫秒后调用该函数.        //浏览器调用函数后,该定时器会自动停止.        id = setTimeout(function(){            console.log("叮叮叮叮叮");        },10000);    }

外部对象

BOM

浏览器对象模型

function f1() {        var b = confirm("您确定要离开本页吗?");        if(b) {            location.href = "http://www.tmooc.cn";        }    }    function f2() {        location.reload();    }    function f3() {        history.forward();    }    console.log(screen.width);    console.log(screen.height);    console.log(navigator.userAgent);

DOM

文档对象模型

读写节点

         //onload是页面加载事件,在页面加载完成时,         //由浏览器自动触发,触发时调用对应的函数.    window.onload = function(){        //1.读取节点的名称和类型        var p1 = document.getElementById("p1");        console.log(p1.nodeName);        console.log(p1.nodeType);        //2.读写节点的内容        //内容:双标签中间的文本,如<a>内容</a>        //innerHTML(包含标签)        console.log(p1.innerHTML);        p1.innerHTML = "1.DOM操作可以<u>读写</u>节点";        //innerText(不含标签)        var p2 = document.getElementById("p2");        console.log(p2.innerText);        p2.innerText = "2.DOM操作可以<u>查询</u>节点";        //3.读写节点的值        //值:表单控件中的数据(label除外)        var b1 = document.getElementById("b1");        console.log(b1.value);        b1.value = "BBB";        //4.读写节点的属性        //1)调用方法        var i1 = document.getElementById("i1");        console.log(i1.getAttribute("src"));        i1.setAttribute("src","../images/02.jpg");        i1.removeAttribute("src");        //2)调用属性名        //id,style,className        var a1 = document.getElementById("a1");        console.log(a1.style);        console.log(a1.style.color);        a1.style.color = "blue";

查询节点

window.onload = function(){        //1.根据id查询节点        //2.根据标签名查询节点        //3.根据name查询节点        var radios = document.getElementsByName("sex");        console.log(radios);        //4.根据层次(关系)查询节点        //即查询某节点的亲戚        //1)父亲        var gz = document.getElementById("gz");        var ul = gz.parentNode;        console.log(ul);        //2)孩子        //带回车/空格,用的少        console.log(ul.childNodes);        //只要元素,常用        var lis = ul.getElementsByTagName("li");        console.log(lis);        //3)兄弟        //节点.父亲.孩子们[i]        var sh =             gz.parentNode.getElementsByTagName("li")[1];        console.log(sh);    }

增删节点

利用父节点进行增删

function f1() {        //创建新节点        var li = document.createElement("li");        li.innerHTML = "天津";        //追加新节点        var ul = document.getElementById("city");        ul.appendChild(li);    }    function f2() {        //创建新节点        var li = document.createElement("li");        li.innerHTML = "武汉";        //插入新节点        var ul = document.getElementById("city");        var gz = document.getElementById("gz");        ul.insertBefore(li,gz);    }    function f3() {        var ul = document.getElementById("city");        var gz = document.getElementById("gz");        //删除子节点        ul.removeChild(gz);    }

自定义对象

采用直接量的方式创建对象

function f1() {        var student = {            "name":"zhangsan",            "age":25,            "work":function(){                alert("我学Java");            }        };        alert(student.name);        alert(student.age);        student.work();    }

采用内置构造器创建对象

function f2() {        var teacher = new Object();        teacher.name = "cang";        teacher.age = 18;        teacher.work = function(){            alert("我教Java");        }        alert(teacher.name);        alert(teacher.age);        teacher.work();    }

采用自定义构造器的方式创建对象

function Coder(name,age,work) {        //将参数存在对象上        this.name = name;        this.age = age;        //this指代当前对象        //this.job是给此对象增加job属性        //=work是给这个属性赋值        this.job = work;    }    function f3() {        var coder = new Coder(            "Lisi",            28,            function(){                alert("我写Java");            }        );        alert(coder.name);        alert(coder.age);        coder.job();    }

js事件

• onfocus 元素获得焦点，光标进入文本框
• onblur 元素失去焦点，鼠标从文本框中离开
• onchange 用户改变域的内容，下拉选切换内容
• onclick 鼠标点击某个对象
• onload 某个页面或图像被完成加载
  
  • window.onloadhtml 加载完
• onmouseover 鼠标被移到某元素之上
• onmouseout 鼠标从某元素移开
• onreset 重置按钮被点击

事件定义的方法

• 在html属性中添加事件，调用函数
• 在js代码中动态生成
  btn.onclick=function(){};
  取消btn.onclick=”return false;”

event是一个关键字

事件具有冒泡机制

取消冒泡的方法：
- e.stopPropagation();
- e.cancelBubble;

获取事件源

• e.srcElement()
• e.target

之所以上两个标题不同方法有相同作用，正是因为IE恶心之处。
jQuery则提供了统一方法方法，并在后面的版本中直接取消了对IE的支持。

修改样式

1. 在css中使用类选择器预置不同样式
2. 同过JS修改元素的class属性，以改变其样式