INTERNET by Ermias Tefera

PROGRAMMING
INTRODUCTION
Web development is the creation of static or dynamic web sites using HTML, CSS,
JS and PHP.
There are two broad divisions of web development front-end and back-end
development
Front-end development refers to constructing what a user sees when they load a
web application
Back-end development controls what goes on behind the scenes of a web
application.
GOOD WEBSITE DESIGN
Effective website design should fulfill its intended function
Principles:
 Simplicity
 Navigation
 F-shaped pattern Reading
 Content
 Grid based Layout
 Load Time
 Mobile Friendly.
 SIMPLICITY
Simplicity in web designs can be simply described as removing all unnecessary elements
from a particular website.
• Color
• Finding a color palette that fits your
brand will allow you to influence your
customer’s behavior towards your brand.
• Keep the color selection limited to less
than 5 colors.
• Pleasing color combinations increase
customer engagement and make the user
feel good.
• Imagery
• Imagery is every visual aspect used within
communications.
• All imagery should be expressive and
capture the spirit of the company.
• Most of the initial information we
consume on websites is visual and as a
first impression it is important that high
quality images are used to form an
impression of professionalism
BAD COLOR CHOICE
EXAMPLES
F-SHAPED PATTERN READING
 TYPES OF WEBSITE
A dynamic Website page is not necessarily better than a static Website page. The two simply
serve different purposes.
• Static
• Static websites has fixed number of pages
• Format of web page is fixed.
• Static Website pages display the exact same
information whenever anyone visits it.
• Every visitor to that page will be greeted
by the exact same text, multimedia design
or video every time he visits the page until
you alter that page's source code
• Dynamic
• Dynamic websites can change the web page contents
dynamically while the page is running on client's
browser.
• This kind of websites use server- side programming
like PHP, Asp.NET. and JSP etc. to modify page
contents on run time.
• Dynamic Website pages are capable of producing
different content for different visitors from the same
source code file.
• The website can display different content based on what
operating system or browser the visitor is using,
whether she is using a PC or a mobile device, or even
the source that referred the visitor.
HTML

HTML, otherwise known as HyperText Markup Language, is the language used to

create Web pages
 Hyper Text simple means Text with in Text. HyperText is a way to link two or more web pages (HTML documents) with each
other.
 A markup language is a computer language that is used to apply layout and formatting conventions to a text document.

 Using HTML, you can create a Web page with text, graphics, sound, and video.
 HTML describes the structure of a web page.
HTML elements tell the browser how to display the content.
TAGS

The essence of HTML programming is Tags.

 A tag is a keyword enclosed by angle brackets( Example: <i>)
There are opening and closing tags for many to all tags.
 The opening and closing tags use the same command except the closing tag
contains and additional forward slash /
 For example, the expression <B> Warning </B> would cause the word ‘Warning’
to appear in bold face on a Web page
NESTED TAGS

Whenever you have HTML tags within other HTML

tags, you must close the nearest tag first
Example:
<H1> <I> The Nation </I> </H1>
ATTRIBUTES
 Attributes are instructions that clarify or modify an element.
 Attributes go after the element name, separated by a space. In non-empty elements, attributes go in
the opening tag only:
 Elements that don’t have content because they are used to provide simple directive are called empty elements.

 You can also put more than one attribute in an element in any order.
 Most attributes take values, which follow an equals sign (=). In HTML, some attribute values are
single descriptive words. For example, the checked attribute, which makes a form checkbox checked
when the form loads, is equivalent to checked="checked".
 STRUCTURE OF A WEB PAGE
 The html element represents the root of an html
document.
Authors are encouraged to specify the lang attribute,
giving the documents language.
 An html element's start tag can be omitted if the first
thing inside the html element is not a comment.
 <html lang=“en”> ---- this code declares the
document’s language is English.
The head element represents the collection of
metadata of the document.
CONT’D

 The collection of metadata in a head element can be large or small.

The title element represents the document’s title or name.
Choose the title of your Web page carefully; The title of a Web page determines its
ranking in certain search engines
The title will also appear on Favorite lists, History lists, and Bookmark lists to identify
your page
TEXT FORMATTING

Manipulating text in HTML can be tricky;

Oftentimes, what you see is NOT what you
get
For instance, special HTML tags are needed
to create paragraphs, move to the next line,
and create headings
CONT’D
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
<hr> horizontal line: indicates one topic has completed
and another one is begning.
HEADINGS
 Web pages are typically organized into sections with
