Computer Science 441

Size: px

Start display at page:

Download "Computer Science 441"

Barbra Clark
7 years ago
Views:

1 Computer Science 441 HTML/JavaScript Ali Abbasi Department of Computer Science University of Calgary Lecture Notes #1 Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 1 / 19

2 Outline 1 Introduction What is HTML? Basic HTML tags Future version of HTML 2 Client-side scripting JavaScript: basics JavaScript: examples Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 2 / 19

3 Introduction What is HTML? Hyper Text Markup Language HTML is the predominant markup language for web pages Text files Contain mark-up tags Tags direct how page is to be displayed by browser File extension.htm or.html Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 3 / 19

4 Creating an HTML file Introduction What is HTML? HTML document: a set of HTML elements HTML element: start tag, end tag HTML tags normally come in pairs like <b> and </b> The element content is everything between the start and the end tag HTML elements can have attributes 1 <html > 2 <head > 3 <title >Title of document goes here </ title > 4 </ head > 5 6 <body > 7 Visible text goes here... 8 </ body > 9 </ html > Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 4 / 19

5 Introduction Basic HTML tags Basic tags HTML Headings <h1>the first heading</h1> <h2>the second heading</h2> HTML Paragraph: <p>this is a paragraph</p> HTML Line Breaks: <br/>, an example of empty element HTML reference: <a href= url >Link text</a> For example: 1 <a href =" www. ucalgary. ca" >Visit University of Calgary </ a> HTML image: <img src= url alt= some text /> For example: 1 <img src =" pulpit. jpg " alt =" Pulpit rock " width =" 304 " 2 height =" 228 "/> Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 5 / 19

6 HTML Table Introduction Basic HTML tags An organized way to represent data Defined using <table> Divided into rows with <tr> each row is divided into data cells with <td> An example: 1 <table border =" 1" > 2 <tr > 3 <th > Header 1</th > 4 <th > Header 2</th > 5 </tr > 6 <tr > 7 <td >row 1, cell 1</ td > 8 <td >row 1, cell 2</ td > 9 </tr > 10 <tr > 11 <td >row 2, cell 1</ td > 12 <td >row 2, cell 2</ td > 13 </tr > 14 </ table > Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 6 / 19

7 HTML Form Introduction Basic HTML tags Used to pass data to a server. So probably most important element for us! A container for other input elements like text fields, checkboxes, radio-buttons Constructed by <form> tag 1 <form action =" form_action. asp " method =" get "> 2 input elements... 3 </ form > action: Specifies where to send the form-data when a form is submitted. method: Specifies how to send form-data. Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 7 / 19

8 HTML Form Introduction Basic HTML tags Input Elements: Text input: 1 <input type =" text " name =" firstname " / > 2 <input type =" text " name =" lastname " /> Radio button: 1 <input type =" radio " name =" sex " value =" male " /> Male 2 <input type =" radio " name =" sex " value =" female " / > Female Checkbox: 1 <input type =" checkbox " name =" vehicle " value =" Bike " / > I have a bi 2 <input type =" checkbox " name =" vehicle " value =" Car " / > I have a car Drop-down list: 1 < select name =" cars "> 2 < option value =" volvo ">Volvo </ option > 3 < option value =" saab ">Saab </ option > 4 < option value =" fiat " selected =" selected ">Fiat </ option > 5 </ select > Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 8 / 19

9 Introduction Basic HTML tags HTML Form Input Elements(Cont d): Password: 1 <input type =" password " name =" pwd " /> Submit: 1 <input type =" submit " value =" Submit " / > A complete form example: 1 <form action =" form_action. asp " method =" get "> 2 Cliet Id: <input type =" text " name =" clientid " / ><br / > 3 Password <input type =" password " name =" pwd " / ><br / > 4 <input type =" submit " value =" Submit " / > 5 </ form > Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 9 / 19

10 Introduction Future version of HTML HTML 4 vs HTML 5 Current version is 4 HTML5 is the next generation of HTML New Features: The canvas element for drawing The video and audio elements for media playback New content specific elements, like article, footer, header, nav, section New form controls, like calendar, date, time, , url, search Browser Support DOCTYPE Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 10 / 19

11 Client-side scripting JavaScript: basics What is JavaScript? JavaScript adds interactivity to HTML pages JavaScript is a scripting language JavaScript is usually embedded directly into HTML pages functionalities: JavaScript can react to events JavaScript can read and write HTML elements JavaScript can be used to validate data JavaScript can be used to create cookies Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 11 / 19

