2024年1月9日 星期二

康軒版資訊科技5-3-1 認識系統平台之一次開啟100個瀏覽器來灌爆記憶體Python版


        在本單元,會讓學生認識記憶體的功能。但是,老師要如何讓學生感興趣的作法?順便引導學生寫文字型態的程式?
        學生很喜歡一直點選瀏覽器。
        有天,老師問他為什麼要這樣做?
        學生回答:我要撐爆記憶體,看看系統會不會崩潰。
        老師說:你這樣做,太LOW。我有方法,可以一次增加100個瀏覽器,要不要學?

檔案名稱:browser100.py
檔案內容:
import webbrowser
url = "https://tw.yahoo.com"
for i in range(5):
    webbrowser.open(url)
執行browser100.py,預設瀏覽器就會出現五個分頁,如下圖:

接下來修改程式碼,將5改為100,如下圖:
檔案名稱:browser100.py
檔案內容:
import webbrowser
url = "https://tw.yahoo.com"
for i in range(100):
    webbrowser.open(url)
執行browser100.py,預設瀏覽器就會出現100個分頁,如下圖:

資料來源:

康軒版資訊科技5-3-1 認識系統平台之一次開啟100個瀏覽器來灌爆記憶體BAT版

系列文章:

        在本單元,會讓學生認識記憶體的功能。但是,老師要如何讓學生感興趣的作法?順便引導學生寫文字型態的程式?
        學生很喜歡一直點選瀏覽器。
        有天,老師問他為什麼要這樣做?
        學生回答:我要撐爆記憶體,看看系統會不會崩潰。
        老師說:你這樣做,太LOW。我有方法,可以一次增加100個瀏覽器,要不要學?
第一階段:教學歷程:
        只見到老師開啟一個記事本,打開edge瀏覽器的捷徑內容,複製目標,貼到記事本。開啟yahoo網頁,將yahoo網址複製,貼上。就會得到
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" https://tw.yahoo.com
接下來,複製該文字,再貼上四次,就會得到五行程式碼。將此檔案儲存,檔名browser100.bat。存檔類型:所有檔案。編碼:ANSI。最後存檔。最後點選browser100.bat,預設瀏覽器就會出現五個分頁。
詳細過程如下:
        1.打開edge瀏覽器的捷徑內容
        2.複製目標
        3.貼到記事本,開啟yahoo網頁,將yahoo網址複製,貼上。
        4.就會得到
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" https://tw.yahoo.com
        5.複製該文字,再貼上四次,就會得到
        6.將此檔案儲存,檔名browser100.bat。存檔類型:所有檔案。編碼:ANSI。最後存檔。

        7.最後點選browser100.bat,預設瀏覽器就會出現五個分頁。
第二階段:教學歷程:
        1.在原先的browser100.bat,刪除四個程式碼,如下圖:
        2.在原本的程式碼,加上for 迴圈,使用方式如資料來源1.BAT批次指令: For的功能介紹

         檔名:browser100.bat
         檔案內容:
for /L %%i in (1 1 5) do (
 "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" https://tw.yahoo.com
)
pause

        3.點選browser100.bat,就會出現5個分頁
        4.將程式碼的5 改為100。存檔後,即可再次點選。
         檔名:browser100.bat
         檔案內容:
for /L %%i in (1 1 100) do (
 "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" https://tw.yahoo.com
)
pause


資料來源:
1.BAT批次指令: For的功能介紹


        
         

2023年12月11日 星期一

Ch02 Pandas DataFrame 介紹 的整理與心得

# 匯入套件
import matplotlib.pyplot as plt
import pandas as pd
import numpy as np
# 用字典形式來建立 DataFrame 
scores = {'Chinese':[100,80,90,70,100],
          'English':[70,90,80,100,90],
          'Math':[80,100,90,70,60]}
