Lecture Notes On Day 1
Introduction to
JavaScript
Objective
To introduce beginner
students to the basics of JavaScript, including its role in web development and
how it integrates with HTML and CSS.
By the end of the lesson,
students should be able to write and execute their first JavaScript code.
Topics Covered
1. What is
JavaScript?
2. How
JavaScript Works with HTML and CSS
3. Writing
and Running Your First JavaScript Code
1. What is JavaScript?
Definition
JavaScript is a
high-level, dynamic programming language that is commonly used to create
interactive effects within web browsers. Unlike HTML, which structures web
pages, and CSS, which styles them, JavaScript brings interactivity to websites.
History and Evolution
- Created
in 1995 by Brendan Eich, JavaScript was initially developed to add simple
interactivity to web pages.
- Over
the years, JavaScript has evolved significantly and can now be used for
both front-end (client-side) and back-end (server-side) development.
- JavaScript
is an essential part of the web development stack, often used with HTML
and CSS to create dynamic web applications.
Why Use JavaScript?
- Interactivity:
JavaScript enables interactive elements like animations, form validations,
dynamic content updates, etc.
- Popularity:
JavaScript is one of the most widely used programming languages, with a
large community and extensive resources.
- Versatility:
JavaScript works on all major browsers and platforms, and it’s used for
both front-end and back-end development.
2. How JavaScript Works with HTML and CSS
Role of HTML, CSS, and
JavaScript in Web Development
- HTML
(HyperText Markup Language): Defines the
structure of the webpage.
- CSS
(Cascading Style Sheets): Provides styling
to make the webpage visually appealing.
- JavaScript:
Adds interactivity to make the webpage dynamic and responsive to user
actions.
How JavaScript Interacts
with HTML and CSS
- DOM
Manipulation: JavaScript can interact with and
manipulate HTML elements through the Document Object Model (DOM).
- CSS
Interactivity: JavaScript can change the
appearance of HTML elements by modifying CSS styles, making elements
appear or disappear, changing colors, and more.
Example:
Think of a webpage as a
skeleton (HTML) that is styled with clothes (CSS) and brought to life with
actions (JavaScript). For instance, a button may be created with HTML, styled
with CSS, and when clicked, JavaScript can control what happens next (e.g., display
a message).
3. Writing and Running Your First JavaScript Code
Setting Up JavaScript in HTML
There are two primary
ways to add JavaScript to an HTML page:
1. Inline
JavaScript: Written directly inside HTML tags using the onclick attribute,
for example.
2. Internal
and External JavaScript:
o Internal:
JavaScript is written inside a <script> tag within the HTML document.
o External:
JavaScript is written in a separate .js file, and linked to the HTML document
with a <script src="file.js"></script> tag.
Basic Syntax and
Structure
- JavaScript
statements are the building blocks of the code and typically end with a
semicolon (;).
- Use
comments (// for single line or /* */ for multiple lines) to make the code
readable.
Example:
Writing JavaScript Inline
in HTML
|
<!DOCTYPE html> <html
lang="en"> <head> <title>JavaScript
Example</title> </head> <body> <h1>Welcome to
JavaScript</h1> <button onclick="alert('Hello, World!')"> Click Me</button> </body> </html> |
In this example,
clicking the "Click Me" button triggers an alert box that displays
“Hello, World!”.
Running JavaScript in the Browser
1. Open your
HTML file in a web browser (e.g., Chrome, Firefox).
2. JavaScript
will automatically execute when the HTML page is loaded.
Using the Browser Console for JavaScript
- Most
modern browsers have developer tools with a Console where JavaScript code
can be written and tested directly.
- To
access the Console:
- Chrome:
Right-click > Inspect > Console tab.
- Firefox:
Right-click > Inspect > Console tab.
- In
the Console, type console.log('Hello, World!'); and press Enter. You
should see "Hello, World!" appear in the Console.
Exercise:
Write Your
First Script
1. Open your
HTML file in an editor.
2. Inside the
<script> tag in the <head> or <body> section, write:
console.log("This is
my first JavaScript code!");
3. Save the
file, open it in the browser, and check the Console to see the message.
Summary
- JavaScript
is a powerful, versatile language used to add interactivity to web pages.
- It
works in harmony with HTML and CSS, creating a more engaging user
experience.
- Writing
your first JavaScript code is simple—using basic commands like alert() or
console.log(), you can see immediate results.
