Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 COMM 1213 H1 COMP 4923 X1 Advanced HTML & Introduction to Computer Programming (Readings: Ch. 8, 9 Knuckles)

Similar presentations


Presentation on theme: "1 COMM 1213 H1 COMP 4923 X1 Advanced HTML & Introduction to Computer Programming (Readings: Ch. 8, 9 Knuckles)"— Presentation transcript:

1 1 COMM 1213 H1 COMP 4923 X1 Advanced HTML & Introduction to Computer Programming (Readings: Ch. 8, 9 Knuckles)

2 2 Outline Moe’s World – Example of a simple table based webpage Moe’s World – Example of a simple table based webpage HTML Frames (Chapter 8) HTML Frames (Chapter 8) Intro to (Chapter 9) Intro to (Chapter 9) –HTML Forms –Client Sever Model –Programming Concepts –JavaScript EG

3 3 Moe’s World Moe's Homepage Acadia University CogNova Technologies Sideshow Bob's Basement Groundskeeper Willie's Workshop Welcome to Moe's World! Feel free to click on one of my favorite links to the left or stick around and see what I have to say. Blagh Blagh Blagh

4 4 Frames – Chapter 8 Link to on-line website for Craig D. Knuckles text Link to on-line website for Craig D. Knuckles textCraig D. Knuckles textCraig D. Knuckles text

5 5 Intro to HTML Forms – Ch.9

6 6 HTML Forms Various Form Elements TEXT FIELD: TEXT AREA: Enter Special Requests here! CHECKBOXES: Choose some of the following toppings for your pizza. Pepperoni: Sausage: Mushrooms: Onions: Extra Cheese:

7 7 HTML Forms RADIO BUTTONS: Pick a size for your pizza. Small: Medium: Large: X-Large POP-UP-MENU : Choose one of the following delivery options. Pickup Delivery Eat In GENERIC BUTTON : RESET BUTTON:

8 8 Client-Server Model

9 9

