Showing posts sorted by relevance for query JavaScript. Sort by date Show all posts
Showing posts sorted by relevance for query JavaScript. Sort by date Show all posts

Sunday, November 18, 2018

JavaScript Syntax

            No comments
JavaScript syntax is the set of rules, how JavaScript programs are constructed:
var x, y;          // How to declare variablesx = 5; y = 6;      // How to assign valuesz = x + y;         // How to compute values

JavaScript Values

The JavaScript syntax defines two types of values: Fixed values and variable values.
Fixed values are called literals. Variable values are called variables.

JavaScript Literals

The most important rules for writing fixed values are:
Numbers are written with or without decimals:

10.50

1001

Strings are text, written within double or single quotes:

"John Doe"

'John Doe'

JavaScript Variables

In a programming language, variables are used to store data values.
JavaScript uses the var keyword to declare variables.
An equal sign is used to assign values to variables.
In this example, x is defined as a variable. Then, x is assigned (given) the value 6:

var x;

x = 6;

JavaScript Operators

JavaScript uses arithmetic operators ( + - *  / ) to compute values:

(5 + 6) * 10

JavaScript uses an assignment operator ( = ) to assign values to variables:

var x, y;
x = 5;
y = 6;

JavaScript Expressions

An expression is a combination of values, variables, and operators, which computes to a value.
The computation is called an evaluation.
For example, 5 * 10 evaluates to 50:


5 * 10

JavaScript Keywords

JavaScript keywords are used to identify actions to be performed.
The var keyword tells the browser to create variables:

var x, y;
x = 5 + 6;
y = x * 10;

JavaScript Comments

Not all JavaScript statements are "executed".
Code after double slashes // or between /* and */ is treated as a comment.
Comments are ignored, and will not be executed:


var x = 5;   // I will be executed
// var x = 6;   I will NOT be executed

JavaScript Identifiers

Identifiers are names.
In JavaScript, identifiers are used to name variables (and keywords, and functions, and labels).
The rules for legal names are much the same in most programming languages.
In JavaScript, the first character must be a letter, or an underscore (_), or a dollar sign ($).
Subsequent characters may be letters, digits, underscores, or dollar signs.
Numbers are not allowed as the first character.
This way JavaScript can easily distinguish identifiers from numbers.

JavaScript is Case Sensitive

All JavaScript identifiers are case sensitive. 
The variables lastName and lastname, are two different variables.

var lastname, lastName;
lastName = "Doe";
lastname = "Peterson";

JavaScript and Camel Case

Historically, programmers have used different ways of joining multiple words into one variable name:
Hyphens:
first-name, last-name, master-card, inter-city.
Hyphens are not allowed in JavaScript. They are reserved for subtractions.
Underscore:
first_name, last_name, master_card, inter_city.
Upper Camel Case (Pascal Case):
FirstName, LastName, MasterCard, InterCity.

Lower Camel Case:
JavaScript programmers tend to use camel case that starts with a lowercase letter:
firstName, lastName, masterCard, interCity.




























Share:

JavaScript Where To

            No comments

The <script> Tag

In HTML, JavaScript code must be inserted between <script> and </script> tags.

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";</script>


Old JavaScript examples may use a type attribute: <script type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting language in HTML.

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
For example, a function can be called when an event occurs, like when the user clicks a button.
You will learn much more about functions and events in later chapters.

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}</script>

</body>
</html>


External JavaScript

Scripts can also be placed in external files:


function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}


External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:

<script src="myScript.js"></script>

You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is located.
External scripts cannot contain <script> tags.

External JavaScript Advantages

Placing scripts in external files has some advantages:
  • It separates HTML and code
  • It makes HTML and JavaScript easier to read and maintain
  • Cached JavaScript files can speed up page loads
To add several script files to one page  - use several script tags:


<script src="myScript1.js"></script>
<script src="myScript2.js"></script>


External References

External scripts can be referenced with a full URL or with a path relative to the current web page.
This example uses a full URL to link to a script:

<script src="https://https://developmentside.blogspot.com/js/myScript1.js"></script>
















Share:

JavaScript Data Types

            No comments

JavaScript Data Types

JavaScript variables can hold many data types: numbers, strings, objects and more:

var length = 16;                               // Numbervar lastName = "Johnson";                      // Stringvar x = {firstName:"John", lastName:"Doe"};    // Object

The Concept of Data Types

In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the type.
Without data types, a computer cannot safely solve this:

var x = 16 + "Volvo";

