文娱 体育--上海频道--人民网
Basic JavaScript is a course under the topic of JavaScript.
What you should know - HTML/XHTML
Basics -
- JavaScript is the most popular web page scripting language and is supported by almost every browser.
- It adds interactivity to your web pages.
- You can use only the tools already on your computer without the need to download any software.
- JavaScript uses the user's computer ("client")'s resources, not the server's resources. (The server is the big remote computer the web site is permanently hosted.) In other words, if the JavaScript program says a computation is to be made, the user's computer will do it.
- It is easy.
First Lesson
HTML scripts
Open up your text editor of choice and create a basic page (a basic note pad works great). Now I am going to teach you how to write on your webpage using JavaScript. Type the following into your text editor:
<html>
<head><title>Hello World!</title></head>
<body>
<script type="text/javascript">
document.write('Hello World!');
</script>
</body>
</html>
As you can see, our JavaScript instruction (document.write('Hello World!');) is added directly into your HTML by adding the <script> tag. Now save the text file with an HTML file extension. Use the "save as" function for your text editor and change the filename from something like "New Text Document.txt" to "Hello World.html". Use the .html in place of the .txt, .doc, .rtf, etc... Open your newly saved file in a browser. If all went well "Hello World!" will display in your browser as HTML content. If not, perhaps set your computers folder options to show filename extensions. Javascript and filename changes are not always available (by default).
To start off with, the <script type="text/javascript"> tag tells the browser that whatever comes between that tag and the coming </script> tag is script, and the type="text/javascript" tells it that it is JavaScript. Similarly, to use VBScript, you might use type="text/vbscript" instead of "text/javascript". For the purposes of this course, though, you should only ever need to use the JavaScript tag.
It is also important to note that the <script> tag is case sensitive. What this means is if you use lowercase letters in the tag, all the letters in the tag must be lowercase, and uppercase if you use any uppercase. For example, if you wrote
<ScRiPt TyPe="TeXt/JaVaScRiPt">
Not only would you waste a lot of time typing, but you would also confuse your browser.
You are probably wondering when I'm going to explain the rest of what you did. Well, document.write() is the JavaScript standard for writing text to the browser window. The 'document' clause refers to the HTML webpage (termed a document) as a whole; what follows ('.write()') is a command for the document object to carry out. In this case, you told the page to write the classic "Hello World" to the screen.
Second Lesson
This second lesson will introduce the topics of variables and operators.
Variables
One of the things JavaScript is used for is the manipulation of data. In JavaScript, pieces of data can be stored either in variables or arrays.
Variables are declared using the var keyword:
var numValue;
var textValue;
var binaryValue;
and can be given values when they are created:
var numValue = 3;
var textValue = "This is text.";
var binaryValue = true;
Multiple variables can even be declared at the same time:
var numValue = 3, textValue = "This is text.", binaryValue = true;
Variables in JavaScript are weakly typed, meaning that the types of individual variables are not determined by the programmer. Unlike many languages, JavaScript only provides a generic var rather than separate types for integers, floating point numbers, characters, and strings. For example, in the statement
var x = 0;
it is fairly obvious to any individual reading the code that x is a number. However, if the statement
x = x + "This is text that is probably not a number";
were to appear later in the code, JavaScript would change the variable to a text variable. This is one of the reasons that JavaScript is referred to as weakly typed; at any particular point in time, it is impossible to tell exactly what type a particular variable is.
Arrays
Arrays in most languages are a means of collecting variables so that they can be referred to by an index. This is usually a numerical index beginning at 0(i.e., 0,1,2,...), but does not necessarily have to be a number. Arrays are declared in several ways; they can be declared either explicitly, indicating the number of variables in the array:
var colors = new Array(7);
or not:
var colors = new Array();
In the last case, the programmer leaves the number of colors open-ended. This may allow them to be more flexible in the long run.
To use a particular variable within the array, simply indicate the index of the element using brackets:
colors[2] = "orange";
x = colors[7] ;
z = "The book's color is " + colors[5] + ".";
It was mentioned before that arrays can use indexes other than numbers. One example of this might be using an index based on text instead of numbers. We might wish to index on the names of various fruits to get their colors:
colors["lemon"] = "yellow";
colors["lime"] = "green";
colors["cherry"] = "red";
Programs can be made significantly more readable using this feature.
document.write("The color of a cherry is " + colors["cherry"]
+ ", but the color of a lime is " + colors["lime"]);
Operators
Arithmetic Operators
Operator
Description
Example
Result
+
Addition
x = 2
y = 2
x + y
4
-
Subtraction
x = 5
y = 2
x - y
3
*
Multiplication
x = 5
y = 4
x * y
20
/
Division
15 / 5
5 / 2
3
2.5
%
Modulus (division remainder)
5 % 2
10 % 8
10 % 2
1
2
0
++
Increment
x = 5
x++
6
--
(two adjacent hyphens)
Decrement
x = 5
x--
4
Assignment Operators
Operator
Example
Is The Same As
=
x = y
x = y
+=
x += y
x = x + y
-=
x -= y
x = x - y
*=
x *= y
x = x * y
/=
x /= y
x = x / y
%=
x %= y
x = x % y
Comparison Operators
Operator
Description
Example
==
is equal to
5 == 8 returns false
===
is equal to (checks for both value and type)
x = 5
y = "5"
x == y returns true
x === y returns false
!=
is not equal
5 != 8 returns true
>
is greater than
5 > 8 returns false
<
is less than
5 < 8 returns true
>=
is greater than or equal to
5 >= 8 returns false
<=
is less than or equal to
5 <= 8 returns true
Logical Operators
Operator
Description
Example
&&
and
x = 6
y = 3
(x < 10 && y > 1) returns true
||
or
x = 6
y = 3
(x == 5 || y == 5) returns false
!
not
x = 6
y = 3
!(x == y) returns true
String Operator
The string operator is used to concatenate two strings together. For example:
var x = "Hello " + "world!"
The above example would result in the variable x equaling "Hello world!".
Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
The syntax would be:
variablename = ( condition ) ? value1 : value2
For example:
greeting = ( visitor == "PRES" ) ? "Dear President " : "Dear "
value1 is the value of the expression if "condition" is fulfilled. value2 is its value in the case "condition" is not fulfilled. In the previous example, this value is stored in the variable "greeting". In the above example the browser checks to see if the variable visitor is set to PRES. If it is, it sets greeting to Dear President. If it is not, it sets greeting to Dear.