Web Development Reviewer - PDF

4. Ajax (Asynchronous JavaScript and What is Web Design? XML) ○ Loads back-end data while the A process of planning, creating, and user interacts with other parts maintaining...

4. Ajax (Asynchronous JavaScript and What is Web Design? XML) ○ Loads back-end data while the A process of planning, creating, and user interacts with other parts maintaining websites. of the webpage. 5. Server Applications Key Components of Web Design: ○ Using Node.js, JavaScript can build fast and scalable 1. HTML (Hypertext Markup Language) server-side applications. ○ Defines the content and 6. Game Development structure of web pages. ○ JavaScript libraries like p5.js 2. CSS (Cascading Style Sheets) and Three.js help create ○ Specifies the layout and interactive games. design of web pages (fonts, 7. Mobile Applications colors, spacing). ○ Frameworks like React Native 3. JavaScript use JavaScript to create ○ Programs the behavior of web mobile apps. pages (interactivity). 8. Machine Learning ○ Libraries like ML5.js enable What is JavaScript? machine learning tasks within JavaScript. A high-level, interpreted programming 9. IoT (Internet of Things) language used for creating interactive ○ JavaScript adds functionality web pages. to devices like smartwatches. Runs in the browser, providing 10. Data Visualization dynamic content updates without ○ Libraries like D3.js create reloading the page. visual representations of data. Initially named "LiveScript" but rebranded to associate with Java's JavaScript Features popularity at the time. 1. Full Integration with HTML/CSS Why Learn JavaScript? ○ Seamlessly integrates with both HTML and CSS for web JavaScript is essential for web development. development, making web pages 2. Ease of Use interactive and responsive. ○ Simple syntax for basic tasks, It allows developers to add dynamic yet powerful enough for behaviors, validate user input, and complex functionality. enhance user experience. 3. Cross-Browser Support ○ JavaScript is supported by all Applications of JavaScript major browsers and enabled by default. 1. Client-Side Validation ○ Verifies user input before submitting it to the server. JavaScript as an Object-Oriented Language 2. Manipulating HTML Pages JavaScript provides four key Object-Oriented ○ JavaScript can dynamically Programming (OOP) principles: add, delete, or change HTML elements. 1. Encapsulation 3. User Notifications ○ Grouping related data and ○ Provides dynamic pop-ups for functions together in an user notifications (alerts, object. prompts). ○  2. Aggregation 4. Function Constructor ○ Storing one object inside another object. let name = new Function('param', 3. Inheritance 'statements'); ○ One class can inherit properties and methods from another. 4. Polymorphism What is JavaScript? ○ Writing functions or methods that work in different contexts. JavaScript is a versatile scripting language used to make web pages dynamic and interactive. It enables features like menus, Working with Objects in JavaScript animations, and dynamic backgrounds to improve user engagement. Object Properties: JavaScript Core Concepts Properties store data and can be either primitive data types (numbers, 1. Variables strings) or other objects. Example: Variables store data that can be objectName.propertyName = manipulated later. propertyValue; Declared using var, let, or const. Object Methods: Methods are functions attached to an object, allowing the object to perform actions or have actions performed on 2. Data Types it. ○ Accessed using this Data types define the kind of data a keyword inside the object. variable can hold. JavaScript Functions 1. Function as a statement function name(param) { statements } 2. Function as an expression 3. Functions let name = function(param) { Functions are reusable blocks of code statements } designed to perform specific tasks. They can accept inputs (parameters) 3. Arrow Function and return outputs. const name = (param) => { statements } 4. Loops 3. Use let and const ○ Use let for variables that will Loops allow code to be executed change, and const for repeatedly. Common loops are for, constants that should not be while, and do...while. reassigned. 4. External Scripts ○ Place JavaScript in a separate file for better organization and performance. 5. Objects What is an Object? Objects are collections of key-value pairs and are essential for In JavaScript, objects are containers organizing data in JavaScript. for storing data and functionality (methods). Objects can hold properties (values) and methods (functions). Objects are key to organizing and structuring data in JavaScript. Object properties can be any data type: Primitive types (e.g., string, number, boolean) Abstract types (e.g., other objects) JavaScript in Web Development Properties store the data in key-value pairs. JavaScript works with HTML and CSS to create dynamic web pages. objectName.propertyName = It can modify content, structure, and propertyValue; styling based on user actions or events. let car = {name: "Fiat", model: "500", color: JavaScript allows for interactive "white"}; features like form validation, animations, and data fetching using AJAX or Fetch API. You can access object properties in two Best Practices in JavaScript ways: 1. Descriptive Names 1. Dot notation ○ Use meaningful names for variables and functions to person.lastName; make the code more 2. Bracket Notation understandable. 2. Code Commenting person["lastName"]; ○ Comment your code to explain its purpose, but keep it concise. Object Methods Using an Object Constructor A constructor function can be used to Methods are functions that belong to define objects with shared structure. an object and allow the object to perform actions. A method is like a function, but it is attached to an object. Example: let car = { name: "Fiat", model: "500", Best Practices for Using Objects start: function() { in JavaScript return "Car started"; Objects store both data (properties) and behavior (methods). } Understanding objects is fundamental to mastering JavaScript. }; ○ Properties can hold values, functions, or even other Note on Methods: objects. ○ Methods are functions stored In methods, the keyword this refers as properties within an object. to the current object. You can use this.propertyName to What is jQuery? access an object's properties from within its methods. jQuery is a lightweight JavaScript library that simplifies programming for Defining Objects in JavaScript web developers. Its motto is “write less, do more.” 1. Using an Object Literal ○ An object literal is a simple jQuery Syntax way to define an object with key-value pairs inside curly The basic syntax of jQuery is: braces {}. javascript $(selector).action(); ○ $(): This function defines jQuery. ○ selector: Selects the HTML element(s). ○ action(): Performs an action 2. Using the new Keyword on the selected element(s). You can create an object using the new Object() constructor. jQuery Selectors jQuery Fading Effects jQuery selectors allow you to select and jQuery provides several methods to fade manipulate HTML elements based on: elements in and out of view. Element Selector: Selects elements fadeIn(): Gradually makes an element by their tag name. visible. fadeOut(): Gradually hides an $("p").hide(); element. fadeToggle(): Toggles between ID Selector: Selects elements by their fadeIn() and fadeOut() depending on ID. the current visibility. fadeTo(): Fades an element to a $("#header").show(); specified opacity (value between 0 and 1). Class Selector: Selects elements by their class. jQuery Sliding Effects $(".intro").fadeIn(); The sliding methods provide a way to show or hide elements with a sliding motion. slideDown(): Slides an element down jQuery Effects Overview to make it visible. slideUp(): Slides an element up to What is jQuery? hide it. slideToggle(): Toggles between jQuery simplifies the process of adding slideDown() and slideUp(). If the dynamic effects and animations to element is hidden, it slides down; if web pages. visible, it slides up. It provides easy-to-use methods for creating interactive elements with minimal configuration. jQuery Hide and Show Methods The hide() and show() methods allow you to easily control the visibility of HTML elements. PPT 1 Cloud-computing – serverless computing platforms like Cloudflare and AWS. Web Design – process of planning, creating and maintaining websites. JavaScript – is an OOP language. JavaScript – make web pages alive. Encapsulation – ability to store related LiveScript – another name for JS. information. But as it evolved, JavaScript became a fully Aggregation - store one object inside independent language with its own another object. specification called ECMAScript, and now it Inheritance – the capability of a class to has no relation to Java at all. rely upon another class. Polymorphism – write one function or method PPT 2 that works in different ways. Application of JavaScript What is an Object? Client-side validation – Verify user input In JavaScript, objects are containers for before submitting to the server. storing data and functionality (methods). Manipulate HTML Pages – JavaScript Objects can hold properties (values) helps in manipulating HTML pages on the and methods (functions). fly. Objects are key to organizing and User Notifications – to raise dynamic pop- structuring data in JavaScript ups on the webpages. Back-end Data Loading – JavaScript Object Properties – variables used provides AJAX library which helps in internally in object’s methods, but can also loading back-end data. be globally visible variables that are used Mobile Applications – use frameworks throughout the webpages. such as React Native to build feature-rich mobile apps. Basic Syntax IOT – JavaScript is used to add functionality objectName.objectProperty = propertyValue; to devices like smartwatches. Data Visualization – contains libraries like Object Methods D3.js to visualize data efficiently. Methods – functions that let the object do something or let something be done to it. PPT 3 The jQuery syntax is tailor-made for JavaScript Variables – are containers for data selecting HTML elements and performing values. some action on the element(s). Object Literal – list of name:value pairs inside curly braces. Also called as object initializers. $(document).ready()- executes function when document is fully loaded. Properties – named values in JavaScript Objects. jQuery Selectors – allows you to select and manipulate HTML elements. Used to Accessing Object Properties find elements based on their names, id, types and etc. objectName.propertyName #id - id selector Objects are containers for Properties and.class – class selector Methods. Properties are named Values. Event Methods Methods are Functions stored as Events – all the different visitors’ actions Properties. that respond to a web page. Properties can be primitive values, functions, or even other objects. Term fires/fired often used with events. PPT 4 jQuery – is a write less, do more, JavaScript library. jQuery effects – adds an X factor to your website interactivity. Basic Syntax Group 1 report $(selector).action() jQuery Accordion – divides content $ - sign to access jQuery. into collapsible sections. Selector – find HTML elements Action – performed on the elements. jQuery Autocomplete – enhances input fields by giving suggestions to the users as they type.’  Slider – element that allows users to drag a handle to select a value. Group 3 Group 5 Control Group – refers to group of related form elements or controls, such as Select menu – refers to a drop-down list buttons, checkboxes, or radio buttons. which is created using Spinner -user interface that allows to increment or decrement numeric value Date Picker – tied to a standard form input. using buttons. Dialogs Default dialog – used in apps to present Group 6 standard actions or settings to users. Tabs – break content into multiple sections Animation Dialog – used in software that can be swapped to save space. apps, games or websites to make it engaging or visually appealing. Modal Confirmation Dialog – used to ask users to confirm or cancel important action. Group 4 jQuery Menu – widgets consist of a main menu bar, with pop up menu. Progress bar – represent the percentage of an operation or procedure that has been completed. 2 types of progress bar Determinate – system recognizes tasks actual status and provide correct feedback to the user. Interdeterminate – unable to predict a tasks progress.