Does it make any sense to add "Volvo" to sixteen? Will it produce an error or will it produce a result?
JavaScript will treat the example above as:

var x = "16" + "Volvo";

When adding a number and a string, JavaScript will treat the number as a string.

var x = 16 + "Volvo";


var x = "Volvo" + 16;

JavaScript evaluates expressions from left to right. Different sequences can produce different results:

var x = 16 + 4 + "Volvo";

Result:

20Volvo

--------------

JavaScript Types are Dynamic

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

var x;           // Now x is undefinedx = 5;           // Now x is a Numberx = "John";      // Now x is a String

JavaScript Strings

A string (or a text string) is a series of characters like "John Doe".
Strings are written with quotes. You can use single or double quotes:


var carName = "Volvo XC60";   // Using double quotesvar carName = 'Volvo XC60';   // Using single quotes

JavaScript Numbers

JavaScript has only one type of numbers.
Numbers can be written with, or without decimals:

var x1 = 34.00;     // Written with decimalsvar x2 = 34;        // Written without decimals

JavaScript Booleans

Booleans can only have two values: true or false.

var x = 5;
var y = 5;
var z = 6;
(x == y)       // Returns true(x == z)       // Returns false

JavaScript Arrays

JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called cars, containing three items (car names):

var cars = ["Saab", "Volvo", "BMW"];


The typeof Operator

You can use the JavaScript typeof operator to find the type of a JavaScript variable.
The typeof operator returns the type of a variable or an expression:

typeof ""                  // Returns "string"typeof "John"              // Returns "string"typeof "John Doe"          // Returns "string"


Undefined

In JavaScript, a variable without a value, has the value undefined. The type is also undefined.


var car;                // Value is undefined, type is undefined

Empty Values

An empty value has nothing to do with undefined.
An empty string has both a legal value and a type.

var car = "";              // The value is "", the typeof is "string"


Null

In JavaScript null is "nothing". It is supposed to be something that doesn't exist.
Unfortunately, in JavaScript, the data type of null is an object.
You can consider it a bug in JavaScript that typeof null is an object. It should be null.
You can empty an object by setting it to null:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;        // Now value is null, but type is still an object


Difference Between Undefined and Null

Undefined and null are equal in value but different in type:

typeof undefined           // undefinedtypeof null                // object
null === undefined         // falsenull == undefined          // true

Primitive Data

A primitive data value is a single simple data value with no additional properties and methods.
The typeof operator can return one of these primitive types:
  • string
  • number
  • boolean
  • undefined
typeof "John"              // Returns "string" typeof 3.14                // Returns "number"typeof true                // Returns "boolean"typeof false               // Returns "boolean"typeof x                   // Returns "undefined" (if x has no value)

Complex Data

The typeof operator can return one of two complex types:
  • function
  • object
The typeof operator returns object for both objects, arrays, and null.
The typeof operator does not return object for functions.

typeof {name:'John', age:34} // Returns "object"typeof [1,2,3,4]             // Returns "object" (not "array", see note below)typeof null                  // Returns "object"typeof function myFunc(){}   // Returns "function"



Share:

Contact Form

Name

Email *

Message *

Popular Posts

  • JavaScript Date Formats
    JavaScript Date Input There are generally 3 types of JavaScript date input formats: TypeExample ISO Date "2015-03-25" (The Int...
  • C# - Constants and Literals
    The constants refer to fixed values that the program may not alter during its execution. These fixed values are also called literals. Const...
  • PHP 5 Functions
    PHP User Defined Functions Besides the built-in PHP functions, we can create our own functions. A function is a block of statements tha...
  • C# - Anonymous Methods
    We discussed that delegates are used to reference any methods that has the same signature as that of the delegate. In other words, you can ...
  • SQL CREATE TABLE Statement
    The SQL CREATE TABLE Statement The CREATE TABLE statement is used to create a new table in a database. CREATE   TABLE   table_name  (...
  • SQL Select Top
    The SQL SELECT TOP Clause The SELECT TOP clause is used to specify the number of records to return. The SELECT TOP clause is useful on ...
  • HTML5 Migration
    Migration from HTML4 to HTML5 This chapter is entirely about how to  migrate  from  HTML4  to  HTML5 . This chapter demonstrates how to...
  • C# - Classes
    When you define a class, you define a blueprint for a data type. This does not actually define any data, but it does define what the class ...

Blog Archive

Blog Archive

Hassan.mosmer1@gmail.com