headings; To create a heading use the expression
<Hn>….</Hn> where n is a number between 1 and 7
 In this case, the 1 corresponds to the largest size
heading while the 6 corresponds to the smallest size
ALIGNING TEXT

 The ALIGN attribute can be inserted in the <P> and <Hn> tags
to right justify, center, or left justify the text
 For example, <H1 ALIGN=CENTER> The New York Times
</H1> would create a centered heading of the largest size
COMMENT STATEMENTS

Comment statements are notes in the HTML code that explain

the important features of the code
 The comments do not appear on the Web page itself but are a
useful reference to the author of the page and other programmers
 To create a comment statement use the <!-- …. --> tags
PAGE FORMATTING AND
IMAGES
 To define the background color, use the BGCOLOR attribute in
the <BODY> tag
Type <IMG SRC = “image.ext”>, where image.ext indicates the
location of the image file
 The WIDTH=n and HEIGHT=n attributes can be used to adjust
the size of an image
The attribute BORDER=n can be used to add a border n pixels
thick around the image
LINKS
 A link lets you move from one page to another, play movies and
sound, send email, download files, and more….
 A link has three parts: a destination, a label, and a target
 To create a link type
 <A HREF=“page.html”> label </A>
USING LINKS TO SEND EMAIL

To create a link to an email address, type <A

HREF=“mailto:email_address”> Label</A>
For example, to create a link to send email to abebe@gmail.com,
I would type: <A HREF=“mailto: abebe@gmail.com” > Email
Abebe</A>
 ORDER AND UNORDER LIST
 Ordered lists are a list of numbered
items.
 To create an ordered list, type:
<OL>
 <LI> This is step one.
 <LI> This is step two.
 <LI> This is step three.
</OL>
The TYPE=x attribute allows you to change
the the kind of symbol that appears in the list. the kind of symbol that appears in the list.
Types: A, a, I, i
 An unordered list is a list of bulleted
items
 To create an unordered list, type:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>
 The TYPE=x attribute allows you to change the
Types: circle, square and disk
DESCRIPTION LIST
BLOCKQUOTE AND STRONG
 If you have a long quotation, a testimonial, or a section of copy from another source, mark it up as a
blockquote element.
It is recommended that content within blockquote elements be contained in other elements, such as
paragraphs, headings, or lists

The strong element indicates that a word or phrase is important, serious,or urgent.
FORMS
What are forms?
An HTML form is an area of the document that allows users to enter information into fields.
A form may be used to collect personal information, opinions in polls, user preferences and other
kinds of information.
There are two basic components of a Web form: the shell, the part that the user fills out, and the
script which processes the information
HTML tags are used to create the form shell. Using HTML you can create text boxes, radio buttons,
checkboxes, drop-down menus, and more...
EXAMPLE: FORM
Text Box

Drop-down Menu
Radio Buttons
Checkboxes

Text Area

Reset Button
Submit Button
THE FORM SHELL
A form shell has three important parts:
 the <FORM> tag, which includes the address of the script
which will process the form
the form elements, like text boxes and radio buttons
the submit button which triggers the script to send the entered
information to the server
HTML INPUTS
OPTIONS
To create a drop-down menu, type <SELECT NAME=“name” SIZE=n MULTIPLE>
Then type <OPTION VALUE= “value”>Label
In this case the SIZE attribute specifies the height of the menu in lines and
MULTIPLE allows users to select more than one menu option
TABLES
Tables can be used to display rows and columns of Creating Simple Table
data, create multi-column text, captions for images, and <TABLE BORDER=10>
sidebars <TR>

The <TABLE> tag is used to create a table; the <TR> <TD>One</TD>

tag defines the beginning of a row while the <TD> tag <TD>Two</TD>
defines the beginning of a cell </TR>

The BORDER=n attribute allows you to add a border <TR>

n pixels thick around the table <TD>Three</TD>

<TD>Four</TD>
To make a solid border color, use the
</TR>
BORDERCOLOR=“color” attribute
</TABLE>
CSS(CASCADING STYLE
SHEETS)
 CSS is the W3C standard for defining the presentation of documents written in
HTML.
 Presentation, again, refers to the way the document is delivered to the user.
 CSS is a separate language with its own syntax.
 A style sheet is made up of one or more style instructions( called style rules) that
describe how an element or group of elements should be displayed.
 In CSS terminology, the two main sections of a rule are
