Javascript Concepts

Javascript

JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries.

-wikipedia.com

The DOM
(Document Object Model)

The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

-w3.org

The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.

-wikipedia.com

The HTML DOM can be accessed with JavaScript (and with other programming languages). In the DOM, all HTML elements are defined as objects. The programming interface is the properties and methods of each object. A property is a value that you can get or set (like changing the content of an HTML element). A method is an action you can do (like add or deleting an HTML element).

-w3schools.com

DOM Objects

The Document Object

When an HTML document is loaded into a web browser, it becomes a document object.
The Element Object

In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.
The Attr Object

In the HTML DOM, an Attr object represents an HTML attribute. An HTML attribute always belongs to an HTML element. A NamedNodeMap is an array-like unordered collection of an element's attributes. In other words: a NamedNodeMap is a list of Attr objects. A NamedNodeMap has a length property that returns the number of nodes. The nodes can be accessed by name or index numbes. The index starts at 0.

DOM Methods

HTML DOM methods are actions you can perform (on HTML Elements). The following are some examples of DOM methods:

Types of DOM Methods

Method	Description
document.getElementById(id)	Find an element by element id
document.getElementsByClassName(name)	Find elements by class name
document.querySelector(element)	Returns the first Element that matches the selector
element.setAttribute(attribute, value)	Change the attribute value of an HTML element
document.createElement(element)	Create an HTML element

Sample Code


                                    document.getElementById("demo").innerHTML = "Hello World!";

DOM Properties

HTML DOM properties are values (of HTML Elements) that you can set or change. The following are some examples of DOM Properties:

Types of DOM Properties

Property	Description
innerHTML	utilized for changing and displaying the element’s content
style	utilized for changing or displaying the attribute’s value of an HTML element
attributes	outputs a NamedNodeMap of the attribute of an HTML element
childElementCount	utilized for displaying the total number of an HTML element's child elements
className	utilized for changing or displaying the HTML class name value

Sample Code


                                    document.getElementById("demo").innerHTML = "Hello World!";

Functions

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure — a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.

Function Declarations

A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:

The name of the function.
A list of parameters to the function, enclosed in parentheses and separated by commas.
The JavaScript statements that define the function, enclosed in curly brackets.

function square(number) {

                            return number * number;

                          }

Function Parameters

In JavaScript, the parameters are the variables we list in the function declaration. When we create a function, we take parameters, which are included in the function definition. Multiple parameters can be added inside parentheses, separated by commas as shown in the below-given syntax:

function name(parameter1, parameter2, parameter3) {

                            //body of the function

                          }

Here, “x” and “y” are parameters in the following “addNumber()” function:


                            function addNumber(x, y){

                                return x+y;

                              }

Function Arguments in JavaScript

The value we pass to a function is known as the argument of a function. Arguments are provided to the function when we call it. For instance, in the following example, “5” and “6” are the arguments passed to the “addNumber()” function:


                            var sum=addNumber(5,6)

                            console.log(sum)

When we call the addNumber() function, JavaScript will create two new variables, “x” and “y,” according to our defined parameters and then initializes them by utilizing the arguments. After doing so, the body of the function will be executed:


                            function addNumber(x, y){

                                return x+y;

                            }

                            

                            let sum=addNumber (5,6)

                            console.log(sum)

                            

                            output: 11

Variables

A variable is a container for a value, like a number we might use in a sum, or a string that we might use as part of a sentence.

Declaring a variable

To use a variable, you've first got to create it — more accurately, we call this declaring the variable. To do this, we type the keyword var followed by the name you want to call your variable:


                            var myName;

                            var myAge;

Initializing a variable

Once you've declared a variable, you can initialize it with a value. You do this by typing the variable name, followed by an equals sign (=), followed by the value you want to give it. For example:


                            myName = 'Chris';

                            myAge = 37;

Global and Local Variables

Local variables are variables that are defined within functions. They have local scope, which means that they can only be used within the functions that define them.


                                function myfunction() {

                                var petName = "Sizzer"; // local variable

                                document.getElementById("geeks").innerHTML =

                                    typeof petName + " " + petName;
                            }

In contrast, global variables are variables that are defined outside of functions. These variables have global scope, so they can be used by any function without passing them to the function as parameters.


                               var petName = "Rocky";//global variable

                                myFunction();

                                

                                function myFunction() {

                                    document.getElementById("geeks").innerHTML =

                                    typeof petName + "- " + "My pet name is " + petName;

                                }

jQuery Concepts

jQuery

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of May 2019, jQuery is used by 73% of the 10 million most popular websites.

-wikipedia.com

jQuery Selector Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action()

A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

Examples:

$(this).hide()	hides the current element
$("p").hide()	hides all p elements
$(".test").hide()	hides all elements with class="test"
$("#test").hide()	hides the element with id="test"

DOM get & set Actions

Working with Attributes

The attributes are special words used inside the start tag of an HTML element to control the tag's behavior or provides additional information about the tag. JavaScript provides several methods for adding, removing or changing an HTML element's attribute.

Getting Element's Attribute Value

The getAttribute() method is used to get the current value of a attribute on the element. If the specified attribute does not exist on the element, it will return 'null'.

Setting Attributes on Elements

The setAttribute() method is used to set an attribute on the specified element. If the attribute already exists on the element, the value is updated; otherwise a new attribute is added with the specified name and value.

Effects & Animation Actions

jQuery Effect Methods

The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects. The following table lists some of the jQuery methods for creating animation effects.

Effect Method	Description
animate()	Runs a custom animation
delay()	Sets a delay for all queued functions
fadeIn() / fadeOut()	Fades the selected elements
finish()	Stops, removes and completes all queued animations
slideDown() / slideUp()	Slides down to show or up to hide the selected elements

jQuery Animation Example

This animation uses jQuery tools to create a randomly coloured div on each click that spins and bounces on the floor below.

CLICK

Javascript Plugins

fullpage.js

"A simple and easy to use library that creates fullscreen scrolling websites and adds landscape sliders inside the sections of the site."

This site is built using fullpage.js so you are seeing it in action right now! I'm a big fan of this plug in for it's smooth flow and easy implementation.

jQuery UI

"jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice."

Some of the animations on this site use jQuery UI.

GSAP

GSAP (Green Sock Animation Platform) is a Javascript library that allows developers to implement complex animations with minimal effort. Below is an animated toy I created using Scalable Vector Graphics (.svg) with GSAP tools. With GSAP I was able to accomplish, in one or two lines, animations that may otherwise have required dozens of lines of code.

Slick Slider

Slick Slider is a fully responsive, scalable carousel plug in for jQuery. It has a ton of configurations and useful features. This instance is set to show 3 slides, and to auto scroll 3 slides every 3 seconds. Scrolling is set to infinite.

Javascript Concepts

Javascript

The DOM(Document Object Model)

DOM Objects

The Document Object

The Element Object

The Attr Object

DOM Methods

Types of DOM Methods

Sample Code

DOM Properties

Types of DOM Properties

Sample Code

Functions

Function Declarations

Function Parameters

Function Arguments in JavaScript

Variables

Declaring a variable

Initializing a variable

Global and Local Variables

jQuery Concepts

jQuery

jQuery Selector Syntax

DOM get & set Actions

Working with Attributes

Getting Element's Attribute Value

Setting Attributes on Elements

Effects & Animation Actions

jQuery Effect Methods

jQuery Animation Example

CLICK

Javascript Plugins

fullpage.js

jQuery UI

GSAP

Slick Slider

The DOM
(Document Object Model)