Your SlideShare is downloading. ×
Web scripting
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web scripting

1,080

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,080
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web scripting HTML, XHTML, CSS, JS, AJAX and PHP Vancouver PHP Users Association
  • 2. HTML page <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
  • 3. HTML basics  html tags are surrounded by angle brackets  html tags are used to markup html elements  tags can have attributes, which provide additional  information  attributes always come in name/value pairs 
  • 4. HTML tags  <p></p> for Paragraph  <a href=” ” alt=” ” title=” ”> </a> for Links  <img src=” ” border=”0” />  <table><thead><tr><th> </th></tr></thead>    <tbody><tr><td> </td></tr></tbody></table>  Forms: text fields, textarea, drop­down menus, radio  buttons, checkboxes
  • 5. XHTML  EXtensible HyperText Markup Language  XHTML elements must be  properly nested  XHTML elements must always be closed  XHTML elements must be in lowercase  XHTML documents must have one root element  Attribute names must be in lower case  Attribute values must be quoted  Attribute minimization is forbidden  The id attribute replaces the name attribute  The XHTML DTD defines mandatory elements
  • 6. XHTML  All XHTML documents must have a DOCTYPE  declaration.   The html, head and body elements must be present,   The title must be present inside the head element.  <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd">  <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1­transitional.dtd">
  • 7. CSS  Cascading Style Sheets define display of HTML  External Style Sheets are stored in CSS files  External Style Sheets  <link rel="stylesheet" type="text/css" href="mystyle.css">  Internal Style Sheets  <style type="text/css">     body {background­color: red};      p {margin­left: 20px}</style>  Inline styles  <p style="color: red; margin­left: 20px">This is a paragraph</p>
  • 8. CSS examples  hr {color: sienna}  p {margin­left: 20px}  p.right {text­align: right}  p.center {text­align: center}  body {background­image:  url("images/back40.gif")}  http://w3schools.com/css/css_examples.asp 
  • 9. Javascript  The most popular scripting language on the internet  A programming tool for HTML designers  Can react to events, when a page loads, or a list is  changed  Data validation  Read and write HTML elements  Create cookies
  • 10. Javascript  <script type="text/javascript">  document.write("Hello World!")</script>  <script src="abc.js"></script>  Variables: var struser = 'refsnes';  if (condition) { } else if () { } else { }  switch() { case 1: break; default: break; }  for (var=1; var=10; var=var+2) {}  while (var <= 20) {}
  • 11. Javascript handlers  event handlers, e.g. onclick  use functions to perform multiple javascript  commands  <input type="button" value="Click me!"  onclick="displaymessage()" >  onload, onchange, onsubmit, onmouseover,  onmouseout
  • 12. Javascript examples W3schools.com  http://w3schools.com/js/js_examples.asp  http://w3schools.com/js/js_examples_2.asp  http://w3schools.com/js/js_examples_3.asp Mredkj.com  http://www.mredkj.com/tutorials/htmljs.html  http://www.mredkj.com/javascript/index.html
  • 13. Ajax  Asynchronous JavaScript And XML  made popular in 2005 by Google Suggest  technique for creating more interactive web pages,  without reloading the page  communicates directly with the server using  XMLHttpRequest object  Ajax is based on Javascript, XML, HTML, CSS
  • 14. Ajax function listAddr(str) { function GetXmlHttpObject() {         var xmlHttp=GetXmlHttpObject()         var xmlHttp=null;         if (xmlHttp==null) {         try {                 alert ("Browser does not support HTTP Request")                 // Firefox, Opera 8.0+, Safari                 return                 xmlHttp=new XMLHttpRequest();         }         var url="user_addressbook_process.php"         } catch (e) {         url=url+"?q=listAddr"                 //Internet Explorer         url=url + '&' + str                 try {         url=url+"&sid="+Math.random()                         xmlHttp=new          xmlHttp.onreadystatechange=function() { ActiveXObject("Msxml2.XMLHTTP");                 if (xmlHttp.readyState==4 ||                  } catch (e) { xmlHttp.readyState=="complete") {                         xmlHttp=new                    document.getElementById("listAddr").innerHTML  ActiveXObject("Microsoft.XMLHTTP"); =xmlHttp.responseText                 }                 }         }         }         xmlHttp.open("GET",url,true)         return xmlHttp;         xmlHttp.send(null) } }
  • 15. PHP  PHP: Hypertext Preprocessor  Server side scripting language  supports many databases, MySQL, Oracle, ODBC  files have a .php extension  Packages such as Xampp provide an easy test  environment on Windows, includes php, mysql,  apache, ftp server
  • 16.  Printing out html <?php echo "<p>Hello World</p>"; ?>  Loosely typed variables $var = 'value';  A variable name must start with a letter or an underscore "_"  A variable name can only contain alpha­numeric characters  and underscores (a­Z, 0­9, and _ )  A variable name should not contain spaces. 
  • 17. String functions  strlen($string);  strpos($string);  trim($string, $charlist);  strip_tags($string, $allowable_tags);  explode($delimiter, $string);  substr($string, $start, $length);
  • 18. PHP operators  Arithmetic operators  + Addition  ­ Subtraction  * Multiplication  / Division  % Modulus  ++ Increment  Comparison operators  == is equal to  != is not equal to  > greater than  < less than  >= greater than or equal to  <= less than or or equal to+ Addition  Logical operators  && and  || or  ! not
  • 19. PHP Statements  if (condition) { } else if () { } else { }  switch() { case 1: break; default: break; }  while ($i <= 20) {}  for ($i=1; $i<=10; $i++) {}  foreach ($arr as $key=>$value) {echo $value;}
  • 20. PHP Arrays  Initializing an array with one statement  $names = array("Peter","Quagmire","Joe");  Initializing each element in an array  $names[0] = "Peter";  $names[1] = "Rose";  $names[2] = "Harry";  $addresses['peter'] = '123 Josling Street';

×