1.1 
Javascript 作用 

 1.  网页特效

   2. 用户交互

  3. 表单验证

Js  就是可以用来控制   结构  和 样式 。  

1.2  体验js  

   认识常用的三个输出语句。  都属于 js 内置对象 。

 大家买手机，手机里面有么有装好一些软件。

提供我们直接使用的功能就是 内置对象功能。

1.2.1 Alert()  弹出警示框

完整的写法  :  window.alert(“执行语句”);

Window 对象  窗口    一般情况是可以省略的。

Alert(“123”);

1.2.2 Console 控制台输出

 一般用于 测试用。   

1.2.3 document.write()  文档打印输出

document   文档对象  它不可以省略    

Alert()  非常少。   用户体验      

Console  用户看不见

document.write() 直接在文档中显示。

1.3 熟悉js 用途

我们js 的主要目的 ，  控制 web标准中的前两种。  

结构

样式

行为

Js 怎么来控制样式和结构呢？

  我们班级有130人，我想要提问某个同学问题。 我应该怎么做？

   首先我应该 点名字 找到这个同学。 他才能回答问题。

Js 怎么来控制样式和结构呢？

  首选先找人。找准对象。

   我们前面学过    div 一类人  span 都是

                   类名 好多个   

                   Id 是永远是唯一的。  不会冲突。

getElementById("demo")

   Get 获取   element 元素   by 通过   id 名字

  通过 id 名字为 demo的  得到这个元素

  因为这个div  是在  文档中，文档中很多个div其中的一个。所以我们

先document

document.getElementById("demo").style.width = "200px";

 文档的 id为demo的 样式的 宽度的 值为 200px

borderTop    

1.4 变量

变量的命名规则!

1.变量命名必须以字母或是下标符号”_”或者”$”为开头。

2.变量名长度不能超过255个字符。

3.变量名中不允许使用空格。

4.不用使用脚本语言中保留的关键字及保留符号作为变量名。

5.变量名区分大小写。(javascript是区分大小写的语言)

1 var a = 10;

2     function fun()

3     { a = "global"; }

4     console.log(a);

5     //输出 ？

6     var a;

7     function fun()

8     { a = "global"; }

9     fun();

10     console.log(a);

1.4.1 变量的作用域

  根据变量的作用范围   可以分为  全局变量 和 局部变量

  全局变量：

    1. 在最外层声明的变量。

    2. 在函数体内部，但是没有声明var 的变量也是全局变量

  局部变量：

     在函数体内部的 声明的变量

   小知识点：

     隐式的全局变量  

11 在函数体内部，但是没有声明var 的变量也是全局变量。

12 var a = 1

13 function func() {

14     a = b = 2

15 }

16 func()

17 alert(a)

18 alert(b)  

1.5 事件三要素

把等打开灯 要做这样的事情 。

我们用我们的手    去 按 一下开关    灯亮了。  

事件源    事件    事件处理程序  

1.5.1 事件源  

 要触发的对象     手    用手去触发的。  谁触发了

 一般情况下 是 个名词    

 发起者   

 被触发者    开关按钮  

1.5.2 事件 

  怎么触发的这个事情     按    

  一般情况下这个是 动词   点击  鼠标经过   按键盘

1.5.3 事件处理程序

发生了什么事       灯亮了     

=  function(){  }

1.5.4 总结

 事件三要素：  

    事件源    三藏

    事件      念

    事件处理程序   悟空头疼

案例1 ：

  事件三要素：

       事件源：  x 盒子  

       事件:     点击

       事件处理程序：  关闭 这个大的banner  

  案例2 ：

      事件源：    关注京东的这个盒子

      事件：       鼠标滑过  经过

      事件处理程序：   下拉菜单就会显示出来

事件源.事件 = function(){  事件处理函数 }

    事件源：  按钮

    事件  点击

    事件处理程序：  盒子的宽度改变  400

    代码:

     <script>

19     /*要操作先找人*/

20     var demo = document.getElementById("demo");  //获得id为demo的div盒子给demo

21     var btn = document.getElementById("btn"); // 获得按钮

22     /*事件三要素*/

23     /*事件源.事件 = fucntion(){}*/

24     btn.onclick = function(){

25         demo.style.width = "400px";

26     }

27 </script>

1.6 隐藏样式

 Display: none           display: block ;  显示的意思

 Visibility: hidden;       visibility: visible  显示的意思

 Display  隐藏不占位置

 Visibility:hidden 隐藏占有位置   停职留心

 Overflow:hidden;   隐藏超出的部分。

