WEBVTT

00:00.000 --> 00:06.000
Understanding syntax and variables through interactivity

00:06.000 --> 00:10.000
In this video, we will understand how to develop an interactivity

00:10.000 --> 00:16.000
Understanding syntax, understanding variables

00:16.000 --> 00:20.000
Understanding the interactive welcome page

00:20.000 --> 00:23.000
We're creating an interactive web page

00:23.000 --> 00:29.000
Where users enter their name and receive a personalized welcome message

00:29.000 --> 00:32.000
Clicking the button prompts them for input

00:32.000 --> 00:35.000
If they enter a name, it's displayed

00:35.000 --> 00:38.000
Otherwise, a default message appears

00:38.000 --> 00:44.000
This showcases user input handling and dynamic content updates with JavaScript

00:44.000 --> 00:49.000
Let's start writing the code and understanding it

00:52.000 --> 00:55.000
Here, the button tag is a clickable button

00:55.000 --> 00:59.000
That triggers the show welcome message function when clicked

00:59.000 --> 01:03.000
On-click, show welcome message

01:03.000 --> 01:07.000
Calls the JavaScript function to prompt the user for their name

01:07.000 --> 01:11.000
Paragraph ID equals welcome text, close paragraph

01:11.000 --> 01:17.000
This is an empty paragraph where the personalized welcome message will be displayed after user input

01:25.000 --> 01:32.000
Here, function show welcome message defines a function that runs when called

01:32.000 --> 01:37.000
Let name prompt please enter your name

01:37.000 --> 01:41.000
Prompts the user to enter their name and stores it in the name variable

01:41.000 --> 01:51.000
Document dot get element by ID welcome text dot inner HTML equals hello plus name plus welcome to my page

01:51.000 --> 01:56.000
Updates the paragraph element with a personalized welcome message

01:56.000 --> 02:01.000
Now let's understand the syntax used in the code

02:01.000 --> 02:03.000
Statements

02:03.000 --> 02:08.000
A statement is a single line of JavaScript code that performs an action

02:08.000 --> 02:15.000
In the code, this statement declares a variable, name, and assigns it a value from the prompt function

02:15.000 --> 02:19.000
Can you recall which data type is used here?

02:19.000 --> 02:23.000
String or Boolean? Right, String

02:23.000 --> 02:25.000
Comments

02:25.000 --> 02:29.000
Comments are used to explain code and are ignored by the browser

02:29.000 --> 02:36.000
There are two types, single line comment that starts with a double slash multi-line comment

02:36.000 --> 02:40.000
Which stat with slash, asterisk

02:40.000 --> 02:42.000
Semicolens

02:42.000 --> 02:47.000
JavaScript does not require semicolens but they help avoid errors

02:47.000 --> 02:51.000
Let's understand the variable declaration

02:51.000 --> 02:56.000
We have used let in the code which declares a variable that can be reassigned later

02:56.000 --> 03:01.000
The name variable holds the user's input and can change based on what they type

03:01.000 --> 03:06.000
We use const when a variable's value should not change after being assigned

03:06.000 --> 03:10.000
Bar, works like let but has outdated behavior

03:10.000 --> 03:13.000
Let's check whether the code is working

03:13.000 --> 03:17.000
Download the index.html file and click on it

03:17.000 --> 03:20.000
Enter your name in the box

03:20.000 --> 03:26.000
We receive a message, our code has been executed

03:26.000 --> 03:34.000
This interactive project helps understand JavaScript syntax, user input handling, and variable declarations

03:34.000 --> 03:38.000
Through a simple welcome message feature