‹Terug naar zoeken

Web Design_onlick_insp

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

In deze les zitten 25 slides, met interactieve quizzen, tekstslides en 1 video.

Onderdelen in deze les

Java Script with HTML

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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

Slide 2 - Tekstslide

Deze slide heeft geen instructies

<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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 4 - Tekstslide

Deze slide heeft geen instructies

<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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 vraag

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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

Slide 9 - Quizvraag

Deze slide heeft geen instructies

<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 - Quizvraag

Deze slide heeft geen instructies

<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 - Quizvraag

Deze slide heeft geen instructies

<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 vraag

Deze slide heeft geen instructies

<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 - Quizvraag

Deze slide heeft geen instructies

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

Slide 14 - Woordweb

Deze slide heeft geen instructies

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 vraag

Deze slide heeft geen instructies

onlinegdb.com

Slide 16 - Link

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

onlinegdb.com

Slide 18 - Link

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

Slide 19 - Poll

Deze slide heeft geen instructies

How well did you understand Functions
Very well
well
Keep Practicising

Slide 20 - Poll

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

BYE
The End 

Slide 22 - Tekstslide

Deze slide heeft geen instructies

More Related learning

Slide 23 - Tekstslide

Deze slide heeft geen instructies

Extra Time 
We will look at togeth

Slide 24 - Tekstslide

Deze slide heeft geen instructies

Slide 25 - Video

Deze slide heeft geen instructies

Meer lessen zoals deze

Lesson 4__onlick_JavaScript_insp_Thursday Lesson

- Les met 24 slides
Online wordFoundation Degree

Web Design

- Les met 19 slides
Online wordFoundation Degree

03 - Javascript - output

- Les met 10 slides
ICTMBOStudiejaar 1-4

03 - Javascript - output

- Les met 10 slides
ICTMBOStudiejaar 1-4

01 - Javascript - introductie

- Les met 11 slides
ICTMBOStudiejaar 3,4

01 - Javascript - wat is javascript

- Les met 15 slides
ICTMBOStudiejaar 1,2

02 - Javascript - Output en Commentaar

- Les met 18 slides
ICTMBOStudiejaar 1-4

01 - Javascript - wat is javascript

- Les met 12 slides
ICTMBOStudiejaar 1,2