client-side web programming basics · html sadegh aliakbary internet engineering 41 form tag ... ...
TRANSCRIPT
![Page 1: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/1.jpg)
Client-side
Web Programming Basics
Sadegh Aliakbary
INTERNET ENGINEERING
![Page 2: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/2.jpg)
Internet EngineeringSadegh AliakbaryHTML 2
Agenda
HTML Language
CSS
JavaScript
![Page 3: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/3.jpg)
HTML
![Page 4: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/4.jpg)
Internet EngineeringSadegh AliakbaryHTML 4
Building Websites
HTML (HyperText Markup Language)
The dominate language of the internet
Describes a webpage’s content
Controlled by the World Wide Web Consortium (W3C)
In practice, affected by Browser compatibility
![Page 5: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/5.jpg)
Internet EngineeringSadegh AliakbaryHTML 5
Terms
HTML Document
A plain text file, that can be created using:
a text editor (Notepad in Windows, or vim on Linux)
a Web page editor (Dreamweaver, …)
DHTML (Dynamic HTML)
a combination of HTML, CSS, and JavaScript
XHTML (Extensible HTML)
HTML defined as an XML application
![Page 6: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/6.jpg)
Internet EngineeringSadegh AliakbaryHTML 6
Tag Syntax
HTML Markup tags: Special codes that tell the Web browser how to
display the HTML document
HTML tags include:
1. A start tag
2. An optional attribute name/value pair
3. Content affected by the tag (optional)
4. A closing tag
<tag-name attribute-name=“attribute-value”>
... Content ...
</tag-name>
![Page 7: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/7.jpg)
Internet EngineeringSadegh AliakbaryHTML 7
Markup Tag
Tells the Web browser the format of the text
Surrounded by < >
Examples:
paragraph tag: <p>
![Page 8: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/8.jpg)
Internet EngineeringSadegh AliakbaryHTML 8
Markup Tag
In pairs: start tag and end tag (closing tag)
Example:
start tag: <p>
end tag: </p>
Placement of start and end tags
Example:
<p>This is a paragraph.</p>
element content
![Page 9: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/9.jpg)
Internet EngineeringSadegh AliakbaryHTML 9
Document Syntax
HTML documents are made up of a hierarchical
“tree” of tags structuring content.
Correct hierarchy:
<p> The following text is <b> bold </b> </p>
Incorrect hierarchy:
<p> The following text is <b> bold </p> </b>
![Page 10: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/10.jpg)
Internet EngineeringSadegh AliakbaryHTML 10
Tags That Do Not Have Element Content
Examples:
line break: <br></br>
can be written as: <br />
image tag: <img></img>
can be written as: <img />
![Page 11: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/11.jpg)
Internet EngineeringSadegh AliakbaryHTML 11
Attributes of a Tag
To specify properties of the element
In name-value pairs like this: name = "value"
Example:
id attribute:
<p id="introduction">This is a paragraph.</p>
Placed inside the start tag
![Page 12: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/12.jpg)
Hello World in HTML
![Page 13: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/13.jpg)
Internet EngineeringSadegh AliakbaryHTML 13
Hello World Example
<!DOCTYPE html>
<html>
<head>
<title> Hello World Page </title>
</head>
<body>
<p> Hello SBU Students! </p>
<p> This is our first HTML page </p>
</body>
</html>
![Page 14: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/14.jpg)
Internet EngineeringSadegh AliakbaryHTML 14
Hello World Example
<!DOCTYPE html>
<html>
<head>
<title> Hello World Page </title>
</head>
<body>
<p> Hello SBU Students! </p>
<p> This is our first HTML page </p>
</body>
</html>
The html tags enclose all of the page’s content.
![Page 15: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/15.jpg)
Internet EngineeringSadegh AliakbaryHTML 15
Hello World Example
<!DOCTYPE html><html>
<head><title> Hello World Page </title>
</head><body>
<p> Hello SBU Students! </p><p> This is our first HTML page </p>
</body></html>
The head tags contain extra information about the
webpage.
![Page 16: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/16.jpg)
Internet EngineeringSadegh AliakbaryHTML 16
Hello World Example
<!DOCTYPE html><html>
<head><title> Hello World Page </title>
</head><body>
<p> Hello SBU Students! </p><p> This is our first HTML page </p>
</body></html>
The title tags tell the browser the page’s name; often the
title is used by the browser to label the window or tab.
![Page 17: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/17.jpg)
Internet EngineeringSadegh AliakbaryHTML 17
Hello World Example
<!DOCTYPE html>
<html>
<head>
<title> Hello World Page </title>
</head>
<body>
<p> Hello SBU Students! </p>
<p> This is our first HTML page </p>
</body>
</html>
The body tags contain the content displayed on the webpage.
![Page 18: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/18.jpg)
Internet EngineeringSadegh AliakbaryHTML 18
Hello World Example
<!DOCTYPE html>
<html>
<head>
<title> Hello World Page </title>
</head>
<body>
<p> Hello SBU Students! </p>
<p> This is our first HTML page </p>
</body>
</html>
The p tags surround paragraphs of text.
![Page 19: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/19.jpg)
Internet EngineeringSadegh AliakbaryHTML 19
Hello World Example
<!DOCTYPE html>
<html>
<head>
<title> Hello World Page </title>
</head>
<body>
<p> Hello SBU Students! </p>
<p> This is our first HTML page </p>
</body>
</html>
![Page 20: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/20.jpg)
HTML Tags
![Page 21: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/21.jpg)
Internet EngineeringSadegh AliakbaryHTML 21
Common Tags
Headers
<h1>, <h2>, <h3>, ...
Italics
<i>
Boldface
<b>
Line breaks (singleton tag)
<br>
Comments (singleton tag)
<!-- ... -->
![Page 22: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/22.jpg)
Internet EngineeringSadegh AliakbaryHTML 22
Note
HTML has no variables or commands
HTML is not a programming language
It is a markup language, like LaTex, XML, …
HTML is merely a way of formatting a document
Intended to be platform- and device-independent
HTML tags are not case-sensitive
![Page 23: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/23.jpg)
Internet EngineeringSadegh AliakbaryHTML 23
Links
The link tag:
<a href="http://sbu.ac.ir">
Our University!
</a>
The href attribute:
Use full page address with “http://” to access other website’s
pages
Use only the page’s filename to access other html pages saved
in the same directory
![Page 24: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/24.jpg)
Internet EngineeringSadegh AliakbaryHTML 24
Images
The image tag:
<img src="sbu.jpg">
The src attribute:
Use full page address with “http://” to access other
website’s pages
Use only the page’s filename to access other html
pages saved in the same directory
![Page 25: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/25.jpg)
Internet EngineeringSadegh AliakbaryHTML 25
<ALT> Graphic Tag
<ALT> option.
Example: <img src=“pencil.gif" ALT=“pencil graphic”>
Benefits?
A description
Unable-to-Load situations
Search Engines
25
pencil graphic
![Page 26: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/26.jpg)
Internet EngineeringSadegh AliakbaryHTML 26
![Page 27: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/27.jpg)
Internet EngineeringSadegh AliakbaryHTML 27
Exercise
Create your Homepage web page
Use links and images
“View source” for some web pages
Use software tools for creating and editing web pages
![Page 28: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/28.jpg)
Internet EngineeringSadegh AliakbaryHTML 28
Line Break: <br />
Example:
<p>This is the first paragraph.<br />This is a new line of the same
same paragraph.</p>
<p>This is the second paragraph.</p>
![Page 29: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/29.jpg)
Internet EngineeringSadegh AliakbaryHTML 29
Headings: <h1> - <h6>
Example:
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>
![Page 30: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/30.jpg)
Internet EngineeringSadegh AliakbaryHTML 30
Bold and Italics
<p>This is normal text.</p>
<p>
<b>This text is bold. </b>
<i>This text is italic.</i>
</p>
<p>
<b><i>This text is bold and italic.</i></b>
</p>
<p>
<i><b>This text is also bold and italic.</b></i>
</p>
![Page 31: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/31.jpg)
Internet EngineeringSadegh AliakbaryHTML 31
List
Example:
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<ol>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
Ordered list: <ol></ol>
Unordered list: <ul></ul>
List item: <li></li>
![Page 32: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/32.jpg)
Internet EngineeringSadegh AliakbaryHTML 32
Table
Table: <table></table>
Table row: <tr></tr>
Table data: <td></td>
Table heading: <th></th>
![Page 33: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/33.jpg)
Internet EngineeringSadegh AliakbaryHTML 33
Table example
<table border=1>
<tr>
<th>Name</th><th>ID</th>
</tr>
<tr>
<td>Eric</td><td>123</td>
</tr>
<tr>
<td>RPI</td><td>456</td>
</tr>
</table>
Name ID
Eric 123
RPI 456
![Page 34: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/34.jpg)
Internet EngineeringSadegh AliakbaryHTML 34
Example: A table without a border
<table>
<tr>
<td> row 1, column 1</td>
<td> row 1, column 2</td>
</tr>
<tr>
<td> row 2, column 1</td>
<td> row 2, column 2</td>
</tr>
<tr>
<td> row 3, column 1</td>
<td> row 3, column 2</td>
</tr>
</table>
![Page 35: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/35.jpg)
Internet EngineeringSadegh AliakbaryHTML 35
Example: A table with a border
<table border="1">
<tr>
<td> row 1, column 1</td>
<td> row 1, column 2</td>
</tr>
<tr>
<td> row 2, column 1</td>
<td> row 2, column 2</td>
</tr>
<tr>
<td> row 3, column 1</td>
<td> row 3, column 2</td>
</tr>
</table>
![Page 36: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/36.jpg)
Internet EngineeringSadegh AliakbaryHTML 36
Example Folder Structure of a Site
Root folder
Root folder
![Page 37: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/37.jpg)
Internet EngineeringSadegh AliakbaryHTML 37
Navigating Folders
![Page 38: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/38.jpg)
Internet EngineeringSadegh AliakbaryHTML 38
Character Entities
Reserved characters in HTML must be replaced with
character entities: &entity_name;
< ‘less than’ <
> ‘greater than’ >
& ‘ampersand’ &
" ‘quotes’ “
‘non-breaking white space’
A non-breaking space is a space that will not break into a new line.
![Page 39: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/39.jpg)
Internet EngineeringSadegh AliakbaryHTML 39
Example
<p>Word1 Word2</p>
<p>Word1 Word2</p>
<p>Word1
Word2</p>
<br/>
<br/>
<p>A<B & C>D
and "X" is a char</p>
![Page 40: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/40.jpg)
HTML Forms
![Page 41: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/41.jpg)
Internet EngineeringSadegh AliakbaryHTML 41
Form Tag <form> ... </form>
Used to send user-specified information to server
The server then sends back its response, a new HTML document
The form tag itself needs at least 2 attributes:
1- The “action” attribute
The program on the server that the form’s contents are sent to
It processes the information and returns the response document
2- The “method” attribute.
Specifies the HTTP method of the HTTP request
Generally use method=“post” method
![Page 42: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/42.jpg)
Internet EngineeringSadegh AliakbaryHTML 42
Example
<form action=“/books/save.jsp” method=“post”> ...</form>
The form sends name=value pairs to the server
“name” and “value” are both specified within each form element.
![Page 43: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/43.jpg)
Internet EngineeringSadegh AliakbaryHTML 43
Form Inputs
<form>First name:<br><input type="text" name="firstname"><br>Last name:<br><input type="text" name="lastname">
</form>
<form><input type="radio" name="gender" value="male" checked> Male<br><input type="radio" name="gender" value="female"> Female<br>
</form>
![Page 44: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/44.jpg)
Internet EngineeringSadegh AliakbaryHTML 44
Submit Form Elements
“Submit” button: sends the form to the server.
<input type=“submit” value=“button caption”>
Is “Submit” the only way to send data to the server?
No
AJAX
<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit">
</form>
![Page 45: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/45.jpg)
Internet EngineeringSadegh AliakbaryHTML 45
Select Box (Dropdown List)
<select name="car">
<option value="Pride">Pride 131</option>
<option value="Tiba">Tiba 2</option>
<option value="Mercedes">Mercedes</option>
<option value="Peikan">Peikan</option>
</select>
![Page 46: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/46.jpg)
Internet EngineeringSadegh AliakbaryHTML 46
Other Form Elements
Button
Hidden
Password
Reset
Checkbox
File
…
![Page 47: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/47.jpg)
Internet EngineeringSadegh AliakbaryHTML 47
Quiz: What does this HTML do?
<html>
<body>
<form action="http://www.bing.com/search" method="GET">
<input name="q" />
<input type="submit" value="Search"/>
</form>
</body>
</html>But Generally we use method=“post” ,
And the action is a relative path (no http)
![Page 48: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/48.jpg)
Internet EngineeringSadegh AliakbaryHTML 48
Example
<form action="login.php" method="post">
Username: <input type="text" name="username">
<br>Password:<input type="password" name="password">
<br><input type="submit" value="Login">
</form>
![Page 49: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/49.jpg)
Server-side Scripts
![Page 50: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/50.jpg)
Internet EngineeringSadegh AliakbaryHTML 50
![Page 51: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/51.jpg)
Internet EngineeringSadegh AliakbaryHTML 51
![Page 52: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/52.jpg)
Internet EngineeringSadegh AliakbaryHTML 52
Server-Side Scripting
Writing a server side program (e.g. servlet)
requires programming skills
Programming is applied:
not only to calculate the dynamic portions of the page
but also the fixed textual content and HTML markup
The definition of the static content :
Requires only HTML skills
And could be delegated to the graphic designer
Server-side scripting:
Inserting into an HTML page template some programming instructions
that are executed by a server program
to calculate the dynamic parts of the page
![Page 53: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/53.jpg)
Internet EngineeringSadegh AliakbaryHTML 53
Server-Side Scripting
![Page 54: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/54.jpg)
Internet EngineeringSadegh AliakbaryHTML 54
Server-side scripting
Various incarnations of the server-side scripting
approach are available,
Active Server Pages (ASP) language by Microsoft,
Java Server Pages (JSP) language by Javasoft,
PHP open language
![Page 55: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/55.jpg)
Internet EngineeringSadegh AliakbaryHTML 55
ASP Example (Ancient!)
![Page 56: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/56.jpg)
CSS
![Page 57: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/57.jpg)
Internet EngineeringSadegh AliakbaryHTML 57
CSS Outline
Introduction
Style Types
Selectors
Cascading
Inheritance
CSS3
![Page 58: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/58.jpg)
Internet EngineeringSadegh AliakbaryHTML 58
Introduction
XHTML: Structure of web pages
Almost all XHTML tags have their own presentation
Traditionally, HTML is used for document structure &
presentation (physical formatting)
<i><font size=10 color=red> test </font></i>
No reusability
Tremendous repeated formatting tags
Structure and Formatting mixed up mess
![Page 59: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/59.jpg)
Internet EngineeringSadegh AliakbaryHTML 59
Introduction (cont’d)
(in XHTML) Separation between
Content & Structure
Presentation
Content & Structure are specified by XHTML tags
Cascading Style Sheet (CSS) defines the presentation
and style
How elements are presented in web pages!!
Override the default presentation of elements
If presentation is not specified, browser uses its own default
presentation for HTML elements
![Page 60: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/60.jpg)
Internet EngineeringSadegh AliakbaryHTML 60
Introduction (cont’d)
XHTML
<h1> Test </h1>
CSS
h1 {color: green}
Rendering
Documents on
Web Server
Browser
Test
![Page 61: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/61.jpg)
Internet EngineeringSadegh AliakbaryHTML 61
Introduction to CSS
Created by Hakon Wium Lie of MIT in 1994
The W3C standards (CSS 1,2,3) to control visual
presentation of web pages
Uses a different syntax than HTML/XHTML
A different language
Works with the common visual browsers
Greatly simplifies visual design, site management
and content maintenance
![Page 62: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/62.jpg)
Internet EngineeringSadegh AliakbaryHTML 62
Håkon Wium Lie
Chief technical officer of the Opera Software company
as of 2016
Co-creator of the CSS web standard (1994)
At the time, Lie was working with Tim Berners-Lee at CERN
CSS1 released in 1996
Bert Bos was influential
He became co-author of CSS1 and is regarded as co-creator of CSS
![Page 63: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/63.jpg)
Internet EngineeringSadegh AliakbaryHTML 63
Introduction (cont’d)
Advantages
Reuse styling rules in multiple pages
Make easier site management
Saves time
More control over layout
Styles + JavaScript dynamic presentation
Multiple presentation of the same content
Media dependent presentation
![Page 64: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/64.jpg)
Internet EngineeringSadegh AliakbaryHTML 64
CSS Styles
Styles are defined by style rules
Selector + Declaration block (property + value)
Structure of style rules
Selector1 {
Property1: Value1;
Property2: Value2;
…
/* This is comment */
}
![Page 65: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/65.jpg)
Internet EngineeringSadegh AliakbaryHTML 65
Selectors
Tag based
Class based
ID based
Attribute based
…
![Page 66: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/66.jpg)
Internet EngineeringSadegh AliakbaryHTML 66
Sample Properties
Font:
font-family
font-size
font-style
Text:
text-align
color
letter-spacing
word-spacing
Background:
background-color
background-image
![Page 67: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/67.jpg)
Internet EngineeringSadegh AliakbaryHTML 67
Sample Properties (cont’d)
Border: border-color
border-style
border-width
Position: bottom, left, right, …
Table spacing
color
alignment
List style
Complete list in www.w3.org/style/css/
![Page 68: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/68.jpg)
Internet EngineeringSadegh AliakbaryHTML 68
Values
Values depend on property
Predefined keywords
left, right, italic, none, …
Color
red, green, blue, …
#XXYYZZ where 00 <= XX,YY,ZZ <=FF
rgb(XX, YY, ZZ) where 0 <= XX,YY,ZZ <=255
…
Size & Length & Font-size
cm, in, mm, pt, px, %,, …
![Page 69: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/69.jpg)
Internet EngineeringSadegh AliakbaryHTML 69
Inline Styles
Add styles to each tag within HTML file!!!
Used to format a single HTML element
Selector is implicitly specified
Style is given as an attribute
<h1 style="color:red; font-family: sans-serif">
Test Heading 1</h1>
Element based
Hard to update
Violates structure-style separation
![Page 70: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/70.jpg)
Internet EngineeringSadegh AliakbaryHTML 70
Internal (embed) Styles
A style is used in the entire HTML file
Used to control style of elements in a single web page
(e.g., all h1)
<head>
<style type="text/css">
h1 {color: red;
font-family: sans-serif;}
</style>
</head>
![Page 71: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/71.jpg)
Internet EngineeringSadegh AliakbaryHTML 71
External Styles
A text file containing style rules
Used to control style in multiple web pages
Example
A text document with .css extension contains
h1, h2, h3, h4, h5, h6 {
color: #FF0000;
font-family: sans-serif;
}
![Page 72: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/72.jpg)
Internet EngineeringSadegh AliakbaryHTML 72
External Styles (cont’d)
External style file is used in XHTML web page
through linking it to the web page
<head>
<title>External CSS</title>
<link href="external_css.css" rel="stylesheet"
type="text/css" />
</head>
![Page 73: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/73.jpg)
Internet EngineeringSadegh AliakbaryHTML 73
External Styles Advantages
Avoid repeating styles for each page
It is easier to update whole site
CSS can be cached independent of HTML
Different style sheets can be attached to the same
document
Personalized & Customization & Media dependent
A style sheet can import and use styles from other style
sheets
Many-to-Many relationship between HTMLs and CSSs
![Page 74: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/74.jpg)
Internet EngineeringSadegh AliakbaryHTML 74
Media Depended Presentation
Web page presentation can be depended on media
<style type="text/css" media="screen">
<link rel="stylesheet" href="style.css" media="all">
Available media types
all
screen
speech
...
![Page 75: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/75.jpg)
Internet EngineeringSadegh AliakbaryHTML 75
Media Depended Presentation
![Page 76: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/76.jpg)
Internet EngineeringSadegh AliakbaryHTML 76
Media Depended Presentation
![Page 77: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/77.jpg)
Internet EngineeringSadegh AliakbaryHTML 77
Selectors
*: universal selector (everything)
XHTML Tags
Attribute based
Special attributes
Class based: per-class style
ID based: per-element styles
In combination with tag names
DOM tree based
Child & Descendant, Sibling, …
Pseudo-class & Pseudo-element
We may not need all these selectors at the beginning; however, they are powerful tools that simplify complex CSS rules
![Page 78: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/78.jpg)
Internet EngineeringSadegh AliakbaryHTML 78
Element Selector
<head>
<style type="text/css">
* {color: blue}
h1 {text-decoration: underline}
p {font-style: italic}
</style>
</head>
<body>
<h1> Testing Element Selector </h1>
<p> This is a paragraph </p>
</body>
![Page 79: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/79.jpg)
Internet EngineeringSadegh AliakbaryHTML 79
id Selector
Assign ID to elements
<h2 id="blue_heading"> This is blue heading </h2>
<h2 id="red_heading"> This is red heading </h2>
Define style for each ID
#blue_heading {color:blue;}
#red_heading {color:red;}
![Page 80: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/80.jpg)
Internet EngineeringSadegh AliakbaryHTML 80
class Selector
Assign class to element
<h3 class="blue_heading"> This is blue heading 1</h3>
<h3 class="red_heading"> This is red heading 1</h3>
<h3 class="blue_heading"> This is blue heading 2</h3>
<h3 class="red_heading"> This is red heading 2</h3>
Define style of each class
.blue_heading {color:blue;}
.red_heading {color:red;}
![Page 81: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/81.jpg)
Internet EngineeringSadegh AliakbaryHTML 81
Combined Element & Class Selector
<style type="text/css">
.all {color: blue;}
h2.all {color: red;}
h3.all {color: black;}
</style>
<h1 class="all"> Heading 1 </h1>
<h2 class="all"> Heading 2 </h2>
<h3 class="all"> Heading 3 </h3>
<h4 class="all"> Heading 4 </h4>
<h5 class="all"> Heading 5 </h5>
• Note:
h2.all is more specific than .all,
so it applies late
• The order of .all and h2.all is
not important
![Page 82: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/82.jpg)
Internet EngineeringSadegh AliakbaryHTML 82
Multiple Classes
<style type="text/css">
.red {color:red;}
.bold {font-weight:bold;}
</style>
<body>
<p class="red"> This is a red paragraph </p>
<p class="bold"> This is a bold paragraph </p>
<p class="red bold"> This is a red-bold paragraph </p>
</body>
If two selectors have the same specificity,
the last one to be declared wins
![Page 83: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/83.jpg)
Internet EngineeringSadegh AliakbaryHTML 84
<div> and <span> in CSS
XHTML:<div class="green_color">
<p>
This is a green paragraph using div. But, <span id="red_color"> this is
red </span> using span.
</p>
</div>
CSS:.green_color {
color:green;
font-weight:bold;}
#red_color {color:red;}
![Page 84: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/84.jpg)
Internet EngineeringSadegh AliakbaryHTML 85
Attribute Selector
<p> A paragraph without "id" attribute </p>
<p myid="test1"> A paragraph with id=test1 </p>
<p myid="test2"> A paragraph with id=test2 </p>
<p myid="test3"> A paragraph with id=test3 </p>
p[myid] {color:red}
p[myid="test3"] {color:blue}
![Page 85: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/85.jpg)
Internet EngineeringSadegh AliakbaryHTML 86
Cascading
External-1
Internal-n
Inline
External-n
Internal-1
Browser
Default
![Page 86: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/86.jpg)
Internet EngineeringSadegh AliakbaryHTML 87
Cascading (cont’d)
test.css: p {font-style: italic;}
XHTML:
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
<style type="text/css">
p {color: blue;}
</style>
</head>
<body>
<p> Test Text 1</p>
<p style="font-weight: bold;"> Test Text 2 </p>
</body>
![Page 87: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/87.jpg)
Internet EngineeringSadegh AliakbaryHTML 88
Inheritance
XHTML document is interpreted as a tree
DOM tree
Children inherit some styles from their parent
Not all properties, e.g. border
<style type="text/css">
p {font-style: italic;}
code {color: red;}
</style>
<p> This is <code> a code </code> in paragraph </p>
![Page 88: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/88.jpg)
Internet EngineeringSadegh AliakbaryHTML 89
Conflicting Styles & Overriding
What happen if multiple style rules specify different
values for the same property of an element?
External style: p {color: red}
Internal style: p {color: blue}
They are conflicting
What is the final rule?
It depends on
Rule types, order, …
Specified by the overriding algorithm
![Page 89: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/89.jpg)
Internet EngineeringSadegh AliakbaryHTML 90
Overriding
In general,
Priority 1: more specific
Inline > ID > Class > Element (Tag) > Div/Span
Priority 2: more closer to the element if they are the same selector
(e.g., both are id selector)
Inline > Internal
Inline > External
Internal <?> External
The style that comes after the other
styles override more general styles
Children’s style overrides parent’s style
![Page 90: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/90.jpg)
Internet EngineeringSadegh AliakbaryHTML 91
Overriding (cont’d)
<style type="text/css">
p{color: red;}
p.c{color: blue;}
p#i{color: green;}
</style>
<p class="c" id="i"
style="color: black;"> This is test </p>
<p class="c" id="i"> This is test </p>
<p class="c"> This is test </p>
<p> This is test </p>
![Page 91: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/91.jpg)
Internet EngineeringSadegh AliakbaryHTML 92
Overriding (cont’d)
To prevent overriding, add !important
h1{font-style: italic;
color: blue !important}
<h1> Heading 1 </h1>
<h1 style="font-style: normal;
color=red">Heading 1</h1>
![Page 92: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/92.jpg)
Internet EngineeringSadegh AliakbaryHTML 93
CSS3
W3C is working on CSS3
The next standard of CSS
CSS3 is split up into modules
More than 30 modules
Old specification has been split into smaller pieces, and new ones
are also added
The CSS3 specification is still under development
Many of the new CSS3 properties have been implemented in modern
browsers
![Page 93: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/93.jpg)
Internet EngineeringSadegh AliakbaryHTML 94
(Sample) CSS3 Modules
2D Transforms
Manipulation of content in two dimensions, such as rotating,
scaling, and skewing objects
3D Transforms
Extends 2D Transforms to manipulate elements in a three-
dimensional space
Animations
To modify CSS property values over time, such as position or
color, to create animated layouts
![Page 94: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/94.jpg)
Internet EngineeringSadegh AliakbaryHTML 95
(Sample) CSS3 Modules
Backgrounds and Border
Multiple backgrounds, a variety of background properties
for positioning and sizing, new border properties with
images and shadows
Web Fonts
Defines downloadable fonts
Multi-column Layout
Defines how to flow text into many columns
![Page 95: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/95.jpg)
Internet EngineeringSadegh AliakbaryHTML 96
CSS3 Examples
Text shadowing
h1 {text-shadow: 5px 5px 5px #FF0000;}
Web font
<style type="text/css">
@font-face{
font-family: myFirstFont;
src: url('sansation_light.ttf')
}
div {font-family:myFirstFont;}
</style>
<div>Using the new font</div>
![Page 96: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/96.jpg)
Internet EngineeringSadegh AliakbaryHTML 97
CSS3 Examples: 2D Transformation
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
transform:rotate(30deg);
transform:scale(2,4);
![Page 97: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/97.jpg)
Internet EngineeringSadegh AliakbaryHTML 98
CSS3 Examples: Multi-Column
<style type="text/css">
.newspaper {column-count:3;}
</style>
<body>
This is a multi-column div.
<div class="newspaper">
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
</div>
</body>
![Page 98: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/98.jpg)
JavaScript
![Page 99: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/99.jpg)
Internet EngineeringSadegh AliakbaryHTML 100
Client Side Scripting
![Page 100: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/100.jpg)
Internet EngineeringSadegh AliakbaryHTML 101
Why use client-side programming?
Server-side programming (e.g. PHP) already allows us to
create dynamic web pages.
Why also use client-side scripting?
client-side scripting (JavaScript) benefits:
usability: can modify a page without having to post back to
the server (faster UI)
efficiency: can make small, quick changes to page without
waiting for server
event-driven: can respond to user actions like clicks and key
presses
![Page 101: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/101.jpg)
Internet EngineeringSadegh AliakbaryHTML 102
So, why use server-side programming?!
Access to server's private data
client can't see source code
power: can write files, open connections to servers,
connect to databases, ...
Processing power, memory, …
compatibility: not subject to browser compatibility
issues
![Page 102: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/102.jpg)
Internet EngineeringSadegh AliakbaryHTML 103
JavaScript History
JavaScript created in 1995 by Brendan Eich, then
working at Netscape and now of Mozilla
JavaScript was not always known as JavaScript:
the original name was Mocha
the name was changed to LiveScript
then the name JavaScript was adopted
(Java was very popular around then)
![Page 103: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/103.jpg)
Internet EngineeringSadegh AliakbaryHTML 104
JavaScript, Today
A completely new and exciting cycle of evolution
With new developments such as the Nodejs platform
allowing us to use JavaScript on the server-side
And HTML5 APIs
to control user media
open up web-sockets for always-on communication
get data on geographical location and device features
…
![Page 104: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/104.jpg)
Internet EngineeringSadegh AliakbaryHTML 105
JavaScript, Today (cont’d)
Many client side frameworks are based on JavaScript
jQuery
Bootstrap
AngularJS
React
![Page 105: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/105.jpg)
Internet EngineeringSadegh AliakbaryHTML 106
What is Javascript?
A lightweight programming language
A "scripting language"
used to make web pages interactive
insert dynamic text into HTML (ex: user name)
react to events (ex: page load user click)
get information about a user's computer (eg: browser type)
perform calculations on user's data (ex: form validation)
![Page 106: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/106.jpg)
Internet EngineeringSadegh AliakbaryHTML 107
What is Javascript?
A web standard
but not supported identically by all browsers
The differences (among browsers) are being smaller
NOT related to Java!
other than by name and some syntactic similarities
![Page 107: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/107.jpg)
Internet EngineeringSadegh AliakbaryHTML 108
Javascript vs Java
interpreted, not compiled
more relaxed syntax and rules
fewer and "looser" data types
variables don't need to be declared
errors often silent (few exceptions)
key construct is the function rather than the class
"first-class" functions are used in many situations
contained within a web page and integrates with its
HTML/CSS content
![Page 108: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/108.jpg)
Internet EngineeringSadegh AliakbaryHTML 109
JavaScrip
Similar to other scripting languages (like PHP):
interpreted, not compiled
relaxed about syntax, rules, and types
case-sensitive
built-in regular expressions for powerful text processing
JS is object-oriented: noun.verb()
JS focuses on user interfaces and interacting with a document
JS code runs on the client's browser
Recently, more applications, even server-side (e.g., Node.js)
![Page 109: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/109.jpg)
Internet EngineeringSadegh AliakbaryHTML 110
Linking to a JavaScript file: script
script tag should be placed in HTML page's head
script code is stored in a separate .js file
JS code can be placed directly in the HTML file
(like CSS)
but this is bad style
separate content, presentation, and behavior)
<script src="filename" type="text/javascript"></script>
HTML
![Page 110: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/110.jpg)
Internet EngineeringSadegh AliakbaryHTML 111
Event-driven programming
![Page 111: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/111.jpg)
Internet EngineeringSadegh AliakbaryHTML 112
A JavaScript statement: alert
a JS command
pops up a dialog box with a message
Nowadays, popup are not common
An alert window is disruptive and annoying
A better user experience: have the message appear on the page...
alert("IE6?! Please run another browser!");
JS
![Page 112: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/112.jpg)
Internet EngineeringSadegh AliakbaryHTML 113
Event-driven programming
Programs used to start with a main method
JavaScript programs instead wait for user actions
called events and respond to them
event-driven programming: writing programs driven
by [user] events
Let's write a page with a clickable button that pops
up a "Hello, World" window...
![Page 113: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/113.jpg)
Internet EngineeringSadegh AliakbaryHTML 114
Buttons
button's text appears inside tag; can also contain images
To make a responsive button or other UI control:
1. choose the control (e.g. button) and event (e.g. mouse 1. click)
of interest
2. write a JavaScript function to run when the event occurs
3. attach the function to the event on the control
<button>Click me!</button>
HTML
![Page 114: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/114.jpg)
Internet EngineeringSadegh AliakbaryHTML 115
JavaScript functions
function name() {
statement ;
statement ;
...
statement ;
}
the above could be the contents of
example.js linked to our HTML page
statements placed into functions can be evaluated in response to user events
function myFunction() {
alert("Hello!");
alert("How are you?");
}
<button onclick="myFunction();">
Click me!</button>
![Page 115: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/115.jpg)
Internet EngineeringSadegh AliakbaryHTML 116
Event handlers
JavaScript functions can be set as event handlers
when you interact with the element, the function will execute
onclick is just one of many event HTML attributes we'll use
onmouseover, onmouseout, onmousedown, onmouseup, …
onkeydown, onkeypress, …
<button onclick="myFunction();">Click me!</button>
![Page 116: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/116.jpg)
Internet EngineeringSadegh AliakbaryHTML 117
Document Object Model (DOM)
Most JS code manipulates elements on an HTML page
we can examine elements' state
e.g. see whether a box is checked
we can change state
e.g. insert some new text into a div
we can change styles
e.g. make a paragraph red
![Page 117: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/117.jpg)
Internet EngineeringSadegh AliakbaryHTML 118
DOM element objects
![Page 118: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/118.jpg)
Internet EngineeringSadegh AliakbaryHTML 119
Accessing elements: document.getElementById
var name = document.getElementById("id");
JS
<button onclick="changeText();">Click me!</button>
<span id="output">replace me</span>
<input id="textbox" type="text" /> HTML
function changeText() {
var span = document.getElementById("output");
span.innerHTML = "You Replaced Me!";
span.className = "MyClass";
var textBox = document.getElementById("textbox");
textbox.value = "Hello!!";
textbox.style.color = "red";
} JS
![Page 119: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/119.jpg)
Internet EngineeringSadegh AliakbaryHTML 120
Accessing elements: document.getElementById
document.getElementById returns the DOM
object for an element with a given id
can change the text
inside most elements by setting the innerHTML property
in form controls by setting the value property
![Page 120: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/120.jpg)
Internet EngineeringSadegh AliakbaryHTML 121
Changing element style: element.style
Attribute Property or style object
color color
padding padding
background-color backgroundColor
border-top-width borderTopWidth
Font size fontSize
Font famiy fontFamily
![Page 121: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/121.jpg)
Internet EngineeringSadegh AliakbaryHTML 122
Example
function changeText() {
//grab or initialize text here
// font styles added by JS:
text.style.fontSize = "13pt";
text.style.fontFamily = "Comic Sans MS";
text.style.color = "red"; // or pink?
} JS
![Page 122: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/122.jpg)
More Javascript Syntax
![Page 123: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/123.jpg)
Internet EngineeringSadegh AliakbaryHTML 124
Variables
variables are declared with the var keyword (case sensitive)
types are not specified, but JS does have types ("loosely typed")
string, number, boolean, object, function,
null, undefined
Three types of objects: Object, Date, Array
can find out a variable's type by calling typeof
var name = expression; JS
var clientName = "Connie Client";
var age = 32;
var weight = 127.4; JS
![Page 124: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/124.jpg)
Internet EngineeringSadegh AliakbaryHTML 125
Number type
integers and real numbers are the same type
(no int vs. double)
same operators: + - * / % ++ -- = += -= *= /= %=
similar precedence to Java
many operators auto-convert types: "2" * 3 is 6
var enrollment = 99;
var medianGrade = 2.8;
var credits = 5 + 4 + (2 * 3);
JS
![Page 125: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/125.jpg)
Internet EngineeringSadegh AliakbaryHTML 126
Comments (same as Java)
identical to Java's comment syntax
recall: 4 comment syntaxes
HTML: <!-- comment -->
CSS/JS: /* comment */
Java/JS: // comment
// single-line comment
/* multi-line comment */
![Page 126: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/126.jpg)
Internet EngineeringSadegh AliakbaryHTML 127
Math object
methods: abs, ceil, cos, floor, log, max,
min, pow, random, round, sin, sqrt, tan
properties: E, PI
var rand1to10 = Math.floor(Math.random() * 10 + 1);
var three = Math.floor(Math.PI);
![Page 127: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/127.jpg)
Internet EngineeringSadegh AliakbaryHTML 128
Special values: null and undefined
undefined : has not been declared, does not exist
null : exists, but was specifically assigned an empty
or null value
var ned = null;
var benson = 9;
// at this point in the code,
// ned is null
// benson's 9
// caroline is undefined
![Page 128: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/128.jpg)
Internet EngineeringSadegh AliakbaryHTML 129
Logical operators
> < >= <= && || ! == != === !==
most logical operators automatically convert types:
5 < "7" is true
42 == 42.0 is true
"5.0" == 5 is true
=== and !==
strict equality tests; checks both type and value
"5.0" === 5 is false
![Page 129: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/129.jpg)
Internet EngineeringSadegh AliakbaryHTML 130
if/else statement (same as Java)
identical structure to Java's if/else statement
JavaScript allows almost anything as a condition
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
![Page 130: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/130.jpg)
Internet EngineeringSadegh AliakbaryHTML 131
Boolean type
any value can be used as a Boolean
"falsey" values: 0, 0.0, NaN, "", null, and undefined
"truthy" values: anything else
converting a value into a Boolean explicitly:
var boolValue = Boolean(otherValue);
var boolValue = ! (otherValue);
var iLike190M = true;
if ("web devevelopment is great") { /* true */ }
if (0) { /* false */ }
![Page 131: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/131.jpg)
Internet EngineeringSadegh AliakbaryHTML 132
for loop (same as Java)
var sum = 0;
for (var i = 0; i < 100; i++) {
sum = sum + i;
}
var s1 = "hello";
var s2 = "";
for (var i = 0; i < s.length; i++) {
s2 += s1.charAt(i) + s1.charAt(i);
}
// s2 stores "hheelllloo"
![Page 132: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/132.jpg)
Internet EngineeringSadegh AliakbaryHTML 133
while loops (same as Java)
break and continue keywords also behave as in Java
while (condition) {
statements;
}
do {
statements;
} while (condition);
![Page 133: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/133.jpg)
Internet EngineeringSadegh AliakbaryHTML 134
Popup boxes
alert("message"); // message
confirm("message"); // returns true or false
prompt("message"); // returns user input string
![Page 134: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/134.jpg)
Internet EngineeringSadegh AliakbaryHTML 135
Arrays
var name = []; // empty array
var name = [value, value, ..., value]; // pre-filled
name[index] = value; // store element
var ducks = ["Huey", "Dewey", "Louie"];
var stooges = []; // stooges.length is 0
stooges[0] = "Larry"; // stooges.length is 1
stooges[1] = "Moe"; // stooges.length is 2
stooges[4] = "Curly"; // stooges.length is 5
stooges[4] = "Shemp"; // stooges.length is 5
![Page 135: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/135.jpg)
Internet EngineeringSadegh AliakbaryHTML 136
Array methods
array serves as many data structures: list, queue, stack, ...
methods: pop/push, shift/unshift, join, reverse, sort, toString
push and pop add / remove from back
unshift and shift add / remove from front
shift and pop return the element that is removed
var a = ["Stef", "Jason"]; // Stef, Jason
a.push("Brian"); // Stef, Jason, Brian
a.unshift("Kelly"); // Kelly, Stef, Jason, Brian
a.pop(); // Kelly, Stef, Jason
a.shift(); // Stef, Jason
a.sort(); // Jason, Stef
![Page 136: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/136.jpg)
Internet EngineeringSadegh AliakbaryHTML 137
String type
methods: charAt, indexOf, lastIndexOf, replace, split, substring, toLowerCase, toUpperCase
length property (not a method as in Java)
concatenation with + :
1 + 1 is 2, but "1" + 1 is "11“
But "2" * 3 is 6
var s = "Connie Client";
var fName = s.substring(0, s.indexOf(" ")); // "Connie"
var len = s.length; // 13
var s2 = 'Melvin Merchant';
![Page 137: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/137.jpg)
Internet EngineeringSadegh AliakbaryHTML 138
More about String
accessing the letters of a String:
escape sequences behave as in Java: \' \" \& \n \t \\
converting between numbers and Strings:
var count = 10;
var s1 = "" + count; // "10"
var s2 = count + " bananas, ah ah ah!";
// "10 bananas, ah ah ah!"
var n1 = parseInt("42 is the answer"); // 42
var n2 = parseFloat("booyah"); // NaN
var firstLetter = s[0]; // fails in IE
var firstLetter = s.charAt(0); // does work in IE
var lastLetter = s.charAt(s.length - 1);
![Page 138: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/138.jpg)
Internet EngineeringSadegh AliakbaryHTML 139
Splitting strings: split and join
split breaks apart a string into an array using a
delimiter
can also be used with regular expressions (seen later)
join merges an array into a single string, placing a
delimiter between them
var s = "the quick brown fox";
var a = s.split(" ");// ["the", "quick", "brown", "fox"]
a.reverse(); // ["fox", "brown", "quick", "the"]
s = a.join("!"); // "fox!brown!quick!the"
![Page 139: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/139.jpg)
Conclusion
![Page 140: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/140.jpg)
Internet EngineeringSadegh AliakbaryHTML 141
References
W3Schools Online Web Tutorials
http://www.w3schools.com/
TutorialsPoint
www.tutorialspoint.com/
Internet Engineering course, Amirkabir University of
Technology, Dr. Bahador Bakhshi
http://ceit.aut.ac.ir/~bakhshis/
Web Programming Step by Step by Marty Stepp, Jessica
Miller, and Victoria Kirst
![Page 141: Client-side Web Programming Basics · HTML Sadegh Aliakbary Internet Engineering 41 Form Tag ... Used to send user-specified information to server The server](https://reader033.vdocuments.us/reader033/viewer/2022042922/5f6f1a3adb62ba610310071c/html5/thumbnails/141.jpg)
The End