1.7 入口函数 

 window.onload = function(){

     内部放js

  }

这个函数的意思就是说，当我们页面加载完毕之后，采取执行函数体里面的js部分。  就是说等 页面的结构 样式  节点等加载完毕。。。

所以，这句话也可以页面的顶端即可。

<script>
    window.onload = function(){
        /*要做事，先找人*/
        var pic1 = document.getElementById("pic1");
        var pic2 = document.getElementById("pic2");
        var pic3 = document.getElementById("pic3");
        pic1.onclick = function(){
            document.body.style.backgroundImage = "url(images/1.jpg)";
        }
        pic2.onclick = function(){
            document.body.style.backgroundImage = "url(images/2.jpg)";
        }
        pic3.onclick = function(){
            document.body.style.backgroundImage = "url(images/3.jpg)";
        }
    }
</script>

1.8 模态框

   <script type="text/javascript">
        window.onload = function(){
             //事件源:  登录
            var login = document.getElementById("login");
            var mask = document.getElementById("mask");
            var box = document.getElementById("box");
            login.onclick = function(){
               // 当我们点击登录，会弹出灰色的大盒子和白色的小盒子
                mask.style.display = "block";
                box.style.display = "block";
            }
           // 事件源 span x
            var close_all = document.getElementById("close_all");
            close_all.onclick = function(){
                mask.style.display = ‘none‘;
                box.style.display = "none";
            }
        }
    </script>
</head>

1.9 Padding 

内边距  会影响盒子大小   

行内元素   尽量不用  上下的padding和margin  

继承的宽度 padding不会挤开 。

1.10 Js 的书写位置 

Js 的书写位置非常的自由。  

也可以参照 css 的位置来分类。

1.10.1  行内式 

<button onclick="alert(‘你好吗‘)">点击我</button>

一般情况，单双引号是一样 的 但是出现 了包裹的情况。

我们一般采取的是 外双内单的格式。

<a href=”javascript:;”></a>

<a href=”javascript:void(0);”></a>

1.10.2  内嵌式

 <script type=”text/javascript”>  </script>  任何一个地方

1.10.3  外链式

<script type=”text/javascript” src=http://www.mamicode.com/”xx.js”></script>

这对标记之间不能写任何的东西。

1.11 数据类型

 Js 的数据类型分为：

  字符型     数值型   布尔型   null    undefined  

 Js 是一个是一种弱数据类型 。

 Var  Aa = 10;

Var  aa:int = 10;

 Js 的变量你给什么值，他就是什么数据类型。  

1.11.1  字符型 (string)

  String   

  转换为字符型:

  1. 利用 “”  (双引号)

   加了引号的都是字符型。

  2. 利用String();  转换为字符型

1.11.2   布尔型 (boolean)

  就两个值   正确的和错误的   true  和  false

  数据类型转换为布尔型：

  1. 利用 !!   

   console.log(typeof !!num);

  2. 利用 Boolean()  

 false、undefined 、null、0、””  为 false

 true、1、”somestring”、[Object]  为 true

1.11.3  数值型

 Var  num = 10

 数值的前面带  0  表示 八进制  

 Var num = 020;   

  0*8⁰+2*8¹  = 16  

 数值的前面带  0x  表示 十六进制

  var result = 0xb;   11  

  转换为数值型:

  1. 利用 -  *  / 都可以转换

  2  利用Number( )  

1.11.4  ParseInt()  parseFloat()  

parseInt(值, 进制);

NOT a number   

MMD

BBD  

parseInt(110,2)

 表示2进制        吧10 这个2进制转换为 10进制   

 0*2⁰+1*2¹  + 1*2²   =  6  

1.var a="15.15abc" , b=‘10.15‘ , c=‘10.0abc‘;

alert(parseInt(a)+Number(b)+parseFloat(c));

1.11.5  Null  undefined 

Null  空的       没有值 。

Undefined  未定义的    应该有值，但是没有给。

Null        “”  

1.12 函数(function)

函数： 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

四大发明    造纸术  火药  指南针  印刷术 

1.12.1 函数的声明 

 函数使用跟变量一样，需要 声明

1.12.2 自定义函数 

function fun(){
    alert("我是自定义函数")
}
fun();  // 函数不调用，自己不执行

1.12.3 函数直接量声明

var fun1 = function(){
    alert("直接量声明")
}
fun1();  也需要调用

1.12.4 利用Function 关键字声明

var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();

1.12.5 变量声明提升

什么是变量提升

