國字漢字轉換器

功能説明

轉換成日文漢字,方便使用網頁或文書處理的預設日文漂亮字型

日文字型一覽

範例

textarea#old
textarea#newText
textarea
 width: 300px
 height: 400px
//展示用文字
var text="這是一段中文内容的説明文\n注意觀察【内】﹐【説】的變化";

//使用陣列紀錄
//持續更新中
var replaceArray=[
 {from:"內",to: "内"},
 {from:"值",to: "値"},
 {from:"查",to: "査"},
 {from:"啟",to: "啓"},
 {from:"說",to: "説"},
 {from:"產",to: "産"},
 {from:"每",to: "毎"},
 {from:"蔥",to: "葱"}
];

//沒有對應的日文漢字
//喵

//origText到時候代入old的值
var translate = function(origText){
 for(i=0;i<replaceArray.length;i++){
 //取代全部 參考這篇文章
 var repAll=new RegExp(replaceArray[i].from, "g");

 origText=origText.replace(repAll, replaceArray[i].to);
 }
 return origText;
}

var old=document.querySelector("#old");
var newText=document.querySelector("#newText");

//先把展示用文字帶入
old.textContent=text;

//建立翻譯功能
newText.textContent=translate(old.value);

//綁定當old有輸入事件,觸發翻譯
old.addEventListener("input",
 function(){
 newText.textContent=translate(old.value);
 }
);

Display

See the Pen 漢字國字轉換器 by Ian Chen (@ianchen0419) on CodePen.

震動效果

概念

利用setInterval快速地左右搖晃,達成震動的效果

範例

button#wiggle Shake it
#wiggle
 position: relative
//讓他一開始不要搖
var wiggleTime = 31;
var wiggle=document.querySelector("#wiggle");

window.setInterval(
 function(){
 if(wiggleTime<=31){
 wiggleTime+=1;
 //console.log(wiggleTime);
 
 if(wiggleTime%2==0){
 wiggle.style.left="-5px";
 }else{
 wiggle.style.left="5px";
 } 
 } 
 }
 ,60);

wiggle.addEventListener("click",
 function(){
 wiggleTime=0;
}
);
Display

JavaScript 所有重複字取代

使用 replace()

#dog
#cat
//宣告字串
var str="I have a dog, I love all dog, dog is my best friend!"

//顯示原字串
document.querySelector("#dog").innerHTML=str;

//執行取代,g代表global search,找出所有dog
//反斜線\為抵銷特殊字元
//取代所有dog為cat
var strReplaced=str.replace(/dog/g, "cat");
//【/dog/g】等於new RegExp("dog", "g")
//所以也可以寫成
var strReplaced=str.replace(RegExp("dog", "g"), "cat");

//顯示取代後的成果
document.querySelector("#cat").innerHTML=strReplaced;

Display
所有的dog都被取代成cat了

聲音播放器 Audio(), play()

原理

  • 撥放器設定 new Audio(“聲音網址”)
  • 開始撥放 play()

範例

button#btn click me

原生 JavaScript 版本

var Audio=new Audio("http://www.monoame.com/awi_class/ballsound/click18.wav");
var btn=document.querySelector("#btn");
var MusicPlay=function(){
 Audio.play();
}
btn.addEventListener("click", MusicPlay);

jQuery 版本

var btnAudio=new Audio("http://www.monoame.com/awi_class/ballsound/click18.wav");
$("#btn").click(
 function(){
 btnAudio.play();
 }
);
Display

Python 字串

字串内顯示單引號’的方法

#外面用""包住
>>>print "I'm Python"
"I'm Python"

字串内顯示雙引號"的方法

#外面用'包住
>>>print 'this is a "quote"'
'this is a "quote"'

換行符號:\n

>>>print "Here is new line \n and here is second line"
"Here is new line 
 and here is second line"

tab縮排符號:\t

>>>print "Here is new line \t and here is second line"
"Here is new line   and here is second line"

Python 3 :print 視為函數(),非述句

#匯入P3 Module
>>>from __future__ import print_function

>>>print("Hello World")
"Hello World"

len(),計算字元數

#len裡面要放字串形式
#空白也會計算進去
>>>len("Hello World")
11

indexing

#先把字串存成變數
>>>s="Hello World"
#使用[],找對應的字元
>>>s[0]
"H"
#從0開始算
#空格也會算進去


#找某個字以後的東西
#1代表這個字e (H是0)
#冒號: 代表~
>>>s[1:]
"ello World"

#找某個字以前的東西
#3代表這個字l (H是0)
#冒號: 代表~
>>>s[:3]
"Hel"

#找所有字元[:]
>>>s[:]
"Hello World"

#[負數] 從末端找回來
#H是0,-1會回到末端找到d
>>>s[-1]
"d"

