View source for JavaScript/Basic JavaScript

You do not have permission to edit this page, for the following reason:

Your IP address is in a range that has been blocked on all Wikimedia Foundation wikis.

The block was made by ‪JJMC89‬. The reason given is Open proxy/Webhost: See the help page if you are affected .

Start of block: 23:46, 19 April 2024
Expiry of block: 23:46, 19 April 2027

Your current IP address is 18.116.64.101. The blocked range is 18.116.0.0/16.

Please include all above details in any queries you make.

If you believe you were blocked by mistake, you can find additional information and instructions in the Stewards Block Wizard.

You can view and copy the source of this page.

<noinclude>{{Header}}</noinclude>

==Basics==
*JavaScript is a popular web-page scripting language, and is supported by almost every [[Browse|browser]].<ref>http://en.wikipedia.org/wiki/Comparison_of_web_browsers#JavaScript_support</ref><ref>Flanagan, David JavaScript:The Definitive Guide. O'Reilly Media, 2006 , p. 1.</ref>
*It adds interactivity to [[w:Internet technologies|web-technology]] pages.<ref>Flanagan, David JavaScript:The Definitive Guide. O'Reilly Media, 2006 , p. 236.</ref> 
*You can use editing tools on your device or within supporting software.
*JavaScript can work with the user's (client) resources or server resources.
*It is easy to learn the basics.

===Step One: HTML & Scripts===