1. The selector that identifies the element or elements to be affected.
2. The declaration that provides the rendering instructions. This is in turn made up of property (such
as color) and its value( green), separated by a colon and a space
CONT’D
SELECTORS
 Elements can be used as selectors. This is called an element type
selector, and it’s the most basic type of selectors.
 Another type of selector is an ID selector, which selects an
element based on the value of an element’s id attribute. It is
indicated with the # symbol.
DECLARATIONS
 The Declaration is made up of a property/value pair.
 There can be more than one declarations in a single rule
 Each Declaration must end with a semicolon to keep it separate from the
following declaration
ATTACHING THE STYLES TO
THE DOCUMENT
Three ways style information can be applied to
1. External style sheets: An external style sheet is a separate, text-only document that
contains. It must be named with the .css suffix. The .css document is then linked to (via
the link element) a number of style rules
2. Embedded style sheets: It is placed in a document via the style element, and its rules
apply only to that document. The style element must be placed in the head of the
document.
3. Inline styles: You can apply properties and values to a single element by using the style
attribute in the element itself, as shown here:

<h1 style="color: red">Introduction</h1>

CONT’D
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML

<link href="style.css" type="text/css" rel="stylesheet" />

<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML

A page can link to multiple style sheet files

 In case of a conflict (two sheets define a style for the same HTML
element), the latter sheet's properties will be used
CSS PROPERTIES: COLOR
p {
color: red;
background-color: yellow;
}
CSS

This paragraph uses the style above output

property description
color color of the element's text
color that will appear behind the
background-color
element
MARGIN AND PADDING
 Margins are used to create space around elements outside of any defined borders
 The CSS margins properties are used to create space around elements
 CSS for specifying margins for each side
 margin-top
 margin-right
 margin-bottom
 margin-left

 Padding is used to create space around an element’s content, inside of any defined
borders
CSS COMMENTS
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS

CSS (like HTML) is usually not commented as rigorously as programming

languages such as Java
The // single-line comment style is NOT supported in CSS
The <!-- ... --> HTML comment style is also NOT supported in CSS
FONTS
property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style

p {
font-weight: bold;
font-style: italic;
} CSS
TEXTS
property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
gaps between the various portions of
word-spacing,
the text
letter-spacing
indents the first letter of each
text-indent
paragraph

text-align can be left, right, center, or justify

LIST STYLE TYPE
ol { list-style-type: lower-roman; }
CSS
Possible values:
i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.
others: hebrew, armenian, georgian, cjk-ideographic, hiragana…
WHAT HAPPENS WHEN THERE
IS CONFLICT?
 Cascade determines how conflicts are resolved and it’s a fundamental part of how
the language works.
 When Declarations Conflict, the cascade considers three things to resolve the
difference:
1. Stylesheet Origin: where the styles come from. Your styles are applied in conjunction with the
browser’s default styles
2. Selector specificity: Which selector takes precedence over which
3. Source order: Order in which styles are declared in the stylesheet.
CONT’D
SOURCE ORIGIN

Source Origin
Author important styles
 Author styles
User agent styles

Declaration marked as !important are treated as a higher-priority

