Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to Website Programming
Search
Jeremy Yen
October 08, 2013
Technology
110
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Introduction to Website Programming
Jeremy Yen
October 08, 2013
More Decks by Jeremy Yen
See All by Jeremy Yen
dEXonation
jeremy5189
0
130
A day of full stack developer @ NFU
jeremy5189
0
220
Club Mate and Hacker - 34C3 @ SITCON
jeremy5189
2
740
SITCON 2017 論壇系統開發分享 @ SITCON 2017 Summer
jeremy5189
0
240
poManeuver: Poland into space
jeremy5189
0
480
How we hacked a forum
jeremy5189
0
530
Bdecisive - Booking.com Taipei Hack 2nd Prize
jeremy5189
0
590
Social Intelligence Smart-device project
jeremy5189
0
71
IoT made easy @ SITCON x HK
jeremy5189
0
110
Other Decks in Technology
See All in Technology
モダンフロントエンド 開発研修
recruitengineers
PRO
4
780
案件に一番詳しいAIを Amazon Bedrock AgentCore で作る ― 知見が知見を生むチームへ / Compounding Knowledge with AgentCore
yusukeshimizu
1
140
SO-101×VLAによる3色キューブのピック&プレース
abeja
0
220
20260804_Q4AzureUpdateBite_FabricDataAgentの精度を高める設計.pdf
matayuuu
1
150
AIコーディングの次。コードレビューと理解負荷を解消して組織の開発生産性を高める
moongift
PRO
2
2.7k
【GCC2026】大規模言語モデルを活用した内製検索サービスの社内展開や業務活用
bandainamcostudios
PRO
0
250
認知負荷をGemini で溶かす — GKE 基盤「Orbit」における AI エージェントの実践
sansantech
PRO
1
320
JavaScript 研修 (2026)
recruitengineers
PRO
2
620
Reference-Free Image Quality Assessment for Virtual Try-On via Human Feedback
zozotech
PRO
0
630
今こそ聞きたいソフトウェア設計 ドメイン駆動設計再入門
masuda220
PRO
17
7.6k
QAエンジニア起点で進める、SmartHRにおける信頼性向上について
kaomi_wombat
1
150
コーチングの奥義 何もしないテクニック
jinwatanabe
0
110
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
How to Think Like a Performance Engineer
csswizardry
28
2.7k
The SEO Collaboration Effect
kristinabergwall1
1
520
GraphQLとの向き合い方2022年版
quramy
50
15k
How to Ace a Technical Interview
jacobian
281
24k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
410
What's in a price? How to price your products and services
michaelherold
247
13k
The browser strikes back
jonoalderson
0
1.5k
Scaling GitHub
holman
464
140k
So, you think you're a good person
axbom
PRO
2
2.1k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
570
Odyssey Design
rkendrick25
PRO
2
760
Transcript
NTUST Jeremy Yen
HTML 超文件標示語言 HyperText Markup Language,HTML 純文字
網頁瀏覽器可解讀 用來描述整個網頁的架構
CSS 層疊樣式表 Cascading Style Sheets 簡化HTML裡的樣式語法,實現
HTML >> 處理網頁架構 CSS >> 處理網頁樣式(Style) 網頁瀏覽器會將HTML和CSS一起解讀
JavaScript 昇陽電腦 / Sun Microsystems 內嵌在HTML的一段程式碼
<script language=“javascript”>程式碼</script> 由瀏覽器執行(客戶端)
VBScript Mircorosft 開發 內嵌在HTML的一段程式碼 <script language=“vbscript”>程式碼</script>
由瀏覽器執行(客戶端) 跟VB的語法很相近
ASP ASP: Active Server Page 由Microsoft開發,非開源軟體
僅能於Windows Server上執行 網頁副檔名為 .asp 或 .aspx (.NET 版) 可使用 VB,C#等語言進行開發 開發工具: Visual Web Developer Express (VS)
PHP PHP:Hypertext Preprocessor 腳本語言,主要用途是在於處理動態網頁 語法跟C++幾乎一樣
網頁副檔名為.php Facebook 以此語言開發
PHP運作原理 網站主機 <-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ 客戶端
<< 要求home.php << POST資料 id,password -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐> 伺服器解析PHP檔案 依PHP程式碼處理輸入(POST)資料 處理完成,傳回 home.php (僅含HTML)
home.php (伺服器上) • <html> <head>
<title> <?php echo $id; ?> </title> </head> <body> <p> <?php If ($password == $db_data) { echo “登入成功”; } ?> </p> </body> </html>
home.php (客⼾戶端上) <html> <head>
<title> jeremy5189 </title> </head> <body> <p>登入成功</p> </body> </html>
PHP的標準輸⼊入輸出 輸出 echo $變數 輸入
$data = $_POST[‘data’] (從HTML的表單等) $id = $_GET[‘id’] (從網址)