{{Activity
| 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:
| <syntaxhighlight lang="html4strict">
<html>
        <head><title>Hello World!</title></head>
 	<body>
 		<script type="text/javascript"></syntaxhighlight>
 			<syntaxhighlight lang="javascript">document.write('Hello World!');</syntaxhighlight><syntaxhighlight lang="html4strict">
 		</script>
       </body>
</html>
</syntaxhighlight>

As you can see, our JavaScript instruction (<code>document.write('Hello World!');</code>) is added directly into your HTML by adding the <code><script></code> 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 "<code>New Text Document.txt</code>" to "<code>Hello World.html</code>". 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).
}}
Video Resources: [http://thenewboston.org/watch.php?cat=10&number=1 Javascript 1 ]
 
To start off with, the <code><script type="text/javascript"></code> tag tells the browser that whatever comes between that tag and the coming <code></script></code> tag is script, and the <code>type="text/javascript"</code> tells it that it is JavaScript. Similarly, to use [[w:VBScript | VBScript]], you might use <code>type="text/vbscript"</code> instead of <code>"text/javascript"</code>. 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 <code><script></code> 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, <code>document.write()</code> 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 ('<code>.write()</code>') is a command for the document object to carry out.  In this case, you told the page to write the classic "<code>Hello World</code>" to the screen.

====Comments====
<syntaxhighlight lang="javascript">//(Brian Crowder) A 'Hello source-reader' contribution.</syntaxhighlight> 
.

===Step Two: 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 <code>x</code> 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.

===Step Three: Operators===
===== Arithmetic Operators =====
{| border=1 cellspacing=0 cellpadding=5
| '''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 % 4

10 % 2 
| 1
2

0
|-
| ++
| Increment
| x = 5
x++
| 6
|-
| --
''(two adjacent [[w:Hyphen|hyphens]])''
| Decrement
| x = 5
x--
| 4
|}

===== Assignment Operators =====
{| border=1 cellspacing=0 cellpadding=5
| '''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 =====
{| border=1 cellspacing=0 cellpadding=5
| '''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 =====
{| border=1 cellspacing=0 cellpadding=5
| '''Operator'''
| '''Description'''
| '''Example'''
|-
| &&
| and
| x = 6
y = 3

(x < 10 && y > 1) returns true
|-
| <nowiki>||</nowiki><!-- Fixed -->
| or
| x = 6
y = 3

(x == 5 || y == 5) returns false
|-
| !
| not
| x = 6
y = 3

<nowiki>!(x == y) returns true</nowiki> <!-- Fixed. -->
|}

===== String Operator =====
The string operator is used to [[w:Concatenate|concatenate]] two strings together. For example:

<blockquote><code> var x = "Hello " + "world!" </code></blockquote>

{{Activity
| Repeat our first activity with a variable and operator as shown below:
| <syntaxhighlight lang="html4strict">
<!DOCTYPE html>
<html>
        <head><title>Hello World, Again!</title></head>
 	<body>
 		<script type="text/javascript"></syntaxhighlight>
 			<syntaxhighlight lang="javascript">
                        var x = "Hello " + "world!" 
                        document.write(x);</syntaxhighlight>
                <syntaxhighlight lang="html4strict">
 		</script>
       </body>
</html>
</syntaxhighlight>

The above example results in the variable x equaling "Hello world!". 
*Save the document as helloAgain.html and open it in a browser.
}}

===== Conditional Operator =====
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

The syntax would be:HTML

<pre> variablename = ( condition ) ? value1 : value2 </pre>
''value1'' is the value of the expression if "''condition''" is fulfilled. ''value2'' is its value in the case "''condition''" is not fulfilled. 
For example:
<blockquote><code> var x = "Hello " + "world!" </code></blockquote>

{{Activity
| Repeat our activity with a conditional operator that assigns a value to a variable as shown below:

| <syntaxhighlight lang="html4strict">
<!DOCTYPE html>
<html>
        <head><title>Hello World, Again!</title></head>
 	<body>
 		<script type="text/javascript"></syntaxhighlight>
 			<syntaxhighlight lang="javascript">
                        var x = "hello"; 
                        var towrite = ( x == "hello")? "Hello world, again!" : "Look at the state of that!" 
                        document.write(towrite);

//The example results in "Hello world, again!" because x is "hello" and condition "Hello world, again!" is logically true. 
</syntaxhighlight>
                <syntaxhighlight lang="html4strict">
 		</script>


<p>
Save the document as helloToo.html and open it in a browser. 
Change the line var x = "hello" to var x = "punk" and use CRTL + S to save. 
Run it in your browser.
</p>
       </body>
</html>
</syntaxhighlight>
}}

== Semicolons ==
JavaScript require semicolons to be inserted to end statements and expressions.<ref>{{Cite web|url=https://sebhastian.com/the-proper-guide-to-semicolon-in-javascript/|title=The Proper Guide to Semicolon in JavaScript|last=Sebhastian|first=Nathan|website=Nathan Sebhastian|language=en|access-date=2022-08-18}}</ref> When you forget to add semicolon between commands, JavaScript adds it automatically so that it knows where to start the next command.


The rules of JavaScript automatic semicolon insertion are as follows:

# When the next line starts with a closing braces <code>}</code> , closing the current block
# When there is a <code>return</code> statement without a semicolon
# When there is a <code>break</code> statement without a semicolon
# When there is a <code>throw</code> statement without a semicolon
# When there is a <code>continue</code> statement without a semicolon
# When the final statement of the code is reached (The last line on the JavaScript file)

==References==
{{reflist}}

<noinclude>
{{CourseCat}}
{{Footer}}
</noinclude>

Pages included on this page:

JavaScript (edit)
Template:Activity (edit)
Template:BookCat (view source) (semi-protected)
Template:Cite web (edit)
Template:CourseCat (edit)
Template:FULLBOOKNAME (edit)
Template:Footer (edit)
Template:Header (edit)
Template:Main other (edit)
Template:Reflist (view source) (protected)
Template:Reflist/styles.css (edit)
Module:Check for unknown parameters (edit)
Module:Citation/CS1 (view source) (protected)
Module:Citation/CS1/COinS (view source) (protected)
Module:Citation/CS1/Configuration (view source) (protected)
Module:Citation/CS1/Date validation (view source) (protected)
Module:Citation/CS1/Identifiers (view source) (protected)
Module:Citation/CS1/Utilities (edit)
Module:Citation/CS1/Whitelist (view source) (protected)
Module:Citation/CS1/styles.css (view source) (protected)
Module:Printable version (edit)
Module:TNT (view source) (semi-protected)

Return to JavaScript/Basic JavaScript.

Retrieved from "https://en.wikiversity.org/wiki/JavaScript/Basic_JavaScript"