WEBVTT

00:00.000 --> 00:05.000
Introduction to JavaScript

00:05.000 --> 00:15.000
In this video, we will understand how JavaScript works with HTML and CSS, types of JavaScript.

00:15.000 --> 00:21.000
JavaScript is a programming language used in web development to add interactivity to websites.

00:21.000 --> 00:28.000
It enables actions like displaying pop-up messages, changing styles, and responding to user actions,

00:28.000 --> 00:35.000
button clicks, or form submissions. Let's understand how JavaScript works with HTML and CSS.

00:35.000 --> 00:41.000
HTML builds the structure of a webpage, like text, buttons, and images.

00:41.000 --> 00:46.000
CSS makes the webpage look nice, adding colors, fonts, and layouts.

00:46.000 --> 00:56.000
JavaScript makes the webpage interactive, so buttons can change, color, when clicked, or messages appear when you move the mouse.

00:56.000 --> 01:00.000
We will understand it by creating a simple interactive webpage.

01:00.000 --> 01:07.000
We will start by making the basic structure in HTML, and then embedding an interactive button using JavaScript.

01:07.000 --> 01:12.000
Let's start.

01:12.000 --> 01:21.000
We will add internal CSS for the button styling.

01:21.000 --> 01:26.000
We will add a hover effect on the button.

01:26.000 --> 01:33.000
Add a simple style for the thank you message.

01:33.000 --> 01:40.000
We will add h1as. Welcome to my website.

01:40.000 --> 01:44.000
We will add a button.

01:44.000 --> 01:49.000
Here, but as an HTML tag, and we have added inline JavaScript.

01:49.000 --> 01:54.000
On click equals button, clicked. This is an event handler.

01:54.000 --> 01:59.000
It tells the browser to run a JavaScript function, named button clicked, when the button is clicked.

01:59.000 --> 02:04.000
When the button is clicked, the JavaScript function button clicked will be executed.

02:04.000 --> 02:09.000
We will add a simple message as thank you after clicking the button.

02:10.000 --> 02:15.000
Here is a container that holds content, like text or other elements.

02:15.000 --> 02:25.000
ID equals thank you message, gives this container a unique name, so you can easily find and change it later, with JavaScript or CSS.

02:25.000 --> 02:31.000
We will add internal JavaScript for button click action.

02:40.000 --> 02:45.000
Script tag tells the web browser that we are adding JavaScript code to the page.

02:45.000 --> 02:50.000
Function button clicked. This creates a new action called button clicked.

02:50.000 --> 02:57.000
It runs when you click the button. Document dot get element by ID thank you message.

02:57.000 --> 03:02.000
This finds the box on the page that has the name thank you message.

03:02.000 --> 03:06.000
Dot inner text. Thank you for clicking.

03:06.000 --> 03:13.000
This changes the text inside that box too. Thank you for clicking when the button is clicked.

03:13.000 --> 03:18.000
So when you click the button, it changes the message in the box.

03:18.000 --> 03:26.000
We will now add the external JavaScript to add external JS click on the plus icon then and select new JS file.

03:26.000 --> 03:31.000
Add the code console dot log external script loaded.

03:31.000 --> 03:35.000
This prints a message in the browser's console, a hidden log for developers.

03:35.000 --> 03:44.000
Now we will add this as link in HTML code. Open the HTML file and add the code.

03:44.000 --> 03:52.000
Here src equals script dot JS. The src attribute specifies the location of the JavaScript file.

03:52.000 --> 04:00.000
In this case, it's a file called script dot JS, which is usually in the same folder as the HTML file.

04:00.000 --> 04:07.000
So instead of writing JavaScript directly inside the HTML, we can store the code in a separate file,

04:07.000 --> 04:11.000
like script dot JS and link to it with this tag.

04:11.000 --> 04:15.000
This helps keep the code cleaner and organized.

04:15.000 --> 04:19.000
We have completed our code lets find out whether it works or not.

04:19.000 --> 04:24.000
Download the file, open the index dot HTML file.

04:24.000 --> 04:29.000
We can see the homepage. Let check whether our button is working.

04:29.000 --> 04:34.000
When we click on the button, it display a statement as thank you for clicking.

04:34.000 --> 04:40.000
Our code has been successfully executed.

04:40.000 --> 04:46.000
In the next video, we'll cover key JavaScript components like variables, functions, and events.

04:46.000 --> 04:49.000
Stay tuned.