JAVASCRIPT

TYPES OF JAVASCRIPT EMBEDING

INTERNAL JAVASCRIPT

Internal javascript is a way of embeding the javascript to the html document by defining a <script> </script> tag before the closing body tag.Inside the script tag are all the javascript codes, Mostly the ideal way where to place the script is before the closing body tag because when the document is render in the browser we dont want to render the behavior of the website first. The website must render the design first or the CSS file then the content lastly the behavior or the javascript.

INLINE JAVASCRIPT

Inline Javascript is done inside the element tag all javascript codes are placed inside the opening tag

EXTERNAL JAVASCRIPT

External JavaScript is the ideal way of embedding the JS to html because it make the code much easier to read for developers. External JS is done by making a JS file and link the file to Html.

KEY POINTS

Javascript have a different Keyword when defining a variable and each of them differs in variable scopping variables can hold numbers, floating numbers, string it must be inside a double qoute and etc.

JAVASCRIPT VARIABLES

VAR

Var keyword define before the variable name and it allows you to re-declare a variable without any issue. for the sample code below it use var keyword to declare a variable, demoVariable is the variable name and the JAVASCRIPT is the value it is a string because it's inside the double qoute.

LET

Let keyword used to define a variable in Javascript the main difference between Let keyword and Var is Let keyword is block scoped and var is global scoped

CONST

Const keyword is also used to declare variables but when the value is been set. it cannot be re-declare again to change the value it will error.

ALERT

Alert is a javascript function that pops up when it's called and the value set will be displayed.

SAMPLE CODE

RESULT IN WEB

PROMPT

this function is a also a pop up but it has a input field then the value will be stored in the variable. The sample code below will also use document.write() function it makes to display the given value to the document. For this sample i input 2 in the prompt input field.

SAMPLE CODE

RESULT IN WEB

CONDITIONAL STATEMENT

Conditional statement used to execute a block of code when the specified condition is true. there are many kinds of conditional statement and the sample code below will demo the if, else if and else statement. if condtional statement will be executed when the passed condition is true, else if conditional statement execute when if statement is false while the else statement execute when the if statement and else if statement are both false. the sample code below i enter 2 for the first number and 3 for the second.

SAMPLE CODE

RESULT IN WEB

GET ELEMENT BY ID

It returns the html element that has the ID attribute selected by document.getElementById() function. the variable that store the element can now be manipulate and it will apply the changes to the element.

SAMPLE CODE

GET ELEMENT BY CLASS NAME

It returns the html element that has the class attribute selected by document.getElementById() function. the variable that store the element can now be manipulate and it will apply the changes to the element. The sample code below also use style it will applied the style you declare TAKE NOTE! it will store the element in an array form but it cannot applied array function. for the style the properties that are two word for example font-size it will be written in font-size a camel casing naming convention.

SAMPLE CODE

RESULT IN WEB

GET ELEMENT BY TAG NAME

It returns the html element that been selected by document.getElementByTagName function. the variable that store the element can now be manipulate and it will apply the changes to the element. TAKE NOTE! it will store the element in an array form but it cannot applied array function. The sample code below also use the classlist object and some sort of function first the classlist.add() it add the class to the selected element. classlist.remove() it remove the class to the selected element.

SAMPLE CODE

RESULT IN WEB

EVENT-LISTENER

There are several types of events the sample code below will demonstrate the click event and the mouseover

CLICK EVENT

It will execute when the selected element has been click.

SAMPLE CODE

RESULT IN WEB

MOUSEOVER

The code will be executed when the mouse is over the element.

SAMPLE CODE

RESULT IN WEB