Download presentation
Presentation is loading. Please wait.
1
ATLAS WEB JavaScript & the DOM
2
Peanut Butter & Jelly Sandwich
How do I make one?
3
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.
4
A Script People follow them too Recipes How-to Manuals Tutorials
Driving directions Etc.
5
Writing a Script Define your main goal & smaller goals
Design the script Code each step
6
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
7
Design Script
8
Code
9
Scripting Computers solve problems programmatically
Follow instructions one at a time Require specific details with little to no error
10
Scripting
11
Scripting for the Web Java (Not JavaScript) Python PHP Ruby C++ …
12
JavaScript (As well as Klingon)
13
JavaScript One of the three primary pillars of web development
HTML – Content & Structure CSS – Design JavaScript – Behavior
14
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
15
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
16
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
17
Object Properties Object: Car Make: Subaru Model: Outback Year: 2017
Color: Black Speed: 0mph
18
Events Accelerate Decelerate Turn Reverse
19
Methods Accelerate(); Decelerate(); TurnRight(); TurnLeft();
Reverse();
20
Methods Accelerate(); Decelerate(); TurnRight(); TurnLeft();
Reverse();
21
Document Object Model Represents your webpage Properties Events
Width, height, color, font-size, etc. Events onClick, onMouseOver, onLoad, etc. Methods loadContent(); sayHi(); login(); purchase();
22
All browsers implement the DOM in the same way
Document Object Model All browsers implement the DOM in the same way
23
Loading JavaScript Internal: <script type="text/javascript">
alert("Hello World"); </script> External: <script src="js/demo.js" type="text/javascript"></script>
24
Loading JavaScript Where?
Usually in the <head> or just before </body> Alert(“Hello World”);
25
Loading JavaScript When? After the DOM (web page) has loaded
document.getElementById("myParagraph").innerHTML = "Hi"; <p id="myParagraph"> … </p>
26
Loading JavaScript When? <p id="myParagraph"> Hi </p>
document.getElementById("myParagraph").innerHTML = "Hi";
27
Calling Objects Method document.getElementById("idName")
document.getElementByClassName("ClassName") Document.body… Document.h1…
28
Accessing CSS within the DOM
document.getElementById("idName").style._______ = _____; Style Object Properties:
29
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.
Similar presentations
