• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
KMUTNB - Internet Programming 4/7
 

KMUTNB - Internet Programming 4/7

on

  • 1,214 views

Lecture for King Mongkut's University of Technology North Bangkok (KMUTNB) / Computer Science / Internet Programming Course by PHUPHA

Lecture for King Mongkut's University of Technology North Bangkok (KMUTNB) / Computer Science / Internet Programming Course by PHUPHA

Statistics

Views

Total Views
1,214
Views on SlideShare
1,199
Embed Views
15

Actions

Likes
0
Downloads
20
Comments
0

3 Embeds 15

http://www.abzolutetech.com 11
http://www.docshut.com 3
http://www.slideee.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    KMUTNB - Internet Programming 4/7 KMUTNB - Internet Programming 4/7 Presentation Transcript

    • Cascade Style Sheet & Java Script & DOM By: Mr. PHUPHA PUNYAPOTASAKUL ( ภูผา ปัญญาโพธาสกุล )
    • C ascading S tyle S heets
      • CSS stands for C ascading S tyle S heets
      • Styles define how to display HTML elements
      • Styles were added to HTML 4.0 to solve a problem
      • External Style Sheets can save a lot of work
      • Multiple style definitions will cascade into one
    • Cascading Order
      • Browser default
      • External style sheet
      • Internal style sheet ( inside the <head> tag )
      • Inline style ( inside an HTML element )
    • CSS Syntax
      • Syntax selector {property : value}
      • E.g. body {color : black}
      • If value have space or special character p {font - family : &quot; sans serif &quot; }
    • CSS Syntax
      • Multiple properties (use semi-colon)
        • p
        • {
        • text-align: center;
        • color: black;
        • font-family: arial
        • }
      • Grouping
        • h1,h2,h3,h4,h5,h6
        • {
        • color : green
        • }
    • CSS Syntax
      • Class selector
      • p.right {text-align: right}
      • p.center {text-align: center}
      • <p class=&quot;right&quot;> ..</p>
      • Applying more than one class
      • <p class=&quot;center bold&quot;> .. </p>
      • Class for any tag
      • .right {text-align: right}
    • CSS Syntax
      • ID Selector
      • #green {color : green}
      • ID Selector for specific tag
      • p#green {color : green}
      • Applying style
      • <p id=“green”> .. </p>
      • Tag with specific attribute
      • input [ type =&quot; text &quot;] {background - color : blue}
    • CSS Comment
      • Start with /* and end with */
      • Similar to C or JAVA
      • E.g.
        • /* This is a comment */
        • p
        • {
        • text-align: center;
        • /* This is another comment */
        • color: black;
        • font-family: arial
        • }
    • CSS Pseudo-classes
      • Syntax
      • selector:pseudo-class {property: value}
      • selector.class:pseudo-class {property: value}
      • E.g.
      • a : link {color : #FF0000} /* unvisited link */
      • a : visited {color : #00FF00} /* visited link */
      • a : hover {color : #FF00FF} /* mouse over link */
      • a : active {color : #0000FF} /* selected link */
      • a . red : visited {color : #FF0000}
    • Dreamweaver
    • CCS Windows
    • Box model
    • Java Script
      • JavaScript was designed to add interactivity to HTML pages
      • JavaScript is a scripting language
      • A scripting language is a lightweight programming language
      • A JavaScript consists of lines of executable computer code
      • A JavaScript is usually embedded directly into HTML pages
      • JavaScript is an interpreted language ( means that scripts execute without preliminary compilation )
      • Everyone can use JavaScript without purchasing a license
    • Java Script Basic
      • Most of syntax same as JAVA
      • Some JAVA feature was cut out e.g. public protected static etc.
      • Case sensitive
      • Interpreted language not compiled language
      • Flexible data type
    • Variables
      • Syntax example var strname = &quot; Hege &quot;
      • Variable scope
        • Local: declared within a function
        • Global: elsewhere
      • Overriding global variable
      • Implicit declaration
    • Arithmetic Operators Decrement -- Increment ++ Modulus (division remainder) % Division / Multiplication * Subtraction - Addition + Description Operator
    • Assignment Operators x=x%y x%=y %= x=x/y x/=y /= x=x*y x*=y *= x=x-y x-=y -= x=x+y x+=y += x=y x=y = Is The Same As Example Operator
    • Comparison Operators is less than or equal to <= is greater than or equal to >= is less than < is greater than > is not equal != is equal to (checks for both value and type) === is equal to == Description Operator
    • Flow control
      • If then else
      • Switch
      • For loop
      • While loop
      • Break/continue statement
    • Arrays
      • Creating an array
        • var mycars=new Array() ;
        • var mycars=new Array(3) ;
        • var mycars=new Array(&quot;Saab&quot;,&quot;Volvo&quot;,&quot;BMW&quot;) ;
      • Accessing value in array
        • alert( mycars[0] );
      • Dynamic length
      • Flexible data type
    • Basic Function
      • alert(“some text”);
      • confirm(“some text”);
        • Return true/false
      • prompt(“some text”,”default value”);
        • Return user’s inputted value
    • Java Script Object Contains information about the current URL Location Contains the visited URLs in the browser window History Contains information about the client's display screen Screen Contains information about the client's browser Navigator The top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag Window Description Object
    • Events
      • Examples of events :
        • A mouse click
        • A web page or an image loading
        • Mousing over a hot spot on the web page
        • Selecting an input box in an HTML form
        • Submitting an HTML form
        • A keystroke
    • HTML Event
      • onload and onUnload
      • onFocus, onBlur and onChange
      • onSubmit
      • onMouseOver and onMouseOut
      • And etc.
      • Invoking Java Script function
        • <input type =&quot; text &quot; size =&quot; 30 &quot; id =&quot; email &quot; onchange =&quot; checkEmail ()&quot; >
    • HTML DOM The DOM (Document Object Model) presents an HTML document as a tree - structure ( a node tree ) , with elements, attributes, and text .
    • DOM Inspector
    • Access Node
      • Get element by ID
        • document.getElementById('someID')
      • Get element by tag name
        • document.getElementsByTagName(&quot;p&quot;)
      • Return value possible to be either object or array of object
      • parentNode, firstChild, lastChild and etc.
    • Question & Answer