Scribd
Upload
19 views

Javascript - Variables and DOM

Uploaded by

Ristov Todor
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Javascript - Variables and DOM

Uploaded by

Ristov Todor
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Variables & DOM

Javascript
What is JavaScript

1. A high-level definition
1. JavaScript is a programming language that allows you to implement complex
things on the web.
2. JavaScript is a programming language that enables you to create dynamically u
pdating content, control multimedia, animate images, and pretty
much everything else.
2. What can it really do
1. Store useful values inside variables.
2. Operations on pieces of text.
3. Running code in response to certain events occurr
ing on a web page
4. And much more!
Application Programming Interfaces (APIs)

- Provide extra superpowers to use in your JavaScript code


Browser APIs
- Built into your web browser, and are able to expose data from the surrounding computer
environment, or do useful complex things:
- The DOM (Document Object Model) API allows you to manipulate HTML and CSS,
creating, removing and changing HTML, dynamically applying new styles to your
page, etc.
- The Geolocation API retrieves geographical information. This is how Google Maps is
able to find your location, and plot it on a map.
- The Canvas and WebGL APIs allow you to create animated 2D and 3D graphics.
People are doing some amazing things using these web technologies.
- Audio and Video APIs like HTMLMediaElement and WebRTC allow you to do really
interesting things with multimedia, such as play audio and video right in a web page,
or grab video from your web camera and display it on someone else's computer .
Third party APIs & libraries

- Not built into the browser by default, and you generally have to grab their code and
information from somewhere on the Web.
- The Twitter API allows you to do things like displaying your latest tweets on your website.
- The Google Library allows you to embed custom maps into your website, and other
such functionality.
- The Facebook API allows you to interact with facebook application data.
- Many other...
How do you add JavaScript to your page

- Internal JavaScript - External JavaScript - Inline JavaScript handlers


(Injected into html)
<script> <script <button onclick="alert(‘Button
// JavaScript goes here src="script.js"></script> Clicked’)">Click me </button>
</script>

- Modules
<script type=”module”></script>
Variables

• As with algebra, JavaScript variables are used to hold values or expressions.


• A variable can have a short name, like hi, or more descriptive
name helloWorld.
• Rules for JavaScript variables:
• Variable names are case-sensitive (y & Y are two different variables).
• Variable names must begin with a letter, the $ character, or the
underscore character(_).
Declaring variables in JavaScript

- Declaring a variable tells the JavaScript to reserve memory space for the
variable.
- To declare JavaScript variable, use the statement
let hi
where hi is the name assigned to the variable.
- To declare variable and set its initial value, use
let variables = value;
where value is the initial value of the variable.
Declaring variables

<script>
let position = “Front-end developer”;
let industry = “IT - Web Development”;
console.log(position);
console.log(industry);
</script>
Variable types

1. Numeric values
2. Text (Strings)
3. Boolean values
4. Null value
5. Undefined
6. * You must declare variable before you can use it.
Variable types

1. Numeric value is any number: 5, 3.42, -10000.


2. Text string is any group of characters, such as "Hello", 'Hello world'.
• Every string should be enclosed with double quotes("") or single quotes('').
3. Boolean values accept only true and false values.
4. Null value has no value at all.
5. Undefined occurs when variable is not defined.
6. Difference between null and undefined.
<script>
let firstName = “John”;
let lastName;
let age = 25;
let isDeveloper = true;
// I am a comment
/*
I am a multiline comment
*/
console.log(firstName);
console.log(age);
console.log(isDeveloper);
console.log(lastName);
</script>
const, var & let

const cannot be changed once it is assigned. It is a signal that the identifier


won’t be reassigned.
let, is a signal that the variable may be reassigned, such as a counter in a
loop, or a value swap in an algorithm. It also signals that the variable will be
used only in the block it’s defined in, which is not always the entire
containing function.
var is now the weakest signal available when you define a variable in
JavaScript. The variable may or may not be reassigned, and the variable may or
may not be used for an entire function, or just for the purpose of a block or loop.
DOM (Document Object Model)
• How to get, change, add, or delete HTML elements.
DOM – Getting elements
1. document.getElementById("hello")

2. document.getElementsByTagName("p")

3. document.getElementsByClassName("hi")

4. document.querySelectorAll("h3 .intro")

5. document.querySelector(".example")
Dom Manipulation
Example 1
DOM – Changing elements

1. element.innerHTML = new content


2. еlement.attribute = new value
3. element.setAttribute(attribute, value)
4. еlement.style.property = new style
Dom Manipulation
Example 2
DOM – Adding & Removing elements

1. document.createElement(element)
2. document.body.removeChild(element)
3. document.body.appendChild(element)
4. oldElement.parentNode.rеplaceChild(oldElement, newElement)
5. document.write(text)
Hello World in Javascript

● Open up the JavaScript Console in your browser, type the following, and
press ENTER:
- console.log(“HELLO WORLD”)
- document.write("Welcome to Brainster Javascript Courses")
- alert("How are you today?")
Exercise

● Create script that will create new DIV in the current


HTML DOM. New DIV should have ID attribute.
New div should contains P element that will have value
“Hello from Javascript”.
● New DIV should be placed before the existing div.
Usage of JavaScript variables
Mathematical assignment operators in JavaScript String concatenation in JavaScript

◈ Create script that will create new DIV in the


current
HTML DOM. New DIV should have ID attribute.
JavaScript Template literals
New div should contains P element that will
In JavaScript, template literals are strings that allow embedded expressions (${expression}). While regular strings use single (') or
double (") quotes, template literals use backticks instead.

have value
“Hello from Javascript”.
◈ New DIV should be placed before the existing
div.

You might also like