10 10 Programming Fundamentals We will use a LEGO robot to demonstrate the basic building blocks of all programs: We will use a LEGO robot to demonstrate the basic building blocks of all programs: –I/O actions (move, display, input) –Variables (counter = 1, x = 25) –Conditional logic (If touchsensor=press,Then backup –Loops (For 4 times, Do …) –Functions ( FollowLine, CalcTotal(x) )

11 11 Programming Langauges Allow humans to write logical sequences of computer commands in an English like language Allow humans to write logical sequences of computer commands in an English like language Programs can be: Programs can be: –“Interpreted” by another program to execute the commands –Compiled into machine code and then run on its own to excute the commands Java has become one of the dominate programming langauges Java has become one of the dominate programming langauges Other languages …? Other languages …?

12 12 Programming Languages What is the difference between an interpreter and a compiler? What is the difference between an interpreter and a compiler? HTML code InterpreterCompiler C code Operating System Computer Hardware *.exe

13 13 The Java Programming Language Java is a relatively new language Java is a relatively new language “Green”, 1991 Sun Microsystems – dev. for use in consumer devices such as intelligent TV controllers “Green”, 1991 Sun Microsystems – dev. for use in consumer devices such as intelligent TV controllers –Object Oriented but simpler than C++ –Architecture neutral (can run on lots of h/w) –Network ready –Portable, Reliable and Secure

14 14 Java Programs and the Java Virtual Machine program.class Java Virtual MachineCompiler program.java Operating System Computer Hardware Internet

15 15 Java and the Web In 1995 the first HotJava browser was demoed at SunWorld exhibition In 1995 the first HotJava browser was demoed at SunWorld exhibition It could download programs called applets from a the web and run them locally It could download programs called applets from a the web and run them locally Provided animation and interaction Provided animation and interaction “Write once, run anywhere” “Write once, run anywhere” By 1996 both Netscape and MS supported Java within their browsers By 1996 both Netscape and MS supported Java within their browsers

16 16 Java and the Web Java has been designed for the Web Java has been designed for the Web It has two attributes that make it suitable: It has two attributes that make it suitable: –Security: An assortment of security features that guarantee that no evil applets can be written and assist in the writing of good code –Portability: Applications and Applets can run on Windows, Unix, Linux, Mac

17 17 Java Applets Applets – Run within a browser in an allocated space of webpage Applets – Run within a browser in an allocated space of webpage program.class Java Virtual Machine Compiler program.java Operating System Computer Hardware Browser

18 18 Java Applets over the Web Java source code Java compiler Java applet bytecode Interne t Java (JVM) Interpreter Web Browser Client Server abc.java abc.class HTTP Server App Server

19 19 Java Applets Full-feature client-side programming language Full-feature client-side programming language Code is external to HTML, but can be called by HTML Code is external to HTML, but can be called by HTML HTML allocates space, applet executes in that space HTML allocates space, applet executes in that space For complex algorithms and local data and image manipulation For complex algorithms and local data and image manipulation Examples: Examples: –HelloApplet.html, HelloApplet.java HelloApplet.htmlHelloApplet.javaHelloApplet.htmlHelloApplet.java –AnimationApplet.html, AnimationApplet.java AnimationApplet.htmlAnimationApplet.javaAnimationApplet.htmlAnimationApplet.java –http://www.paradise-inn- carriacou.com/sunsets/sunsets_lake.php http://www.paradise-inn- carriacou.com/sunsets/sunsets_lake.phphttp://www.paradise-inn- carriacou.com/sunsets/sunsets_lake.php

20 20 JavaScript JavaScript – Runs within a browser, can manipulate most aspects of HTML JavaScript – Runs within a browser, can manipulate most aspects of HTML webpage.html JavaScript Interpreter Operating System Computer Hardware Browser

21 21 JavaScript Originally “LiveScape”, developed independent of Java at NetScape by Brendan Eich Originally “LiveScape”, developed independent of Java at NetScape by Brendan Eich A small “scripting” language designed to enhance webpages by manipulating webpage objects A small “scripting” language designed to enhance webpages by manipulating webpage objects Code is embedded in HTML, and called by HTML Code is embedded in HTML, and called by HTML Can manipulated most aspects of a webpage Can manipulated most aspects of a webpage For generation of dynamic content but less complex computation and data manipulation For generation of dynamic content but less complex computation and data manipulation

22 22 JavaScript Examples: Examples: –Movement of browser windows Movement of browser windowsMovement of browser windows –Validation of entered FORM data Validation of entered FORM dataValidation of entered FORM data –Event handling Event handlingEvent handling

23 23 Why learn JavaScript? A good first step to learning programming A good first step to learning programming –All fundamental concepts are used –Object-Oriented Programming (OOP) Allows you to quickly build dynamic content for webpages Allows you to quickly build dynamic content for webpages JavaScript code can be saved and reused JavaScript code can be saved and reused Use existing libraries of JavaScript code Use existing libraries of JavaScript code

24 24 Resources Getting started with HTML from the W3C Getting started with HTML from the W3C Getting started with HTML Getting started with HTML W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML W3C'sHTML 4.0 W3C'sHTML 4.0 W3 Schools HTML Tutorial W3 Schools HTML TutorialHTML TutorialHTML Tutorial HTML Goodies HTML Primer HTML Goodies HTML PrimerHTML PrimerHTML Primer An HTML Code Tutorial An HTML Code TutorialHTML Code TutorialHTML Code Tutorial Writing HTML a tutorial for creating web pages (a little old but a different perspective) Writing HTML a tutorial for creating web pages (a little old but a different perspective) Writing HTML Writing HTML JavaScript examples: JavaScript examples: http://www.w3schools.com/js/js_examples.asp http://www.js-examples.com/page/javascripts.html http://javascript.internet.com/

25 25 THE END danny.silver@acadiau.ca

26 26 Architectural of the Internet Internet Application Client 1 Server B Server C TCP/IP Application Client 2 Server X Server Y Server C Intrane t Acadia

27 27 TCP/IP Protocol Architecture Transmission Control Protocol Internet Protocol

28 28 TCP/IP Protocol Architecture Internet Protocol (IP) – like a postcard that contains: Internet Protocol (IP) – like a postcard that contains: –Destination address (131.162.201.7) –Return address –Block of data (content) Transmission Control Protocol (TCP) Transmission Control Protocol (TCP) –Ensures the post card gets through –Ensures the order of deliver –Handles errors and control flow

29 29 Client-Server Applications that use the Internet Physical Network TCP IP Physical Network TCP IP Internet Telnet Window Telnet Server FTP Client FTP Server eMail ClienteMail Server SMTP/POP FTP Telnet Protocol

30 30 Major Architectural Components of the Web Internet Browser Database Server Client 1 Server A Server B Server C URL HTTP TCP/IP Browser Client 2 HTTP Server App. Server index.html

31 31 Images Various digital image formats can be embedded with in HTML:.gif,.jpg Various digital image formats can be embedded with in HTML:.gif,.jpg Example Example See www.bellsnwhistles.com as source of images and other objects. See www.bellsnwhistles.com as source of images and other objects.www.bellsnwhistles.com Let’s down load one and try it … Let’s down load one and try it … My new baby girl.

32 32 Hyper Links My Oldest Daughter. Natalie goes to Evangeline Middle School Which is in New Minas. Click Here to send her email.


Download ppt "1 COMM 1213 H1 COMP 4923 X1 Advanced HTML & Introduction to Computer Programming (Readings: Ch. 8, 9 Knuckles)"

Similar presentations


Ads by Google