內容選單標籤

2020年10月13日 星期二

JavaScript

 <!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script>

            document.write("可以寫 JavaScript 的地方1:head 標籤內");

        </script>

        

    </head>

    <body>

        <header></header>

        <section>

            <script>

                document.write("可以寫 JavaScript 的地方2:body 標籤內");

            </script> 


            <script src="hello.js"> 

                document.write("Test!")               

            </script> 

            

            <script>

                var ret=alert("警告!");

                document.write("alert!結束...")                   

            </script>


            <script>

                var ret=confirm("確認?")

                document.write("<p>confirm結果傳回:"+ret+"</p>");                

            </script> 

            

            <script>

                var ret=prompt("請輸入帳號:");

                document.write(""+ret);

            </script>

                      

        </section>

        <footer></footer>


    </body>

</html>

-----------------------------------------------------------------2020-10-16

https://www.youtube.com/watch?v=35sPvHtT8iY&list=PLGBY4JjI_1Pgeq1vqOAZVlM7FzCrKkK-c&index=11

---------------------------------------------------------------------


var todos=["do1","do2","do3"]        //Array       


console.log(todos)                           //顯示
["do1", "do2", "do3"]

todos
["do1", "do2", "do3", "newdo"]

todos.push("newdo")                          //新增
console.log(todos)
["do1", "do2", "do3", "newdo"]


todos[2]="updated"                            //修改
console.log(todos)
["do1", "do2", "updated", "newdo"]

todos.splice(3,1)                                     //刪除
console.log(todos)
["do1", "do2", "updated"]



------------------------------------------------------------------函式

var todos=["k1","k2","k3"]

function displayTodos(){

    console.log(todos)

}


displayTodos()
["k1", "k2", "k3"]



function addTodos(todo){

    todos.push(todo)

    displayTodos()    

}

addTodos("Addtest")

["k1", "k2", "k3", "Addtest"]



function changeTodo(position,newTodo){

    todos[position]=newTodo

    displayTodos()

}

changeTodo(0,"updatedTodo")
["updatedTodo", "k2", "k3", "Addtest"]



function deleteTodo(position){

    todos.splice(position,1)

    displayTodos()

}


deleteTodo(2)
["updatedTodo", "k2", "Addtest"]



----------------------------------------------------------------物件


var person={

    name:"John",                   //屬性

    sayName:function(){      //方法

        console.log("Hi my name is",this.name)

    }


person.name
"John"


person.sayName()
Hi my name is John



----------------------------------------------------------------

var todos={

    todos:["k1","k2","k3"],

    displayTodo:function(){

        console.log(this.todos);

    },

       addTodo:function(todo){

        this.todos.push(todo);

        this.displayTodo()

    },

        changTodo:function(position,newvalue){

        this.todos[position]=newvalue;

        this.displayTodo()

    },

        deleteTodo:function(position){

        this.todos.splice(position,1);

        this.displayTodo()

    }


todos.displayTodo()
["k1", "k2", "k3"]


todos.addTodo("newk")
["k1", "k2", "k3", "newk"]


todos.changTodo(0,"updated")
["updated", "k2", "k3"]


todos.deleteTodo(0)
["k2", "k3"]





2020年10月3日 星期六

HTML5+CSS3+JavaScript

 

---------------------HTML5

HTML a 元素   

anchor 建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。


src --> img標籤,script標籤,iframe標籤;

是英語單詞source的縮寫

href   --> link標籤,a標籤

是Hypertext Reference的缩寫。 意思是指定超鏈結目標的URL。


rel

relation 關聯


HTML img alt -->圖片替代文字。 alternative 兩者(或若干)中擇一的;替代的;

HTML img title -->滑鼠移經顯示文字標示


------範例


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="09kkStyle.css">
        <style>
            body{
                width: 90%;
                margin: 0 auto;
                background-color: #EEFFBB;
                font-size: 1em;
                font-family: 新細明體,serif;
                color: #333333;
                line-height: 1.5em;
                letter-spacing: 0.05em;
            }
            header, section, footer{
                background-color: #F0F8FF;                              
                border-radius: 5px;                
                border: 1px solid #CCCCCC;
                box-shadow: 5px 0px 10px -3px #AAAAAA;
            }
            header p{
                font-size: 3.5em;
                font-family: 微軟正黑;
                color: #F0F8FF;
                text-align: center;
                letter-spacing: 1em;
                text-shadow: -2px -2px 0px #FFFFFF, 2px 2px 0px #444444, 2px 2px 6px #888888 ;
                margin-top: 40px;
            }
            #topnav{
                background-color: #FFF0E6;
                border-top: 1px dashed #FF9F60;
                border-bottom: 1px dashed #FF9F60;
                height: 40px;
            }           
            #topnav ul {
                float: left;
                left: 16%;
                position: relative;
                margin: 5px;               
            }
            
            #topnav li{
                float: left;
                padding: 4px;
                background-color: #FF6600;
                list-style-type: none;
                width: 85px;
                text-align: center;
                margin: 0 5px 0 0;
            }

            #topnav a{
                font-family: 新細明體;
                font-size: 1.1em;
                font-weight: bold;
                color: #FFFFFF;
                text-decoration: none;
            }
            
            #topnav a:hover{
                font-size: 1.2em;
                color: #000000;
                text-decoration: underline;
            }
            
            section{
                clear: left;
            }
            .Title01{
                font-size: 2em;
                font-family: 標楷體;
                text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
            }
            figure {
                display:inline ;
                border: 1px solid #BFBFBF; 
                box-shadow: 2px 2px 3px rgba(135, 139, 133,0.4);
                float:left;
                margin: 0 15px;
            }

            figure img{
                display: table-row;
                margin: 5px 5px 10px 5px;
            }

            figcaption {
                display:block ;
                background-color: #145A32;
                color: #FFFFFF;
                font: italic smaller sans-serif;
            }
            #p1{
                margin: 15px ;
                text-align:justify;
            }
            #p2{
                margin: 15px;
                text-indent: 2em;
                text-align: justify;
            }
            #float_off{
                clear: both;
            }
            footer{               
                text-align: center;                
            }
            footer p{
               
                font-size: 1.5em;
                font-weight: bold;
                text-shadow:  1.4px 1.4px 1.3px #333333;
            }

        </style>
    </head>
    <header>
        <p>網站名稱</p>
        <nav id="topnav">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">網路學堂</a></li>
                <li><a href="#">蒐羅天下</a></li>
                <li><a href="#">部落格</a></li>
                <li><a href="#">專欄</a></li>
                <li><a href="#">免費廣告</a></li>
                <li><a href="#">下載專區</a></li>
                <li><a href="#">論壇</a></li>
            </ul>


        </nav>
    </header>
    <section>
        <p class="Title01">章節名稱</p>
        <figure>            
            <img src="pic/02.png" > 
            <figcaption>夜宿高山</figcaption>
        </figure>
        <p id="p1">
