JSON

JSON

 

• JSON: JavaScript Object Notation.
• JSON is a syntax for storing and exchanging data.
• JSON is text, written with JavaScript object notation.

Exchanging Data

• When exchanging data between a browser and a server, the data can only be text.
• JSON is text, and we can convert any JavaScript object into JSON, and send JSON to the server.
• We can also convert any JSON received from the server into JavaScript objects.
• This way we can work with the data as JavaScript objects, with no complicated parsing and translations.

---

Sending Data

If you have data stored in a JavaScript object, you can convert the object into JSON, and send it to a server:

Example

var myObj = { "name":"John", "age":31, "city":"New York" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

You will learn more about the JSON.stringify() function later in this tutorial.

---

Receiving Data

If you receive data in JSON format, you can convert it into a JavaScript object:

Example

var myJSON = '{ "name":"John", "age":31, "city":"New York" }';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

JavaScript Variables

All JavaScript variables must be identified with unique names.
These unique names are called identifiers.
Identifiers can be short names (like x and y) or more descriptive names (age, sum, totalVolume).
The general rules for constructing names for variables (unique identifiers) are:

• Names can contain letters, digits, underscores, and dollar signs.
• Names must begin with a letter
• Names can also begin with $ and _ (but we will not use it in this tutorial)
• Names are case sensitive (y and Y are different variables)
• Reserved words (like JavaScript keywords) cannot be used as names

JavaScript identifiers are case-sensitive.

The Assignment Operator

In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator.
This is different from algebra. The following does not make sense in algebra:
x = x + 5

The "equal to" operator is written like == in JavaScript.

JavaScript Data Tyes

JavaScript variables can hold numbers like 100 and text values like "John Doe".
In programming, text values are called text strings.
JavaScript can handle many types of data, but for now, just think of numbers and strings.
Strings are written inside double or single quotes. Numbers are written without quotes.
If you put a number in quotes, it will be treated as a text string.

var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

Declaring (Creating) JavaScript Variables

Creating a variable in JavaScript is called "declaring" a variable.
You declare a JavaScript variable with the var keyword:

var carName;

After the declaration, the variable has no value. (Technically it has the value of undefined)
To assign a value to the variable, use the equal sign:

carName = "Volvo"; 

 

You can also assign a value to the variable when you declare it:

var carName = "Volvo";

One Statement, Many Variables

You can declare many variables in one statement.
Start the statement with var and separate the variables by comma:

var person = "John Doe", carName = "Volvo", price = 200;

A declaration can span multiple lines:

var person = "John Doe",
carName = "Volvo",
price = 200;

Value = undefined

In computer programs, variables are often declared without a value. The value can be something that has to be calculated, or something that will be provided later, like user input.
A variable declared without a value will have the value undefined.

The variable carName will have the value undefined after the execution of this statement:

var carName;

Re-Declaring JavaScript Variables

If you re-declare a JavaScript variable, it will not lose its value.

The variable carName will still have the value "Volvo" after the execution of these statements:

var carName = "Volvo";
var carName;

JavaScript Arithmetic

As with algebra, you can do arithmetic with JavaScript variables,
 using operators like = and +:

var x = 5 + 2 + 3;

You can also add strings, but strings will be concatenated:

var x = "John" + " " + "Doe";

Also try this:

var x = "5" + 2 + 3;

 

If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated.

JavaScript

What is JavaScript?

• JavaScript is the programming language of HTML and the Web.
• JavaScript is easy to learn.

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:
   1. HTML to define the content of web pages
   2. CSS to specify the layout of web pages
   3. JavaScript to program the behavior of web pages

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().
This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript":

document.getElementById("demo").innerHTML = "Hello JavaScript";  

JavaScript Can Change HTML Attributes

This example changes an HTML image by changing the src (source) attribute of an <img> tag:

<onclick="document.getElementById('myImage').src='pic_bulbon.gif'">

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

document.getElementById("demo").style.fontSize = "25px";
or
document.getElementById('demo').style.fontSize = '25px';  

JavaScript Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style:

document.getElementById("demo").style.display = "none";
or
document.getElementById('demo').style.display = 'none';  

JavaScript Can Show HTML Elements

Showing hidden HTML elements can also be done by changing the display style:

document.getElementById("demo").style.display = "block";
or
document.getElementById('demo').style.display = 'block';