HTML is a markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements, and JavaScript can be used to program behaviors and interactions in web pages. jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, as well as event handling, animations, and Ajax interactions for rapid web development.
Web Development with HTML5, CSS3 & JavaScriptEdureka!
ย
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
Web Development with HTML5, CSS3 & JavaScriptEdureka!
ย
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
In JavaScript, almost "everything" is an object.
-Booleans can be objects (if defined with the new keyword)
-Numbers can be objects (if defined with the new keyword)
-Strings can be objects (if defined with the new keyword)
-Dates are always objects
-Maths are always objects
-Regular expressions are always objects
-Arrays are always objects
-Functions are always objects
-Objects are always objects
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
This is a ppt for understanding basic web development. In this, you can learn about
What is web development?
Front-end development
Front-end development technologies
Back-end development
Back-end development technologies
CMS (Content management system)
WordPress
Project
CSSย stands forย Cascadingย Styleย Sheets
Styles defineย how to displayย HTML elements
External Style Sheetsย can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
In JavaScript, almost "everything" is an object.
-Booleans can be objects (if defined with the new keyword)
-Numbers can be objects (if defined with the new keyword)
-Strings can be objects (if defined with the new keyword)
-Dates are always objects
-Maths are always objects
-Regular expressions are always objects
-Arrays are always objects
-Functions are always objects
-Objects are always objects
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
This is a ppt for understanding basic web development. In this, you can learn about
What is web development?
Front-end development
Front-end development technologies
Back-end development
Back-end development technologies
CMS (Content management system)
WordPress
Project
CSSย stands forย Cascadingย Styleย Sheets
Styles defineย how to displayย HTML elements
External Style Sheetsย can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
HTML5 and CSS3 have arrived and they are redefining rich, standards-based web development. Features previously the exclusive domain of browser plug-ins can now be added to web applications as easily as images. Understanding the new power that these standards define, as well as the rapidly increasing power and speed of JavaScript in modern browsers and devices is essential. These slides accompany a full-day workshop, where attendees are guided through the new features in HTML5 and CSS3, with special attention to how these technologies can be used today in new and old browsers.
Using threads in PHP will change the world. appserver.io is the worlds first real application server for PHP written in PHP supporting multi-threading "out-of-the-box".
appserver.io is a next-generation PHP infrastructure consisting of a lightning fast webserver completely written in PHP including additional frequently needed services in one powerful bundle. You can use all of the services or only specifically selected services in your existing application with no additional tweaks. This is just what you need since we have eliminated the need for additional tools or additional services, appserver.io and PHP and youยดre done!
Brief History of PHP
PHP (PHP: Hypertext Preprocessor) was created by Rasmus Lerdorf in 1994. It was initially developed for HTTP usage logging and server-side form generation in Unix.
PHP 2 (1995) transformed the language into a Server-side embedded scripting language. Added database support, file uploads, variables, arrays, recursive functions, conditionals, iteration, regular expressions, etc.
PHP 3 (1998) added support for ODBC data sources, multiple platform support, email protocols (SNMP,IMAP), and new parser written by Zeev Suraski and Andi Gutmans .
PHP 4 (2000) became an independent component of the web server for added efficiency. The parser was renamed the Zend Engine. Many security features were added.
PHP 5 (2004) adds Zend Engine II with object oriented programming, robust XML support using the libxml2 library, SOAP extension for interoperability with Web Services, SQLite has been bundled with PHP
What is PHP Usedย For?
PHP is a general-purpose server-side scripting language originally designed for web development to produce dynamic web pages
PHP can interact with MySQL databases
What is PHP?
PHP == โHypertext Preprocessorโ
Open-source, server-side scripting language
Used to generate dynamic web-pages
PHP scripts reside between reserved PHP tags
This allows the programmer to embed PHP scripts within HTML pages
What is PHP (contโd)
Interpreted language, scripts are parsed at run-time rather than compiled beforehand
Executed on the server-side
Source-code not visible by client
โView Sourceโ in browsers does not display the PHP code
Various built-in functions allow for fast development
Compatible with many popular databases
What does PHP code look like?
Structurally similar to C/C++
Supports procedural and object-oriented paradigm (to some degree)
All PHP statements end with a semi-colon
Each PHP script must be enclosed in the reserved PHP tag
Comments in PHP
Standard C, C++, and shell comment symbols
Variables in PHP
PHP variables must begin with a โ$โ sign
Case-sensitive ($Foo != $foo != $fOo)
Global and locally-scoped variables
Global variables can be used anywhere
Local variables restricted to a function or class
Certain variable names reserved by PHP
Form variables ($_POST, $_GET)
Server variables ($_SERVER)
Etc.
Variable usage
Arithmetic Operations
$a - $b // subtraction
$a * $b // multiplication
$a / $b // division
$a += 5 // $a = $a+5 Also works for *= and /=
Concatenation
Use a period to join strings into one.
If ... Else...
If (condition)
{
Statements;
}
Else
{
Statement;
}
While Loops
While (condition)
{
Statements;
}
Date Display
$datedisplay=date(โyyyy/m/dโ);
Print $datedisplay;
# If the date is April 1st, 2009
# It would display as 2009/4/1
Month, Day & Date Format Symbols
Devise | Presentation for Alpharetta PHP / Laravel GroupGary Williams
ย
Reveal of Devise - a content management system and framework built on top of Laravel. This presentation was done on January 27th at the Alpharetta PHP / Laravel Group in John's Creek, Georgia
CNC Web World is great IT Training Institute in Nagpur. They provide 100% practical training one faculty for one student.
We offer C, C++, Java programming, Android programming, PHP Development, .Net Programming, Web Designing and all other IT related training courses. Web development is all about building great software products and CNC Web World is best in teaching how to build those products.
Get The Knowledge and Advance of HTML
Block-level Elements:
A block-level element always starts on a new line.
A block-level element always takes up the full width available.
A block level element has a top and a bottom margin, whereas an inline element does not.
The <div> element is a block-level element.
Ever wondered how google.com was made? How our own college website is made?๐ค
The recipe is simple: Web Development is all you need for creating such awesome and interactive websites. Just add HTML, CSS and JavaScript to the mix and watch the magic happen!
Want to learn this all but donโt know where to start?
Worry not, for GDSC VJTI hereby presents Introduction to Web Development!
Ever wondered how google.com was made? How our own college website is made?๐ค
The recipe is simple: Web Development is all you need for creating such awesome and interactive websites. Just add HTML, CSS and JavaScript to the mix and watch the magic happen!
Want to learn this all but donโt know where to start?
Worry not, for GDSC VJTI hereby presents Introduction to Web Development!๐
Ever wondered how google.com was made? How our own college website is made?๐ค
The recipe is simple: Web Development is all you need for creating such awesome and interactive websites. Just add HTML, CSS and JavaScript to the mix and watch the magic happen!
Want to learn this all but donโt know where to start?
Worry not, for GDSC VJTI hereby presents Introduction to Web Development!๐
[CSSC x GDSC] Frontend Workshop
Brian Zhang on February 2, 2023
Feeling โjuicy juicyโ? ๐ *** your ***** this Thursday and join our hands-on frontend workshop where we'll teach you HTML, CSS, and JavaScript!
No experience? ๐ฏ No problem! Take your first step ๐ค towards a yummy new ๐๐ career ๐ผ๐ in frontend development.
Our frontend pros will guide you through building a whole website from scratch. ๐ฅ Don't miss out on this opportunity to jumpstart your career in frontend web development.
So, shake that ***** ***** all the way to MN 2130 and take the first step towards becoming a pro!
This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more
Introduction to Html5, css, Javascript and Jqueryvaluebound
ย
To customize the look and feel of a web page, it is absolutely necessary to understand what is HTML, why CSS, and what are Javascript and Jquery. Javascript and Jquery help in interactive frontend development.
Getting Started with Apache Spark (Scala)Knoldus Inc.
ย
In this session, we are going to cover Apache Spark, the architecture of Apache Spark, Data Lineage, Direct Acyclic Graph(DAG), and many more concepts. Apache Spark is a multi-language engine for executing data engineering, data science, and machine learning on single-node machines or clusters.
Secure practices with dot net services.pptxKnoldus Inc.
ย
Securing .NET services is paramount for protecting applications and data. Employing encryption, strong authentication, and adherence to best coding practices ensures resilience against potential threats, enhancing overall cybersecurity posture.
Distributed Cache with dot microservicesKnoldus Inc.
ย
A distributed cache is a cache shared by multiple app servers, typically maintained as an external service to the app servers that access it. A distributed cache can improve the performance and scalability of an ASP.NET Core app, especially when the app is hosted by a cloud service or a server farm. Here we will look into implementation of Distributed Caching Strategy with Redis in Microservices Architecture focusing on cache synchronization, eviction policies, and cache consistency.
Introduction to gRPC Presentation (Java)Knoldus Inc.
ย
gRPC, which stands for Remote Procedure Call, is an open-source framework developed by Google. It is designed for building efficient and scalable distributed systems. gRPC enables communication between client and server applications by defining a set of services and message types using Protocol Buffers (protobuf) as the interface definition language. gRPC provides a way for applications to call methods on a remote server as if they were local procedures, making it a powerful tool for building distributed and microservices-based architectures.
Using InfluxDB for real-time monitoring in JmeterKnoldus Inc.
ย
Explore the integration of InfluxDB with JMeter for real-time performance monitoring. This session will cover setting up InfluxDB to capture JMeter metrics, configuring JMeter to send data to InfluxDB, and visualizing the results using Grafana. Learn how to leverage this powerful combination to gain real-time insights into your application's performance, enabling proactive issue detection and faster resolution.
Intoduction to KubeVela Presentation (DevOps)Knoldus Inc.
ย
KubeVela is an open-source platform for modern application delivery and operation on Kubernetes. It is designed to simplify the deployment and management of applications in a Kubernetes environment. KubeVela is a modern software delivery platform that makes deploying and operating applications across today's hybrid, multi-cloud environments easier, faster and more reliable. KubeVela is infrastructure agnostic, programmable, yet most importantly, application-centric. It allows you to build powerful software, and deliver them anywhere!
Stakeholder Management (Project Management) PresentationKnoldus Inc.
ย
A stakeholder is someone who has an interest in or who is affected by your project and its outcome. This may include both internal and external entities such as the members of the project team, project sponsors, executives, customers, suppliers, partners and the government. Stakeholder management is the process of managing the expectations and the requirements of these stakeholders.
Introduction To Kaniko (DevOps) PresentationKnoldus Inc.
ย
Kaniko is an open-source tool developed by Google that enables building container images from a Dockerfile inside a Kubernetes cluster without requiring a Docker daemon. Kaniko executes each command in the Dockerfile in the user space using an executor image, which runs inside a container, such as a Kubernetes pod. This allows building container images in environments where the user doesnโt have root access, like a Kubernetes cluster.
Efficient Test Environments with Infrastructure as Code (IaC)Knoldus Inc.
ย
In the rapidly evolving landscape of software development, the need for efficient and scalable test environments has become more critical than ever. This session, "Streamlining Development: Unlocking Efficiency through Infrastructure as Code (IaC) in Test Environments," is designed to provide an in-depth exploration of how leveraging IaC can revolutionize your testing processes and enhance overall development productivity.
Exploring Terramate DevOps (Presentation)Knoldus Inc.
ย
Terramate is a code generator and orchestrator for Terraform that enhances Terraform's capabilities by adding features such as code generation, stacks, orchestration, change detection, globals, and more . It's primarily designed to help manage Terraform code at scale more efficiently . Terramate is particularly useful for managing multiple Terraform stacks, providing support for change detection and code generation 2. It allows you to create relationships between stacks to improve your understanding and control over your infrastructure . One of the key features of Terramate is its ability to detect changes at both the stack and module level. This capability allows you to identify which stacks and resources have been altered and selectively determine where you should execute commands.
Clean Code in Test Automation Differentiating Between the Good and the BadKnoldus Inc.
ย
This session focuses on the principles of writing clean, maintainable, and efficient code in the context of test automation. The session will highlight the characteristics that distinguish good test automation code from bad, ultimately leading to more reliable and scalable testing frameworks.
Integrating AI Capabilities in Test AutomationKnoldus Inc.
ย
Explore the integration of artificial intelligence in test automation. Understand how AI can enhance test planning, execution, and analysis, leading to more efficient and reliable testing processes. Explore the cutting-edge integration of Artificial Intelligence (AI) capabilities in Test Automation, a transformative approach shaping the future of software testing. This session will delve into practical applications, benefits, and considerations associated with infusing AI into test automation workflows.
State Management with NGXS in Angular.pptxKnoldus Inc.
ย
NGXS is a state management pattern and library for Angular. NGXS acts as a single source of truth for your application's state - providing simple rules for predictable state mutations. In this session we will go through the main for components of NGXS -Store, Actions, State, and Select.
Authentication in Svelte using cookies.pptxKnoldus Inc.
ย
Svelte streamlines authentication with cookies, offering a secure and seamless user experience. Effortlessly manage sessions by storing tokens in cookies, ensuring persistent logins. With Svelte's simplicity, implement robust authentication mechanisms, enhancing user security and interaction.
OAuth2 Implementation Presentation (Java)Knoldus Inc.
ย
The OAuth 2.0 authorization framework is a protocol that allows a user to grant a third-party web site or application access to the user's protected resources, without necessarily revealing their long-term credentials or even their identity. It is commonly used in scenarios such as user authentication in web and mobile applications and enables a more secure and user-friendly authorization process.
Supply chain security with Kubeclarity.pptxKnoldus Inc.
ย
Kube clarity is a comprehensive solution designed to enhance supply chain security within Kubernetes environments. Kube clarity enables organizations to identify and mitigate potential security threats throughout the software development and deployment process.
Mastering Web Scraping with JSoup Unlocking the Secrets of HTML ParsingKnoldus Inc.
ย
In this session, we will delve into the world of web scraping with JSoup, an open-source Java library. Here we are going to learn how to parse HTML effectively, extract meaningful data, and navigate the Document Object Model (DOM) for powerful web scraping capabilities.
Akka gRPC Essentials A Hands-On IntroductionKnoldus Inc.
ย
Dive into the fundamental aspects of Akka gRPC and learn to leverage its power in building compact and efficient distributed systems. This session aims to equip attendees with the essential skills and knowledge to leverage Akka and gRPC effectively in building robust, scalable, and distributed applications.
Entity Core with Core Microservices.pptxKnoldus Inc.
ย
How Developers can use Entity framework(ORM) which provides a structured and consistent way for microservices to interact with their respective database, prompting independence, scaliblity and maintainiblity in a distributed system, and also provide a high-level abstraction for data access.
Introduction to Redis and its features.pptxKnoldus Inc.
ย
Join us for an interactive session where we'll cover the fundamentals of Redis, practical use cases, and best practices for incorporating Redis into your projects. Whether you're a developer, architect, or system administrator, this session will equip you with the knowledge to harness the full potential of Redis for your applications. Get ready to elevate your understanding of in-memory data storage and revolutionize the way you handle data in your projects with Redis
2. What is HTML?
โ HTML is a language for describing web pages.
โ HTML stands for Hyper Text Markup Language
โ HTML is a markup language
โ A markup language is a set of markup tags
โ The tags describe document content
โ HTML documents contain HTML tags and plain text
โ HTML documents are also called web pages
3. HTML Tags
โ HTML markup tags are usually called HTML tags
โ HTML tags are keywords (tag names) surrounded by angle brackets like <html>
โ HTML tags normally come in pairs like <b> and </b>
โ The first tag in a pair is the start tag, the second tag is the end tag
โ The end tag is written like the start tag, with a forward slash before the tag name
โ Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>
6. What is CSS?
โ CSS stands for Cascading Style Sheets
โ Styles define how to display HTML elements
โ Styles were added to HTML 4.0 to solve a problem
โ External Style Sheets can save a lot of work
โ External Style Sheets are stored in CSS files
โ A CSS (cascading style sheet) file allows to separate web sites HTML content from itโs
style.
7. How to use CSS?
There are three ways of inserting a style sheet:
External Style Sheet:
An external style sheet is ideal when the style is applied to many pages.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Internal Style Sheet:
An internal style sheet should be used when a single document has a unique style.
<head>
<style>
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
8. Inline Styles:
To use inline styles use the style attribute in the relevant tag. The style attribute can
contain any CSS property.
<p style="color:#fafafa;margin-left:20px">This is a paragraph.</p>
Multiple Styles Will Cascade into One:
Cascading order
โ Inline style (inside an HTML element)
โ Internal style sheet (in the head section)
โ External style sheet
โ Browser default
9. CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
Combining Selectors
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
10. The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
Syntax
#selector-id { property : value ; }
The class Selector
The class selector is used to specify a style for a group of elements.
The class selector uses the HTML class attribute, and is defined with a "."
Syntax
.selector-class { property : value ; }
11. CSS Anchors, Links and Pseudo Classes:
Below are the various ways you can use CSS to style links.
a:link {color: #009900;}
a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #333333;}
a:active {color: #009900;}
12. The CSS Box Model
โ All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.
โ The CSS box model is essentially a box that wraps around HTML elements, and it consists of:
margins, borders, padding, and the actual content.
โ The box model allows to place a border around elements and space elements in relation to
other elements.
14. What is JavaScript
โ JavaScript is a Scripting Language
โ A scripting language is a lightweight programming language.
โ JavaScript is programming code that can be inserted into HTML pages.
โ JavaScript inserted into HTML pages, can be executed by all modern web browsers.
15. How to use JavaScript?
The <script> Tag
To insert a JavaScript into an HTML page, use the <script> tag.
The <script> and </script> tells where the JavaScript starts and ends.
<script>
alert("My First JavaScript");
</script>
JavaScript in <body>
<html>
<body>
<script>
document.write("<h1>This is a heading</h1>");
</script>
</body>
</html>
16. External JavaScripts
Scripts can also be placed in external files. External files often contain code to be used by
several different web pages.
External JavaScript files have the file extension .js.
To use an external script, point to the .js file in the "src" attribute of the <script> tag:
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
17. The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
18. Finding HTML Elements by Id
document.getElementById("<id-name>");
Finding HTML Elements by Tag Name
document.getElementsByTagName("<tag>");
Finding HTML Elements by Name
document.getElementsByName(โ<name-attr>โ)
Finding HTML Elements by Class
document.getElementByClass(โ<class-name>โ)
19. Writing Into HTML Output
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
Reacting to Events
<button type="button" onclick="alert('Welcome!')">Click Me!</button>
Changing HTML Content
Using JavaScript to manipulate the content of HTML elements is a very powerful functionality.
x=document.getElementById("demo") //Find the element
x.innerHTML="Hello JavaScript"; //Change the content
20. Changing HTML Styles
Changing the style of an HTML element, is a variant of changing an HTML attribute.
x=document.getElementById("demo") //Find the element
x.style.color="#ff0000"; //Change the style
Validate Input
JavaScript is commonly used to validate input.
if isNaN(x) {alert("Not Numeric")};
21. Example
function validateForm()
{
var nameValue=document.getElementById('name');
verifyName(nameValue);
var emailValue=document.getElementById('email');
verifyEmail(emailValue);
var password=document.getElementById('password');
verifyPassword(password,8,12);
}
function verifyName(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Invalid name');
return false;
}
}
22. What is jQuery?
โ jQuery is a lightweight, "write less, do more", JavaScript library.
โ The purpose of jQuery is to make it much easier to use JavaScript on your website.
โ jQuery takes a lot of common tasks that requires many lines of JavaScript code to
accomplish, and wraps it into methods that you can call with a single line of code.
โ jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and
DOM manipulation.
Features:
โ HTML/DOM manipulation
โ CSS manipulation
โ HTML event methods
โ Effects and animations
โ AJAX
23. jQuery Syntax
Basic syntax:
$(selector).action()
โ A $ sign to define/access jQuery
โ A (selector) to "query (or find)" HTML elements
โ A jQuery action() to be performed on the element(s)
Example:
$("p").hide() - hides all <p> elements.
How to use Jquery:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
24. jQuery Selectors:
jQuery selectors allow you to select and manipulate HTML element(s).
The element , id and class Selector
The jQuery element selector selects elements based on their tag names.
$("<tag-name>") //element selector
$("#<id-name>") // id selector
$(".<class-name>") // class selector
Example
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
$("#test").hide(); //#id selector
$(".test").hide(); //.class selector
});
});
26. jQuery Event
All the different visitors actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Example: $("p").click(function(){
// action goes here!!
});
30. jQuery - Set Content and Attributes
$(selector).click(function(){
$(selector).text("Hello world!");
$(selector).html("<b>Hello world!</b>");
$(input-selector).val("Dolly Duck");
$(link-selector).attr("href","http://www.google.comโ);
});
jQuery - Add Elements
$(selector).append("Some appended text.");
$(selector).prepend("Some prepended text.");
31. jQuery - Remove Elements
$("#<id-name>").remove();
jQuery Manipulating CSS
addClass() - Adds one or more classes to the selected elements
$("<tag-name>").addClass("<class-name>");
removeClass() - Removes one or more classes from the selected elements
$("<tag-name>").removeClass("<class-name>");
toggleClass() - Toggles between adding/removing classes from the selected elements
$("<tag-name>").toggleClass("<class-name>");
css() - Sets or returns the style attribute
$("<tag-name>").css("background-color","yellow");
33. jQuery - AJAX
AJAX = Asynchronous JavaScript and XML.
In short; AJAX is about loading data in the background and display it on the webpage,
without reloading the whole page.
jQuery load() Method
โ The jQuery load() method is a simple, but powerful AJAX method.
โ The load() method loads data from a server and puts the returned data into the
selected element.
Syntax:
$(selector).load(URL,data,callback);
34. Example
ajax load()
$("#success").load("htmlForm.html", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
$.ajax()
$.ajax({
url: filename,
type: 'GET',
dataType: 'html',
beforeSend: function() {
$('.contentarea').html('<img src="images/loading.gif" />');
},
success: function(data, textStatus, xhr) {
$('.contentarea').html(data);
},
error: function(xhr, textStatus, errorThrown) {
$('.contentarea').html(textStatus);
}
});
35. jQuery - AJAX get() and post() Methods
Two commonly used methods for a request-response between a client and server are:
GET and POST.
GET is basically used for just getting (retrieving) some data from the server.
The GET method may return cached data.
POST can also be used to get some data from the server. However, the POST
method NEVER caches data, and is often used to send data along with the request.
Syntax:
$.get(URL,callback);
$.post(URL,data,callback);