真的是太厲害了,用手抄寫經文,當成家裡壁紙!台南安南區一位75歲的阿伯,他七八年前退休後,就開始抄寫佛經,當成家裡的壁紙,走進他家,牆壁上、貼滿手寫經文,讓人大開眼界,他受訪時笑著說,對他來講,這也是一種修身養性的方式。經過台南安南區這裡的透天厝,常常有人會被,這醒目的黃色壁紙,給吸引住停下來看,走近一看,上面密密麻麻的,都是用手寫的佛家經文,整整齊齊大小一致,讓人忍不住讚嘆,而作者就是這位已經75歲的徐阿伯。這是他家不管是鐵捲門,或是壁磚上頭有護貝過的紙張,是他製作的佛經壁紙,七八年前他退休後,開始用手抄寫經文,當成修身養性的方式,慢慢地,這些妝點家裡的壁紙,讓看過的人印象深刻,阿伯的家,也成為這個區域,最有特色的房子。真的是太厲害了,用手抄寫經文,當成家裡壁紙!台南安南區一位75歲的阿伯,他七八年前退休後,就開始抄寫佛經,當成家裡的壁紙,走進他家,牆壁上、貼滿手寫經文,讓人大開眼界,他受訪時笑著說,對他來講,這也是一種修身養性的方式。經過台南安南區這裡的透天厝,常常有人會被,這醒目的黃色壁紙,給吸引住停下來看,走近一看,上面密密麻麻的,都是用手寫的佛家經文,整整齊齊大小一致,讓人忍不住讚嘆,而作者就是這位已經75歲的徐阿伯。這是他家不管是鐵捲門,或是壁磚上頭有護貝過的紙張,是他製作的佛經壁紙,七八年前他退休後,開始用手抄寫經文,當成修身養性的方式,慢慢地,這些妝點家裡的壁紙,讓看過的人印象深刻,阿伯的家,也成為這個區域,最有特色的房子。
        </p>
        <p id="p2">
            真的是太厲害了,用手抄寫經文,當成家裡壁紙!台南安南區一位75歲的阿伯,他七八年前退休後,就開始抄寫佛經,當成家裡的壁紙,走進他家,牆壁上、貼滿手寫經文,讓人大開眼界,他受訪時笑著說,對他來講,這也是一種修身養性的方式。
            經過台南安南區這裡的透天厝,常常有人會被,這醒目的黃色壁紙,給吸引住停下來看,走近一看,上面密密麻麻的,都是用手寫的佛家經文,整整齊齊大小一致,讓人忍不住讚嘆,而作者就是這位已經75歲的徐阿伯。
            這是他家不管是鐵捲門,或是壁磚上頭有護貝過的紙張,是他製作的佛經壁紙,七八年前他退休後,開始用手抄寫經文,當成修身養性的方式,慢慢地,這些妝點家裡的壁紙,讓看過的人印象深刻,阿伯的家,也成為這個區域,最有特色的房子。
                    </p>
        <p id="float_off"></p>
    </section>
    <footer><p>CopyRight (c) 2020 GuoChin All Righs Reserved.</p></footer>
</html>