JavaScript

Create a link to section of the page

<a href="#section-2">Jump to section 2</a> <h2 id="section-2">Section 2</h2> It is also possible to give additional styling to the jumping anchor. h2 { color: #1c87c9; } h2:target { color: white; background: #1c87c9; }

When you parse() JSON data derived from an array, the method will return a (a) JavaScript array (b) JavaScript object.

A See pic

Which data types are invalid JSON values, but valid for JS Objects

A function A date Undefined If you need to include a function or a date, write it as a string. You can convert it back later. You should avoid using functions in JSON, the functions will lose their scope, and you would have to use eval() to convert them back into functions.

You can request JSON from the server by using an ____ request

AJAX request As long as the response from the server is written in JSON format, you can parse the string into a JavaScript object.

Creating an Array

Array literl syntax: const array_name = [item1, item2, ...]; or the new keyword (not reccomended) const cars = new Array("Saab", "Volvo", "BMW");

JSON.stringify() does what?

Convert a JavaScript object into a string

The second parameter, of the JSON.parse() function, called reviver. The reviver parameter is a function that checks each property, before returning the value.

Convert a string into a date, using the reviver function:

JSON Objects are written inside...

Curly braces. {"firstName":"John", "lastName":"Doe"}

JSON Syntax Rules

Data is in name/value pairs Data is separated by commas Curly braces hold objects Square brackets hold arrays

What is this? (keyword)

In JavaScript, the this keyword refers to an object. Which object depends on how this is being invoked (used or called). The this keyword refers to different objects depending on how it is used:

The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is text only. Code for reading and generating JSON data can be written in any programming language. The JSON format is syntactically identical to the code for creating JavaScript objects. Because of this similarity, a JavaScript program can easily convert JSON data into native JavaScript objects.

JSON Example This JSON syntax defines an employees object: an array of 3 employee records (objects):

Both ____ and ____ can be used to receive data from a web server.

JSON and XML

JSON Data

JSON data is written as name/value pairs, just like JavaScript object properties. "firstName":"John" JSON names require double quotes. JavaScript names do not.

View example: When storing data, the data has to be a certain format, and regardless of where you choose to store it, text is always one of the legal formats.

JSON makes it possible to store JavaScript objects as text.

When receiving data from a web server, the data is always a string. Parse the data with _____ and the data becomes a JavaScript object.

JSON.parse()

What is JSONP ?

JSONP stands for JSON with Padding.

What does it mean to say JS is dynamic? (dynamic typing)

JavaScript has dynamic types. This means that the same variable can be used to hold different data types

let vs const vs var

Let Variables defined with let cannot be Redeclared. Variables defined with let must be Declared before use. Variables defined with let have Block Scope. Const Variables defined with const cannot be Redeclared. Variables defined with const cannot be Reassigned. Variables defined with const have Block Scope. Var Variables declared with the var keyword can NOT have block scope.

Name the different types of web storage and explain how they differ

Local storage - data with no expiration date that will persist after the browser window is closed. (5MB limit) Session storage - data that gets cleared after the browser window is closed. Cookies - Used to be standard for local data before local storage. Holds less data (4KB limit) and doesn't get sent with every HTTP request, so it can be a better option for client-side storage.

Object Syntax

Object properties are written as name:value pairs, separated by commas. Example const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

JSON Syntax

See pic

Make a table based on JSON data.

See pic

Make an HTML drop down list with data received as JSON:

See pic

Make the HTML table based on the value of a drop down menu:

Select an option and display all the values

JSON is a format for storing and transporting data. JSON is often used when data is sent _____

Sent from a server to a web page.

JSON Arrays are written inside...

Square brackets. Just like in JavaScript, an array can contain objects: "employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ] In the example above, the object "employees" is an array. It contains three objects.

How are XML and JSON alike? How are they different?

The biggest difference is: XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function.

const person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName;} }; In the example above, this refers to what?

The person object.

Why might you use JSON.parse()

To convert the contents of localStorage back into something we can work with (like in a variable called data)

Converting a JSON Text to a JavaScript Object

Use the JavaScript built-in function JSON.parse() to convert the string into a JavaScript object: const obj = JSON.parse(text);

Looping a JSON Array

You can access array values by using a for in loop: or a for loop:

Looping a JSON Object

You can loop through object properties with a for-in loop. In a for-in loop, use the bracket notation to access the property values:

When using the JSON.parse() on a JSON derived from an array, the method will return ...?

a JavaScript array, instead of a JavaScript object. const text = '["Ford", "BMW", "Audi", "Fiat"]';const myArr = JSON.parse(text);

Methods are _____ that can be performed on objects. Methods are stored in properties as _____ _____

actions function definitions. *** A method is a function stored as a property.

Array Syntax

const cars = ["Saab", "Volvo", "BMW"]; Array indexes are zero-based

You access an array element by referring to the ___

index number: const cars = ["Saab", "Volvo", "BMW"];let car = cars[0];

You define (and create) a JavaScript object with an _____

object literal: const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

You access an object method with the following syntax:

objectName.methodName() name = person.fullName();

You can access object properties in two ways:

objectName.propertyName person.lastName; or objectName["propertyName"] person["lastName"];

Always remember to ____ the data you receive and _____ the data you send

parse() the data you receive and stringify() the data you send

JavaScript objects are containers for named values called ______.

properties.

Name and define the 4 localStorage methods

setItem('key', 'value') - Add key and value to local storage getItem('key') - Retrieve a value by the key removeItem('key') - Remove an item by key clear() - Clear all storage

Stringify Functions In JSON, functions are not allowed as object values. This can be omitted if ...

you convert your functions into strings before running the JSON.stringify() function.