zoukankan html css js c++ java

Python之路Day16--JavaScript(二)

本节内容：

1.上节内容回顾

2.JavaScript补充

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

一、上节内容回顾

1.作业问题：

a.页面布局不好看

float，clear：both，margin，padding
position:
       left:
参考网上的模板
HTML模板，bootstrap

b.背景图片

2.内容回顾

a. HTML

一堆标签：行内，块级标签

b.CSS

    position
    background
    text-align
    margin
    padding
    font-size
    z-index
    over-flow
    :hover
    opacity
    float (clear:both)
    line-height
    border
    color
    display

View Code

3.页面布局

 主站—
       <div class='pg-header'>
              <div style='980px;margin:0 auto;'>
                  内容自动居中
              </div>
       
       </div>
       <div  class='pg-content'></div>
       <div  class='pg-footer'></div>

主站布局

position:
       fiexd    -- 永远固定在窗口的某个位置
       relative -- 单独无意义
       absolute -- 第一次定位，可以在指定位置，滚轮滚动时，不在了。。。。
       
   a. 
       左侧菜单跟随滚动条
   b. 
       左侧以及上不不动   ******

后台管理布局

页面布局范例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .pg-content .menu{
             20%;
            background-color: red;
            min- 200px;
            height: 500px;
        }
        .pg-content .content{
             80%;
            background-color: green;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header" ></div>
    <div class="pg-content" >
        <div class="menu left">a</div>
        <div class="content left" >
            <p>b</p>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

View Code

4.当鼠标放到item上为内容加上样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"  href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <style>
        .item{
            background-color: #dddddd;
        }
        .item:hover{
            color: red;
        }
        .item:hover .b{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="a">
            <i class="fa fa-superpowers" aria-hidden="true"></i>
        </div>
        <div class="b">456</div>
    </div>
</body>
</html>

补充：http://fontawesome.io/ 下载图标

5.javascript回顾

a.for 循环

for(var item in [11,22,33,44]){
     console.log(item)
}

var arra = [11,22,33,44]
for(var i=0;i<arra.length;i++){
    console.log(item)
    break;
}

b.while循环

while(条件){
        
        
        }

c.条件语句

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

除了Python其他语言都有的条件语句

switch(name){
    case '1':
        age = 123;
        break;
    case '2':
        age = 456;
        break;
    default :
        age = 777;
}

二、JavaScript补充

1、函数（普通函数，匿名函数，自执行函数）

a.普通函数

function func(){
                
            }

b.匿名函数

function func(arg){
                return arg+1
            }
            
            setInterval("func()", 5000);
            相当于：
            setInterval(function(){
                console.log(123);
            },5000)

c.自执行函数

function func(arg){
                console.log(arg);
            }
            // func(1)
            
            (function(arg){
                console.log(arg);
            })(1)

2、序列化

JSON.stringify()   将对象转换为字符串
JSON.parse()       将字符串转换为对象类型

3、转义

decodeURI( )                   URl中未转义的字符
decodeURIComponent( )   URI组件中的未转义字符
encodeURI( )                   URI中的转义字符
encodeURIComponent( )   转义URI组件中的字符
escape( )                         对字符串转义
unescape( )                     给转义字符串解码
URIError                         由URl的编码和解码方法抛出

4、eval

JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

eval()
EvalError 执行字符串中的JavaScript代码

5、时间

data对象

var d =new Date()

d.getXXX
d.setXXX

6、作用域

================================ 1. 以函数作为作用域 （let）================================
        
        其他语言： 以代码块作为作用域
                    public void Func(){
                        if(1==1){
                            string name = 'Java'; 
                        }
                        console.writeline(name);
                    }
                    Func()
                    // 报错
                    
        Python：   以函数作为作用域
                    情况一：
                        def func():
                            if 1==1:
                                name = 'alex'
                            print(name)
                            
                        func()
                        // 成功
                    情况二：
                        def func():
                            if 1==1:
                                name = 'alex'
                            print(name)
                        func()
                        print(name)
                        // 报错
                
        JavaScript:  以函数作为作用域
        
                    function func(){
                        if(1==1){
                            var name = 'alex';
                        }
                        console.log(name);
                    }
                    func()
        
        ================================ 2. 函数的作用域在函数未被调用之前，已经创建 ================================
        
        function func(){
            if(1==1){
                var name = 'alex';
            }
            console.log(name);
        }
        
        ================= 3. 函数的作用域存在作用域链，并且也是在被调用之前创建 ==================
        示例一：
            xo = "alex";
            
            function func(){
                // var xo = 'eric';
                function inner(){
                    // var xo = 'tony';
                    console.log(xo);
                }
                inner()
            }
            func()
        示例二：
            xo = "alex";
            
            function func(){
                var xo = 'eric';
                function inner(){
                    
                    console.log(xo);
                }
                
                return inner;
            }
            
            var ret = func()
            ret()
        
        示例三：
            xo = "alex";
            
            function func(){
                var xo = 'eric';
                function inner(){
                    console.log(xo);
                }
                var xo = 'tony';
                return inner;
            }
            var ret = func()
            ret()
        
        ================= 4. 函数内局部变量 声明提前 ==================
        
        function func(){
            console.log(xxoo);
        }
        
        func();
        // 程序直接报错
        
        function func(){
            console.log(xxoo);
            var xxoo = 'alex';
        }
        解释过程中：var xxoo;
        
        func();
        // undefined

三、JavaScript面向对象

a.JavaScript面向对象

 function foo(){
     var xo = 'alex';
 }
 
 foo()
 function Foo(n){
     this.name = n;
     this.sayName = function(){
         console.log(this.name);
     }
 }
 var obj1 = new Foo('we');
 obj1.name
 obj1.sayName()            
 var obj2 = new Foo('wee');
 obj2.name
 obj2.sayName()

i. this代指对象(python self)
ii. 创建对象时, new 函数()

b. python面向对象

 class Foo:
     def __init__(self,name):
         self.name = name
     def sayName(self):
         print(self.name) 
 obj1 = Foo('we')
 obj2 = Foo('wee')

原型：

function Foo(n){
    this.name = n;
}
# Foo的原型
Foo.prototype = {
    'sayName': function(){
        console.log(this.name)
    }
}

obj1 = new Foo('we');
obj1.sayName()
obj2 = new Foo('wee');

四、DOMdocument object model(文档对象模型）

1. 查找

a.直接查找

var obj = document.getElementById('i1')

b.间接查找

文件内容操作：
                innerText    仅文本
                innerHTML    全内容
                value
                    input    value获取当前标签中的值
                    select   获取选中的value值（selectedIndex）
                    textarea value获取当前标签中的值

操作示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">
        张杨
        <a>谷<span>歌</span></a>
    </div>
    <input type="text" id="i2" />
    <select id="i3">
        <option value="11">北京1</option>
        <option value="12">北京2</option>
        <option value="13">北京3</option>
    </select>
    <textarea id="i4"></textarea>
</body>
</html>

搜索框范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style=" 600px;margin: 0 auto;">
        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>

        <input type="text" placeholder="请输入关键字" />
    </div>

    <script>
        function Focus(){
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val == "请输入关键字"){
                tag.value = "";
            }
        }
        function Blur(){
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.length ==0){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>

2.样式操作：

a.class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = "red"

b.属性操作：

attributes
setAttribute
getAttribute
removeAttribute

3.标签

a.创建标签，

// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/youngcheung"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/youngcheung'>youngcheung</a>"

范例--创建标签两种形式：字符串和对象方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle1();" value="+" />
    <input type="button" onclick="AddEle2();" value="+" />
    <div id="i1">
        <p><input type="text" /></p>
        // <hr >#分割线
    </div>
    <script>
        function AddEle1(){
            // 创建一个标签
            // 将标签添加到i1里面
            var tag = "<p><input type='text'/></p>";
            // 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
        function AddEle2(){
            // 创建一个标签
            // 将标签添加到i1里面
            var tag = document.createElement('input');
            tag.setAttribute('type', 'text');
            tag.style.fontSize = '16px';
            tag.style.color = 'red';
            var p = document.createElement('p');
            p.appendChild(tag);
            document.getElementById('i1').appendChild(p);
        }
    </script>
</body>
</html>

4.提交表单

任何标签通过DOM可以提交表单

document.geElementById('form').submit()

5.其他操作

console.log                 输出框
alert                       弹出框
confirm                     确认框
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

五、事件

a.参考图

58面试题：

写一个行为样式结构相分离的的页面？

　　 js css html

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test{
        background-color: red;300px;height:400px;
    }
</style>
<body>
    <div id="test">
        内容
    </div>
    <script>
        /* 方法一
        function t1(){
            console.log('dsads');
        }
        */
        var mydiv = document.getElementById("test");
        //console.log(mydiv);
        mydiv.onclick = function(){
            console.log("dsads");
        }
    </script>
</body>
</html>

范例2：将鼠标放在一个表格上高亮显示

方式一：dom0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
</style>
<body>
<table border="1" width="300px">
    <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr>
    <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr>
    <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr>
</table>
    <script>
        function t1(n){
            var myTrs = document.getElementsByTagName("tr")[n];
//            console.log(myTrs);
            myTrs.style.backgroundColor = "red";
        }
        function t2(n){
            var myTrs = document.getElementsByTagName("tr")[n];
            myTrs.style.backgroundColor = "";
        }
    </script>
</body>
</html>

View Code

方式二：dom1

<body>
<table id="i1" border="1" width="300px">
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
</table>

<table id='i2' border="1" width="300px">
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
    <tr><td>1</td><td>2</td><td>2</td></tr>
</table>
    <script>
        var myTrs = document.getElementsByTagName("tr");
        var len = myTrs.length;
        for(var i=0;i<len;i++) {
            // i=0,i=1,i=2
            myTrs[i].onmouseover = function () {
                this.style.backgroundColor = "red";
            };
            myTrs[i].onmouseout = function () {
                this.style.backgroundColor = "";
            };
        }
    </script>
</body>

View Code

绑定事件两种方式：
    a. 直接标签绑定 onclick='xxx()'  onfocus
    b. 先获取Dom对象，然后进行绑定
        document.getElementById('xx').onclick
        document.getElementById('xx').onfocus
this，当前触发事件的标签
    a. 第一种绑定方式
        <input id='i1' type='button' onclick='ClickOn(this)'>
        
        function ClickOn(self){
            // self 当前点击的标签
            
        }
    b. 第二种绑定方式
        <input id='i1' type='button' >
        document.getElementById('i1').onclick = function(){
        
            // this 代指当前点击的标签
        }
    c.第三种绑定方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #main{
        background-color: red;
        300px;
        height:400px;
    }
    #content{
        background-color: pink;
        150px;
        height:200px;
    }
</style>
<body>
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var mymain = document.getElementById("main");
        var mycontent = document.getElementById("content");
        mymain.addEventListener("click",function(){console.log("main")},true);
        mycontent.addEventListener("click",function(){console.log("content")},true);
    </script>
</body>
</html>

作用域的示例;

 var myTrs = document.getElementsByTagName("tr");
 var len = myTrs.length;
 for(var i=0;i<len;i++){
     // i=0,i=1,i=2
     myTrs[i].onmouseover = function(){
          this.style.backgroundColor = "red";
     };
 }

查看全文

相关阅读:
编程爱好者论坛第六次编程比赛题目
 google china code jam round2 div1 1000分题
 ogl2dlibsdl cvs repository @ cosoft
偶尔也提一个游戏点子：宇宙碰撞
 今天看到一些笑话...
google china code jam入围赛的一个题
 用Regular expression寻找源代码中的汉字字符串
 生成函数理论初步
 Komodo 的中文支持
 “豪华版”的USB延长线

原文地址：https://www.cnblogs.com/youngcheung/p/6093876.html