df = pd.DataFrame(scores)
print(df
#  在 DataFrame 加入索引
df.index = ['Jobs','Mary','Simon','Allen','Bob']
print(df)
 
#  印出 DataFrame 直行索引 
print(df.index)
#  印出 DataFrame 橫列索引
print(df.columns
#  印出 DataFrame 行列內的值 
print(df.values)  
#  印出 DataFrame 維度
print(df.shape)
#  印出 DataFrame 資料型態
print(df.dtypes)







2023年10月2日 星期一

課本提到社會議題、媒體識讀等觀念時,應如何加入實作題,使整個課程不至於乾枯無趣

       國二上的資科課本提到的社會議題、媒體識讀等觀念。若只上觀念,則整個課程進行則會顯得枯燥乏味。由於後續課程會題到畫筆,因此可加入畫筆的相關課程,讓學生提早適應畫筆的應用。

 實作題:
請依照下方影片做出鏡射畫圖,並將圖形與程式截圖上傳


 Scratch 操作過程

1.選擇腳色:pencil

2.造型:請注意筆尖要在中心點附近,如下圖所示。

3.添加畫筆


4.加入程式碼:

資料來源:


2023年9月18日 星期一

Bootstrap3 常用的Html 及檔案

       最近讀了資料來源1.實戰PHP7+MySQL:從0開始寫出自己想要寫的程式,才開始研究Bootstrap。

檔案下載,解壓密碼:demo1234

檔案名稱:bootstrap3.html
檔案內容:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <title>Bootstrap3 基本頁面</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device,initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!--[if lt IE 9]>
        <script src="bootstrap/js/html5shiv.min.js"></script>
        <script src="bootstrap/js/respond.min.js"></script>
    <![endif]-->
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/jquery-migrate.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

bootstrap3 布局容器:
1.最大寬度 1170px
<div class="container">
</div>
2.全螢幕
<div class="container-fluid">
</div>

bootstrap3 格線系統
布局容器內有row ,row內再細分成12個 columns
<div class="container">
        <div class="row">
            <div class="col-md-12">
 
            </div>
        </div>
    </div>
 
<div class="container-fluid">
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>
</div>
 
bootstrap 將螢幕依解析度分成4種,如下:

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-9 col-sm-8 col-xs-7">
               主內容
            </div>
            <div class="col-md-3 col-sm-4 col-xs-5">
               側邊內容
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-9 col-sm-8 col-xs-7">
               主內容
            </div>
            <div class="col-md-3 col-sm-4 col-xs-5">
               側邊內容
            </div>
        </div>
    </div>
 
bootstrap 外觀
利用class 就可以直接套用,若class內有好幾個樣式,可用空白隔開即可。
<h1> Bootstrap 外觀</h1>
<div class="alert alert-danger">
    警告
</div>
bootstrap 文字編排樣式
<div class="text-left text-lowercase">
    Hello
</div>
<div class="text-right text-uppercase">
    Hello
</div>
<div class="text-center text-capitalize">
    Hello
</div>
 

text-left 內容靠左對齊
text-right 內容靠右對齊
text-center 內容置中對齊
text-justify 內容左右對齊
text-nowrap 內容不自動換行
text-lowercase 小寫文字
text-uppercase 大寫文字
text-capitalize 字首大寫
 
 
 
資料來源:


2023年9月17日 星期日

解決 Captcha 實作不能呈現的問題

      今天終於成功了!!一直無法解決的Captcha不能呈現的問題!!趕快將成紀錄,免得自己忘記。
 
1.安裝LAMP 與 libapache2-mod-php php-mysql php-gd
sudo apt-get install apache2
sudo apt-get install mysql-server
sudo apt-get install php libapache2-mod-php php-mysql php-gd
sudo systemctl restart apache2
 
若不想安裝mysql ,可安裝 mariadb
 sudo apt-get install mariadb-server
 
設定mariadb
$ sudo mysql -u root
> SELECT User, Host, plugin FROM mysql.user;
>CREATE USER 'webadmin'@'localhost' IDENTIFIED BY 'demo1234';
>GRANT ALL PRIVILEGES ON *.* TO 'webadmin'@'localhost';
>UPDATE mysql.user SET plugin='mysql_native_password' WHERE User='webadmin';
>FLUSH PRIVILEGES;
>exit;
若要安裝編輯器,如Geany、Bluefish、Visual Studio Code。
指令如下:
$sudo apt-get install geany bluefish
$sudo apt install gnupg2 software-properties-common apt-transport-https wget
$wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add
$sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
$sudo apt update
$sudo apt install code


2.php 程式碼
檔案名稱:captcha_index.php
檔案內容:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>php圖形驗證碼</title>
    <script>
        function refresh_code(){
            document.getElementById("imgcode").src="captcha.php";
        }
    </script>
    <form name="form1" method="post" action="./checkcode.php">
        <p>請輸入下圖字樣:</p><p><img id="imgcode" src="captcha.php" onclick="refresh_code()" /><br />
           點擊圖片可以更換驗證碼
        </p>
        <input type="text" name="checkword" size="10" maxlength="10" />
        <input type="submit" name="Submit" value="送出" />
    </form>
 
檔案名稱:captcha.php
檔案內容:
<?php
    if(!isset($_SESSION)){ session_start(); } //檢查SESSION是否啟動
        $_SESSION['check_word'] = ''; //設置存放檢查碼的SESSION
    //設置定義為圖片
    header("Content-type: image/PNG");
    /*
      imgcode($nums,$width,$high)
      設置產生驗證碼圖示的參數
      $nums 生成驗證碼個數
      $width 圖片寬
      $high 圖片高
    */
    imgcode(5,120,30);
    //imgcode的function
    function imgcode($nums,$width,$high) {     
        //去除了數字0和1 字母小寫O和L,為了避免辨識不清楚
        $str = "23456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMOPQRSTUBWXYZ";
        $code = '';
        for ($i = 0; $i < $nums; $i++) {
            $code .= $str[mt_rand(0, strlen($str)-1)];
        }
        $_SESSION['check_word'] = $code;
        //建立圖示,設置寬度及高度與顏色等等條件
        $image = imagecreate($width, $high);
        $black = imagecolorallocate($image, mt_rand(0, 200), mt_rand(0, 200), mt_rand(0, 200));
        $border_color = imagecolorallocate($image, 21, 106, 235);
        $background_color = imagecolorallocate($image, 235, 236, 237);
        //建立圖示背景
        imagefilledrectangle($image, 0, 0, $width, $high, $background_color);
        //建立圖示邊框
        imagerectangle($image, 0, 0, $width-1, $high-1, $border_color);
        //在圖示布上隨機產生大量躁點
        for ($i = 0; $i < 80; $i++) {
            imagesetpixel($image, rand(0, $width), rand(0, $high), $black);
        }    
        $strx = rand(3, 8);
        for ($i = 0; $i < $nums; $i++) {
            $strpos = rand(1, 6);
            imagestring($image, 5, $strx, $strpos, substr($code, $i, 1), $black);
            $strx += rand(10, 30);
        }
        imagepng($image);
        imagedestroy($image);
    }
?>
 
 
檔案名稱:checkcode.php
檔案內容:
<?php
if(!isset($_SESSION)){
    session_start();
    }  //判斷session是否已啟動
if((!empty($_SESSION['check_word'])) && (!empty($_POST['checkword']))){  
 //判斷此兩個變數是否為空
      if($_SESSION['check_word'] == $_POST['checkword']){
          $_SESSION['check_word'] = ''
 //比對正確後,清空將check_word值        
          header('content-Type: text/html; charset=utf-8');       
          echo '<p> </p><p> </p><a href="./chptcha_index.php">OK輸入正確,將於一秒後跳轉(按此也可返回)</a>';
          echo '<meta http-equiv="refresh" content="1; url=./captcha_index.php">';       
          exit();
     }else{
         echo '<p> </p><p> </p><a href="./chptcha_index.php">Error輸入錯誤,將於一秒後跳轉(按此也可返回)</a>';
         echo '<meta http-equiv="refresh" content="1; url=./captcha_index.php">';
     }
}
?>
 
 
資料來源:


資訊科技課堂中指導學生使用教育版Gemini ,如何讓學生不敢對教育版Gemini亂問問題

        自從Google 教育版可以讓教師、學生免費使用 Gemini。課堂中,老師可以在平板教學、資訊科技教學等課堂中,指導學生使用 Gemini。但是調皮的學生總是隨著自由想像,提出一些很奇怪的問題。但是老師可以怎麼做?讓學生不敢亂問問題?         一、如何使...