Upon completion of this course, you will be able to:
- Collect values using loops, arrays, and objects.
- Add and remove web page elements using the Document Object Model (DOM).
- Validate and respond to user input using functions and events.
- Build a dynamic, interactive, front-end web application.
Prerequisites: Introduction to HTML and CSS, or equivalent skills. This course is meant for the beginning or intermediate programmer.
$448.00 (plus fees)
Enroll in Course
Course Details and Syllabus
||$448.00 (plus fees)
||This course is online and self-paced. You can expect to work approximately 90 hours on this course.
||As long as you have a web browser and internet connection, you can take this course from anywhere in the world.
||The web-based Learning Sandbox™ provided for you will contain all your lessons, projects, quizzes, account files, editors, and rendering tools necessary to build your skills from beginning to end, even beyond coursework. No other software is needed.
||You will have one instructor throughout the course who will evaluate your projects and quizzes, hand them back for improvement when necessary, and coach you throughout your skills advancement.
||Introduction to HTML and CSS, or equivalent solid foundation in HTML and CSS. This course is meant for the beginning or intermediate programmer.
||Scripting, Objects, Methods, Properties, Variables, DOM, Functions, If Statements, Loops, Object Arrays, Arrays, Nodes, Menus, form validation
- Lesson 1: Introduction to O’Reilly School of Technology
- How to Learn Using O’Reilly School of Technology Courses
- Understanding the OST Learning and Work Space Environment
- Using the CodeRunner Editor
- You’re Ready to Go!
- Lesson 2: Introduction: About This Course
- Looking Ahead…
- Where to Put Your Script
- Linking to an External Script
- Create and Calling a Function
- Built-In Functions vs. Creating Your Own Functions
- Using Other People’s Scripts
- Script Libraries
- Lesson 4: Variables
- What is a Variable?
- Naming Conventions for variables
- Lesson 5: Statements and Expressions
- Arithmetic Operators: Increment and Decrement
- More Assignment Operators
- Comparison Operators
- Conditional Expressions and Statements
- Statement nesting
- The String Concatenation Operator
- Lesson 6: Looping
- The While Loop
- The For Loop
- Combining Looping Statements and Conditional Statements
- BONUS: Using Loops to generate HTML
- Lesson 7: Arrays
- Creating Arrays and Accessing Their Values
- Changing the Values in an Array
- Looping with Arrays
- Processing Arrays
- Lesson 8: The Document Object Model
- Behind the Scenes of a Web Page
- The Document Object Model and document.getElementById()
- Getting Elements with document.getElementsByTagName()
- The Window Object
- Lesson 9: Functions and Events
- What is a Function?
- Function Parameters and Arguments
- Functions with Multiple Parameters
- Multiple Functions
- Handling Events
- Naming Functions
- Lesson 10: Scope
- Variable Levels
- Global Scope and Local Scope
- Local Scope
- Scope of Function Parameters
- Different Functions have Different Scope
- Using Global and Local Variables
- Lesson 11: Objects
- Objects are Collections of Properties
- Accessing Object Properties
- Objects and Arrays
- Object Constructors
- Changing Object Properties
- Built-In Objects
- Using Objects to Collect Global Variables
- Lesson 12: Methods
- Objects and Methods
- A Method is a Function in an Object
- Methods with Parameters
- Create a Page with a Form
- Clearing Form Controls
- Lesson 14: Form Collections
- Using Form Collections
- Using the Elements Collection to Access the Value of a Selected Radio Button
- Lesson 15: Creating New Elements
- Creating and Adding New Elements to the DOM
- Adding More Elements
- Inserting Elements
- Lesson 16: Element Attributes and Style
- Building the Photo Viewer Application
- Using setAttribute() to Add a Class to an Elemen
- Using getAttribute() to Get the Value of an Element Attribute
- Use document.querySelectorAll() and setAttribute() to set the class of multiple elements
- Lesson 17: Navigating the DOM
- Add a Click Handler to Multiple Links
- Add an Image to the Page
- Removing Elements from the Page
- Getting a Child’s Parent
- Text Nodes
- Lesson 18: Final Project — The Amazing Box Generator!
- Amazing Boxes
- The HTML for Amazing Boxes
- The CSS for Amazing Boxes
- Positioning an Absolutely Positioned Element
- The Amazing Boxes Application Requirements
On your way to a Certificate of Professional Development:
$1,344.00 (plus fees)
Enroll in Certificate
Front-End Web Development Certificate
Introduction to HTML and CSS $0.00 (plus fees)
$896.00 (plus fees)
Enroll in Certificate