‹Revenir à la recherche

Lesson 4__onlick_JavaScript_insp_Thursday Lesson

Java Script with HTML
1 / 24
suivant
Slide 1: Diapositive
Online wordFoundation Degree

Cette leçon contient 24 diapositives, avec quiz interactifs, diapositives de texte et 1 vidéo.

Éléments de cette leçon

Java Script with HTML

Slide 1 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

The Function
<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 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

The is the Function call.
<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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

Create web page with that has the following tags- html, head, body

Slide 7 - Question ouverte

Cet élément n'a pas d'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

Cet élément n'a pas d'instructions

<p Id="Ref" </p>
A
Not significant
B
Reference area
C
When the function is called it will place sometext in "Ref".
D
Enables Web scripting

Slide 9 - Quiz

Cet élément n'a pas d'instructions

<button onclick="myFunction()">Click me</button>
A
Calls a function called "myFunction ()" 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

Cet élément n'a pas d'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
The " document.getElementById" is a standard Javascript code.

Slide 11 - Quiz

Cet élément n'a pas d'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 - Question ouverte

Cet élément n'a pas d'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

Cet élément n'a pas d'instructions

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

Slide 14 - Carte mentale

Cet élément n'a pas d'instructions

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 - Question ouverte

Cet élément n'a pas d'instructions

onlinegdb.com

Slide 16 - Lien

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

onlinegdb.com

Slide 18 - Lien

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

Slide 19 - Sondage

Cet élément n'a pas d'instructions

How well did you understand Functions
Very well
well
Keep Practicising

Slide 20 - Sondage

Cet élément n'a pas d'instructions

Today you have the knowledge 
Using Javascript code "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 - Diapositive

Cet élément n'a pas d'instructions

BYE
The End 

Slide 22 - Diapositive

Cet élément n'a pas d'instructions

More Related learning

Slide 23 - Diapositive

Cet élément n'a pas d'instructions

Slide 24 - Vidéo

Cet élément n'a pas d'instructions

Plus de leçons comme celle-ci

Web Design_onlick_insp

- Leçon avec 25 diapositives
Online wordFoundation Degree

Web Design

- Leçon avec 19 diapositives
Online wordFoundation Degree

03 - Javascript - output

- Leçon avec 10 diapositives
ICTMBOStudiejaar 1-4

03 - Javascript - output

- Leçon avec 10 diapositives
ICTMBOStudiejaar 1-4

02 - Javascript - Output en Commentaar

- Leçon avec 18 diapositives
ICTMBOStudiejaar 1-4

01 - Javascript - wat is javascript

- Leçon avec 12 diapositives
ICTMBOStudiejaar 1,2

01 - Javascript - introductie

- Leçon avec 11 diapositives
ICTMBOStudiejaar 3,4

8. Interactief JavaScript-element

- Leçon avec 16 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1