origin
User agent styles have lower priority, so your styles override them.
CASCADING ORDER
What Style will be used when there is more than one style specified for an HTML
element?
All the sytles in a page will ‘cscade’ into a new virtual style sheet by the following
rules, where number one has the highest priority.
1. Inline style
2. Internal(Embeded / External style
3. Browser Default(user agent stylesheets)
UNDERSTANDING
SPECIFICITY
 If conflicting declarations can not be resolved based on their origin, the browser
next tries to resolve them using specificity.
 The browser evaluates specificity in two parts:
 Styles applied inline in the html
 Styles applied using a selector

To override inline declarations in your stylesheet, you will need to add an !
important to the declaration, shifting it into a higher-priority origin.
If the inline styles are marked important nothing can override them.
SELECTOR SPECIFICITY
 Here is the order of selector specificity.
 If selector has more ID’s, it wins
 If that results in a tie, the selector with the most class wins
 If that results in a tie, the selector with the most tag name wins.

Pseudo class selectors(like :hover) and attribute selectors(like [type=“input”]) each

have the same specificity as a class selector
The universal selector(*) and combinators( >, +, ~) have no effect on specificity.
If you add a declaration to your CSS and it seems to have no effect, often it’s
because a more specific rule is overriding it.
TWO RULES OF THUMB

Don’t use ID’s in your selector

Don’t use !important
MEASUREMENT
 There are two types of units in html
 Absolute : CSS supports several absolute length units, the most common of which, and the most
basic, is the pixel
Less common absolute units are mm(millemeter), cm(centimeter), in. (inch), pt( point) and
pc( pica)
1in. = 25.4mm = 2.54cm = 6pc = 72pt = 96px
 Relative : Em and rems are the most common relative units
 In CSS, 1em means the font size of the current element;
 font-size ems are derived from the inherited font-size
WHAT HAPPENS
 if we use ems for font size together with ems for other properties
REM’S
 The representation of all the elements on the page in memory is called the
DOM( Document Object Model)
 It’s a tree structure, where each element is represented by a node
 The <html> element is the top-level(or root) node, has child nodes <head> and
<body>
 The root node has a special pseudo class (:root) that you can use to target it.
 rem is short for root em
 rem’s are relative to the font size of the root element.
 no matter where you apply it in the document, rem’s has the same computed value
JAVASCRIPT
JavaScript was introduced in 1995 as a way to add programs to web pages
JavaScript is a programming language that can be used to manipulate a webpage
and make it dynamic
Javascript can execute on any device that has a special program called the
Javascript engine.
CONT’D
 The browser has an embedded engine sometimes called a “javascript virtual
machine”.
 Different engines have different “codenames”. For example
 V8 – in Chrome and Opera
 SpiderMonkey - in Firefox
 Trident and Chakra for different version of IE
 ChakraCore for Microsoft edge
 Nitro and SquirrelFish for safari etc..
WHAT YOU CAN DO WITH
JAVASCRIPT
 You can modify the content of a web page by adding or removing elements.
 You can change the style and position of the elements on a web page.
 You can monitor events like mouse click, hover, etc. and react to it.
 You can perform and control transitions and animations.
 You can create alert pop-ups to display info or warning messages to the user.
 You can perform operations based on user inputs and display the results.
 You can validate user inputs before submitting it to the server.
WHERE YOU CAN PUT IT
 In the same way as for CSS, JavaScript can be placed
 within an HTML element,
 within the page header tags or
 as an external file.

 Note: The type attribute for <script> tag (i.e. <script type="text/javascript">) is no
longer required since HTML5. JavaScript is the default scripting language for
HTML5.
SCRIPT INSIDE HTML
DOCUMENT
 The <script> element can be placed in the
 <head>,
or <body> section of an HTML document.

 But ideally scripts should be placed at the end of the body tag, before the closing
</body> tag, this will make your page load faster, since it prevents obstruction of
initial page rendering
HTML DOM
 JavaScript makes use of what is called the HTML DOM in order to effect changes
on a web page.
 DOM stands for Document Object Model.
 The HTML DOM is a map or tree structure of all the elements that make up a
page.
 We can use this map in order to get JavaScript to interact with the page and make
changes if necessary to the HTML DOM.
HTML DOM TREES OF OBJECT
DEVELOPER TOOLS
 Each of the modern browsers comes with Developer Tools.
 We have looked at these in our previous session in relation to CSS but you can also
use them to debug JavaScript.
 You can use Control + Shift + I to open developer tools.
 Then click on the ‘Console’ tab in the developer tools top menu section.
 This will then show you any JavaScript errors

 Note:
 In javascript statements there are times when we can avoid semicolons and there are time when we can’t.
COMMENTS
 Just like any of the other programming languages comments are the essential part of
Javascript
 A comment is simply a line of text that is completely ignored by the JavaScript
interpreter.
 Comments are usually added with the purpose of providing extra information
pertaining to source code.
 It will not only help you understand your code when you look after a period of time
but also others who are working with you on the same project.
 JavaScript support single-line as well as multi-line comments.
 Single-line comments begin with a double forward slash (//), followed by the comment text.
 a multi-line comment begins with a slash and an asterisk (/*) and ends with an asterisk and slash (*/).
VARIABLES
 You can create a variable with the var keyword, whereas the assignment operator is
used to assign value to a variable.
 Example.
var name = “student name”;

 ES6 introduced two new keywords let and const for declaring variables.
 The const keyword works exactly the same as let, except that variables declared
using const keyword cannot be reassigned later in the code.
GENERATING OUTPUT AND
INTERACTION
 Following are list of ways to display output in Javascript
1. Console.log() :- outputs to the browser console
2. Alert():- outputs in alert dialog box
3. Prompt() :- The function accepts two arguments

 Prompt
result = prompt(title, [default]);
It shows a modal windows with a text message, an input field for the visitor, and the buttons OK/Cancel
title :- the text to show the visitor
default :- an optional second parameter, the initial value for the input field
Eg.
 let age = prompt(‘How old are you?’, 100);
 alert(‘You are ${age} years old!’);
CONT’D
1. confirm :- the function confirm shows a modal window with a question and two buttons: OK and
Cancel
The result is true if OK is pressed and false otherwise
1. Document.write() :- output to the browser’s window
2. innerHtml :- output inside an HTML element
However before writing ouput first we need to select an element using a method such as
getElementbyID
CONT’D
ARITHMETIC OPERATORS
COMPARISON OPERATORS
STRING COMPARISON
 To see whether a string greater than another, Javascript uses the so-called
“dictionary” or “lexicographical” order
 A regular equality check == has a problem. It cannot differentiate 0 from false
 alert(0 == false)
 This happens because operands of different types are converted to numbers by the
equality operator ==.
 A strict equality operator === check the equality without the type conversion
LOGICAL OPERATORS
TYPE OPERATORS
TYPES
 Strings
Backticks are “extended functionality” quotes. They allow us to embed variables and
expression into a string by wrapping them in ${…}, for example:
//embed a variable
alert(‘hello , ${name}!’);
 Numbers
 Boolean
CONT’D
 Arrays
Javascript arrays are written with square brackets
Array items are separated by commas
Eg.
var cars = [“saab”, “Volvo”, “BMW”]
 Objects
Objects are written with curly braces {}. Object properties are written as name:value pairs, separated by
commas
Eg.
var person = {firstName: “john”, lastName:”Doe”, age:50, eyecolor:
“blue”};
TYPE CONVERSION
 Most of the time, operators and functions automatically convert the values given to
them to the right type.
1. String Conversion
String conversion when we need the string form of a value
We can use the String() function to convert a value to a string.

2. Numeric Conversion
Numeric Conversion happens in mathematical functions and expression automatically. For example
when division is applied to numbers
alert(“6”/”2”);

3. Boolean Conversion
use the Boolean() function to convert a value to a Boolean type
JS IF/ELSE
The If Statement
if(condition){
//code goes here
}
The if...else Stateent
 
if(condition){
//code goes here
}
else{
//code goes here
}
CONT’D
The if...else if...else Statement
 
if(condition){

//code goes here

}
else if(condition2){
//code goes here
}
else{
//code goes here
}
TERNARY OPERATORS
 The ternary operator provides a shorthand way of writing the if...else statements.
 The ternary operator is represent by the question mark(?) symbol and it takes three
operands: a condition to check, a result for true, and a result for false.
 Syntax
var result = (condition) ? value1: value2
 Eg.
var age = 21;
var userType = age < 18 ? ‘child’ : ‘adult’;
THE SWITCH…CASE
STATEMENT
 The switch...case statement is an alternative to the if...else if...else statement, which does almost the same thing.
Syntax
switch(x){
case value1:
//code goes here
break;
case value2:
//code goes here
break;
.....
default:
//code goes here
}
What happens if we leave break out?
var d = new Date();
d.getDay();
 
Multiple cases Sharing Same Action
switch(d.getDay()){
case 1:
case 2:
case 3:
case 4:
case 5:
alert(“It is weekday.”);
break;
...
...
alert()
break;
default:
alert(“Enjoy every day of your life.”)

}
JAVASCRIPT LOOPS
 Loops are used to execute the same block of code again and again, as long as a certain condition is
met.
While --- loops through a block of code as long as the condition specified evaluates to true.
Syntax
while(condition){
//code goes here
}
do..while --- loops through a block of code once; then the condiiton is evaluated
syntax
do {
//code goes here
}
while(condiiton);
CONT’D
for ---loops through a block of code ntil the counter reaches a specified number
syntax
for(init, cond, incr) {
//code goes here
}
for...in --- loops through the properties of an object, or the elements of an array
syntax
for(variable in object) {
//code goes here
}
for...of --- loops over iterable objects such as arrays, strings, etc.
FUNCTIONS
A JavaScript Function is a block of code that performs a specific task
Functions are executed when “something invokes it
 
Example:
function myFunction(p1,p2) {
return p1*p2;
}
FUNCTION: EXPRESSIONS
Functions can also be created by using function expression, such a function can be anonyms, it doesn’t
have to have a name
 
Eg.
var func = function(param) {
return param * param;
};
CONT’D
NB: we can copy a function to another variable
function sayHi() {
alert(“Hello”);
}

let func = sayHi; //copy

func(); //Hello
sayHi(); //Hello
CONT’D

Why is there a semi colon at the end of function expression?

 
A function expression is used inside the statement: let sayHi = ….; as a value.It’s not a code block, but
rather an assignment
DIFFERENCE
Difference between Function Declaration and Function Expression?
 
The basic difference is their structure but the subtle difference is when a function is created by the
JavaScript engine
 
Function expression is created when the execution reaches it and is usable only from that moment.
Where as a function declaration can be called earlier than it is defined.
ARROW FUNCTIONS
Arrow function is another way of creating a function
Syntax:
let func = (param1, param2, param 3) => expression
if we have only one argument, then parenthesis around parameters can be omitted that makes it even
shorter;
eg.
let double = n => n * 2;
if there are no arguments, parenthesis should be empty(but they should be present). Like this
let sayHi = () => alert (“Hello”);
sayHi()
FUN BEHAVIOR
The following code is allowed and executes without any problem:
function square(x){ return x*x}
console.log(square(4,true,”hello”));
 
Even if the function square() was created with only one parameter it can take zero and more parameter.
If there are more parameter defined than previously declared the JavaScript virtual machine will take
the first argument and ignore the rest.
In JavaScript if you pass to many parameters, the extra ones will get ignored. If you pass to few, the
missing parameters get assigned the value undefined.
OBJECTS
 Objects are used to store keyed collections of various data
An object can be created with curly braces {…} with an optional list of properties.
A property is a “key:value” pair, where key is a string (also called a “property
name”), and value can be anything
An empty object (“empty cabinet”) can be created using one of two syntaxes
o let user = new Object(); //object constructor
o let user = {}
ACCESSING, ADDING AND
DELETING
Property values can be accessible using the dot notation
alert(user.name);
The value can be of any type. Let’s add a Boolean one:
  user.isAdmin = true;
To remove a property, we can use delete operator
delete user.age;
MULTI WORD PROPERTY
NAMES
We can also use multiword property names, but then they must be quoted
Eg.
let user = {
name: “John”,
age: 30,
“likes birds”: true
}
CONT’D
For multi word properties, the dot access doesn’t work. That is because the dot
requires the key to be a valid variable identifier. That is: no spaces
There’s an alteranative “square bracket notation” that works with any string:
user[“likes birds”]
COMPUTED PROPERTY
We can use square brackets in an object literal. That’s called computed properties
Eg.
let fruit = prompt(“Which fruit to buy?”, “apple”);

let bag = {
[fruit]: 5,
};

alert(bag.apple);
The meaning of a computer property [fruit] means that the property name should be take from fuit.
ARRAY
There are two syntaxes for creating an empty array:
Let arr = new Array();
Let arr = []
An array can store elements of any type:
 
let arr = {‘Apple’, {name: ‘John’}, true, function() {alert(‘hello’);}];
 
alert(arr[1].name);
arr[3]() //hello
METHODS
 pop/push, shift/unshift
A queue is one of the most common uses of an array. It means an order collection of elements which supports two operations
push :- appends an element to the end
pop :- takes an element from the end
shift:- get an element from the beginning
unshift: appends an element in the beginning
 
We can add multiple elements at once using push and unshift
 
Eg.
push(one, two, three);
MULTI DIMENSIONAL ARRAY
Multidimensional arrays
Arrays can have items that are also arrays. We can use it for multidimensional arrays, for example
to store matrices
let matrix = [
[1,2,3],
[4,5,6],
[7,8,9]
];
alert(matrix[1][2]);
CONT’D
 Splice method can be used to insert, remove and replace elements
 format arr.splice(start, [, deleteCount, elem1, …, elemN])

 If you just want to insert an element set the deleteCount to 0

CLASS
The “class” syntax
The basic syntax is:
class MyClass {
//class methods
Constructor(){
}
method1() {..}
}
 
Then use new MyClass() to create a new object with all the listed methods.
CLASS EXPRESSION
Just like functions, class can be defined inside another expression
 
Eg.
let User = class {
sayHi(){
alert(“Hello”);
}
};
new User.sayHi();
GETTERS/SETTERS
class User(){
constructor(name){
this.name = name;
}
get name(){
return this. _name;
}
set name(value){
if(value.length < 4){
alert(“Name is too short”);
return;
}
this._name = value;
}
}