28  function fun(){

29         console.log(num);

30         var num = 20;

31 }

相当于 ---

32 function fun(){

33         var num;

34         console.log(num);

35         Num = 20;

36 }

在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。

var a = 18;
f1();
function f1(){
    var b=9;
    console.log(a);
    console.log(b);
    var a = ‘123‘;
}

结果是： undefined  9  

1.12.6 函数参数

arguments是存储了函数传送过过来实参

Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例.

arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同

arguments对象的长度是由实参个数而不是形参个数决定的

    <script>
    function fn(a,b)
    {
        console.log(fn.length); //得到是 函数的形参的个数
        //console.log(arguments);
        console.log(arguments.length); // 得到的是实参的个数
        if(fn.length == arguments.length)
        {
            console.log(a+b);
        }
        else
        {
            console.error("对不起，您的参数不匹配，正确的参数个数为:" + fn.length);
        }
        //console.log(a+b);
    }
    fn(1,2);
    fn(1,2,3);
</script>

  Var a = 10, b = 20;

  等价的

  Var a = 10;

  Var b = 20

1.13   案例 鼠标展示

代码：

var box = document.getElementById("box");
function fn(liid,bg){  // 封装函数  参数的传递
    var obj = document.getElementById(liid);
    obj.onmouseover = function(){
        box.style.backgroundImage = bg;
    }
}
fn("li01","url(images/01big.jpg)"); // 实参
fn("li02","url(images/02big.jpg)");
fn("li03","url(images/03big.jpg)");
fn("li04","url(images/04big.jpg)");
fn("li05","url(images/05big.jpg)");

1.14 返回值  return 

定义：

一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。

定义函数的返回值：

在函数内部用return来设置返回值，一个函数只能有一个返回值。

同时，终止代码的执行。

所有的自定义函数默认没有返回值；

Return 后面不要换行

function $(id){
 return document.getElementById(id);
}
$("demo").style.backgroundColor = ‘purple‘;
$("test").style.backgroundColor = "blue";

1.以下代码执行的结果是多少？请分析为什么？

1  var total=10;

1 var number = square(5);

37 alert(number);

38 function square(n) {

39 total = n*n;

40 return total;

41 }

 结果是 25

1.15 算术运算符

 +  -   *   /     %     ^    

 1+1 = 2   

 5%2 ==  1   

 2%5  ==  2    

 2^3    

 A++  ++后置       每次自加1     先运算后自加

 ++a   ++前置       每次自加1    先自加 后运算

 1.分析代码，得出正确的结果。

1 var a=10, b=20 , c=30;

42 ++a;

43 a++;

44 e=++a+(++b)+(c++)+a++;

45 alert(e);

77

1.16 条件语句(if)

  If(条件表达式)  { 语句;}

  If() {}else {}

 If()  else if(){}  else if(){} else {}

1.17 获得焦点  失去焦点 事件  

 我们前面学过了  onclick  点击  onmouseover  onmouseout’

 获得焦点:   onfocus         fao ~克死

 失去焦点:   onblur          不len ~~

 <script>
    window.onload = function(){

        var txt = document.getElementById("txt");

        txt.onfocus = function(){ //得到焦点
            //alert("得到了焦点");
            //什么时候该清空呢
            //用户没有输入的时候，用户第一次使用的时候
           // 如果 这里input 里面的文字 是 请输入...  说明用户没有用过，就应该清空
            if(txt.value == "请输入...")
            {
                txt.value = "";
                txt.style.color = "#333";
            }
        }

        txt.onblur = function(){ //失去焦点
            //alert("失去了焦点");
            //什么时候再还原呢？
            //input的值是 空的时候，我们再复原
            if(txt.value == "")
            {
                txt.value = "请输入...";
                txt.style.color = "#ccc";
            }
        }
    }
</script>

1.18 this (自己的)

指的是本身

This 主要是指事件的调用者 。

className    类名

$("result").className ="wrong";

innerHTML   

更换 盒子里面的内容    文字 标签都换.

表单更换内容

 Input.value

isNaN    nan 不是一个数字    is 是   是 不是一个数字

isNaN(“12”)   如果里面的不是个数字 返回 true   否则返回false

1.19 属性和方法

手机       

黑色的     5.5寸的      塑料的      铁的   

外在特性      

属性  

手机的颜色是黑色的。

Iphone.color = “red”;     属性给值一定是等号   

方法：

  手机 打电话   发短信  玩游戏   聊QQ  看电影

  动词   可以干什么   

