Web Programming Tutorial

Web Site example using css layout and basic java script utilities

Live examples:

• HTML Preview
• Contacts
• Playing Cards Template
• Bootstrap Example

Exercises

• Add new widget
• Make sure you understand how to find any elements with:
  • document.getElementById('element-id')
  • document.getElementsByClassName("class-name")
  • document.getElementsByTagName("a")
  • and nested combinations of those
• play in FireBug to find and change some attributes (color, display, width, height, etc.) of some elements
• Make all widgets collapsible

Learning Pure JS

• variables
  • boolean | var employed = true;
  • number | var age = 10;
  • string | var name = 'text';
  • object
    • array | var skills = ['html', 'css', 'js'];
    • json | var p = {name: 'me', age: 29, employed: true, skills: ['html', 'css', 'js']};
    • object (DOM elements, others)
• functions
  • parameters
  • scope

Lesson 2 Plan

• review last lesson

• homework review

• DataView examples with general elements (html, css)

• js scope

• functions in functions

• anonymous functions

• ajax

• add project in tomcat to make ajax calls (example to make link in webapps)

    cd c:\Progs\apache-tomcat-8.0.20\webapps
    mklink /J web-tutorial c:\Products\web-programming-tutorial
  

• or add project in xampp to make ajax calls (example to make link in htdocs)

    cd c:\xampp\htdocs
    mklink /J web-tutorial c:\Products\web-programming-tutorial