#找除了最後一個字以外的
>>>s[:-1]
"Hello Worl"

#:: 表示從頭到尾
#[::1] 表示1次踏1階(每個字都顯示)
>>>s[::1]
"Hello World"

#[::2] 表示1次踏2階(每兩個字顯示一個字)
>>>s[::2]
"HloWrd"

#[::-1]反轉,倒退走
>>>s[::-1]
"dlroW olleH"

immutability 字串的不可修改性

>>>s="Hello World"
"Hello World"

>>>s[0]="X"
不可以改字串裡面的內容

#但是可以增加
>>>s + "concatenate me"
"Hello World concatenate me"

upper()  改大寫 / lower() 改小寫

>>>s="Hello World"
"Hello World"

>>>s.upper()
"HELLO WORLD"

>>>s.lower()
"hello world"

split() 切割

>>>s="Hello World"
Hello World

>>>s.split("e")
["H", "llo World"]

PHP結合MySQL

資料庫連線

<?php

//網址:localhost 因為網頁跟資料庫的伺服器在電腦上面
//登入帳號:root(預設)
//密碼:留空
mysql_connect("localhost", "root", "");

?>

檢査資料庫連線是否成功

<?php

$Connect=mysql_connect("localhost", "root", "");

if (!$Connect) {
 die("連線失敗,錯誤訊息:".mysql_error());
}
echo "連線成功";
mysql_close($Link);

?>

選擇資料庫

<?php

//DB:DataBase
//member是要操作的資料庫名稱
mysql_select_db("hahow");

?>

資料庫長得像這樣
左邊這排外排的就是資料庫 (hahow, information_schema, mysql, performance_schema, phpmyadmin, test)
内縮的是資料表 (mem, member)

phpmyadmin

SQL査詢指令

<?php

//SELECT後面接欄位,*代表所有欄位
//FROM後面接資料表,從member這個資料表裡面讀取
//mysql_query()裡面的東西用""包起來
//査詢member這個資料表裡面所有内容
//將mysql_query()的回傳値存在$re裡面
$re=mysql_query("SELECT * FROM member");

?>

回傳資料處理  mysql_fetch_array()

<?php

$re=mysql_query("SELECT * FROM member");
//在回傳値$re中擷取其中一筆資料出來
$row=mysql_fetch_array($re);
//提取第一筆name資料
//如果要提取很多資料,必須寫成迴圈

echo $row["name"];
//資料會存成陣列

/************寫成迴圈版本**************/

$re=mysql_query("SELECT * FROM member");
while($row=mysql_fetch_array($re)){
 echo $row["name"];
 //只要條件符合,就會一筆一筆地把資料處裡過去
}

?>

MySQL指令使用變數

<?php

