kchen-tw/2016-06-07 bcc16spr example.markdown

## 2016-06-07 bcc16spr example.markdown

      
    Raw
  

              2016-06-07 bcc16spr example.markdown
            
          
    2016-06-07 計概 HTML, CSS & JavaScript 上課範例

Instructor


趙坤茂 (Kun-Mao Chao)

Teaching assistant


陳琨 (Kun Chen)

Course Website


https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/index.htm


## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JavaScript Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <div class="container-fluid">

        <!-- 導覽例 -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">計算機概論</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="index.html">首頁</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">上課練習 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">A+B=C</a></li>
                                <li><a href="#">1+2+...+n=?</a></li>
                                <li><a href="#">使用匿名函式</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">more</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!-- 這個是 Hello JavaScript 的標題-->
        <div class="jumbotron">
            <h1>JavaScript 練習</h1>
            <p>這是一個在計概課上做的 JavaScript 練習</p>
            <p>
                <a class="btn btn-primary btn-lg" href="https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/index.htm" target="_blank" role="button">
                課程網頁
                <span class="glyphicon glyphicon-new-window"></span>
                </a>
            </p>
        </div>

        <div class="page-header">
            <h1>照片隱藏與顯示</h1>
        </div>

        <!-- 這裡是放按鈕的區域 -->
        <div class="row">
            <div class="col-md-12">
                <a href="#" class="btn btn-default">按鈕一</a>
                <a href="#" class="btn btn-primary">按鈕二</a>
                <a href="#" class="btn btn-success">按鈕三</a>
                <a href="#" class="btn btn-danger">按鈕四</a>
            </div>
        </div>

        <!-- 這裡是放照片的區域 -->
        <div class="row">
            <div class="col-md-8">
                <img src="https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/IMG_3778.JPG" alt="" class="img-thumbnail" /> </div>
            <div class="col-md-4">
                <img src="https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/IMG_3779.JPG" alt="" class="img-thumbnail" />
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <img src="https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/IMG_3780.JPG" alt="" class="img-thumbnail" />
            </div>
            <div class="col-md-6">
                <img src="https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/IMG_3781.JPG" alt="" class="img-thumbnail MyImg" />
            </div>
        </div>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-2.2.4.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <!-- 引入自己寫的 JS 檔 -->
    <script src="js/my.js"></script>
</body>

</html>

## my.js
// 當文件都下載完後執行
$(document).ready(function () {

    // 找 div 且 class 有 col-md-12 的兒子 class 有 btn
    // 關於 selector 可參考 http://www.w3schools.com/jquery/jquery_ref_selectors.asp
    //
    // 有時候 $() 會找到許多個同樣的 element ，若要對每一個都做一樣的事
    // 可以使用 $().each() 尋訪一個 element
    // 更多細節請參考 http://www.w3schools.com/jquery/misc_each.asp
    $('div.col-md-12 > .btn').each(function (index) {

        // 這裡的 this 是目前被尋訪的 element
        // $(this).bind() 是將目前被尋訪的 element 的 click 的事件與匿名函式綁在一起。
        $(this).bind('click', function () {
            console.log('index:' + index + ' 按到了喔');

            // 抓出 img 中的第 index 個
            var img = $('img:eq(' + index + ' )');

            // 判斷img是否有 visible 屬性
            if (img.is(":visible")) {
                // 將 img 在網頁中隱藏
                img.hide();
            } else {
                // 將 img 在網頁中顯示
                img.show();
            }
        });
    });
});
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>JavaScript Demo</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->

	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	</head>

	<body>

	<div class="container-fluid">

	<!-- 導覽例 -->
	<nav class="navbar navbar-default">
	<div class="container-fluid">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
	aria-expanded="false">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">計算機概論</a>
	</div>

	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

	<ul class="nav navbar-nav navbar-right">
	<li><a href="index.html">首頁</a></li>
	<li class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">上課練習 <span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#">A+B=C</a></li>
	<li><a href="#">1+2+...+n=?</a></li>
	<li><a href="#">使用匿名函式</a></li>
	<li role="separator" class="divider"></li>
	<li><a href="#">more</a></li>
	</ul>
	</li>
	</ul>
	</div>
	<!-- /.navbar-collapse -->
	</div>
	<!-- /.container-fluid -->
	</nav>
	<!-- 這個是 Hello JavaScript 的標題-->
	<div class="jumbotron">
	<h1>JavaScript 練習</h1>
	<p>這是一個在計概課上做的 JavaScript 練習</p>
	<p>
	<a class="btn btn-primary btn-lg" href="https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/index.htm" target="_blank" role="button">
	課程網頁
	<span class="glyphicon glyphicon-new-window"></span>
	</a>
	</p>
	</div>

	<div class="page-header">
	<h1>照片隱藏與顯示</h1>
	</div>

	<!-- 這裡是放按鈕的區域 -->
	<div class="row">
	<div class="col-md-12">
	<a href="#" class="btn btn-default">按鈕一</a>
	<a href="#" class="btn btn-primary">按鈕二</a>
	<a href="#" class="btn btn-success">按鈕三</a>
	<a href="#" class="btn btn-danger">按鈕四</a>
	</div>
	</div>

	<!-- 這裡是放照片的區域 -->
	<div class="row">
	<div class="col-md-8">
	<img src="https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/IMG_3778.JPG" alt="" class="img-thumbnail" /> </div>
	<div class="col-md-4">
	<img src="https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/IMG_3779.JPG" alt="" class="img-thumbnail" />
	</div>
	</div>

	<div class="row">
	<div class="col-md-6">
	<img src="https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/IMG_3780.JPG" alt="" class="img-thumbnail" />
	</div>
	<div class="col-md-6">
	<img src="https://www.csie.ntu.edu.tw/~kmchao/bcc16spr/IMG_3781.JPG" alt="" class="img-thumbnail MyImg" />
	</div>
	</div>

	</div>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="js/jquery-2.2.4.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="js/bootstrap.min.js"></script>

	<!-- 引入自己寫的 JS 檔 -->
	<script src="js/my.js"></script>
	</body>

	</html>
	// 當文件都下載完後執行
	$(document).ready(function () {

	// 找 div 且 class 有 col-md-12 的兒子 class 有 btn
	// 關於 selector 可參考 http://www.w3schools.com/jquery/jquery_ref_selectors.asp
	//
	// 有時候 $() 會找到許多個同樣的 element ，若要對每一個都做一樣的事
	// 可以使用 $().each() 尋訪一個 element
	// 更多細節請參考 http://www.w3schools.com/jquery/misc_each.asp
	$('div.col-md-12 > .btn').each(function (index) {

	// 這裡的 this 是目前被尋訪的 element
	// $(this).bind() 是將目前被尋訪的 element 的 click 的事件與匿名函式綁在一起。
	$(this).bind('click', function () {
	console.log('index:' + index + ' 按到了喔');

	// 抓出 img 中的第 index 個
	var img = $('img:eq(' + index + ' )');

	// 判斷img是否有 visible 屬性
	if (img.is(":visible")) {
	// 將 img 在網頁中隱藏
	img.hide();
	} else {
	// 將 img 在網頁中顯示
	img.show();
	}
	});
	});
	});