Applied Component I
Unit II
•Introduction of java-script
•Java-script in web browser
•Forms and form elements
•String mani...
1.Introduction to java-script
1.Introduction to java-script
• Java-script is a powerful client level scripting
languages
• Java-script is not java
• Jav...
How to write java-script
<html>
<head>
<script language="javascript">
function call()
{
alert("do u have any problem! hold...
2.Client side java script
string objects
• The main purpose of String Object in
JavaScript is for storing text.
math objects
• The main purpose of m...
array object
• It is a array handler in javascript
Date object
• It gives access to date method, for displaying and
settin...
Java script in web browser
window Object
• The window object represents the browser’s
frame or window, in which your web page is
contained
• via the ...
history Object
• The history object keeps track of each page
that the user visits
• This list of pages is commonly called ...
• history.back();
– one page back
• history.forward();
– One page forward
• history.go(-3);
– three page back
• history.go...
location Object
• The location object contains lots of potentially
useful information about the current page’s
location.
–...
Navigate using location object
• You can navigate to another page in two ways
– location object’s href property
– location...
Navigator object
• navigator object contains lots of information
about the browser and the operating system
in which it’s ...
document Object—The Page Itself
• The document object has a number of
properties associated with it, which are also
arrays...
Events and event handling
• Basic html event
– onclick=”alert(‘You Clicked?’)”
– Onload=“”
– Onunload=“”
• window.document...
3.Forms and form elements
Forms and form elements
• document.forms.length;
– Returns count of form tags on document
• Document.form1.button1.value=“...
Windows and frames
• var newWindow =
window.open(myURL,”myWindow”,”width=12
5,height=150,resizable”);
• newWindow.resizeTo...
• newWindow.resizeBy(100,200);
– increase the size of newWindow by 100 pixels
horizontally and 200 pixels vertically
• new...
Dynamic html
• DHTML is the manipulation of an HTML
document after it is loaded into the browser,
and the most common way ...
Accessing Elements
• The Document Object Model (DOM) holds the
ability you need to find and access HTML
elements; the DOM ...
Changing Appearances
• document.getElementById(“divAdvert”).style.
color = “red”
Positioning and Moving Content
• document.getElementById("div1").style.left =
"100px";
• document.getElementById("div1").s...
4.String manipulation
Additional String Methods
• split() Method
– var myString = “A,B,C”;
– var myTextArray = myString.split(‘,’);
• replace() ...
• search() Method
– var myString = “Beginning JavaScript, Beginning
Java, Professional JavaScript”;
– alert(myString.searc...
• match() Method
– var myString = “1997, 1998, 1999, 2000, 2000,
2001, 2002”;
– myMatchArray = myString.match(“2000”);
– a...
Regular expression
• A regular expression is an object that
describes a pattern of characters.
• Regular expressions are u...
modifiers
Applied component i unit 2
Applied component i unit 2
Applied component i unit 2
Applied component i unit 2
Applied component i unit 2
Upcoming SlideShare
Loading in …5
×

Applied component i unit 2

171
-1

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
171
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Applied component i unit 2

  1. 1. Applied Component I Unit II •Introduction of java-script •Java-script in web browser •Forms and form elements •String manipulation
  2. 2. 1.Introduction to java-script
  3. 3. 1.Introduction to java-script • Java-script is a powerful client level scripting languages • Java-script is not java • Java-script is a best supported scripting language for many browsers • It can be written inside <script> tag or in file with extension .js • JavaScript is usually embedded directly into HTML pages • JavaScript is Case Sensitive
  4. 4. How to write java-script <html> <head> <script language="javascript"> function call() { alert("do u have any problem! hold on"); alert("lets start learning java-script"); } </script> </head> <body> <input type="button" value="simple button" onclick="call()"> </body> </html>
  5. 5. 2.Client side java script
  6. 6. string objects • The main purpose of String Object in JavaScript is for storing text. math objects • The main purpose of math object in javaScript is to perform math operation like sin,cos,tan operations
  7. 7. array object • It is a array handler in javascript Date object • It gives access to date method, for displaying and setting date
  8. 8. Java script in web browser
  9. 9. window Object • The window object represents the browser’s frame or window, in which your web page is contained • via the properties of the window object you can find out what browser is running, the pages the user has visited, the size of the browser window, the size of the user’s screen • The window object is a global object, which means you don’t need to use its name to access its properties and methods – window.alert(“Hello class!”); – Window.defaultStatus = “see your status bar”
  10. 10. history Object • The history object keeps track of each page that the user visits • This list of pages is commonly called the history stack for the browser • It enables the user to click the browser’s Back and Forward buttons to revisit pages • the history object has the back() and forward() methods. • The history object also has the go() method.
  11. 11. • history.back(); – one page back • history.forward(); – One page forward • history.go(-3); – three page back • history.go(3); – Three page forward
  12. 12. location Object • The location object contains lots of potentially useful information about the current page’s location. – it contain the URL (Uniform Resource Locator) for the page – server hosting – port number of the server connection – the protocol used
  13. 13. Navigate using location object • You can navigate to another page in two ways – location object’s href property – location object’s replace() method • replace() method removes the current page from the history stack and replaces it with the new page • href property simply adds the new page to the top of the history stack
  14. 14. Navigator object • navigator object contains lots of information about the browser and the operating system in which it’s running.
  15. 15. document Object—The Page Itself • The document object has a number of properties associated with it, which are also arrays. The main ones are the forms, images, and links arrays. – document.bgColor=“green”; – document.images.length • This will return how many image are on web page – document.images[“image1”]. • It is the array of images of name “image1”
  16. 16. Events and event handling • Basic html event – onclick=”alert(‘You Clicked?’)” – Onload=“” – Onunload=“” • window.document.links["anc1"].onclick = linkclick; – Special event handler has to be load after full html page is cached
  17. 17. 3.Forms and form elements
  18. 18. Forms and form elements • document.forms.length; – Returns count of form tags on document • Document.form1.button1.value=“hello”; – Changes the value of button1 • document.form1.txt1.focus(); – Takes focus on txt1(textbox) • document.form1.txt1.select(); – Selects all text in txt1(textbox)
  19. 19. Windows and frames • var newWindow = window.open(myURL,”myWindow”,”width=12 5,height=150,resizable”); • newWindow.resizeTo(350,200); – resize your window to 350 pixels wide by 200 pixels • newWindow.moveTo(100,400); – move it so it’s 100 pixels from the left of the screen and 400 pixels from the top
  20. 20. • newWindow.resizeBy(100,200); – increase the size of newWindow by 100 pixels horizontally and 200 pixels vertically • newWindow.moveBy(20,50); – move the newWindow by 20 pixels horizontally and 50 pixels vertically
  21. 21. Dynamic html • DHTML is the manipulation of an HTML document after it is loaded into the browser, and the most common way to manipulate the document is by changing the way HTML elements look
  22. 22. Accessing Elements • The Document Object Model (DOM) holds the ability you need to find and access HTML elements; the DOM is a hierarchical tree, and you can certainly climb it, inspect every branch and leaf, and find what you’re looking for • document.getElementById(“divAdvert”)
  23. 23. Changing Appearances • document.getElementById(“divAdvert”).style. color = “red”
  24. 24. Positioning and Moving Content • document.getElementById("div1").style.left = "100px"; • document.getElementById("div1").style.top = "200px";
  25. 25. 4.String manipulation
  26. 26. Additional String Methods • split() Method – var myString = “A,B,C”; – var myTextArray = myString.split(‘,’); • replace() Method – var myString = “The event will be in May, the 21st of June”; – myCleanedUpString = myString.replace(“May”,”June”);
  27. 27. • search() Method – var myString = “Beginning JavaScript, Beginning Java, Professional JavaScript”; – alert(myString.search(“Java”)); • alert box that occurs will show the value 10, which is the character position of the J in the first occurrence of Java
  28. 28. • match() Method – var myString = “1997, 1998, 1999, 2000, 2000, 2001, 2002”; – myMatchArray = myString.match(“2000”); – alert(myMatchArray.length); • instead of returning the position at which a match was found, it returns an array.
  29. 29. Regular expression • A regular expression is an object that describes a pattern of characters. • Regular expressions are used to perform pattern-matching and "search-and-replace" functions on text. • syntax – var txt=/pattern/modifiers; – var txt=new RegExp(pattern,modifiers);
  30. 30. modifiers
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×