Scribd
Upload
27 views18 pages

JavaScript Basics for Web Development

The lecture covers JavaScript as a client-side programming language used for creating dynamic web pages by manipulating HTML and CSS. It discusses JavaScript functions, events, and various methods for outputting data, including using innerHTML, document.write(), and console.log(). Additionally, it highlights the use of external JavaScript files for code reuse across multiple web pages.

Uploaded by

wajeehazia12
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
27 views18 pages

JavaScript Basics for Web Development

The lecture covers JavaScript as a client-side programming language used for creating dynamic web pages by manipulating HTML and CSS. It discusses JavaScript functions, events, and various methods for outputting data, including using innerHTML, document.write(), and console.log(). Additionally, it highlights the use of external JavaScript files for code reuse across multiple web pages.

Uploaded by

wajeehazia12
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

Web System & Technology

Lecture # 26

Ehtisham Rasheed

Department of Computer Science


University of Gurjat, Gujrat
What is JavaScript?

• JavaScript is a client-side programming language of the web


• Used to create dynamic web pages
• It can update and change both HTML and CSS
• It can calculate, manipulate and validate data

2
JavaScript can change HTML Content
• One of many JavaScript HTML methods is getElementById()
• Example

• JavaScript accepts both single and double quotes

3
JavaScript Can Change HTML Attribute Values

4
More on JavaScript

5
The <script> Tag

6
JavaScript Functions and Events

• A JavaScript function is a block of JavaScript code, that can be executed


when called
• For example, a function can be called when an event occurs, like when the
user clicks a button
• Script can be placed in the <body>, or in the <head> section of an HTML
page, or in both

7
JavaScript Functions and Events

8
External JavaScript

• Scripts can be placed in external files


• External scripts are practical when the same code is used in many different
web pages
• JavaScript files have the file extension .js
• To use an external script, put the name of the script file in the src (source)
attribute of a <script> tag

9
JavaScript Output

• JavaScript can display data in different ways:


• Writing into an HTML element, using innerHTML or innerText
• Writing into the HTML output using [Link]()
• Writing into an alert box, using [Link]()
• Writing into the browser console, using [Link]()

10
Using InnerHTML

11
Using InnerText

12
Using [Link]()

• For testing purpose, it is convenient to use [Link]()


• Using [Link]() after an HTML document is loaded, will delete all
existing HTML

13
Using [Link]()

14
Using [Link]()

15
Using [Link]()

16
Using [Link]()
• For debugging purpose, you can call the [Link]() method in the
browser to display data
• F12 on keyboard will activate debugging
• Then select “Console” in the debugging menu

17
Hands on Lab

• Complete Hands on lab 1 and complete three assignments

18

You might also like