Week 7 Lecture Slides

Transcript Week 7 Lecture Slides

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
• Width, height, color, font-size, etc.
• Events
• onClick, onMouseOver, onLoad, etc.
• Methods
• loadContent(); sayHi(); login(); purchase();
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.

Week 7 Lecture Slides

Transcript Week 7 Lecture Slides

Directory