JavaScript
Make your website interactive!
Before we begin.. take a look at these questions and see if you can answer them. We will look at the answers at the end.
1. What is javascript?2. can you name some core concepts in javascript? 4. can you explain one of those concepts? 3. What are some ways to make your website interactive?
Objectives
What we are covering....
- Javascript basics + syntax
- Variables
- Functions
- DOM
- Event-handling
- Practical Examples for a website:
- Browser pop-up message
- Dropdown Menu (Event Listener)
- Change Text When Clicking a Button
Javascript
What is JavaScript and why is it important ?
JS or JavaScript is is a programming languge that gives functionality to your website, creating interactive and dynamic content. When creating a website, we combine HTML, CSS and JavaScript together by first creating content, styling the content and adding behaviour to improve user experience.
Javascript
Lets quickly fo over some simple JavaScript syntax! We'll be looking at 4 concepts: Variables, Functions, the DOM and Event-handling.
Variables = containers to store values. In web-dev, you can use this when storing user input. These are 3 types: let is for values that are changeable in your code i.e. you let them be change const is for values that CANNOT be changed or re-assigned i.e. remains constant var is outdated and not a good practice to use
JS code: variabletype variableName = value;
// 2 forward slashes are comments in javascript
the casing for js variables names is camelCasing
Function = perform a task. e.g. displaying a message, calculating something etc. its really useful as its a re-usable so you dont need to repeat writing the same code, you can 'call the function' multiple times in other parts of your code, and it will do that task!
JS code for declaring function: function functionName () { task; }
function name
JS code calling the same function: functionName ();
actual message
console.log will print this message to the browser
DOM (The Document Object Model) = a interface that allows you to change the style / content of a document - so it manipulates the content e.g. the HTML document can be accessed andchanged in javascript. This is useful for event-handling (on the next slide)
HTML code: create a paragraph, with an ID
JS Code: steps to take in the DOM to change the content document.getElementById("content").innerHTML = "new content";
HTML document
the new content
get inside the HTML element
refering to the ID of selected element
Events = a user's action or an occurance in the browser, and we react to it. Event handling / listening = We can 'listen' for that event, and when it happens, the code does something! some common triggers are clicking or hovering over a button, pressing a key on the keyboard etc and we may display a pop-up or message!
HTML code: create a button, with an ID.
JS code: create an event handler element.addEventListener("event", function() { task });
document = DOM
calls a function create an alert
refer to the ID
event listener listens for the "click" event
Now that we have covered some JS syntax, lets go through some practical examples developers use to make their websites interactive for thier clients!
Pop-up message
In your 'WebBasics' folder or a create new folder...1. create a index.html file (for your html code)2. create a script.js file (for your javascript code) note: JavaScript code can be linked internally <script> tags in your html file but we are creating an external .js file for better organisation. 3. At the bottom of your html file (inside the body), link your JS file like this ->
here is what it should look like ... (optionally create a css file if you want to style later on)
Display a Popup Message (Alert Box) - welcome message
step 1: create a title for your webpage. in the <head> of your html file add a <title> like this.
step 2: right click on your page open your code in live server in the actual web browser.
Display a Popup Message (Alert Box) - welcome message
step 3: In your javascript file, create a function to display a message
step 4: in your HTML file. create a button and call the function inside the button.
Display a Popup Message (Alert Box) - welcome message
Now reload the browser, click the button and theres your pop-up message! this is great for welcome messages, user-confirmation, etc.
Drop-Down Menu
Drop-Down Menu
step 1: in HTML, create a <label> and a <select> with <option> choices. Then, an ID to reference in javascript and set the function showSelection(). Below, create a <p> to display the selected option.
step 2: In javascript, create the showSelection() function, it will use the DOM to get the option the user chooses, and displays it in the <p> tag.
Drop-Down Menu
Reload the page, select and option and the page should show you the option you selected! Drop-downs are great for forms, header menu's etc
Changing Text When Clicking a Button
Changing Text When Clicking a Button
step 1: in HTML, create a <p> tag (with an id) to display the text, then a <button> to call the changeText() function when clicked.
step 2: In javascript, create the changeText() function, use the DOM to change the text of the <p> tag when the button is clicked.
Changing Text When Clicking a Button
Reload the page, click the button and iit should change the text!You could use this
Here are the same questions from the beginning of the lesson.If you're unsure, revisit this PowerPoint.
A programming language to make your website function and interactive
1. What is javascript?
2. can you name some core concepts in javascript?
variables, DOM, events, functions
4. can you explain one of those concepts?
events = an action or an occurance in the browser, and we create are response
3. What are some ways to make your website interactive?
pop-up messages, drop-down menus, changing buttons etc
Introduction into JavaScript
Aiman Qureshi
Created on March 8, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Learning Unit
View
Akihabara Learning Unit
View
Genial learning unit
View
History Learning Unit
View
Primary Unit Plan
View
Vibrant Learning Unit
View
Art learning unit
Explore all templates
Transcript
JavaScript
Make your website interactive!
Before we begin.. take a look at these questions and see if you can answer them. We will look at the answers at the end.
1. What is javascript?2. can you name some core concepts in javascript? 4. can you explain one of those concepts? 3. What are some ways to make your website interactive?
Objectives
What we are covering....
Javascript
What is JavaScript and why is it important ?
JS or JavaScript is is a programming languge that gives functionality to your website, creating interactive and dynamic content. When creating a website, we combine HTML, CSS and JavaScript together by first creating content, styling the content and adding behaviour to improve user experience.
Javascript
Lets quickly fo over some simple JavaScript syntax! We'll be looking at 4 concepts: Variables, Functions, the DOM and Event-handling.
Variables = containers to store values. In web-dev, you can use this when storing user input. These are 3 types: let is for values that are changeable in your code i.e. you let them be change const is for values that CANNOT be changed or re-assigned i.e. remains constant var is outdated and not a good practice to use
JS code: variabletype variableName = value;
// 2 forward slashes are comments in javascript
the casing for js variables names is camelCasing
Function = perform a task. e.g. displaying a message, calculating something etc. its really useful as its a re-usable so you dont need to repeat writing the same code, you can 'call the function' multiple times in other parts of your code, and it will do that task!
JS code for declaring function: function functionName () { task; }
function name
JS code calling the same function: functionName ();
actual message
console.log will print this message to the browser
DOM (The Document Object Model) = a interface that allows you to change the style / content of a document - so it manipulates the content e.g. the HTML document can be accessed andchanged in javascript. This is useful for event-handling (on the next slide)
HTML code: create a paragraph, with an ID
JS Code: steps to take in the DOM to change the content document.getElementById("content").innerHTML = "new content";
HTML document
the new content
get inside the HTML element
refering to the ID of selected element
Events = a user's action or an occurance in the browser, and we react to it. Event handling / listening = We can 'listen' for that event, and when it happens, the code does something! some common triggers are clicking or hovering over a button, pressing a key on the keyboard etc and we may display a pop-up or message!
HTML code: create a button, with an ID.
JS code: create an event handler element.addEventListener("event", function() { task });
document = DOM
calls a function create an alert
refer to the ID
event listener listens for the "click" event
Now that we have covered some JS syntax, lets go through some practical examples developers use to make their websites interactive for thier clients!
Pop-up message
In your 'WebBasics' folder or a create new folder...1. create a index.html file (for your html code)2. create a script.js file (for your javascript code) note: JavaScript code can be linked internally <script> tags in your html file but we are creating an external .js file for better organisation. 3. At the bottom of your html file (inside the body), link your JS file like this ->
here is what it should look like ... (optionally create a css file if you want to style later on)
Display a Popup Message (Alert Box) - welcome message
step 1: create a title for your webpage. in the <head> of your html file add a <title> like this.
step 2: right click on your page open your code in live server in the actual web browser.
Display a Popup Message (Alert Box) - welcome message
step 3: In your javascript file, create a function to display a message
step 4: in your HTML file. create a button and call the function inside the button.
Display a Popup Message (Alert Box) - welcome message
Now reload the browser, click the button and theres your pop-up message! this is great for welcome messages, user-confirmation, etc.
Drop-Down Menu
Drop-Down Menu
step 1: in HTML, create a <label> and a <select> with <option> choices. Then, an ID to reference in javascript and set the function showSelection(). Below, create a <p> to display the selected option.
step 2: In javascript, create the showSelection() function, it will use the DOM to get the option the user chooses, and displays it in the <p> tag.
Drop-Down Menu
Reload the page, select and option and the page should show you the option you selected! Drop-downs are great for forms, header menu's etc
Changing Text When Clicking a Button
Changing Text When Clicking a Button
step 1: in HTML, create a <p> tag (with an id) to display the text, then a <button> to call the changeText() function when clicked.
step 2: In javascript, create the changeText() function, use the DOM to change the text of the <p> tag when the button is clicked.
Changing Text When Clicking a Button
Reload the page, click the button and iit should change the text!You could use this
Here are the same questions from the beginning of the lesson.If you're unsure, revisit this PowerPoint.
A programming language to make your website function and interactive
1. What is javascript?
2. can you name some core concepts in javascript?
variables, DOM, events, functions
4. can you explain one of those concepts?
events = an action or an occurance in the browser, and we create are response
3. What are some ways to make your website interactive?
pop-up messages, drop-down menus, changing buttons etc