12 Client-side scripting Adding JS to an HTML file JavaScript: basics HOW TO Use HTML <script> to insert a JavaScript into an HTML page. 1 < script type =" text / javascript "> </ script > To execute scripts based on events define functions. event: 1 < button type =" button " onclick =" displaydate ()"> 2 Display Date 3 </ button > function: 1 < script type =" text / javascript "> 2 function displaydate () 3 { 4 document. getelementbyid (" demo "). innerhtml = Date (); 5 } 6 </ script > Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 12 / 19

13 Client-side scripting JavaScript: basics JavaScript Events Events are actions that can be detected by JavaScript. Examples of event: A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input field in an HTML form Submitting an HTML form A keystroke Events inculde onload, onunload, onfocus, onblur, onchange, onsubmit onsubmit is specially important 1 <form method =" post " action =" xxx. htm " onsubmit =" return checkform () Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 13 / 19

14 Client-side scripting JavaScript: examples JavaScript Examples: Form Validation The following code snippet shows how a form inputs can be checked before submission: form: 1 <form name =" myform " action =" demo_form. asp " onsubmit =" return valid 2 First name : <input type =" text " name =" fname " > 3 <input type =" submit " value =" Submit "> 4 </ form > validating function: 1 function validateform () 2 { 3 var x= document. forms [" myform "][" fname "]. value ; 4 if (x== null x=="") 5 { 6 alert (" First name must be filled out "); 7 return false ; 8 } 9 } Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 14 / 19

15 Client-side scripting JavaScript: examples JavaScript Examples: Detecting Browser Browser information can be retrieved in JavaScript: 1 <div id=" example "></ div > 2 3 < script type =" text / javascript "> 4 5 txt = " <p> Browser CodeName : " + navigator. appcodename + " </p>"; 6 txt += " <p> Browser Name : " + navigator. appname + " </p>"; 7 txt += " <p> Browser Version : " + navigator. appversion + " </p>"; 8 txt += " <p> Cookies Enabled : " + navigator. cookieenabled + " </p>"; 9 txt += " <p> Platform : " + navigator. platform + " </p>"; 0 txt += " <p>user - agent header : " + navigator. useragent + " </p>"; 1 2 document. getelementbyid (" example "). innerhtml = txt ; 3 4 </ script > Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 15 / 19

16 Client-side scripting JavaScript: examples JavaScript Examples: Cookies What is cookie?: A cookie is a variable that is stored on the visitor s computer. Examples of cookies: Name cookie Password cookie Date cookie JavaScript: Create a Cookie 1 function setcookie ( c_name, value, exdays ) 2 { 3 var exdate = new Date (); 4 exdate. setdate ( exdate. getdate () + exdays ); 5 var c_value = escape ( value ) + (( exdays == null )? "" : "; expires =" 6 document. cookie = c_name + " =" + c_value ; 7 } Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 16 / 19

17 Client-side scripting JavaScript: examples JavaScript Examples: Cookies(Cont d) JavaScript: Get a cookie: 1 function getcookie ( c_name ) 2 { 3 var i,x,y, ARRcookies = document. cookie. split (";"); 4 for (i =0; i<arrcookies. length ;i ++) 5 { 6 x= ARRcookies [i]. substr (0, ARRcookies [i]. indexof ("=" )); 7 y= ARRcookies [i]. substr ( ARRcookies [i]. indexof ("=" )+1); 8 x=x. replace (/^\ s + \ s+$/g,""); 9 if (x== c_name ) 10 { 11 return unescape ( y); 12 } 13 } 14 } Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 17 / 19

18 Client-side scripting JavaScript: examples JavaScript Examples: Cookies(Cont d) JavaScript: Check a Cookie 1 function checkcookie () 2 { 3 var username = getcookie (" username "); 4 if ( username!= null && username!="") 5 { 6 alert (" Welcome again " + username ); 7 } 8 else 9 { 10 username = prompt (" Please enter your name :",""); 11 if ( username!= null && username!="") 12 { 13 setcookie (" username ", username,365); 14 } 15 } 16 } Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 18 / 19

19 Reference Client-side scripting JavaScript: examples Most of the content was from Ali Abbasi (University of Calgary) Computer Science 441 Lecture Notes #1 19 / 19

HTML Form Widgets. Review: HTML Forms. Review: CGI Programs

HTML Form Widgets. Review: HTML Forms. Review: CGI Programs HTML Form Widgets Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back to the web server Forms allow web servers to generate