NCCUCS Java Script HTML Forms ServerSide April 28

NCCUCS 軟體程概論 Java. Script(簡介), HTML Forms, Server-Side April 28, 2014

Agenda • Java. Script簡介 • Java. Script的歷史背景 • Java. Script學習要素 – 語言功能特色 • HTML

Client-Side Web 程式 • We can embed a small program into a HTML file

Let’s glance a simple Java. Script program: Client-Side Interaction When the page is loaded,

Let’s glance a simple Java. Script program: Name: John <HTML> <HEAD> <TITLE>Demo</TITLE> </HEAD> <BODY>

Historical Background of Client-Side App • Back to 1994~1995 • WWW is booming •

Java and the Internet • A Java applet is a small program that can

What is Java? • An object-oriented programming language developed by Sun Microsystems. Language Virtual

(the First) Browser Wars • 1996~1998 • Netscape Navigator vs. • MS Internet Browser

What is Java. Script that allows you to write programs that Java. Script. Aarelanguage

XHTML, CSS and Java. Script • XHTML – Structure and Semantics of Content •

Programming with Java. Script A Brief Overview

Simple I/O vs. GUI • 傳統UI – The Program drives the User • >請輸入密碼

on. Load 和 on. Unload事件 • on. Load和on. Unload的練習，如下圖 Event handlers <script type=“text/javascript” >

