A script is a small piece of program that can add interactivity to the website. For example, a script could generate a pop-up alert box message, or provide a dropdown menu. This script could be written using Javascript or VBScript , various small functions, called event handlers can be written using any of the scripting language and then you can trigger those functions using HTML attributes.
The <script> tag is used to define a clientside script, such as a JavaScript.
EXTERNAL & INTERNAL SCRIPTS :
External Javascripts :
If the functionality to be defined is used in various HTML documents then it's better to keep that functionality in a separate Javascript file and then include that file in your HTML documents. A Javascript file will have extension as .js and it will be included in HTML files using script tag.
Example for External Javascript :
<!DOCTYPE html>
<html>
<head>
<title>External Script</title>
<script src="/html/External.js" type="text/javascript"/>
</script>
</head>
<body>
<h2>Example for External Script</h2> <input type="button" onclick="External(); " value="Click here" />
</body>
</html>
Internal Javascripts :
The script code can be written directly into the HTML document. script code is placed in header of the document using script tag .
Example for Internal JavaScript :
<!DOCTYPE html>
<html>
<head>
<title>Internal Script</title>
<script type="text/javascript">
function internal(){ alert("Internal Script"); }
</script>
</head>
<body>
<h2>Example for Internal script</h2> <input type="button" onclick="internal(); "value="Click here" />
</body>
</html>
EVENT HANDLER :
Event handlers are simple defined functions which can be called against any mouse or keyboard event.
Example for Event handler
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers </title>
<script type="text/javascript">
function EventHandler(){ alert("Event Handler Example"); }
</script>
</head>
<body>
<p onmouseover="EventHandler();"> Bring your mouse here to see the alert message</p>
</body>
</html>
THE NOSCRIPT TAG :
The Noscript tag provide alternative info to the users whose browsers don't support scripts and for those users who have disabled script option their browsers. This can be done using the Noscript tag
Example for Noscript tag :
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script> document.getElementById("demo") .innerHTML = "NOSCRIPT TAG!";
</script>
<noscript> Sorry, your browser does not support JavaScript!
</noscript>
<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
</body>
</html>
JAVASCRIPT VARIABLES
JavaScript variables are containers for storing data values. Variable should be assigned some values The ( = ) equal sign is called assignment operator . In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator, you assign the value of what is on the right side of the = sign to whatever is on the left side of the = sign, you cannot perform operations with empty variables.
JavaScript variables can hold numbers like 200 , and text values like "Tiger".
In programming, text values are called text strings.
Strings are written inside double or single quotes. Numbers are written without quotes.
If you put quotes around a number, it will be treated as a text string.
JAVASCRIPT IDENTIFIERS
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 @.
Names are case sensitive (L and l are different variables) Reserved words (like JavaScript keywords) cannot be used as names.
JAVASCRIPT OPERATORS
OPERATOR DISCRIPTION
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
== equal to
=== equal value and equal type
!= Not equal
!== Not equal value
> Greater than
< less than
>= Greater than or equal to
<= less than or equal to
? Ternary operator
Example for Javascript Variables
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, L, M, N, O are variables</p>
<p id="sample"></p>
<script> var L = 4; var M = 6; var N = L + M; var O = L * M; document.getElementById("sample") .innerHTML = O; </script>
<p>You can declare many variables in one statement, Start the statement with var and separate the variables by comma.</p>
<p id="sample 1"></p>
<script> var Animal = "tiger", weight = 200 ; document.getElementById("sample 1") .innerHTML = Animal + " weight is " + weight + " kg "; </script>
</body>
</html>
JAVASCRIPT FUNCTION
A JavaScript function is a block of code designed to perform a particular task ,a JavaScript function is executed when "something" invokes it (calls it).
When JavaScript reaches a return statement, the function will stop executing, if the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.
Javascript Function Syntax
function name(parameter1, parameter2){
code to be executed }
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs .
The parentheses may include parameter names separated by commas: (parameter1, parameter2, parameter3 ...)
The code to be executed, by the function, is placed inside curly brackets {}
Example For JavaScript Function
<!DOCTYPE html>
<html>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="sample"></p>
<script>
function myFunction(L, M) { return L * M; } document.getElementById("sample") .innerHTML = myFunction(6, 3);
</script>
<p>This example calls a function to convert from Seconds to Minutes:</p> <p id="sample1"></p>
<script>
function tominutes(f) { return f/60+" minutes "; } document.getElementById("sample1") .innerHTML = tominutes(120); </script> </body>
</html>
Boolean
The Boolean object represents two values, either "true" or "false", intended to represent the truth values of logic, very often in programming, you will need a data type that can only have one of two values, like YES / NO , ON / OFF , TRUE / FALSE.
Everything with a "Real" value is True
Everything without a "Real" value is False
The Boolean value of 0 (zero) is false
The Boolean value of -0 (minus zero) is false
The Boolean value of "" (empty string) is false
The Boolean value of undefined is false
The Boolean value of null is false
The Boolean value of NaN is false
Example for Boolean
<!DOCTYPE html>
<html>
<body>
<p>Display the value of Boolean (8 > 3):</p>
<button onclick="myBoolean()">
Try it
</button>
<p id="sample">
</p>
<script>
function myBoolean() { document.getElementById("sample") .innerHTML = Boolean(8 > 3); }
</script>
<p>Display the Boolean value of 0</p> <button onclick="myboolean()">Try it
</button>
<p id="sample1"></p>
<script> function myboolean() { var x = 0; document.getElementById("sample1") .innerHTML = Boolean(x); }
</script>
</body>
</html>
To be continue NEXT POST...
Thanks for reading.
Comments