//mysql_query()裡面的MySQL指令中的變數
//要用單引號'包起來
//並且變數裡面不能有雙引號"
$re=mysql_query("SELECT * FROM member" WHERE email='$_GET[email]'");

?>

抓取資料總筆數 mysql_num_rows()

<?php

$re=mysql_query("SELECT * FROM member");

//mysql_num_rows()裡面放存mysql_fetch_array()的變數
$dataNum=mysql_num_rows($re);

echo $dataNum;
//會顯示總共有幾筆資料

?>

SQL Injection 資料庫隱碼注入攻擊

<?php

//沒有防護措施的原始php
//"$_GET["email"]"是要産生MySQL指令的片段
SELECT * FROM member WHERE id="$_GET["email"]"

//正常的情況下:使用者填入正常的email
SELECT * FROM member WHERE id="MingWang@gmail.com"
//SQL query査詢功能會回傳符合id="MingWang@gmail.com"的資料

//受到攻擊:有人輸入" OR "1"="1
SELECT * FROM member WHERE id="" OR "1"="1"
//id不一定等於空値,但是1永遠等於1,所以true
//所有資料都符合id="" OR "1"="1",所以會回傳所有資料

//結果:不論帳號密碼是對或錯,都可以直接登入

?>

防止SQL Injection:mysql_escape_string()

<?php

//$q=使用者輸入的資料
//使用SQL query査詢指令之前先過濾
$q=mysql_escape_string($q);

//然後開始査詢
SELECT * FROM member WHERE id="$q"

?>

 

 

MySQL 基本知識

資料型別

  • text:文字
  • varchar:固定型態的文字
  • int:整數數字
  • bool:是/非

建立資料庫

  1. 啓動XAMPP
  2. http://localhost/phpmyadmin/
  3. 新增,編碼選擇utf8_unicode_ci
  4. 建立欄位:AI (Auto Increment),毎新增一筆資料値+1
  5. 建立欄位:primary 通常用於表示索引的欄位 (id)
  6. 完成後,看預覽id旁邊會出現小鑰匙,代表是這張資料表的索引
  7. 加入幾筆資料:新增頁籤

建立資料表指令

//點選SQL頁籤建立資料表
//因為是指令所以沒有分號
//mem為這張新增資料表的名稱
//()裡面輸入要新增的欄位及資料型態
CREATE TABLE mem(
 name TEXT, email TEXT, pass TEXT)

新增資料指令

//點選SQL頁籤新增資料
//要在mem資料表新增以下資料
//要新增name,email,pass三個欄位的資料
//name的値為MingWang
//email的値為MingWang@gmail.com
//pass的値為123456
INSERT INTO mem(name,email,pass) VALUES("MingWang","MingWang@gmail.com","123456")

刪除資料指令

//點選SQL頁籤刪除資料
//要刪除mem資料表裡面的東西
//email為MingWang@gmail.com這串資料
//SQL的判斷是否等於只有一個=
DELETE FROM mem WHERE
 email = "MingWang@gmail.com"

讀取 / 篩選資料指令

//SELECT後面接欄位,*代表所有欄位
//FROM後面接資料表,從mem這個資料表裡面讀取
//WHERE後面接篩選條件(也可以省略WHERE篩選步驟)
SELECT * FROM mem WHERE pass="9999"


//多條件篩選
SELECT * FROM mem WHERE 
 pass="9999" AND name="李小龍"

//AND且
//OR或
//BETWEEN...AND...指定區間

更新資料指令

//UPDATE後面接要改的資料表mem
//SET後面接要更新的欄位name,値改成BruceLee
//WHERE接這筆資料的條件,email為BruceLee@kungfu.com的資料要改
UPDATE mem SET name = "BruceLee"
 WHERE email="BruceLee@kungfu.com"

更改自動索引値

執行帳號測試,一不小心讓自動索引値跟資料表數對不上時使用

//ALTER TABLE 後面接要改的資料表mem
//=後面接,下一個新增資料的索引値
//現在有8筆資料,下一個新增的會是9
ALTER TABLE mem AUTO_INCREMENT=9

PHP 基本知識

基本語法

<?php
//單行註解

/*
多行註解
*/

//echo 顯示文字
//;代表結束
echo "Hello world";
?>

變數

<?php

/*$宣告變數*/
$x=3;
$y=5;

/*修改變數*/
$x=4;
//x就變成4了

/*輸出變數*/
echo $x;

/*同時輸出字串與變數*/
$name="Ian";
//中間用.連接兩者
echo "Hello".$name;
//output: Hello Ian

/*同時輸出法2*/
$name="Ian";
echo "Hello $name";
//output: Hello Ian
//echo 使用"包起來,會自動識別裡面的$變數

/*同時輸出法注意*/
$name="Ian";
echo 'Hello $name';
//output: Hello $name
//echo 使用'包起來,不會識別裡面的$變數,全部都會變成字串


?>

運算

1+2
1:運算元
+:運算子
2:運算元

基本運算子

運算子符號
+ 相加
相減
* 相乘
/ 相除
% 模除(取餘數)
++ 連加1
連減1

關係運算子

關係運算子
> 大於
< 小於
>= 大於等於
<= 小於等於
== 等於
!= 不等於
運算成立:true,echo顯示為1
運算不成立:false,echo 顯示為無

邏輯運算子:針對布林運算

邏輯運算子
&&
||
! 非(反轉現在ture/false的狀態)

選擇性敘述:if-else

<?php

// 獲得今天的日期,並將 Monday/Tuesday/.../Sunday 存放於 wday 變數中
date_default_timezone_set("Asia/Taipei");
$today = getdate();
$wday = $today['weekday'];

// 依照不同的星期顯示繞口令
if($wday == 'Monday'){
    echo "星期一,猴子穿新衣";
}
elseif($wday == 'Tuesday'){
    echo "星期二,猴子肚子餓";
}
elseif($wday == 'Wednesday'){
    echo "星期三,猴子去爬山";
}
elseif($wday == 'Thursday'){
    echo "星期四,猴子看電視";
}
elseif($wday == 'Friday'){
    echo "星期五,猴子去跳舞";
}
elseif($wday == 'Saturday'){
    echo "星期六,猴子去斗六";
}
else{
    echo "星期日,猴子過生日";
}

?>

選擇性敘述:switch case

//放晴:$sunny==2
//陰天:$sunny==1
//非晴非陰→雨天:default

switch($sunny){
  //$sunny==2
  case 2:
    //放晴出去玩
    play();
    //沒有break的話即便$sunny==2,程式碼也會繼續往下執行default的lol();
    break;

  //$sunny==1
  case 1:
    //陰天散步
    walk();
    break;

  //既非晴天亦非陰天
  default:
    //在家打lol
    lol();
}

while迴圈

<?php

while($sunny==false){
  //如果天還沒亮,繼續睡覺
  sleep();
}

?>

陣列

<?php

// 建立陣列
$fruits = array("蘋果","香蕉","梨子","芭樂");
//輸出索引値key為 0 的元素
echo $fruits[0];
echo "<br>";

// 建立陣列(自訂索引値)
$fruits_eng = ["a"=>"蘋果","b"=>"香蕉","p"=>"梨子","g"=>"芭樂"];
// 輸出索引値為 p 的元素
echo $fruits_eng["p"];

?>

函數

參數→函式本體→回傳値

<?php

//square為函式的名字
//$x為參數
function square($x){

 $y=$x*$x;
 return $y;
 //return回傳値

}
echo square(2);

?>

HTTP Method

client向server要資料的溝通方式

  • GET 向server索取資料
  • POST 給予server資料

GET:html送出資料後跳出的php網址列會顯示使用者鍵入的資料

<!-- 送出的對象13-1.php -->
<!-- 送出的方式HTTP Method GET -->
<form action="13-1.php" method="get">
 <input type="text" name="firstname">
 <input type="submit" name="submit" value="送出">
</form>
<?php

//$_GET超級全域變數
//只要PHP存在,有對應的GET資料傳進來時,這個變數就會永遠存在
$name = $_GET['firstname'];

echo "Hi $name!";

?>

POST:html送出資料後跳出的php網址列不會顯示使用者鍵入的資料

<!-- 送出的對象13-1.php -->
<!-- 送出的方式HTTP Method POST -->
<form action="13-2.php" method="post">
 <input type="text" name="firstname">
 <input type="submit" name="submit" value="送出">
</form>
<?php

//$_POST超級全域變數
//只要PHP存在,有對應的POST資料傳進來時,這個變數就會永遠存在
$name = $_POST['firstname'];
echo "Hi $name!";

?>

isset()檢査變數是否存在

<?php

$a=0;

isset($a);//$a已經宣告過,所以値等於true
isset($b);//$b已經宣告過,所以値等於false

?>

empty()檢査變數是否為空

<?php

$a="";
$b="Hi";

empty($a);//$a為空値,所以値等於ture
empty($b);//$b不為空値,所以値等於false
?>

htmlspecialchars() 防止XSS

網頁漏洞XSS:Cross Site Scripting

透過別的網站,或站外的方式,修改HTML的内容,使網頁做出他原本不應該做的動作

//html(内崁沒有防護措施的php)

<form action="<?php echo $_SERVER["PHP_SELF"];?>">

//表單送出時會送回這個檔案本身
//如果使用者瀏覽ex.com/test.php
//HTML就會變成<form action="test.php">
//但如果使用者瀏覽ex.com/一行JS程式碼
//HTML就會執行那段JS程式碼了QQ

htmlspecialchars() 讓輸入的程式碼變成純文字的編碼,使文字失去程式碼的執行能力

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

//htmlspecialchars()裡面的程式碼變成純文字,失去執行程式的能力

htmlspecialchars()的使用時機:
使用php産生網頁内容,需要使用者輸入資料時,
利用此function過濾使用者輸入的内容

Cookie

網頁存在使用者電腦裡面的一些資料

<?php

//建立
setcookie("user", "Ian", time()+3600);
//建立一個名為user的cookie
//其値為Ian
//失效時間為此程式執行後3600秒
//time()為程式執行當下的時間

//刪除他
setcookie("user", "Ian", time()-3600);

//讀取:超級全域變數
echo $_COOKIE["user"];
?>

Session:存放在伺服器的Cookie

比Cookie安全,比較不容易被竄改(可以用在登入狀態的資料等)

<?php

//開始Session
session_start();

//寫入
//email是這個session的名字
//ianchen0419@gmail.com是這個session的値
$_SESSION["email"]="ianchen0419@gmail.com";

//或是也可以不輸入値直接使用他
$_SESSION["email"];

//印出ianchen0419@gmail.com
echo $_SESSION["email"];

//刪除
unset($_SESSION["email"]);
//刪除email這筆SESSION

//刪除這台電腦所有的session
session_destroy();
?>

 

HTML表單 form

<input>  單行文字

type:類型
name:欄位名稱(取名)
placeholder:預設値
required:必填
<input type="text" name="firstname" placeholder="姓名" required="true">

Display

<textarea>  多行文字

<textarea name="comment" placeholder="意見" required="true">

Display

<input>  送出按鈕

type=””submit”(預設顯示文字為submit/提交)

<input type="submit" name="send" required="true">

Display

<input>  更改提交文字

value=”註冊”(把提交改為註冊)
<input type="submit" name="send" required="true" value="註冊">

Display