Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Java Script

    Загружено:

    Sumanth Dontineni
    18 просмотров23 страницы
    JavaScript is a World Wide Web Scripting language that is understood by the browser when it is between the and tags. SCRIPT tag can be placed in HTML Document in 3 ways: 1.Immediate scripts. 2.Deferred Scripts.

    Исходное описание:

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOC, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    JavaScript is a World Wide Web Scripting language that is understood by the browser when it is between the and tags. SCRIPT tag can be placed in HTML Document in 3 ways: 1.Immediate scripts. 2.Deferred Scripts.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    18 просмотров23 страницы

    Java Script

    Загружено:

    Sumanth Dontineni
    JavaScript is a World Wide Web Scripting language that is understood by the browser when it is between the and tags. SCRIPT tag can be placed in HTML Document in 3 ways: 1.Immediate scripts. 2.Deferred Scripts.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 23

    JAVA SCRIPT

    CONTENTS:

    1. History of JavaScript. 2. What is JavaScript. 3. What can do JavaScript. 4. Statements and Functions. 5. String manipulations 6. Math functions. 7. Event Handlers. 8. Date Functions

    History of JavaScript:
    Netscape originally developed a language called LiveScript to a basic scripting capability to both Navigator and its webserver line of products;When it added support for Java applets in its release of Navigator2.0,Netscape replaced LiveScript as JavaScript. JavaScript supports both webserver and server scripting. BrowserScripts are used to create dynamic webpages that are more interactive,more responsive and more tightly integrated with Java applets.JavaScript supports these features by providing special programming capabilities,such as the ability to dynamically generate HTML and to define custom event-handling functions. What is JavaScript: JavaScript is a World Wide Web Scripting language that is understood by the browser when it is between the <SCRIPT> and </SCRIPT> tags.JavaScript was developed by NetScape Communications and SunMicrosystems. JavaScript is an essential tool for advanced web development. Embedding JavaScript in a HTML Document:(strucure of HTML Document with Java Script): JavaScript scripts are included in HTML documents via the <SCRIPT tag. Script tag can be placed in HTML Document is 3 ways. 1.Immediate Scripts. 2.Deferred Scripts.

    3.Hybrid Scripts. 1.Immediate Scripts:It indicates lines of Java Script that not only run when the browser loads the document,but also influence the layout of the page. Structure of HTML Document without JavaScript: <HEAD> <TITLE>Name of Webpage</TITLE> </HEAD> <BODY> </BODY> </HTML> Structure of HTML Docoment with Immediate Javascript: <HTML> <HEAD> <TITLE>NAME OF PAGE</TITLE </HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT> //WRITE CODE HERE </SCRIPT> </BODY> </HTML>

    2.Deferred Scripts:-

    A Deferred scripts that the brower sees when the document loads,but the wording of the script tells the browser not todo anything with the code other than to be aware that it exits. The primary reason you are encouraged to put deferred scripts into the HEAD is that they load into the browsers memory first-even before any visible content appears on the page. <HTML> <HEAD> <SCRIPT LANGUAGE=JAVASCRIPT> //Write script code here </SCRIPT> </HEAD> <BODY> //Staments write here </BODY> </HTML>

    3.Hybrid Scripts: Designing a page that require both immediate and deferred scripts.The immediate script lines help create the content of the page,deferred script lines react to users actions once the page has fully loaded. Immediate Script in the Body block calls a Deferred Script in the Head. <HTML> <HEAD> <SCRIPT LANGUAGE=JAVASCRIPT> //Write script lines </SCRIPT> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT>

    //write script lines </SCRTPT> </BODY> </HTML> Creating Variables : Var variablename; Assigning value to varoable: Assign a value to variable using assignment operator(=). Variablename = value; Or Var variablename=value; Ex: var range=20; Print a line or text: Print a text using document.write() method. Ex: document.write(HELLOW); <HTML> <HEAD> <TITLE>NAME</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT> document.write(hellow javascript); </SCRIPT> </BODY> </HTML> We must save the file .html or .htm and run the program using browser. ex.html O/p:

    NetScape Navigator -+ --------------------------------------------------------------------------------Address:- c:/msc216/ex.html --------------------------------------------------------------------------------hello javascript

    Expressions and Evalution: Var varname=100; Var varname1=varname-50; document.write(varname1); output :50

    Statements and Functions:Statements:JavaScript Statements cannot be used as variablenames and are used for specific tasks with in the script. 1.Comments. 2.Conditional Statements. 3.Loop Statements. 4.Object Manipulation Statements. 1.Comments:-

    Two types of comments. a) Single line comments(//). b) Multiple line comments(/* */). 2.Conditional Statements:Conditional Statements are performed based on the logic of the code.There is only one conditional Statement in JavaScript. Syntax:If..else Example: ifdemo.html <HTML> <HEAD> <TITLE>IF STATEMENT</TITLE> </HEAD> <BODY FONTCOLR=RED> <SCRIPT LANGUAGE=JAVASCRIPT><! a =100 b=50 if(a>b) { document.write(bignumber is:) document.write(a) } else { document.write(bignumber is:) document.write(b); } // --> </SCRIPT> </BODY> </HTML>

    OutPut: NetScape Navigator Address: c:/ifemo.html Bignumber is:100

    3.Loop Statements:A Loop is used to perfom a set of code statements repeatedly. a) While b) For whiledemo.html <HTML> <HEAD> <TITLE>WHILE STATEMENT</TITLE> </HEAD> <BODY FONTCOLR=RED> <SCRIPT LANGUAGE=JAVASCRIPT><! I =1; While(I<6) { document.write(I) ++I } // --> </SCRIPT> </BODY> </HTML OutPut:

    NetScape Navigator Address: c:/whiledemo.html 1 2 3 4 5 fordemo.html <HTML> <HEAD> <TITLE>FOR STATEMENT</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT> for(i=1; i<=5; i++) document.writeln(i); </SCRIPT> </BODY> </HTML> OutPut: NetScape Navigator Address: c:/fordemo.html 1 2 3 4 5

    With Statement:-

    The with statement is provoded as a convenience to eliminate retyping the name of an object that is to be referenced in a series of property references and method unvocations. Syntax: With(variablename) { Statement } example:with(Math) { result = pow(6,2) * PI } which is equal to below statement. Result=Math.pow(6,2)*Math.PI

    JavaScript Functions:One of the most important concepts you need to understand about JavaScript is Functions.A function is basically a segment of code that is called via an event handler or called from another function. Defining Functions:A Functin must be defined before it can be used. Function definitions are usally placed in the head of an HTML document . placing function definitions in the head,hower ,ensures that the definition occurs before the function is used. Syntax:Function function_name(arg1,arg2,) { Statements } Example:

    functiondemo.html <HTML> <HEAD> <TITLE>FUNCTIONS DEMO</TITLE> <SCRIPT LANGUAGE=JAVASCRIPT><! function biggest(n1,n2) { if(n1>n2) { document.write(biggest number is:) document.write(n1) }else { document.write(biggest number is:) document.write(n2) } } // --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT><! biggest(100,500) // --> </SCRIPT> </BODY> </HTML>

    OutPut: InterNet Explorer Location: c:/functiondemo.html Biggest number is:100

    Built-In JavaScript Functions (or) Conversion Functions:JavaScript provides 3 functions which are used to perform explicit type conversion. 1.eval() 2.parseInt() 3.parseFloat() Example:

    ex.html <HTML> <HEAD>


    <TITLE> BUILT-IN FUNCTIONS</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT><! document.write(eval(12.34*10)) document.writeln(parseInt(0x10)) document.writeln(parseFloat(5.4321e6)) // --> </SCRIPT> </BODY> </HTML> OutPut:Internet Explorer Location:- c:/ex.html 123.4

    16 5432100

    Arrays:JavaScript supports tow other variables types arrays and objects.These types are referred to as complex data types because they are built from the primitive string,numeric,logical types. Declaration: Arrayname=new Array(arraylength) Arrayname=new Array()

    Example: -

    arraydemo.html

    <HTML> <HEAD><TITLE>ARRAYS</TITLE></HEAD> <H1 ALIGN=CENTER>USING ARRAYS</H1> <SCRIPT LANGUAGE=JAVASCRIPT> name=new Array(2) name[0] = suresh name[1] = kumar document.write(name[0]) document.write(name[1]) // --></SCRIPT> </BODY> </HTML> OutPut:

    Internet Explorer Address: c:/arraydemo.html Using Arrays suresh kumar

    Math Functions:Math.PI Math.SQET1-2 Math.SQRT2 Math.LN2 Math.LN10 // Value=3.141 // Square root of //Square root of 2 //Natural log of 2 // Natural log of 10

    Math Object Methods:Math.abs(val) Math.min(val1,val2) Math.max(val1,val2) Math.sqrt(val1) Math.pow(val1,val2) Math.tan(val)

    String Manipulations:To convert from lower case to upper case and vice varsa. 1.String.toLowerCase() 2.string.toUpperCase() other functions: string.length //returns the how many characters in that. String.indexOf(searchString.[,startIndex])

    Ex:-name=bananas.indexOf(b) Output: 0 String.lastIndexOf(character) String.charAt(position)

    String Methods:String.big() String.blink() (or) <BLINK> </BLINK> String.fontSize(0 to 7) String.strike() (or) <STRIKE> </STRIKE> String.sup() (or) <SUP> </SUP> String.bold() (or) <B> </B> String.fontcolor() <FONT COLOR= > String.italics() (or) <I> </I> String.small() String.sub() (or) <SUB> </SUB>

    Date Object Type:The Date object type provides a common set of methods for working with dates and times. Methods:getDate() getDay() getHours() getSeconds() Date Constructer: Date() Example:datedemo.html <HTML> getTime() getYear() getMinutes() getMonth()

    <HEAD><TITLE>DATEDEMO</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE=JAVASCRIPT<! cd=new Date() document.write(cd.getMonth()+/+getDate()+/+getYear()) document.write(cd.getHours()+:+cd.getMinutes() +:+cd.getSeconds()) // --></SCRIPT> </BODY></HTML> Output:Internet Explorer Address: c:/datedemo.html 8/7/03 9:46:26

    Hyper Link:Link() method is used to create a link to the website or URL. Syntax:Name=string.link(URL)

    Example:Internet Explorer Address: c:/linkdemo.html Mail Room Rediffmail Yahoomail Hotmail

    Code:<HTML> <HEAD><TITLE>URL</TITLE></HEAD> <BODY> <H1>Mail Romm</H1> <SCRIPT LANGUAGE=JAVASCRIPT> name=Rediffmail.link(http://www.rediffmail.com) document(name) name1=Yahoo.link(http://www.yahoo.com) document(name1 name=Hotmail.link(http://www.hotmail.com) document(name) </SCRIPT> </BODY> </HTML>

    Event Handlers:An event handler executes a segment of code based on certain events,such as OnLoad and OnClick,occurring within the application. JavaScript event handlers can be divided into 2 types. 1.Interactive event handlers. 2.Non-interactive event handlers. 1.Interactive enevt handlers:It depends on the user interaction with the form or document. Ex:- onMouseOver is an interactive event handler,because it denpends on the users action with th emouse. 2.Non-interactive event handlers:-

    OnLoad is a non-interactive event handler,because it automatically executes JavaScript code without the users interaction. Below list the event handlers in JavaScript. Name OnAbort OnBlur OnChange OnClick OnLoad OnUnload OnSubmit OnMouseOut OnMouseOver OnFocus Used In image select,text,textarea select,text,textarea button,checkbox,radio,link,submit select,text,textarea window form link,area link,area select,text,image

    OnChange:The OnChange eventhandler executes JavaScript code when input focus exits the field after the user modifies its text. <HTML> <HEAD><TITLE>EXAMPLE</TITLE>

    <SCRIPT LANGUAGE=JAVASCRIPT> function valid(form) { var input=0; input=document.myform.data.value; alert(you have changed the value from 10 to+input); } </SCRIPT> </HEAD> <BODY FONT COLOR=RED> Try changing the value from 10 to something: <FORM NAME=myform> <INPUT TYPE=text NAME=data value=10 size=10 onChange=valid(this.form)> </FORM> </BODY> </HTML>

    OutOut: IE Address: c:/e.html Try changining the value from 10 to something: 20

    OnBlur: An OnBlur event handler executes javascript when input focus leaves the field of a text,textarea,or select. In windows you need to specify the event handler in the <body> attribute.

    <HTML> <HEAD><TITLE>EXAMPLE</TITLE> <SCRIPT LANGUAGE=JAVASCRIPT> function valid(form) { var input=0; input=document.myform.data.value; if(input<0) { alert(please input a value that is more than 0); } } </SCRIPT></HEAD> <BODY> Try inputing a value less than 0: <FORM name=myform <INPUT TYPE=text NAME=data value= SIZE=10 OnBlur=valid(this.form)> </FORM></BODY> </HTML> Output:Internet Explorer Address: c:/f.html Try inputing a value less than 0: -2

    onAbort:An onAbort event handler executes javascript code when the user aborts loading an image. <HTML> <HEAD><TITLE>EXAMPLE</TITLE></HEAD> <BODY>

    <B> STOP the Loading of this image and see what happens:</B> <IMG SRC=http://www.cup.com/cup.jpg onAbort=alert(you stopped the loading the image)> </BODY> </HTML> OutPut:Internet Explorer Address: c:/a.html STOP Loading this image and see what happens: JavaScript Alert You stopped loading the image OK onFocus:An onFocus event handler executes javascript code when a field receives input focus by the users tabbling in or by clicking but not selecting in the field. <HTML> <HEAD><TITLE>EXAMPLE</TITLE> <BODY> <H3>onFocus</H3> Put your mouse into the textbox: <FORM NAME=myform> <INPUT TYPE=text NAME=data VALUE= SIZE=10 onFocus=alert(You foused the textbox)> </FORM> </BODY> </HTML> OutPut: Internet Explorer Address: c:/f.html

    Put your mouse into the textbox. -----------------

    JavaScript Alert You foused the textbox OK

    onLoad:An onLoad event occurs when a window or image finishes loading.For windows this event handler is specified in the <BODY> attribute.For image in <IMG>. on.html <HTML> <HEAD>EXAMPLE</TITLE></HEAD> <SCRIPT LANGUAGE=JAVASCRIPT> <IMG NAME=myimage SRC=http://bec.ac.in/pho.jpg onLoad=alert(you loaded myimage)> </IMG> </SCRIPT></HTML> OutPut:Internet Explorer Address: c:/on.html JavaScript ALERT You loaded myimage OK

    SEMINAR REPORT ON

    JAVASCRIPT

    Presented By
    V.LAKSHMINARAYANA NO:16 M.Sc[cs] 2nd Year

    Вам также может понравиться