ALX FE, welcome to
Catchup 1
Intro to JS
Adding Interactivity To Our Websites
HouseKeeping
Rules
● Stay attentive, we do not want YOU missing anything.
● Raise your hand if you want to ask your question or put
your question in the chat.
● You can turn on your video but stay on mute until you’re
prompted to unmute and speak.
Agenda
Activity Duration(GMT)
Check in and recap. 7:00 PM
Dive deep into our recap. 7:10 PM
Q & A Session 7:50 PM
Announcements & Next steps 8:00 PM
Checkin
What are you hoping to get
out of this session?
Pay close attention, we are now starting our:
Deep dive into
our Session.
What is Javascript.
- Javascript is a programming language
- It is used mostly to make our web pages interactive
and it works together with HTML and CSS
- HTML, CSS and Javascript are the foundations for
building for the web.
- Javascript is the one of the most common languages
that can be interpreted by the browsers.
- Consequently all browsers support Javascript out of
the box without the need of any plugins.
What is Javascript use for?
- Hamburger Menu Toggle
● Button that shows/hides mobile navigation menu
● Simple open/close animation
2. Dark/Light Mode Switch
● Toggle button to change page colors
● Saves user preference
3. "Read More" Button
● Shows additional text when clicked
● Changes button text between "Read
More"/"Show Less"
What is Javascript use for?
4. Image Enlarger
● Click thumbnail to show larger version
● Click again to shrink back
5. Simple Form Checker
● Alerts if required fields are empty
● Basic email format validation
6. Character Counter
● Counts characters in textarea
● Shows remaining characters allowed
Linking HTML to JS
- Inline Javascript
- Internal Javascript
- External Javascript
Basic Syntax
- Variables
- let, const, var
- Comments
- //
- Data Types
- String, Number, Boolean, Array, Object
More Programming
- Conditionals
- Loops
- Functions
The Document Object
Model
- This is the data representation of the objects that comprise the
structure and content of a document(HTML) on the web.
- The DOM represents document with a logical tree. EAch
branch of the tree ends in a node and each node contains
objects.
- With the DOM we get programmatic access to the tree and we
can change the document’s structure, style or even content.
- The DOM is simply an interface, (an API) and it allows us to
use programs and scripts to dynamically access and updated
content.
- We can use Javascript to interact with the DOM.
The Document Object
Model
The DOM
Manipulating the DOM
- Selecting Elements
- getElementById(), getElementsByClassName(),
querySelector
- Modifying Elements
- Change styles
- Change Content
Handling Events
- We can monitor and perform actions we specify after a
certain event.
- Some of the events include ‘click’, ‘mouseover’, ‘keyup’
Build a Todo List
Q&A
Session
Resources
1. MDN Web Docs
2. W3Schools
Announcements
1.
