JavaScript
JavaScript is the programming
language of HTML and the Web.
JavaScript is Case Sensitive
Why Study JavaScript?
JavaScript is one of the 3 languages all web
developers must learn:1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
Internal JavaScript
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
Html:
<button type="button" onclick="myFunction()">Try it</button>
External JavaScript
myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
html:document.getElementById("demo").innerHTML = "Paragraph changed.";
}
<script src="myScript.js"></script>
<button type="button" onclick="myFunction()">Try it</button>
JavaScript
Display Possibilities
JavaScript can "display" data in different ways:
- Writing into an alert box, using window.alert().
- Writing into the HTML output using document.write().
- Writing into an HTML element, using innerHTML.
- Writing into the browser console,
using console.log().
window.alert()
<script>
window.alert(5
+ 6);
</script>
document.write()
<button onclick="document.write(5 + 6)">Try it</button>
innerHTML()
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
console.log()
<script>console.log(5 + 6);
</script>
JavaScript Can Change HTML Content
<p
id="demo">JavaScript can change HTML content.</p><button
type="button" onclick="document.getElementById('demo').innerHTML
= 'Hello JavaScript!'">Click Me!</button>
JavaScript Can Change Images
<img id="myImage"
onclick="changeImage()" src="pic_bulboff.gif"
width="100" height="180">
<p>Click the light bulb to
turn on/off the light.</p>
<script>function
changeImage() { var image =
document.getElementById('myImage'); if
(image.src.match("bulbon")) {
image.src = "pic_bulboff.gif"; } else { image.src =
"pic_bulbon.gif";
}}</script>
JavaScript Keywords
Keyword
|
Description
|
break
|
Terminates a switch or a loop
|
continue
|
Jumps out of a loop and starts at
the top
|
debugger
|
Stops the execution of JavaScript,
and calls (if available) the debugging function
|
do ... while
|
Executes a block of statements,
and repeats the block, while a condition is true
|
for
|
Marks a block of statements to be
executed, as long as a condition is true
|
function
|
Declares a function
|
if ... else
|
Marks a block of statements to be
executed, depending on a condition
|
return
|
Exits a function
|
switch
|
Marks a block of statements to be executed,
depending on different cases
|
try ... catch
|
Implements error handling to a
block of statements
|
var
|
Declares a variable
|
JavaScript Data Types
String, Number, Boolean, Array,
Object.
var length =
16;
// Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
JavaScript Variables
var x
= 5;------------------------------------ Numbers are
written without quotes.
var pi =
3.14;------------------------------- Numbers are written without quotes.
var person = "John
Doe"; --------------Strings are
written with quotes.
var answer = 'Yes I am!'; ----------------Strings
are written with quotes.
var person = "John
Doe", carName = "Volvo", price = 200; ---- multiple variable
Declarations
// comments.
/*comments*/
Adding Strings and
Numbers
x = 5
+ 5;--------------10
y = "5" + 5;-----------55
z = "Hello" + 5;----------Hello5
y = "5" + 5;-----------55
z = "Hello" + 5;----------Hello5
JavaScript Operators
JavaScript
Arithmetic Operators
|
||||||||||||||||
|
JavaScript
Assignment Operators
|
|||||||||||||||||||||
| Assignment operators assign values to JavaScript variables. | |||||||||||||||||||||
|
JavaScript
Comparison and Logical Operators
|
||||||||||||||||||||
|
Events
Event
|
Description
|
onchange
|
An HTML element has been changed
|
onclick
|
The user clicks an HTML element
|
onmouseover
|
The user moves the mouse over an
HTML element
|
onmouseout
|
The user moves the mouse away from
an HTML element
|
onkeydown
|
The user pushes a keyboard key
|
onload
|
The browser has finished loading
the page
|
String
Length
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
var sln = txt.length;
Special
Characters
var x = 'It\'s alright';
var y = "We are the
so-called \"Vikings\" from the north.";
o/p:
It's alright
We are the so-called "Vikings" from the north.
We are the so-called "Vikings" from the north.
Code
|
Outputs
|
\'
|
single quote
|
\"
|
double quote
|
\\
|
backslash
|
\n
|
new line
|
\r
|
carriage return
|
\t
|
tab
|
\b
|
backspace
|
\f
|
form feed
|
String
Methods
Method
|
Description
|
charAt()
|
Returns the character at the
specified index (position)
|
charCodeAt()
|
Returns the Unicode of the
character at the specified index
|
concat()
|
Joins two or more strings,
and returns a copy of the joined strings
|
fromCharCode()
|
Converts Unicode values to
characters
|
indexOf()
|
Returns the position of the
first found occurrence of a specified value in a string
|
lastIndexOf()
|
Returns the position of the
last found occurrence of a specified value in a string
|
localeCompare()
|
Compares two strings in the
current locale
|
match()
|
Searches a string for a match
against a regular expression, and returns the matches
|
replace()
|
Searches a string for a value
and returns a new string with the value replaced
|
search()
|
Searches a string for a value
and returns the position of the match
|
slice()
|
Extracts a part of a string
and returns a new string
|
split()
|
Splits a string into an array
of substrings
|
substr()
|
Extracts a part of a string
from a start position through a number of characters
|
substring()
|
Extracts a part of a string
between two specified positions
|
toLocaleLowerCase()
|
Converts a string to
lowercase letters, according to the host's locale
|
toLocaleUpperCase()
|
Converts a string to
uppercase letters, according to the host's locale
|
toLowerCase()
|
Converts a string to
lowercase letters
|
toString()
|
Returns the value of a String
object
|
toUpperCase()
|
Converts a string to
uppercase letters
|
trim()
|
Removes whitespace from both
ends of a string
|
valueOf()
|
Returns the primitive value
of a String object
|
JavaScript String
Methods
Finding a
String in a String
<p id="demo"></p>
<button
onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var str =
document.getElementById("p1").innerHTML;
var pos =
str.indexOf("locate");
document.getElementById("demo").innerHTML = pos;
}
</script>
lastIndexOf()
<button
onclick="myFunction()">Try it</button>
<p
id="demo"></p>
<script>
function
myFunction() {
var str =
document.getElementById("p1").innerHTML;
var pos =
str.lastIndexOf("locate");
document.getElementById("demo").innerHTML = pos;
}
</script>
The slice()
Method
<p
id="demo"></p>
<script>
var str = "Apple, Banana,
Kiwi";
document.getElementById("demo").innerHTML
= str.slice(7,13);
</script>
substring() or substr()
<p
id="demo"></p>
<script>
var str = "Apple, Banana,
Kiwi";
document.getElementById("demo").innerHTML
= str.substring(7,13);
</script>
replace()
<button
onclick="myFunction()">Try it</button>
<p
id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
var str =
document.getElementById("demo").innerHTML;
var txt =
str.replace("Microsoft","W3Schools");
document.getElementById("demo").innerHTML = txt;
}
</script>
toUpperCase():
<button
onclick="myFunction()">Try it</button>
<p
id="demo">Hello World!</p>
<script>
function myFunction() {
var text =
document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.toUpperCase();
}
</script>
toLowerCase():
<button
onclick="myFunction()">Try it</button>
<p
id="demo">Hello World!</p>
<script>
function myFunction() {
var text =
document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.toLowerCase();
}
</script>
concat()
<p
id="demo"></p>
<script>
var text1 = "Hello";
var text2 = "World!";
document.getElementById("demo").innerHTML
= text1.concat(" ",text2);
</script>
split()
Ex:
var txt = "a,b,c,d,e"; // String
txt.split(","); // Split on commas
txt.split(" "); // Split on spaces
txt.split("|"); // Split on pipe
txt.split(","); // Split on commas
txt.split(" "); // Split on spaces
txt.split("|"); // Split on pipe
<button
onclick="myFunction()">Try it</button>
<p
id="demo"></p>
<script>
function myFunction() {
var str = "a,b,c,d,e,f";
var arr = str.split(",");
document.getElementById("demo").innerHTML = arr[0];
}
</script>
Math.Random()
<button
onclick="myFunction()">Try it</button>
<p
id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
</script>
Math Object
Methods
Method
|
Description
|
abs(x)
|
Returns the absolute
value of x
|
acos(x)
|
Returns the arccosine of
x, in radians
|
asin(x)
|
Returns the arcsine of x,
in radians
|
atan(x)
|
Returns the arctangent of
x as a numeric value between -PI/2 and PI/2 radians
|
atan2(y,x)
|
Returns the arctangent of
the quotient of its arguments
|
ceil(x)
|
Returns x, rounded
upwards to the nearest integer
|
cos(x)
|
Returns the cosine of x
(x is in radians)
|
exp(x)
|
Returns the value of Ex
|
floor(x)
|
Returns x, rounded
downwards to the nearest integer
|
log(x)
|
Returns the natural
logarithm (base E) of x
|
max(x,y,z,...,n)
|
Returns the number with
the highest value
|
min(x,y,z,...,n)
|
Returns the number with
the lowest value
|
pow(x,y)
|
Returns the value of x to
the power of y
|
random()
|
Returns a random number
between 0 and 1
|
round(x)
|
Rounds x to the nearest
integer
|
sin(x)
|
Returns the sine of x (x
is in radians)
|
sqrt(x)
|
Returns the square root
of x
|
tan(x)
|
Returns the tangent of an
angle
|
Date Get
Methods
Get methods are used for getting a part of a date. Here are the
most common (alphabetically):
Method
|
Description
|
getDate()
|
Get the day as a number
(1-31)
|
getDay()
|
Get the weekday as a number
(0-6)
|
getFullYear()
|
Get the four digit year
(yyyy)
|
getHours()
|
Get the hour (0-23)
|
getMilliseconds()
|
Get the milliseconds (0-999)
|
getMinutes()
|
Get the minutes (0-59)
|
getMonth()
|
Get the month (0-11)
|
getSeconds()
|
Get the seconds (0-59)
|
getTime()
|
Get the time (milliseconds
since January 1, 1970)
|
DatePicker In Javascript
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
</head>
<body>
$(function() {
$( "#datepicker1" ).datepicker();
$( "#datepicker2" ).datepicker();
});
</script>
<input class="input" type="text" id="datepicker1" name="" placeholder="Arive date" />
<input class="input" type="text" id="datepicker2" name="" placeholder="Depart Date" />
</body>
</html>
No comments:
Post a Comment