I/O Examples • 範例 prompt <script> var flag=true; while(flag){ var name=prompt("輸入你的姓名", "default"); if(confirm("你的名字是"+name+ "對嗎?

HTML Forms <form action="web app URL" method="get or post"> <fieldset> form controls </fieldset> </form>

<input>標籤中各物件介紹 • Text元件 – <input type=“text” name=“Obj. Name” value=“Obj. Value” size=“ 20”> • Password元件

• Button元件 • 搭配Java. Script使用 – <input type=“button” name=“Obj. Name” value=“Obj. Value”> •

• EX. html <html> <body> <form name="frm" method="GET" action="EX 12. html"> 帳號: <input

• EX. html <html> <body> <form name="frm" method="GET" action="EX 13. html"> 姓名: <input

The Execution Environment of Web Applications Server Client Web Application Database User input 各種介面

Common Gateway Interface (CGI) Server Client Web Application User input Browser Internet Execution result

User Input thru HTML Form example Input controls Execution Trigger

Browser Input for Form <HEAD><TITLE>Sample Form</TITLE></HEAD><BODY> <H 1>Application for a Credit Card</H 1> <FORM

Executing through Get • GET and Query string: • Submit按下後User form input is appended

Executing Through Get • GET requests can include a query string as part of

Special Characters in Parameters: URL-encoding • Browsers use an encoding when sending query strings

GET 的缺點 • 輸入內容可能敏感，URL query string會洩露資訊 • URL+Query string can be bookmarked (and

PHP : “Hypertext Preprocessor” • A server-side scripting language for writing Web applications •

How Does PHP Work? • PHP is a program that performs dynamic HTML scripting

The Client Server Interaction http: // …. / …html HTML Form HTML Result PHP

Form Processing in PHP Client side: HTML form Name: Joe Age: Age In PHP,

A Motivation Example for Sessions http: // …. / …php Please sign in: Username:

Session Data Example: Shopping Cart Session Data Shopping Cart Item Ordered Catalog Item Ordered

Session and State Management • HTTP is stateless. Server maintains no information about past

Session Tracking • How to maintain (track) a client session? – DIY by carrying

Hidden Fields and URL Rewriting 1. “Hidden” fields are added to a form but

Cookie Introduction • Cookies are small pieces of information stored by the webserver on

Cookies • Data, not food • Data, not software Web server 1. Send request

Cookies: keeping “state” client amazon: 1678 ebay: 8734 one week later: Cookie file amazon:

Using Cookie for State Management • Persistent cookies: Store the client-specific data in cookies,

Location of Cookie Files (Keep Changing) • Internet Explorer saves all cookies for a

Cookie Limitations • A given domain may only set 20 cookies per machine. •

3 rd party cookies • Cookies with a different domain name from that of

The Dark (Burnt? ) Side of Cookies • Cookies identify your browser to server

Adding Numbers Please input the first number: Sum: 繼續加法 Page 1 // 初始值為 0

Adding Numbers Please input the first number: Sum: 繼續加法 Page 1 50 結束

Adding Numbers Please input the second number: Sum: 繼續加法 Page 2 50 結束

Adding Numbers Please input the second number: Sum: 繼續加法 Page 2 30 50 結束

Adding Numbers Please input the third number: Sum: 繼續加法 Page 2 80 結束

Adding Numbers You entered 2 numbers. The sum of the numbers you entered is

Slides: 74

Download presentation

NCCUCS 軟體程概論 Java. Script(簡介), HTML Forms, Server-Side April 28, 2014

Agenda • Java. Script簡介 • Java. Script的歷史背景 • Java. Script學習要素 – 語言功能特色 • HTML Forms – 作業三 • Overview of Java. Script Programming – GUI and Event-Driven

Client-Side Web 程式 • We can embed a small program into a HTML file that can be sent along with the HTML page to a user (browser). 將靜態網頁添增動態內容 HTML 程式 URL (internet) Browser 執行器 • 主要類型 • Java Applet • Active. X control • Java. Script code • Flash

Let’s glance a simple Java. Script program: Client-Side Interaction When the page is loaded, the user types a name and a text color. Then the page content is setup accordingly. Name: John Which color? Purple

Let’s glance a simple Java. Script program: Name: John <HTML> <HEAD> <TITLE>Demo</TITLE> </HEAD> <BODY> … <SCRIPT LANGUAGE=javascript> … … prompt('Name: ', ''); … prompt('Which color? ', ''); Which color? Purple Explanation: … document. write(…); </SCRIPT> … </BODY> </HTML> • The input dialogs are invoked by prompt. • The document. write method outputs the content in the page. • Each Java. Script statement is ended with a semi-colon: ; .

Historical Background of Client-Side App • Back to 1994~1995 • WWW is booming • The Java programming language made her debut in May 23, 1995 The language for the Internet!

Java and the Internet • A Java applet is a small program that can be sent along with an HTML page to a user (browser). 將靜態網頁添增動態內容 HTML applet URL (internet) Browser client resident Java classes JVM

What is Java? • An object-oriented programming language developed by Sun Microsystems. Language Virtual Packages Machine (API)

(the First) Browser Wars • 1996~1998 • Netscape Navigator vs. • MS Internet Browser • Navigator率先支援 Java applets • 1995後期Netscape推出 Live. Script取代applets • Live. Script程式碼內嵌在網頁，由Navigator 2. 0 直接執行

What is Java. Script that allows you to write programs that Java. Script. Aarelanguage executed by a web-browser. • Originally developed by Netscape as Live. Script. • Renamed to Java. Script in 1995 (not related to Java). • Microsoft also released JScript that is very much similar to Java. Script. • In 1997, the European Computer Manufacturers Association (ECMA) brought together programmers from Netscape, Sun, Microsoft, Borland, and other interested companies to : "standardize a general purpose, cross-platform, vendor-neutral scripting language (based on Java. Script)" The standard was ECMA-262, the language called ECMAScript.

XHTML, CSS and Java. Script • XHTML – Structure and Semantics of Content • Cascading Style Sheets – Presentation of content • Java. Script – Behavior and interaction 嵌入網頁的程式碼，由瀏覽器直接執行，可讓網頁內容變得動態，曾交互動使用便利性。

Programming with Java. Script A Brief Overview

Simple I/O vs. GUI • 傳統UI – The Program drives the User • >請輸入密碼 • ____ • > 輸入錯誤 • GUI – The User drives the Program – Event-driven

on. Load 和 on. Unload事件 • on. Load和on. Unload的練習，如下圖 Event handlers <script type=“text/javascript” > 開 function load(){ 啟頁 alert("on. Load的應用"); 面 } function unload(){ alert("on. Unload的應用"); } </script> <body on. Load="load()" on. Unload="unload()"> 關閉頁面

I/O Examples • 範例 prompt <script> var flag=true; while(flag){ var name=prompt("輸入你的姓名", "default"); if(confirm("你的名字是"+name+ "對嗎? ? ")){ flag=false; } } alert("嗨!!"+name+"歡迎來到本站"); </script> confirm alert

HTML Forms User input controls

HTML Forms <form action="web app URL" method="get or post"> <fieldset> form controls </fieldset> </form> Form controls: 各式各樣的 UI 控制元件

<input>標籤中各物件介紹 • Text元件 – <input type=“text” name=“Obj. Name” value=“Obj. Value” size=“ 20”> • Password元件 – <input type=“password” name=“Obj. Name” value=“Obj. Value” size=“ 20”> • Radio元件 – <input type=“radio” name=“Obj. Name” value=“Obj. Value”> – 通常會由多個相同名稱之Radio元件來提供單選功能 • Checkbox元件 – <input type=“checkbox” name=“Obj. Name” value=“Obj. Value”> – 通常會由多個相同名稱之Radio元件來提供複選功能

• Button元件 • 搭配Java. Script使用 – <input type=“button” name=“Obj. Name” value=“Obj. Value”> • Reset元件 – <input type=“reset” name=“Obj. Name” value=“Obj. Value”> – 可將表單中所有的資料全部清除。 • Submit元件 – <input type=“submit” name=“Obj. Name” value=“Obj. Value”> – 可將表單中的資料送出。 • Hidden元件 – <input type=“hidden” name=“Obj. Name” value=“Obj. Value”> – 隱藏式的元件，通常為儲存資料時使用。

• EX. html <html> <body> <form name="frm" method="GET" action="EX 12. html"> 帳號: <input type="text" name="id" size="10"> 密碼: <input type="password" name="pass" size="10"> <input type="reset" value="清除"> <input type="submit" value="Login"> </form> </body> </html>

• EX. html <html> <body> <form name="frm" method="GET" action="EX 13. html"> 姓名: <input type="text" name="name" size="10"> 職業: <select name="work"> <option value="1" selected>學生 <option value="2">老師 <option value="3">其他 </select> 性別: <input type="radio" name="sex" value="m">男 <input type="radio" name="sex" value="f">女讀書時間: <input type="radio" name="bef" value="1">多 <input type="radio" name="bef" value="2">普通 <input type="radio" name="bef" value="3">少興趣: <input type="checkbox" name="inte" value="1">打球 <input type="checkbox" name="inte" value="2">爬山 <input type="checkbox" name="inte" value="3">電腦其他: <textarea name="suggest"></textarea> <input type="reset" value="清除"> <input type="submit" value="Login"> </form> </body> </html>

Server-Side Programs

The Execution Environment of Web Applications Server Client Web Application Database User input 各種介面 Browser Internet Execution result WWW Server Files

Common Gateway Interface (CGI) Server Client Web Application User input Browser Internet Execution result Database CGI WWW Server Files

User Input thru HTML Form example Input controls Execution Trigger

Browser Input for Form <HEAD><TITLE>Sample Form</TITLE></HEAD><BODY> <H 1>Application for a Credit Card</H 1> <FORM METHOD=“GET or POST" ACTION=“program’s URL"> <H 4>Background Information</H 4> Name <INPUT type=text name=name> Street <INPUT name=street><BR> City <INPUT name=city> State <SELECT name=state> <OPTION> Alabama <OPTION> California <OPTION> New York <OPTION> Wisconsin </SELECT> <H 4>Amount of Credit</H 4> <INPUT type=radio name=amount value=5000>$5, 000 <INPUT type=radio name=amount value=10000>$10, 000 <INPUT type=radio name=amount value=15000>$15, 000 <H 4>Financial Facts: </H 4> <INPUT type=checkbox name=home>Own a home <INPUT type=checkbox name=boat>Own a boat <INPUT type=checkbox name=car>Own a car<BR> <TEXTAREA rows=5 cols=50 name=family> Please describe here the names and ages of people in your family and the number of cards you are requesting. </TEXTAREA> <INPUT type=submit> <INPUT type=reset></FORM></BODY>

Executing through Get • GET and Query string: • Submit按下後User form input is appended to the URL: http: //ncccu. tw/login. php? uname=value 1&pwd=value 2 <form method=“get” action=“http: //ncccu. tw/login. php”> username: <input type=“text” name=“uname”> password: <input type=“text” name=“pwd” > <input type=“button” value=“submit>” </form>

Executing Through Get • GET requests can include a query string as part of the URL: Delimiter http: //ncccu. tw/login. php? uname=value 1&pwd=value 2 Program URL Query String • User form input is appended to the query string name 1=value 1&name 2=value 2&…

Special Characters in Parameters: URL-encoding • Browsers use an encoding when sending query strings that include special characters. – Most non-alphanumeric characters are encoded as a ‘%’ followed by 2 ASCII encoded hex digits. – ‘=‘ (which is hex 3 D) becomes “%3 D” – ‘&’ becomes “%26” – The space character ‘ ‘ is replaced by ‘%20’. http: //xxx. ie? name=scott&company=sun%20 corporation

GET 的缺點 • 輸入內容可能敏感，URL query string會洩露資訊 • URL+Query string can be bookmarked (and index by search engine) – 可以不必使用form, 直接將URL+Query. String寫在HTML內容裡 • http: //www. whoami. com/Servlet/Search? name=George+Mary • 2 K length limit • 若有敏感資訊應使用POST, 甚至https (請參考https: //i. nccu. edu. tw/Login. aspx)

PHP : “Hypertext Preprocessor” • A server-side scripting language for writing Web applications • PHP Web applications: – Mix PHP code with HTML text <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <title>Variables</title> </head> <body bgcolor="#ffffff"> <? php print "$HTTP_USER_AGENT"; $name = "Shane"; print "<p>My name is $name</p>"; ? > </body> </html>

How Does PHP Work? • PHP is a program that performs dynamic HTML scripting – It is a language interpreter that directly executes commands then ultimately outputs into HTML/HTTP (rather than a compiler which outputs translates commands into machine code for later execution) – The server knows to execute PHP code when the requested file has a. php extension Web Server (e. g. Apache) Client (e. g. IE) Give me page xxx. php HTML PHP + Scripting Engine output PHP code Dynamic data (files, database, webserver, data feeds, etc. ) Static HTML

The Client Server Interaction http: // …. / …html HTML Form HTML Result PHP code

Form Processing in PHP Client side: HTML form Name: Joe Age: Age In PHP, the $_GET and $_POST variables are used to retrieve information from forms Server side PHP code: Submit me! 22 age Client side: output

Sessions and Cookies

A Motivation Example for Sessions http: // …. / …php Please sign in: Username: Paul Password: ＊＊＊＊ Welcome Paul: 數量 Product 1: $1. 5/each 4 Product 2: $2. 5/each 0 Next page … till end Session例子 • 先登錄 • 一來一往，選購商品 • 直到結束

Session Data Example: Shopping Cart Session Data Shopping Cart Item Ordered Catalog Item Ordered Item Order 加入購物車 Session data 存在哪裡? State Management

Session and State Management • HTTP is stateless. Server maintains no information about past client requests. Client-side (browser) must identify itself for each request to the server. • All three HTTP request-response are not related. 1 2 PC running Browser 3 • HTTP缺乏session tracking的機制 (ex: 紀錄user 已經login) Server running Apache Web server

Session Tracking • How to maintain (track) a client session? – DIY by carrying the client id (state data) back and forth between the client and the server • Hidden form fields • URL Rewriting (Query. String) – DIY by developing a session manager on the server-side and carry a client-side id for each request – Using Cookies

Hidden Fields and URL Rewriting 1. “Hidden” fields are added to a form but are not displayed to the browser <form action = “/moviefinder” method = “post”> <input type=“hidden” name=“zip” value=“ 90450”> 2. Every local URL the user may click on is dynamically modified (by the server program) to include extra info (session tracking info. • Extra info can hold information for the session, e. g. session ID • e. g. http: //server/My. Servlet – with an additional parameter added on by your code: – http: //server/My. Servlet? sessionid=1 bx 2 d 3 wr 3 tu 64

Cookie Introduction • Cookies are small pieces of information stored by the webserver on the client’s machine. • Cookie information is saved in small files created and saved by the client’s browser. • Cookie information is sent back to the webserver that generated the cookie. • Originally developed by Netscape. Now defined by RFC 2109 (“HTTP State Management Mechanism”) (http: //www. cis. ohio-state. edu/htbin/rfc 2109. html) • Developed as a mechanism to maintain state between client requests.

Cookies • Data, not food • Data, not software Web server 1. Send request to server Browser (client) ? 2. Send web page and cookie ? 3. Send cookie back with future requests to that server

Cookies: keeping “state” client amazon: 1678 ebay: 8734 one week later: Cookie file amazon: 1678 ebay: 8734 Set-cookie: 1678 usual http request msg cookie: 1678 usual http response msg cookiespecific action ss acce ss Cookie file e n server da try i creates ID tabas n ba e cke 1678 for user nd ce ebay: 8734 usual http request msg usual http response + ac Cookie file Amazon server cookiespecific action

Using Cookie for State Management • Persistent cookies: Store the client-specific data in cookies, but – Cookie data is limited to 4 K in length – The user may turn off the cookie switch for privacy reason • A Better solution: use cookie to identify the client only and maintain a session manager on the server side to store client’s data • Session cookies (In memory cookies ) – A browser stores session cookies in memory. – Once a browser session ends, browser loses the contents of a session cookie. – Encrypting your cookies

Location of Cookie Files (Keep Changing) • Internet Explorer saves all cookies for a specific domain in a separate file in either of the following locations: c: Windowscookies c: WindowsTemporary Internet Files c: Documents and Settings[username]cookies IE 7? ? • all cookies for a user are stored in C: Documents and Settings<username>Application DataMozillaFirefoxProfiles<profilename>cookies. txt. http: //www. cookiecentral. com/faq/

Cookie Limitations • A given domain may only set 20 cookies per machine. • A single browser may only store 300 cookies. • Browsers limit a single cookie to 4 KB.

3 rd party cookies • Cookies with a different domain name from that of the site the user requested • Scenario – Site A adds a cookie to your browser • URL: Site D • Cookie: visited site A – Site B • URL: Site D • Cookie: visited site B – etc. – Site D can build a cross-site profile of browsing behavior • Browsers now report if a cookie's URL differs from its origin – there are sometimes legitimate reasons for this

The Dark (Burnt? ) Side of Cookies • Cookies identify your browser to server – From click to click, or session to session • Server can thus track your movements – What pages you fetch, what images you see – How long between fetches – What advertisements you’ve seen – What preferences you chose

A PHP Example 累加程式

Adding Numbers Please input the first number: Sum: 繼續加法 Page 1 // 初始值為 0 結束

Adding Numbers Please input the first number: Sum: 繼續加法 Page 1 50 結束

Adding Numbers Please input the second number: Sum: 繼續加法 Page 2 50 結束

Adding Numbers Please input the second number: Sum: 繼續加法 Page 2 30 50 結束

Adding Numbers Please input the third number: Sum: 繼續加法 Page 2 80 結束

Adding Numbers You entered 2 numbers. The sum of the numbers you entered is : 80 Page 3 Question: what are the session data in this program?