Web Design_onlick_insp

Java Script with HTML
1 / 25
next
Slide 1: Slide
Online wordFoundation Degree

This lesson contains 25 slides, with interactive quizzes, text slides and 1 video.

Items in this lesson

Java Script with HTML

Slide 1 - Slide

This item has no instructions

Outcome 
After this lesson you will learn the following:
1. The Button tag
2. How to use a basic Java Script Function. 

Slide 2 - Slide

This item has no instructions

<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>
<p>How to assign an "onclick" event to a p element:</p>
<p id="demo" onclick="myFunction()">Click me.</p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";}</script></body></html>






Slide 3 - Slide

This item has no instructions

<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>
\\Two Elements that prints out important infomation

Slide 4 - Slide

This item has no instructions

<p>How to assign an "onclick" event to a p element:</p>
<p id="demo" onclick="myFunction()">Click me.</p>

Here in the   paragraph tag an "Id" to identify it.  The " onclick" then calls the "myFunction"

Slide 5 - Slide

This item has no instructions

Explanation
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
A Function  call  myFunction gets all the documents Element with "Id= demo" and change it to  "YOU CLICKED ME!";"

Slide 6 - Slide

This item has no instructions

Create website with that has the following ta(High) It is essential for all students to be given a secured user accounts so they can use the school resources such as Microsoft office 365, specialist software. This account should give the students access to the student portal when working remotely. gs- html, head, body and Script.

Slide 7 - Open question

This item has no instructions

Select the command that will activate a function
A
Onclick
B
Id paragraph where your comment will appear
C
None
D
A script Tag

Slide 8 - Quiz

This item has no instructions

<P Id="Ref" > </p>
A
Not significant
B
Reference area
C
The function call will place comments there.
D
Enables Web scripting

Slide 9 - Quiz

This item has no instructions

<button onclick="myFunction()">Click me</button>
A
Calls a function called "my Function ()" when button is clicked
B
Waits until you click a button called "click me"
C
Creates a button called "click me "
D
Creates a button called "on click"

Slide 10 - Quiz

This item has no instructions

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";}
</script>
A
This a Javascript code
B
The Function will reference "id "demo" in the html document.
C
Function gets the whole html document
D
. " document.getElementById" is a standard Javascript function.

Slide 11 - Quiz

This item has no instructions

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script> rewrite script to change the "id" to "test" and the text to "I am gaining knowledge"

Slide 12 - Open question

This item has no instructions

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Select the associated html elements
A
<p id="demo"></p>
B
<button onclick="Function()>clickme</button>
C
<button onclick="myFunction()>clickme</button>
D
<p ID="demo"></p>

Slide 13 - Quiz

This item has no instructions

A Webpage that responds with " Clicked me" when you activate the button.
Name the different elements.

Slide 14 - Mind map

This item has no instructions

Use notepad to create a webpage that will respond with " I am learning Javascript" when you activate the button.
You may use the next slide to help you.

Slide 15 - Open question

This item has no instructions

Slide 16 - Link

This item has no instructions

Task for you.
Use the 
document.body.innerHTML=" I enjoy learning Java Script" 
to be displayed when you press a button. 
You  may modify the next slide to complete task 

Slide 17 - Slide

This item has no instructions

Slide 18 - Link

This contain the 
doucment.body.innerHTML=" " ;
how well did you understand Buttons
very well
well
Keep practising

Slide 19 - Poll

This item has no instructions

How well did you understand Functions
Very well
well
Keep Practicising

Slide 20 - Poll

This item has no instructions

Today you have the knowledge 
Using Javascript  "document.getElement ById"
 Functions(JavaScript)- They do the work
Functions calls (html) Call the function to do the work
Thank you for learning with us 

Slide 21 - Slide

This item has no instructions

BYE
The End 

Slide 22 - Slide

This item has no instructions

More Related learning

Slide 23 - Slide

This item has no instructions

Extra Time 
We will look at togeth

Slide 24 - Slide

This item has no instructions

Slide 25 - Video

This item has no instructions