python全栈开发day43-javascript

一、昨日内容回顾

　　　　1.绝对定位的盒子居中

　　　　　　left：50%；

　　　　　　margin-left：负的盒子宽度的一半

　　　　2.固定位置

　　　　　　脱离标准文档流

　　　　　　作用:返回顶部，广告，滚动监听栏、固定导航栏（body{margin-top:100px或padding-top:100px;}）。

二、今日内容总结

　　　　1.javascript的介绍和作用

　　　　　　DOM:Document Object Model

　　　　　　BOM:Browe Object Modle

　　　2. js三大部分

　　　　　　1）、ECMAScript基础语法

　　　　　　　　　　javascript语法标准。包括变量、表达式、运算符、函数、if语句、for语句等　

　　　　　　　　　　（1）初识js

　　　　　　　　　　　　　　alert('xxx')

　　　　　　　　　　　　　　console.log('xxx')# 控制台输出

　　　　　　　　　　　　　　console.dir("xxx")

　　　　　　　　　　　　　　var a = prompt('xxx')

　　　　　　　　　　　　　　单行注释// 多行注释/* */

　　　　　　　　　　　　　　语法规则：JavaScript对换行、缩进、空格不敏感，语句末尾加分号，单行注释// 多行注释/* */

　　　　　　　　　　（2）直接量：数字99和字符串“99”

　　　　　　　　　　（3）变量：定义赋值命名规范

　　　　　　　　　　　　　a.变量的定义提升

　　　　　　　　　　　　　b.x = a++ 和 x= ++a 的区别

　　　　　　　　　　（4）变量的类型（typeof 变量）

　　　　　　　　　　　　 number

　　　　　　　　　　　　 string

　　　　　　　　　　　　 undfined 　　# 布尔值为false

　　　　　　　　　　　　 null　　# 布尔值为false

　　　　　　　　　　　　 NaN number　　# 布尔值为false

　　　　　　　　　　　　 infinity 无限大　　# 布尔值为true

　　　　　　　　　　　连字符和加号

　　　　　　　　　（5）变量的转换

　　　　　　　　　　　　parseInt（）

　　　　　　　　　　　　　　　　（1）带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。例如：

　　　　　　　　　　　　　　　　（2）自动带有截断小数的功能：取整，不四舍五入。

　　　　　　　　　　　　parseFloat()

　　　　　　　　　　　　parseString()　　　　

　　　　　　　　　(2) 基础数据类型

　　　　　　　　　　　　　# number

　　　　　　　　　　　　　# string

　　　　　　　　　　　　 # boolean

　　　　　　　　　　　　　# null

　　　　　　　　　　　　　# undefined

　　　　　　　　　　　　引用数据类型：　　　

- - - - Function
      - Object
      - Arrray
      - String
      - Date

　　　　　　　　　（3）运算符　

　　　　　　　　　　　 # 赋值运算符：　= 、+=、-=、%=、*=、/=

　　　　　　　　　　　　 # 算数运算符： +、-、*、/、%、++、--

　　　　　　　　　　　　# 比较运算符：==、===、！==、！===、>、<、>=、<=

　　　　　　　　　特殊情况：字符串拼接和es6模板字符串（·hh·）　　　　　　　　　　　　　　　　

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <script type="text/javascript">

//方法一：

        var  firstName  = '小';

    var lastName = '马哥';

    var name = '伊拉克';

    var am = '美军';

    // 字符串拼接

    var str = "2003年3月20日,"+name+"战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，"+am+"又一次取得的大规模压倒性军事胜利。"

    var fullStr = str;

    console.log(fullStr)

    var fullName = firstName +" "+ lastName;

    console.log(fullName)

 // 方法二：

     var str = `2003年3月20日 ${name}战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，${am}又一次取得的大规模压倒性军事胜利。`

     console.log(str)

    </script>

</body>

</html>

··

　　　　　　　　　　（4）数据类型转换

　　　　　　　　　　　　　# 数字转字符串

　　　　　　　　　　　　　　　　a. 隐式转换 1+‘2’ 输出‘12‘

　　　　　　　　　　　　　　　　b.强制转换 string() 、 tostring()

　　　　　　　　　　　　　# 字符串转数字

　　　　　　　　　　　　　　 parseInt()、parseFloat()

　　　　　　　　　　　　 # 任何数据类型转成boolean（）

　　　　　　　　　　 ( 5 ) 流程控制

　　　　　　　　　　　　　　#　　if(){} else{}

　　　　　　　　　　　　　　# 　　if() {} else if() {} else{}

　　　　　　　　　　　　　　# 　　while(){}

　　　　　　　　　　　　　　#　　 do{} while()

　　　　　　　　　　　　　　# 　　for(var i=0,i<10,i++){}

