Scribd
Upload
4 views42 pages

2513 Lecture2

Uploaded by

jqnnmsd676
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views42 pages

2513 Lecture2

Uploaded by

jqnnmsd676
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

Summer 2024

2513 Internet Programming


Lecture 2

Mohammed H. Alali

Note: most of the content is adapted from https://www.w3schools.com/js

7/18/2024 Mohammed H. Alali 1


Outline
• HTML coding errors
• JavaScript
• HTML events
• HTML Button
• Next class the Midterm exam on Tuesday 8am

7/18/2024 Mohammed H. Alali 2


Be careful of some errors in the code
Question 1:
What is the error in this HTML code?

An example HTML code

7/18/2024 Mohammed H. Alali 3


Be careful of some errors in the code
Question 1:
What is the error in this HTML code?

The closing html tag


is missing forward slash (/) An example HTML code

7/18/2024 Mohammed H. Alali 4


Be careful of some errors in the code
Question 2:
What is the error in this HTML code?

An example HTML code

7/18/2024 Mohammed H. Alali 5


Be careful of some errors in the code
Question 2:
What is the error in this HTML code?

The p tag is closed as h1 tag

An example HTML code

7/18/2024 Mohammed H. Alali 6


Be careful of some errors in the code
Question 3:
What is the error in this HTML code?

7/18/2024 Mohammed H. Alali 7


Be careful of some errors in the code
Question 3:
• What is the error in this HTML code?
• There is no closing for the <head> tag

• Note: this error can be on any tag:


• <title>
• <h1>
• <p>
• <body>
• <html>

7/18/2024 Mohammed H. Alali 8


Be careful of some errors in the code
Question 4:
What is the error in this HTML code?

An example HTML code

7/18/2024 Mohammed H. Alali 9


Be careful of some errors in the code
Question 4:
What is the error in this HTML code?

There is no error

An example HTML code

7/18/2024 Mohammed H. Alali 10


Most popular
• What is the most
popular programming
language in the world?
• JavaScript

7/18/2024 Mohammed H. Alali 11


Why learn JavaScript?

• There are three main languages that web developers


must learn.
1. HTML is used to define the content of web pages.
2. CSS is used to specify the layout and the style of web
pages.
3. JavaScript to program the behavior of web pages.

7/18/2024 Mohammed H. Alali 12


How to learn programming?
• What is the best way to learn a programming language?
• What is the best way to be a smart and strong programmer?
• Practice, practice, practice.
• Code, code, code.

7/18/2024 Mohammed H. Alali 13


The id Attribute for HTML
• The HTML id attribute is
used to specify a unique id
for an HTML element.

• Remember this code.

7/18/2024 Mohammed H. Alali 14


The id Attribute for HTML
• The HTML id attribute is
used to specify a unique id
for an HTML element.

• Add id attribute to the


paragraph.
• Note that id is unique.
• The id of two elements must
be different.

7/18/2024 Mohammed H. Alali 15


The id Attribute for HTML
• What is the error in this
code?
• There are two HTML
elements with the same id.

• How to correct this code?


• Change one id.

7/18/2024 Mohammed H. Alali 16


The id Attribute for HTML
• How to correct this code?
• Change one id.

• Here is a correct code with


no errors.

7/18/2024 Mohammed H. Alali 17


HTML button
• Button is something you click
☺
• We can program an event to
happen when the button is
clicked

7/18/2024 Mohammed H. Alali 18


HTML button

7/18/2024 Mohammed H. Alali 19


HTML events
• What is an event in English?
• An event means something that
happens, especially something
important.
• An event means a planned public
occasion.
• What is an event in HTML?
• HTML events are things that happen to
HTML elements.
• For example: HTML button is clicked.

7/18/2024 Mohammed H. Alali 20


Handling HTML events
• How to handle HTML events?
• We can type JavaScript code to handle HTML events.
• Event name is added as an attribute to the HTML element
• JavaScript code can be inside single quote.

• JavaScript code can be inside single quote.

7/18/2024 Mohammed H. Alali 21


Button onclick event
• HTML Button tag has an event
called “onclick”.
• This event happen when the
user clicks on the button.
• Type JavaScript code inside
the event attribute.

7/18/2024 Mohammed H. Alali 22


Event changes HTML element content
• Before you click • After you click

7/18/2024 Mohammed H. Alali 23


Event changes HTML element content
• JavaScript code to change HTML element content after onclick
event.

• Let’s explain the code step by step

7/18/2024 Mohammed H. Alali 24


Event changes HTML element content
• JavaScript code to change HTML element content after onclick
event.
• Type JavaScript code

7/18/2024 Mohammed H. Alali 25


Event changes HTML element content
• JavaScript code to change HTML element content after onclick
event.

Going to the
HTML file
document

7/18/2024 Mohammed H. Alali 26


Event changes HTML element content
• JavaScript code to change HTML element content after onclick
event.

Going to the Give me the


HTML file HTML
document element with
the id that I’ll
type

7/18/2024 Mohammed H. Alali 27


Event changes HTML element content
• JavaScript code to change HTML element content after onclick
event.

Going to the Give me the I’m talking


HTML file HTML about an
document element with element
the id that I’ll with id=“p1”
type

7/18/2024 Mohammed H. Alali 28


Event changes HTML element content
• JavaScript code to change HTML element content after onclick
event.

Going to the Give me the I’m talking Go to the


HTML file HTML about an text content
document element with element of this
the id that I’ll with id=“p1” element
type

7/18/2024 Mohammed H. Alali 29


Event changes HTML element content
• JavaScript code to change HTML element content after onclick
event.

Going to the Give me the I’m talking Go to the Change the


HTML file HTML about an text content content to
document element with element of this “Hello
the id that I’ll with id=“p1” element JavaScript!”
type

7/18/2024 Mohammed H. Alali 30


HTML code with JavaScript
Before

After

7/18/2024 Mohammed H. Alali 31


Event changes content of this element
• Define two buttons
• First button is what we
know.
• Second button.

7/18/2024 Mohammed H. Alali 32


Event changes content of this element

After you click on the first button


Before you click

7/18/2024 Mohammed H. Alali 33


Event changes content of this element

After you click on the first button After you click on the second button

7/18/2024 Mohammed H. Alali 34


Event changes content of this element
• Define two buttons
• First button is what we
know.
• Second button. What
does it do?
• Use this to mean the
element itself.

7/18/2024 Mohammed H. Alali 35


Using this
• Use this to mean the
element itself.
• The element is a button.
• When you click, the
content of the button
will change.

7/18/2024 Mohammed H. Alali 36


Example 1: Before the event
• What will happen when you click on the button?

7/18/2024 Mohammed H. Alali 37


Example 1: After the event
(which picture is correct?)
• Correct • Wrong

7/18/2024 Mohammed H. Alali 38


Example 2: Before Click
• What will happen when you click on the button?

7/18/2024 Mohammed H. Alali 39


Example 2: After Click
• What will happen when you click on the button?
• Which option is the correct option?
A

7/18/2024 Mohammed H. Alali 40


Example 2: After Click
• What will happen when you click on the button?
• Which is the correct option?
A Correct

7/18/2024 Mohammed H. Alali 41


End of Lecture 2
• Next class, Midterm Exam.

7/18/2024 Mohammed H. Alali 42

You might also like