Iphone.tel();     

方法和属性的区别：

  方法一律带有小括号 。  isNaN( );    动词

   方法给值：    isNaN（“值”）;

1.19.1 表单自动获得焦点

 Txt.focus();   方法  

 Onfocus  事件  

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var txt = document.getElementById("txt");
            txt.focus(); //自动获得焦点
        }
    </script>
</head>
<body>
自动获得焦点:
<input type="text" id="txt"/>
</body>
</html>

1.19.2 鼠标经过选择表单

 sele.onmouseover = function(){
    this.select(); //选择
}

方法  select()  选择功能

1.20 For 循环

人生一个循环

i+=3        i=i+3  

1.21 getElementsByTagName()  获取某类标签

前面我们可以得到一个盒子  通过  id 获得

getElementById()   只得到一个 盒子

我们想要获取某类标签   比如说所有 的div   li  span

getElementsByTagName();  很多个所以是复数   很多个

得到的是一个伪数组。

Lis  数组  

Lis[索引号]   一个

1.22 判断用户输入事件

  正常浏览器  :    oninput  

  Ie 678  支持的  ： onpropertychange   

1.23 数组 array

数组是做什么用的？

var  num = 10;  变量可以用来存储东西 。

一个变量里面只能一个值。

我们130人，想把我们每个人的人名存储，要用变量需要 130变量。

这个时候可以考虑  数组 。  组合

数组：  就是一个大变量， 它里面可以存储很多的值。

1.23.1 声明数组

  var arr = [1,3,5,7,9];

  var arr = new Array(1,3,5);

1.23.2 使用数组

 使用的方法:    数组名[索引值];               函数名();

 索引号是从0开始的。   0 1 2 3 4 5 ...

var textArr = ["刘备","诸葛亮","赵云","关羽"];
console.log(textArr[3])

1.23.3  数组的长度

 数组名.length;    

1.23.4  遍历数组

  想到了for  遍历 数组

  getElementsByTagName()  得到一个伪数组  

1.23.5   案例 隔行变色

  <script>
    window.onload = function(){
        var lis = document.getElementsByTagName("li");  // 得到所有的li
        //alert(lis.length);
        for(var i = 0; i<lis.length; i++)
        {
            if(i%2 == 0)  // 只有偶数能被2整除
            {
                lis[i].style.backgroundColor = "#eee";
            }
            //鼠标经过li 的时候， 当前的底色变亮
            lis[i].onmouseover = function(){
                this.className = "current";
            }
            lis[i].onmouseout = function(){
                this.className = "";
            }
        }
    }
</script>

1.23.6 求平均值

<script>

var arr = [10,20,30,34,67];
    function avg(array){  // 封装求平均值函数
        var len = array.length;  // 数组的长度
        var sum = 0;
        for(var i=0; i<len; i++)
        {
            sum += array[i];   //     sum = sum +array[i];
        }
        return sum / len;
    }
    //a*=3   a= a*3
    console.log(avg(arr));
</script>

字符相连

 +  

 数值相加  字符相连  

 1+1 = 2;

 “你好” + “吗”     “你好吗”

 “你好” + 2      “你好2”

  “0” + 10          “010”

   10 - “2”        8

  所有的input  取过来的值  是  字符型。

三元运算符  三目运算符

  一元：  a++  b++    +a  -a

  二元:   a+b   a>=b

  三元:   表达式 ? 结果1 : 结果2    等价于    if  else

   如果表达式结果为真 ， 则返回 结果1  

   如果表达式结果为假，  则返回结果2

   if(3>5) {alert(“11”)} else { alert(22)}      ==

   3>5 ? alert(11) : alert(22)

  the king is always luck  

   王老吉

1.24  排他思想

 排他思想:

    首先干掉所有人，   剩下我自己

  <script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
        for(var i=0;i<btns.length;i++)
        {
            btns[i].onclick = function(){
                //清除所有人的 类名   只能用 for 遍历
                for(var j=0;j<btns.length;j++)
                {
                    btns[j].className = "";
                }
                //就剩下自己 就是一个 而且是点击那个
                this.className = "damao";
            }
        }
    }
</script>

1.25 变量 和属性 

变量

   是独立存在的 自由自在的

   miss    小姐 女士

属性和方法

   属于某个对象的 属性和 方法

    mrs   

var index = 10;  //变量  谁都可以使用
var arr = [];   // 数组
arr.index = 20;    // 自定义属性  他只能在arr 才能使用
alert(arr.index);

JS原生第二篇 （帅哥）