Home > Developer > JavaScript
Introduction to JavaScript
JavaScript is a scripting language
JavaScript is a lightweight programming language.
JavaScript is a programmatic code that can be inserted into an HTML page.
When JavaScript is inserted into an HTML page, it can be performed by all modern browsers.
JavaScript is easy to learn.
Here are the main things you will learn in this tutorial.
JavaScript: Writing HTML output
document.write ("
JavaScript: Responding to events
<button type= "button" onclick= "alert (' welcome! ')" > Click here </button>
JavaScript: changing HTML content
X=document.getelementbyid ("demo")//Find elements
X.innerhtml= "Hello JavaScript"; Change Content
JavaScript: changing HTML images
<body>
<script>
function Changeimage () {
Element=document.getelementbyid (' MyImage ')
if (Element.src.match ("Bulbon")) {
Element.src= "/i/eg_bulboff.gif";//Picture out
}else{
Element.src= "/i/eg_bulbon.gif";//Picture is bright
}
}
</script>
<p> tap the light bulb to light or turn off the lamp </p>
</body>
JavaScript: changing HTML styles
X=document.getelementbyid ("demo")//Find element
X.style.color= "#ff0000"; Change Style
JavaScript: Validating input
If IsNaN (x) {alert ("Not Numeric")};
************************************
The alert () function is not commonly used in JavaScript, but it is very handy for code testing.
document.getElementById ("some id"). This method is defined in the HTML DOM. The DOM (Document Object model) is the official standard for accessing HTML elements.
JavaScript can change most attributes of any HTML element, not just pictures.
************************************
JavaScript uses
<script> tags
The script in the HTML must be between the <script> and </script> tags.
The script can be placed in the <body> and
JavaScript Functions and Events
In general, we need to execute code when an event occurs, such as when a user taps a button.
If we put JavaScript code in a function, we can call it when the event occurs.
External JavaScript
You can also save the script to an external file. External files typically contain code that is used by multiple Web pages.
The file name extension for external JavaScript files is. js.
To use an external file, set the. js file in the "src" attribute of the <script> tag: <script src= "Myscript.js" ></script>
************************************
The browser interprets and executes JavaScript located between <script> and </script>. Older instances may use type= "Text/javascript" in the <script> tag. It is not necessary to do so now.
It is common practice to put functions in the It is possible to refer to a script file in External scripts cannot contain <script> tags.
************************************
JavaScript output
Manipulating HTML elements
To access an HTML element from JavaScript, you can use the document.getElementById (ID) method:
document.getElementById ("Demo"). Innerhtml= "My first JavaScript";
Write to document output
The following example writes the <p> element directly to the HTML document output:
document.write ("<p>my first javascript</p>");
JavaScript in Windows 8
Microsoft supports the creation of Windows 8 apps through JavaScript.
************************************
JavaScript is performed by a Web browser. In this case, the browser will access the HTML element of id= "demo" and replace its contents (InnerHTML) with "My first JavaScript".
Please use document.write () to write only to the document output. If document.write is executed after the document has finished loading, the entire HTML page will be overwritten.
************************************
JavaScript statements
Semicolon
Semicolons are used to separate JavaScript statements. Another useful use of semicolons is to write multiple statements in one line.
JavaScript Code
JavaScript code (or JavaScript only) is a sequence of javascript statements. The browser executes each statement in the order in which it is written.
JavaScript code block
JavaScript statements are combined in the form of blocks of code. The block starts with the left curly brace and ends with the closing curly brace. The function of a block is to make the statement sequence execute together.
JavaScript is case sensitive.
When writing JavaScript statements, be aware of whether to turn off the case toggle key. The function getElementById is different from the getElementById. Similarly, variable myvariable and myvariable are also different.
Space
JavaScript ignores extra spaces. You can add spaces to the script to improve its readability.
Wrapping lines of code
You can wrap lines of code in a text string with backslashes.
************************************
In JavaScript, concluding sentences with semicolons are optional.
JavaScript functions are a typical example of combining statements in blocks.
You can break this line:
document.write ("Hello \
World! ");
However, you cannot:
document.write \
("Hello world!");
JavaScript is a scripting language. The browser executes the script code on a line-by-row basis when reading the code. For traditional programming, all code is compiled before execution.
************************************
JavaScript comments
JavaScript annotations can be used to improve the readability of your code.
Single-line comments begin with//.
Multiline comments start with/* and end with */.
Use annotations to block execution (available for debugging)://document.getelementbyid ("myH1"). Innerhtml= "Welcome to my homepage";
************************************
************************************
JavaScript variables
A variable is a container for storing information. Variables can be considered as containers for storing data.
Variables must start with a letter
Variables can also start with the $ and _ symbols (although we do not recommend this)
Variable names are case sensitive (Y and y are different variables)
Tip: Both JavaScript statements and JavaScript variables are case-sensitive.
JavaScript Data types
In JavaScript, a text like "Bill Gates" is called a string.
declaring (creating) JavaScript variables
We use the VAR keyword to declare a variable [variable declaration, the variable is empty (it has no value)]:
var carname;
Assign a value to a variable, using the equals sign:
Carname= "Volvo"; or var carname= "Volvo";
Create a variable named Carname, assign it a value of "Volvo", and put it in an HTML paragraph id= "Demo":
<p id= "Demo" ></p>
var carname= "Volvo";
document.getElementById ("Demo"). Innerhtml=carname;
One statement, multiple variables
var name= "Gates", age=56, job= "CEO";
Value = undefined
A variable that is not declared with a value, whose value is actually undefined. In the execution of the Var carname; , the value of the variable carname will be undefined.
Re-declaring JavaScript variables
If you re-declare a JavaScript variable, the value of the variable is not lost:
var carname= "Volvo";
The value of var carname;//variable carname is still "Volvo":
JavaScript arithmetic
You can use JavaScript variables to do arithmetic, using the operators such as = and +:
************************************
Like algebra, JavaScript variables can be used to hold values (such as x=2) and expressions (such as z=x+y).
Variables can use short names (such as x and y), or they can use better descriptive names (such as age, Sum, totalvolume).
There are many types of JavaScript variables, but for now, we only focus on numbers and strings.
Do not use quotation marks when the value you assign to a variable is numeric. If you enclose a value in quotation marks, the value is treated as text.
************************************
JavaScript Data types
String, number, Boolean, array, object, Null, Undefined
JavaScript has a dynamic type. This means that the same variable can be used as a different type
JavaScript string
The string can be any text in quotation marks. You can use quotation marks in a string, as long as you do not match the quotation marks surrounding the string
JavaScript numbers
JavaScript has only one numeric type. Numbers can be taken with decimal points or without, and large or small numbers can be written by means of scientific (exponential) notation.
JavaScript Boolean
Boolean (logic) can have only two values: TRUE or FALSE.
JavaScript arrays
The array subscript is zero based, so the first item is [0], the second one is [1], and so on.
To create an array:
var cars=new Array ();
Cars[0]= "Audi";
Cars[1]= "BMW";
Cars[2]= "Volvo";
or (condensed array): var cars=new array ("Audi", "BMW", "Volvo");
or (literal array): var cars=["Audi", "BMW", "Volvo";
JavaScript objects
Objects are separated by curly braces. Inside the parentheses, the properties of the object are defined in the form of name and value pairs (name:value). Attributes are separated by commas:
var person={firstname: "Bill", LastName: "Gates", id:5566};
[Object (person) has three properties: FirstName, LastName, and ID. Spaces and lines do not matter. ]
Object properties are addressed in two ways:
Name=person.lastname;
name=person["LastName"];
Undefined and Null
Undefined This value indicates that the variable does not contain a value. You can empty a variable by setting the value of the variable to null.
Declaring variable types
var carname=new String;
var x= new number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
When you declare a new variable, you can use the keyword "new" to declare its type. JavaScript variables are objects. When you declare a variable, a new object is created.
************************************
************************************
JavaScript objects
All things in JavaScript are objects: strings, numbers, arrays, dates, and so on.
In JavaScript, objects are data that owns properties and methods.
Objects in JavaScript
var txt = "Hello";
[You have actually created a JavaScript string object.] The string object has built-in property length. For the above string, the value of length is 5. A string object has several built-in methods at the same time. ]
Creating JavaScript Objects
Almost all of the transactions in JavaScript are objects: strings, numbers, arrays, dates, functions, and so on.
Accessing the properties of an object
The syntax for accessing object properties is: Objectname.propertyname
Methods for accessing objects
You can call the method by using the following syntax: Objectname.methodname ()
************************************
A property is a value associated with an object. Method is an action that can be performed on an object. Properties and methods are often referred to as members of an object.
There are many different ways to create new JavaScript objects, and you can also add properties and methods to existing objects.
In object-oriented languages, functions that use the camel-case notation are very common. You will often see a function name such as SomeMethod () instead of Some_method ().
************************************
JavaScript Basics Knowledge Summary--[1]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
