‹Revenir à la recherche

Web Design_onlick_insp

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

Cette leçon contient 25 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

<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

<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 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 - 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
The function call will place comments there.
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 "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

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
. " document.getElementById" is a standard Javascript function.

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.

Slide 14 - Carte mentale

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

Extra Time 
We will look at togeth

Slide 24 - Diapositive

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

Slide 25 - Vidéo

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

Plus de leçons comme celle-ci

Lesson 4__onlick_JavaScript_insp_Thursday Lesson

- Leçon avec 24 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

01 - Javascript - introductie

- Leçon avec 11 diapositives
ICTMBOStudiejaar 3,4

01 - Javascript - wat is javascript

- Leçon avec 12 diapositives
ICTMBOStudiejaar 1,2

01 - Javascript - wat is javascript

- Leçon avec 13 diapositives
ICTMBOStudiejaar 1,2

01 - Javascript - wat is javascript

- Leçon avec 15 diapositives
ICTMBOStudiejaar 1,2