Scribd
Upload
2 views61 pages

Unit 3 Notes Scripting & Networking

Scripting involves writing small programs, known as scripts, to automate tasks and enhance website interactivity using easier-to-learn scripting languages like JavaScript, Python, and PHP. JavaScript, created in 1995, is a lightweight, client-side scripting language essential for dynamic web content and can be used for both front-end and back-end development. It has various features, advantages, and limitations, including security risks and browser dependency, and is commonly used for form validation and creating interactive user experiences.

Uploaded by

shashank354
Copyright
© 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
2 views61 pages

Unit 3 Notes Scripting & Networking

Scripting involves writing small programs, known as scripts, to automate tasks and enhance website interactivity using easier-to-learn scripting languages like JavaScript, Python, and PHP. JavaScript, created in 1995, is a lightweight, client-side scripting language essential for dynamic web content and can be used for both front-end and back-end development. It has various features, advantages, and limitations, including security risks and browser dependency, and is commonly used for form validation and creating interactive user experiences.

Uploaded by

shashank354
Copyright
© 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
+ Scripting Scripting is a way to write small programs that automate tasks or make a website interactive. These programs are called scripts. They are written using scripting languages, which are easier to learn and use compared to full programming longuages. Examples of Scripting Languages: JavaScript; Adds interactivity to websites, like buttons or animations. Python: Used for automating tasks, data analysis, or web development. | PHP: Runs on servers to create dynamic web pages. Importance of Scripting: Makes websites interactive. Automates repetitive tasks. Handles dynamic website content. Types of Scripting: _ Client-Side Scripting: Runs on the user's browser (e.9., JovaScript. Used for form validation or animations. Server-Side Scripting: Runs on the web server (e.g., PHP, Python). Used for fetching data or managing user logins. 4 JavaScript: Introduction ) 1 | JavaScript is @ scripting language used to make web pages interactive. lie runs directly in the browser. It is a lightweight, interpreted | programming language. It is designed for creating network-centric jovelications. It is complementary to and integrated with Java, It is ijn and cross-platform, JavaScript is very easy to implement because Lit is integrated with HTML, History of JavaScript: Creation (1995): + Developed by Brendan Eich at Netscape in just 10 days. + Originally called Mocha, then LiveScript, and finally JavaScript. Early Use: + Introduced with Netscape Navigator to make web pages interactive. + Microsoft created a similar version called JScript for Internet Explorer. Standardization (1997): + JovaScript was standardized as ECMAScript CES) by ECMA. Major Updates: + ES3 (1999); Added error handling and regular expressions. + ESS (2009); Introduced modem features like ISON and strict i mode. _ + ES& (2015); Added let, const, classes, and modules. Modern JavaScript: + Nodes (2009); Enabled JavaScript to run on servers, + Became the foundation for frameworks like React, Angular, and Vue. Features of JavaScript: Client-Side Execution: Works on the users browser without needing a || server. . Dynamic Content: Can update the webpage without refreshing (e.g., live scores). . Lightweight: Easy to learn and use for simple tasks. . Event- Driven: Reacts to user actions like clicks or form submissions, Javascript consists of 3 parts: Core: In core js it includes operators, expressions, functions, arithmetic logics, ete. Client-Side: It is a collection of objects using which one can have . control aver the browser and user browser interation is possible Server-side: It is a collection of objects using which one can aceess database on the server. Why Use JavaScript? Front-End and Back-End Development: JavaScript can be used to develop both front-end Ce.g., jQuery) and back-end (e.g., Nodejs) development. No Special Setup Required: JavaScript runs directly in the browser, so no extra environment | setup is needed, Interactive and Beautiful Websites: Helps create visually appealing ond interactive websites with sliders, menus, animations, and games. Dynamic Content Updates: Allows updating parts of a webpage (e.g., comments) without refreshing the entire poge. _ Form Validation: Validates user input in forms before sending it to the server. © Console-Like Websites: |. Can create websites with a console-like appearance and provide the |, best graphical user experience. et Wide Application: Used in mobile app development, desktop app development, and game _. development. © Frameworks and Libraries: ., Offers many ready-to-use frameworks and libraries Ce.g,, React, | Angular) to speed up software development and reduce time to market, } r | Advantages of JavaScript: \ e Runs on the Browser: | No need for installation or special setup; it works directly in i} web browsers. © Interactive Websites: I Helps create dynamic and engaging user experiences, like i forms, games, and animations. © Fast Execution: I Runs quickly because it is executed directly on the client’s I browser, . Cross-Platform: | Works on various platforms and devices, including desktops, | tablets, and mobile phones. e Versatile: lI Can be used for front-end (webpages) and back-end | development (e.g., Node,js). e Rich Ecosystem: | Offers many frameworks and libraries (e.g., React, Angular) for faster development. Limitations of JavaScript | Security Risks: || Code runs on the client side, making it vulnerable to attacks | like cross-site scripting (XSS). Browser Dependency: __ Different browsers may interpret JavaScript differently, leading to compatibility issues. No Multithreading: JavaScript is single-threaded, which may limit performance for complex tasks, Debugging Challenges: | Debugging JavaScript code can be harder compared to other | I programming languages. Client-Side Only: While it is great for client-side tasks, it relies on additional tools like Node,js for server-side work Comments in javascript: _ Single-line Comment: « Use // for a single-line comment. « It comments out everything from // to the end of the line. « // This is a single-line comment . Multi-line Comment: « Use /° ‘/ for multi-line comments. + It comments out everything between /° and ‘*/. « I This isa multi-line comment spanning multiple lines */ i ~ ~ ~ = Syntax of JavaScript Here are some basic examples to understand JavaScript syntax: Output a Message: [Link] Welcome to JavaScript!'); OR a [Link] Welcome to JovaScript!"); Declare Variables: - var: Declares a variable that can be updated and redeclared. - let: Declares a variable that can be updated but not redeclared in the same scope. + const: Declares a variable that cannot be updated or redeclared. let name = “Aarohi’; const. country = “India’; var city="Delhi’; _ [Link]); —//Aarohi [Link]); india Perform Arithmetic Operations: let a = 10, b= S; - [Link] Ca + b); // Adds the numbers (15) [Link] (a - b); // Subtracts (5) [Link] Ca * b); // Multiplies (50) [Link] (a / b); // Divides (2) [Link] (a % b); // Remainder (0) —=r © Conditional Statement Cif-else): ) let score = 30; [Link] You passed!"); 3 else £ [Link]'You failed.'); = ae | if Cscore > 50) £ | i f ! e Function: s | | | | r Difference b/w Java and Javascript: { Java greetC Aarahi') function greet(name) £ [Link] Hello,” + name + "!"); Javascript “Java is 0 programming language | Java is an object-oriented ] language. | Java is a strongly typed language “ond the type checking can be | done at the time of compilation | In java objects are static. It | means the number of data _ members and methods are fixed | at the compilation time. 1 "Javascript isa scripting language Javascript is not an object- oriented language. The object in js is far diff. from obj used in c++, Java Variables does not need to be declared before their names. Checking can be done dynamically. In js, objects dynamic. You can change your data members and methods at the time of compilation > How to write Javascript: JavaScript con be written in different ways in an HTML document. It | .can be added externally, internally, or inline. Below is a simple explanation of each method: a. External JavaScript This method involves writing JavaScript code in a. separate file and inking it to your HTML document. Vv Steps: 1, Create a JavaScript file (e.g., scripts). 2, Link this file in the HTML using the Welcome to External JavoScript JavaScript File Cscript,js): consolelogC This is external JavaScript!"); 2. Internal JavaScript i This method involves writing JavaScript directly inside 1 the || I ( Welcome to Internal JavaScript | I | Write o program in html using JavaScript performing the addition and | multiplication of two numbers, Write a program in HTML using JavaScript to display “How are you?” using functions r Data Types in JavaScript | | JavaScript has two categories of data types: Primitive and Non- | Primitive. . Primitive Data Types String: Used for text, enclosed in single C...) or double C...') quotes. let name = “Alice’: Number; Represents both integers and floating-point numbers. let age = 30; Boolean: Holds one of two values: true or false. let isActive = true; Undefined: A variable that has been declared but not yet assigned a value. let notAssigned; [Link]); // Output: undefined Null: Represents the intentional absence of any object value. i let emptyValue = null; b. Non-Primitive Data Types: Object: A collection of key-value pairs. let person = £ name: “Alice’, age: 25 3; Array: A list of values, stored in an indexed collection, let colors = Cred’, ‘green’, “blue']; + JavaScript operators: In JavaScript, operators are symbols used to perform operations on \ values or variables. Here are the main types: Arithmetic Operators: Used for basic mathematical operation(+,- 1./,%). | Assignment Operators: Used to assign values to variables(=, 32/22. Comparison Operators: Used to compare values and return true or false. = $,2,5=,2=), | Logical Operators: && CAND): Returns true if both conditions are | true. IL COR): Retums true if at least one condition is true. I! (NOT); Reverses the logical state. Increment and Decrement Operators Used to increase or decrease values by |: ++ Cincrement): Adds | to the value, -- (Decrement): Subtracts | from the value, Ternary Operator: A shorthand for an if-else statement let age = 13; let canVote = (age >= 18) ? "Yes" : No’; i ~ ~ ~ = “Pop-up Boxes in JavaScript JavaScript provides three types of pop-up boxes to interact with the user: Alert, Confirm, and Prompt. alert) _« Used to show a simple message to the user, + It only has an “OK’ button to dismiss the message. « dlert( This is an alert message!"); a contirmO + Displays a message with “OK and ‘Cancel’ buttons. « let result = confirmC’Do you want to continue?'); [Link](result); // Outputs: true COK) or false (Cancel) promptQ): « Displays a dialog box that asks the user for input. + It returns the input value as a string, or null if "Cancel" is clicked. a + let name = promptC What's your name?'); [Link]); // Outputs: user input or null if Cancel « It returns true if OK’ is clicked, and false if "Cancel" is clicked, i i i Q brite @ program in HTML using JavaScript to display pop-up. boxes like when user agree it will give an alert message while user not agree it will show up from box containing its name as.a entry and show an alert message containing Hi and name. = CS : let result = contirmC Do you agree?'); if Cresult) € alertC You agree!"); — else £ let name = promptCYou don't agree. Please enter your name:"); alertCHi,” + name); 3 __ a toile | & Documents .In JavaScript, the document object allows interaction with a webpage's HTML content. Part of the Document Object Model (DOM), it enables reading, modifying, and managing HTML elements. When an “HTML document loads in a browser, the browser automatically creates . the document object as the root of the page's structure, > Common Uses of the document Object: e Accessing Elements: You can access HTML elements using methods like getElementByld, getElementsByClassName, or querySelector, © Manipulating Elements: JavaScript can change content, attributes, styles, and more to create a dynamic web experience using innerHTML, textContent, or value Cfor input fields) using . e Event Handling: The document object also allows JavaScript to respond to events, like clicks or keypresses, and perform actions accordingly. + Writing on the document: © [Link]: | Writes the given HTML content or text directly to the document. [Link]): | Writes the given HTML content or text directly to the document and | adds a new line at the end. _ Example: [Link]'
")
[Link] Hello’)
[Link] World’)
[Link]
”) SS} + Properties: © [Link]: Refers to the element of the document and used to access or | manipulate the root element of the document. | _ Example: [Link]([Link]); e [Link]: || Refers to the element of the document and allows access to or manipulation of the section of the HTML. Example: I [Link]); ¢ [Link]: | Represents the title of the HTML document and used to get or set “the title using this property. Example: | [Link]([Link]); I [Link] = “ Javascript’; // Changes the title ¢ [Link]: | | Refers to the element of the document and allows access to or modification of the content within the tag. Example: [Link]); © [Link]: Provides the complete URL of the document currently loaded, _ Example: document writeCdocument, URL); 7 Methods: © [Link]): Returns a single element with the specified value of the id attribute. It is used to access a unique element directly. Example: let element = [Link] myld); [Link](className); Returns a live HTMLCollection of elements with the specified class name. It is used to access multiple elements sharing the same class. _ Example: let elements = document getElementsByClassNameC myClass'); [Link](tagName): Retums a live HTML collection of elements with the specified tag nome. It is used to access all elements of a specific type, €.g., all or elements, Example: let paragraphs = [Link]'); [Link](name): | Returns all the elements with the specified value of the name , attribute. It is commonly used for form elements like or . Example: let inputs = document getElementsByNameC username’); Note: All these methods Cexcept getElementsByName) return live collections, meaning they update automatically if the DOM changes. Example of Document: Document_Example a Welcome

Change Content So Oo 4 Forms Forms allow users to interact dynamically with web pages and submit. | |. data to the server. JavaScript Form Validation ensures inputs meet | specific criteria before submission, improving data quality and user experience, It is used to check required fields, validate email formats, ensure possword strength, and prevent empty submissions, allowing only valid date to be sent to the server. Role of JavaScript in Forms The use of JavaScript with Forms enhances interactivity and responsiveness by: Accessing and manipulating form elements, | Validating input before submission. Handling form events dynamically. Accessing Forms We may access forms by their index or name. Examples: let form = [Link] let form = [Link][0] Step-by-Step Guide to JavaScript Form Validation: HTML Form Structure: Start with a simple HTML form. JavaScript Validation Function: Create JavaScript functions to validote | each form field. Event Handling: Attach the validation functions to the form's onsubmit event to check the data before submission. 7 Example: Validating a Registration Form: Validate fields for a name, email, and password. Form Validation Example_ eee : Registratio

Name:

email’ name="email’>



_