audio 媒體播放

http://www.w3schools.com/html/html5_audio.asp

呈現效果:

何謂 JavaScript?

JavaScript 是一種客戶端腳本(script)直譯式程式語言，使用於HTML網頁，主要是讓HTML網頁增加動態效果，舉例來說，我們希望隱藏網頁上的某個按鈕，或是讓網頁圖片能動態變化，這時就可利用JavaScript語法來實現。在HTML裡使用JavaScript的語法很簡單，只要用<script>標籤崁入JavaScript的程式碼就可以了。

type 屬性

type屬性是用來指定MIME(Multipurpose Internet Mail Extension)型態，主要是告訴瀏覽器目前是使用哪一種Script語言，由於大部分的瀏覽器預設的Script語言都是JavaScript，所以也可以省略這個屬性，直接寫<script></script>也可以。

JavaScript 與 HTML 標籤的搭配

在HTML中，若希望網頁能"活"起來與使用者互動、或具有更炫的功能就必須為HTML加入"程式"，W3C統一的標準是用javaScript。然而JavaScript雖然可以用像window、document之類的物件直接修改瀏覽器外觀，但是網頁主要是由許多HTML標籤做骨架支撐起來的，所以JavaScript必須要能操作HTML標籤。

作法:

1.要被JavaScript操作的HTML標籤必須有一個識別，這個識別以屬性id來做。

2.在JavaScript中用document物件(標籤都在它裡面)的getElementById方法去取得標籤物件。

3.取得標籤物件後便可以在程式中操作它了。

練習範例:

1.window.prompt() & 印出格式化日期

<!DOCTYPE html>

<html lang="en">
   <head>
       <meta charset="utf-8" />
       <title>為網頁加入程式</title>

       <script>

           //以下是 window 物件
           window.alert("請問您的名字");

           //設變數取值
           var name = window.prompt("請輸入 : ", "先生/小姐");
           window.alert(name + " 您好!")


           //以下是 document 物件和Date物件
           //Date物件不存在，所以要以 new 製造出來
           var today = new Date();
           //將today的Data物件轉型成Object
           var x = today + "";
           var year = x.slice(11, 15);
           var month = x.substring(4, 7);
           var day = x.slice(8, 10);

           //Sun May 22 2016 20:22:46 GMT+0800 (台北標準時間)
           var month;
           if (x.slice(4, 7) == "May") {
               month = "5";
           }
           document.write("今天是" + year + " 年 " + month + " 月 " + day + " 日");

       </script>

       <script>
           
           //今天是2016年5月20日
       </script>

   </head>
   <body>

   </body>
</html>

顯示效果:

2.<img>設定圖片 & 顯示印出格式化日期(document.write() 與標籤物件內容(innerHTML)的差異)

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>憤怒鳥</title>
       <style>
           .angry 
           {
               position: absolute;
               left: 350px;
               top: 350px;
           }
           .angry1
           {
               position: absolute;
               left:600px;
               top: 200px;
           }
           .angry2
           {
               position: absolute;
               left:850px;
               top: 450px;
           }
           .grass
           {
               position: absolute;
               width: 900px;
               left:200px;
               top: 450px;
           }
           .sun
           {
               position: absolute;
               left:950px;
               top: 30px;
           }
           .sky
           {
               position: absolute;
               width: 900px;
               height: 550px;
               left:200px;
               top: 30px;
           }
           .date{
               position: absolute;
               left: 600px;
               top: 700px;
               color: #f00;
           }                      
       </style>
       
 
    </head>
    <body>
        <img src="sky.png" alt="藍天白雲" class="sky">
        <img src="sun.png" alt="太陽公公" class="sun">
        <img src="angrybird.png" alt="憤憤怒怒鳥NO1" class="angry">
        <img src="angrybird1.png" alt="憤憤怒怒鳥NO2" class="angry1">
        <img src="angrybird2.png" alt="憤憤怒怒鳥NO3" class="angry2">
        <img src="grass.png" alt="草地" class="grass">
        <!--script取Id值 document.getElementById("date");-->
        <div class="date" id="date">xxxx年xx月xx日</div>
    </body>
</html>
 
 <script>
     //產生Date()物件
     var today = new Date();
     //轉換成Object
     var x = today + "";
     //Sun May 22 2016 20:22:46 GMT+0800 (台北標準時間)
     var year = x.slice(11, 15);
     var month = x.slice(4, 7);
     var day = x.slice(8, 10);
     var formatDate = year + "年" + month + "月" + day + "日";
 
     if (month == "Jan") {
         month = "1";
     }
     if (month == "Feb") {
         month = "2";
     }
     if (month == "Mar") {
         month = "3";
     }
     if (month == "Apr") {
         month = "4";
     }
     if (month == "May") {
         month = "5";
     }
     if (x.slice(4, 7) == "Jun") {
         month = "6";
     }
     if (month == "Jul") {
         month = "7";
     }
     if (month == "Aug") {
         month = "8";
     }
     if (month == "Sep") {
         month = "9";
     }
     if (month == "Oct") {
         month = "10";
     }
     if (month == "Nov") {
         month = "11";
     }
     if (month == "Dec") {
         month = "12";
     }
 
     //1.直接顯示至螢幕左上角
     document.write(formatDate);
     
     //2.使用<div>區塊，style設定樣式(CSS)，script設定內容
     //將結果寫入id是date的標籤
     //先抓到id是date的標籤物件
     var div = document.getElementById("date");
     //將日期的值寫入標籤物件的夾的內容(innerHTML)中
     div.innerHTML = formatDate;
</script>

顯示效果:

Melvin的部落格

2016年5月22日星期日

JavaScript的基本概念(一) & audio媒體播放

audio 媒體播放

何謂 JavaScript?

type 屬性

JavaScript 與 HTML 標籤的搭配

沒有留言:

張貼留言

[java] 條件控制

2016年5月22日 星期日

JavaScript的基本概念(一) & audio媒體播放

audio 媒體播放

何謂 JavaScript?

type 屬性

JavaScript 與 HTML 標籤的搭配

沒有留言:

張貼留言

[java] 條件控制

2016年5月22日星期日