　　　　　　　　　　　　　　# switch(变量) {

　　　　　　　　　　　　　　　　　　　　 case ‘1’：

　　　　　　　　　　　　　　　　　　　　　　　XXXX

　　　　　　　　　　　　　　　　　　　　　　　 break # 如果没有break 它就会一直执行，直至遇到下一个break 这个叫case穿透。

　　　　　　　　　　　　　　　　　　　　 case ‘2’：

　　　　　　　　　　　　　　　　　　　　　　　XXXX

　　　　　　　　　　　　　　　　　　　　　　　 break

　　　　　　　　　　　　　　　　　　　　　　。。。。

　　　　　　　　　　　　　　　　　　　　 default:

　　　　　　　　　　　　　　　　　　　　　　 console.log('很遗憾')

　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　（6）常用内置对象

　　　　　　　　　　　　　　　　# 数组Array

　　　　　　　　　　　　　　　　# 字符串String

　　　　　　　　　　　　　　　　# Date

　　　　　　　　　　　　　　　　# math对象

　　　　　　　　　　　　　　　http://www.cnblogs.com/majj/p/9095590.html　

　　　　　　　　　　　　（7）函数

　　　　　　　　　　　　　　　　# 定义：

　　　　　　　　　　　　　　　　　function 函数名（参数）{}

　　　　　　　　　　　　　　　　# 函数的调用：

　　　　　　　　　　　　　　　　　函数名（）

　　　　　　　　　　　　　　　　# 函数的返回值

　　　　　　　　　　　　（8）为数组arguments　　　　　　　　　　　　

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<script type="text/javascript">

    function add(a,b,c){

        console.log(add.length) //形参个数

        console.log(arguments.length) //实参个数

        console.log(arguments) //实参

        return a+b+c

    }

    add(1,2)

    var z = add(1,2,3)

    console.log(z)

</script>

</body>

</html>

伪数组

　　　　　　　　　　　　　　　之所以说arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长短。举例：

　　　　　　　　　　　　　清空数组的三种方式：

　　　　　　　　　　　　　　　　
   var a1 = [1,2,3,4]
   // a1.splice(0)
   // a1 = []
   a1.length=0
   console.log(a1)

　　　　　　2）、DOM

　　　　　　　　　　操作网页上元素的API。比如盒子移动、变色、轮播图等

　　　　　　　　　　1.事件源、事件、事件驱动程序

　　　　　　　　　　2.获取文档元素节点、属性节点、文本节点

　　　　　　　　　　　　# 获取文档元素节点、增加、删除等

　　　　　　　　　　　　　　document //文档

　　　　　　　　　　　　　　document.documentElement //html

　　　　　　　　　　　　　　document.body//body

　　　　　　　　　　　　　　var oBtn = document.getElementById('')

　　　　　　　　　　　　　　var oBtn = document.getElementsByTagName('')

　　　　　　　　　　　　　　var oBtn = document.getElementsByClassName('')

　　　　　　　　　　　　# 获取文档属性节点

　　　　　　　　　　　　　oBtn.src oBtn.classname

　　　　　　　　　　　　 oBtn["src"]

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /*Safari and Chrome*/

{

from {left:0px;}

to {left:200px;}

}

</style>

</head>

<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>

</html>

移动效果关联

　　　　　　3）、BOM

　　　　　　　　　　操作浏览器部分功能的API。比如让浏览器自动滚动。

三、扩展和预习

　　　1 transition:属性过渡时间过渡函数效果延迟时间

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .box1{

            visibility: hidden;

            width: 200px;

            height: 200px;

            background-color: #333;

            transition: all 2s ease-in 0.2s;

        }

        .box2{

            position: absolute;

            width: 200px;

            height: 200px;

            background-color: red;

        }

        .box2:hover .box1{

            visibility: visible;

            width: 300px;

        }

    </style>

</head>

<body>

<div class="box2"><div class="box1"></div></div>

</body>

</html>

矩形框变大的过程

　　 2. transform # div旋转

<!DOCTYPE html>

<html>

<head>

<style>

.box1

{

margin:30px;

width:200px;

height:100px;

background-color:yellow;

/* Rotate div */

transform:rotate(20deg);

-ms-transform:rotate(9deg); /* Internet Explorer */

-moz-transform:rotate(9deg); /* Firefox */

-webkit-transform:rotate(30deg); /* Safari 和 Chrome */

-o-transform:rotate(9deg); /* Opera */

}

</style>

</head>

<body>

<div class="box1">Hello World</div>

<div style="height: 300px;background-color: red;">

</div>

</body>

</html>

div旋转实例

　　 3.animation # 移动效果关联

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /*Safari and Chrome*/

{

from {left:0px;}

to {left:200px;}

}

</style>

</head>

<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>

</html>

移动效果关联