ATLAS 2200 - WEB JavaScript & the DOM
Peanut Butter & Jelly Sandwich How do I make one?
A Script A script is a series of instructions that a computer can follow to achieve a specific goal, big or small Log into a social media app Click through a slide show Buy a product online Reserve a hotel room Etc.
A Script People follow them too Recipes How-to Manuals Tutorials Driving directions Etc.
Writing a Script Define your main goal & smaller goals Design the script Code each step
Goals: Learn HTML Download FTP client, VPN, and Code Editor Set up home folder (root directory) with sub folders Learn basic HTML format & syntax Learn Semantics Learn HTML structure Learn HTML content Validate Upload
Design Script
Code
Scripting Computers solve problems programmatically Follow instructions one at a time Require specific details with little to no error
Scripting
Scripting for the Web Java (Not JavaScript) Python PHP Ruby C++ …
JavaScript (As well as Klingon)
JavaScript One of the three primary pillars of web development HTML – Content & Structure CSS – Design JavaScript – Behavior
JavaScript vs. Java One of the three primary pillars of web development Java Developed at Sun Microsystems in 1995. Can stand alone. JavaScript Developed… also in 1995… by Netscape. Was originally called LiveScript. Usually exists within a web page and communicates with HTML / CSS Similar syntax
JavaScript Beginnings The web needed to be more dynamic Netscape developed JS for their browser Microsoft released jScript in 1996 for IE 3.0 (Because of course they did…) Not compatible with JavaScript Roadblock to web browser compatibility
JavaScript Beginnings Macromedia Flash ActionScript Plugin based Widely adopted (though proprietary) JavaScript continued gaining favor in early 2000s and by mid-late 2000s was the most used scripting / programming language for the web. Fully supported by all major browsers Non-proprietary
Object Properties Object: Car Make: Subaru Model: Outback Year: 2017 Color: Black Speed: 0mph
Events Accelerate Decelerate Turn Reverse
Methods Accelerate(); Decelerate(); TurnRight(); TurnLeft(); Reverse();
Methods Accelerate(); Decelerate(); TurnRight(); TurnLeft(); Reverse();
Document Object Model Represents your webpage Properties Events Width, height, color, font-size, etc. Events onClick, onMouseOver, onLoad, etc. Methods loadContent(); sayHi(); login(); purchase();
All browsers implement the DOM in the same way Document Object Model All browsers implement the DOM in the same way
Loading JavaScript Internal: <script type="text/javascript"> alert("Hello World"); </script> External: <script src="js/demo.js" type="text/javascript"></script>
Loading JavaScript Where? Usually in the <head> or just before </body> Alert(“Hello World”);
Loading JavaScript When? After the DOM (web page) has loaded document.getElementById("myParagraph").innerHTML = "Hi"; <p id="myParagraph"> … </p>
Loading JavaScript When? <p id="myParagraph"> Hi </p> document.getElementById("myParagraph").innerHTML = "Hi";
Calling Objects Method document.getElementById("idName") document.getElementByClassName("ClassName") Document.body… Document.h1…
Accessing CSS within the DOM document.getElementById("idName").style._______ = _____; Style Object Properties: https://www.w3schools.com/jsref/dom_obj_style.asp
Attendance Question: Week 7 Poor Ian is lost. Write a script to guide him back to his office. Detail is essential. Don’t get him killed. Post your question to Edmodo under “Lecture Attendance Question Week 7” Your answer should be approximately one paragraph in length.