0 ratings0% found this document useful (0 votes)
46 views26 pagesUnit I - Basics of JavaScript Programming - ForStudents
Notes of css
Uploaded by
Tejaswini NikamCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
0 ratings0% found this document useful (0 votes)
46 views26 pagesUnit I - Basics of JavaScript Programming - ForStudents
Notes of css
Uploaded by
Tejaswini NikamCopyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 26
Basies of JavaScript Programming Unit-1 Basics of JavaScript Programming Q. What is JavaScript? a) JavaScript is an object-based scripting language. b) JavaScript makes a web page more interactive. ©) Itallows you to implement dynamic features on web pages. 4) JavaScript can update and change both HTML and CSS. e) JavaScript can calculate, manipulate and validate data. 1.1 Features of JavaScrip' Q. List features of Java script. Answer: 1) JavaScript is an object-based scripting language. 2). Giving the user more control over the browser. 3) It Handling dates and time. 4) Itdetecting the user's browser and OS. 5) Itis light weighted. 6) Client-Side Technology. 7) JavaScript is a scripting language and it is not java 8) JavaScript is interpreter based scripting language. 9) JavaScript is case sensitive 10) JavaScript is object based language as it provides predefined objects. 11) Every statement in JavaScript must be terminated with semicolon, 12) Most of the JavaScript control statements syntax is same as syntax of control statements in C language. 13)An important part of JavaScript is the ability to create new fun Declare a function in JavaScript using function keyword. ions within scripts. Q. Explain features of Java script. 1) Client-Side Technology: JavaScript is a client-side technology. It is mainly used for giving client-side validation. It is an object-based scripting language. 2) Greater Control: It gives the user more control over the browser. Example — You can change the background color of the page as well as text on the browser's status bar. Here, the back button is implemented with JavaScript. Click it and you will return to the page from which you have arrived. 3) Detecting the User’s Browser and OS: The feature to detect the users browser and OS enables your script to perform platform-dependent operations. 4) Browser support: To access flash content, you need to install a flash plugin in your browser. But to use JavaScript, you don't have to use any plu; browsers have accepted JavaScript as a scripting language for them and provide integrated support for it. All you need to do is to handle some of the tasks that are in at all. This is because all Basies of JavaScript Programming dependent on the DOM (Document Object Model) of different browsers properly. 5) Performing Simple Calculation on the Client side: Using a JavaScript calculator, we perform simple calculations on the client side. 6) Validating The User’s Input: In the JavaScript calculator, try to type some lette ad of numeric input, you will get an error: Invalid input character. Note that JavaScript helps the brows server access. If the user makes a mistake in the input, the user will get an error message immediately. If the input information is validated only on the server, then the user would have to wait for the server's response. 7) Handling Date and time: The Date object is a built-in object in JavaScript that stores the date and time. It provides a number of built-in methods for formatting and managing that data. + perform output validation without wasting the user’s time by the web 1.2 Object Name, Property, method, Dot Syntax, Main event Object Name: 1) JavaScript is an object based scripting language. 2) It allows us to define our own objects and make our own variable types. 3) It also offers a set of predefined objects. 4) The tables, forms, buttons, images, or links on our web page are examples of objects. 5) The values associated with objects are properties and the actions that can perform on objects are methods or behavior. 6) Property associated to an object can be accessed as follows: Example for object and property using dot (.) Syntax: ObjectName.PropertyName Example: documentaitle; In the above example “document” is an object name accessing property of document “title” with “.” (Dot syntax) Property: 1) Properties are the values associated with a JavaScript object. 2). A JavaScript object is a collection of properties. 3) Properties can usually be changed, added, and deleted, but some are read only. 4) List of Some of the common properties of the document object are: a) Title - returns/ sets the title of the current document. ) Forms - retums a list of the FORM elements within the current document. ) Images - returns a list of the images in the current document 4) URL- returns a string containing the URL of the current document €) Location - to load another URL in the current document window. Syntax: ObjectName.PropertyName Example: document.title; In the above example “document” is an obj “(Dot syntax) name accessing property of document “title” with Basies of JavaScript Programming Dot Syntax: 1) For accessing properties and methods of an object we can use dot (.) operator. Syntax: ‘ObjectName.PropertyName or ObjectName.MethodName ‘Example: document.title: or document.write); In the above example “document” is an object name accessing property “title” and method “write” with “.” dot operator. Method: 1) Method is a function or a process associated with each object, 2) JavaScript methods are actions that can be performed on objects. 3) List of some methods and its purposes: a) open() - Opens a document for writing b) write() - Writes string/data to a document ©) writeln() - Writes string/data followed by a newline character to a document 4) close() - Closes a document stream for writing. ‘Syntax: ObjectName.MethodName Example: document.write(); My Page Titles/title> <inead> <body> <script var x = document.title; document.write("The title of this HTML document is </script></body>s/html>Output: The title of this HTML document is: My Page Title <b>" + x + "</b>";‘Main Event:1) JavaScripts interaction with HTMLor the browser manipulates a page.2) When the page loads, it is called an event.3) When the user clicks a button, that click too is an event.4) Other examples include events like pressing any key, closing a window, resizing awindow, etc.handled through events that occur when the user Basies of JavaScript Programming1.3 Values and Variables:Variables:1) A variable is an identifier that can store values.2) A JavaScript variable can hold a value of any data type.3) These values can be changed during the execution of the script.4) Once a value is stored in a variable it can be accessed using the variable name.5) Variable declaration is not compulsory, though it is a good practice to use variabledeclaration6) Generally keyword var is used to declare a variable.7) 4 Ways to Declare a JavaScript Variable:© Using varUsing const* Using nothing8) Always declare JavaScript variables with var, let, or const.is used in all JavaScript code from 1995 to 2015.10) The let and const keywords were added to JavaScript in 2015.11) If you want your code to run in older browser, you must use var.9) The var keywor12) If you think the value of the variable can’t change, use const.Syntax:var variable_name;var variable_name = value;let variable_name:const variable_name;Example:var x =5;letconst pi=3.14;x=5;Values:In JavaScript, there are six primitive data types:Boolean, Number, String, Null, Object, and Function1) Boolean* A Boolean represents only one of two values: true, or false.2) Number:+ There is only one type of Number in JavaScript.* Numbers can be written with or without a decimal pointExample: Basies of JavaScript Programmingvar a=5;var b=2.5;3) String:‘© Strings are used for storing text.‘* String is collection of characters.‘© Strings must be inside of either double or single quotes.‘In JavaScript, Strings contains numbers also.Example:Null has one value: null,* Ibis explicitly nothingExample:var nothing = null;5) Object:The object is a complex data type that allows you to store collections of data.© An object contains properties, defined as a key-value pair.Example:Form object is an object upon which some components such as button, checkbox etc. canbe placed and used,6) Function:‘© The function is a callable object that executes a block of code.* Since functions” are objects, so it is possible to assign them to variables, as shown in theexample below:Example:var message = function(){return "Hello World!’}Keywords:abstract arguments await boolean breakbyte case catch charconst continue | debugger default deletedo double else enum evalexport extends false final Basies of JavaScript Programmingfloat for function goto ifimplements | import in instanceof intinterface let long native newnull package private protected publicreturn short static super switchthrow this throws ansient trueuy typeof var void volatileyield1.4 Operators and ExpresOperators:Following types of operators in JavaScript:1) Arithmetic Operators2) Comparison (Relational) Operators3) Bitwise Operators4) Logical Operators5) Assignment Operators6) Special Operators1) Arithmetic Operators:Arithmetic operators are used to perform arithmetic operations on the operands. Thefollowing operators are known as JavaScript arithmetic operators.Operator | Description Example+ Addition a=10, b=20; c= a+b; c=30- Subtraction a=50, b=20;* Multiplication a=10, b=20; c= a * b; c=2001 Division 100, b=20; c= a/b: Modulus en% (Remainder) a=10,b=2; c= a % b; c=0+ Increment var a=10; a+; Now a= II- Decrement var a=10; a--; Now a=9 2) Comparison (Relational) OperatorsBasies of JavaScript Programming‘The JavaScript comparison operator compares the two operands. The comparison operatorsare as follows:Operator | DeseriionExample== | fsequalto; falseTdentical (equal and of sametype)1= | Notequal to 10!=20; trueNot Identical 0; false> Greater than 20>10; trueGreater than or equal to 20>=10; trueLess than20<10; false <= Less than or equal to20<=10; false3) Bitwise Operatorsfollows:The bitwise operators perform bitwise operations on operands. The bitwise operators are asOperator | DescriptionExample& Bitwise AND:20 | 20= =33) = 0Bitwise OR OR0 | 20= =33)* Bitwise XOR (10= =20 * 20= =33) = 0boa Bitwise NOT (~10) =-11<< Bitwise Left Shift (10<<2) = 40> Bitwise Right Shift (0>>2)>>> Bitwise Right Shift with Zero (10>>>2)=2 Basies of JavaScript Programming4) Logical OperatorsThe following operators are known as JavaScript logical operators. Logical operators areused to determine the logic between variables or values.Operator Description Example(10= =20 && 20= =33) = false&& Logical ANDi Logical OR! Logical Not 1(10==20) = true5) Assignment OperatorsOperator | Description Example= Assign 8210, b=20; c= a+b;+ ‘Add and assign a=10; a+=20; Now a= 30= Subtract and assign 2220; a-=10; Now a= 10* Multiply and ass a=10; a*=20; Now a= 200I Divide and assign 0; a/=2; Now a= 5Modulus and assign a=10; a%=2; Now a=0©) Special OperatorsThe following operators are known as JavaScript special operators.Operator Description(2). | Conditional Operator returns value based on the condition, It is like if-else: Comma Operator allows multiple expressions to be evaluated as single statement,delete | Delete Operator deletes a property from the object. Basies of JavaScript Programmingin In Operator checks if object has the given propertyinstanceof | checks if the object is an instance of given typenew creates an instance (object)typeof | Checks the type of object.void It discards the expression's return value.yield | Checks what is returned in a generator by the generators iterator.Expressions:1) An expression is a unit of code that a JavaSproduce a value.2) There are simple expressions like literal values and complexes which are built fromsimpler ones usually using operators.Primary Expressions:1) Primary expressions refer to stand alone expressions such as literal values, certain keywordsand variable values.2) The simplest expressions, known as primary expressions, are those that stand alone,3) They do not include any simpler expressions.‘pt interpreter can parse and compute toExample:1.23 // A number literal“hello” — ///A string literalIpattern/ // A regular expression literalObject and Array initializers:Object initializers:1) Object initializers are expressions whose value is a newly created object.2) These initializer expressions are sometimes called “object literals”.3) Unlike true literals, however, they are not primary expressions, because they include a numberof sub expressions that specify property and element values.Syntax:var object_name =Examplvar p= { x: 2.3, y:-1.2 }; // An object with 2 propertiesvar q= (5 1/ An empty object with no propertiesproperty:valuel, property:value2,...., property:valueN };Array initializer1) An array initializer is a comma-separated list of expressions contained within square Basies of JavaScript Programmingbrackets.2) The value of an array initializer is a newly created array.Example:Syntax:const array_name = [item 1, item2, .., elementN];var array_name = new Array(elementl, element2, ..., element);Example:var arr = [1,var array_nam3);new Array("CSS", "AJP", "STE");Function definition expression:1) A JavaScript function can also be defined using an expression,2) A function expression can be stored in a variable:var x = function (a, b){return a * b}3) After a function expression has been stored in a variable, the variable can be used as afunction.Example:var sum = funetion (x, y)(return x + y;}var z= sum (3,4); 7Property access expressions:1) A property access expression evaluates to the value of an object property or an arrayelement.2) JavaScript defines two syntaxes for property access:expression,identifierexpression [expression]3) The first style of property access is an expression followed by a period and an identifier.4) The expression specifies the object, and the identifier specifies the name of the desiredproperty.5) The second style of property access follows the first expression (the object or array)with another expression in square brackets.Example:var obj = {x:1, y:2}; obj.x // 1objf'y]/2var arr = (2, 3}arr{ 1] 7310 Basies of JavaScript ProgrammingInvocation expressions:1) An invocation expression is JavaScript’s syntax for calling (or executmethod2) It starts with a function expression that identifies the function to be called.3) The function expres followed by an open parenthesis, a comma-separated list ofzero of more argument expressions, and a close parenthe:Example:fun (arg);display);1g) a function or1.5 If Statement, if...else, if...else if, nested if statement:If statement:© It evaluates the content only if the expression is true. The syntax of JavaScript ifstatement is given below.Syntax:if(expression){Heontent to be evaluated}Flowchart of JavaScript If statement:TrueFalseBody of itExample:<HTML><HEAD><TITLE>Example of if Statements/TITLE></HEAD><BODY>4 Basics of JavaScript Programming<Seript>var a=20;iffa>10){document. write("value of a is greater than 10");}</Scrip></BODY></HTML>If...else Statement:It evaluates the content whether the conditiif-else statement is given below.Syntax:n is true or false. The syntax of JavaScriptifexpression){Heontent to be evaluated if condition is true}else{JIcontent to be evaluated if condition is falseFlowchart of JavaScript If statement:FalseBody of if Body of elseExample:<HTML><HEAD><TITLE>Example of iIse Statement 12 Basics of JavaScript Programming