Slides from an internal workshop at the GWU Library on 26 June 2012. The workshop was organized into three parts: "Understanding JavaScript Basics", "About the DOM (Document Object Model)", and "Where JQuery Fits in and How it Works".
Introduction to Programming (well, kind of.)Julie Meloni
I worked through these slides during the THATCamp New England 2010 Introduction to Programming Bootcamp Session. For more info on THATCamp NE see http://www.thatcampnewengland.org/
Speaking 'Development Language' (Or, how to get your hands dirty with technic...Julie Meloni
Slides from an internal workshop at George Washington University Library on 12 June 2012. The goal of this workshop was to increase the number of people who can “work” on technical issues in the library. Topics were grouped into three main parts: "Development Lifecycle & Where You Fit In", "Computer Programming Basics", and "Python in Particular".
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction
JavaScript object orientation
Web Workers
Useful Microframeworks
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
Nothing Hard Baked: Designing the Inclusive Webcolinbdclark
We've all experienced the frustration and exclusion of using an application that is awkwardly designed or poorly suited to our preferred device. In this talk, I redefine accessibility as a usability problem, exploring some of the limitations we've inherited from traditional, desktop-centric approaches to accessibility and user interface design. I also show a few of the techniques used in Fluid Infusion to support open web user interfaces that can more readily adapt to the needs of both developers and end-users alike.
User Interface Development with jQuerycolinbdclark
A half-day workshop covering all aspects of user interface development with jQuery. Starts with a JavaScript refresher, followed by coverage of each major feature of jQuery. Real world code samples are included throughout.
Presented by Colin Clark and Justin Obara at the 2010 Jasig Conference in San Diego.
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 Programming (well, kind of.)Julie Meloni
I worked through these slides during the THATCamp New England 2010 Introduction to Programming Bootcamp Session. For more info on THATCamp NE see http://www.thatcampnewengland.org/
Speaking 'Development Language' (Or, how to get your hands dirty with technic...Julie Meloni
Slides from an internal workshop at George Washington University Library on 12 June 2012. The goal of this workshop was to increase the number of people who can “work” on technical issues in the library. Topics were grouped into three main parts: "Development Lifecycle & Where You Fit In", "Computer Programming Basics", and "Python in Particular".
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction
JavaScript object orientation
Web Workers
Useful Microframeworks
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
Nothing Hard Baked: Designing the Inclusive Webcolinbdclark
We've all experienced the frustration and exclusion of using an application that is awkwardly designed or poorly suited to our preferred device. In this talk, I redefine accessibility as a usability problem, exploring some of the limitations we've inherited from traditional, desktop-centric approaches to accessibility and user interface design. I also show a few of the techniques used in Fluid Infusion to support open web user interfaces that can more readily adapt to the needs of both developers and end-users alike.
User Interface Development with jQuerycolinbdclark
A half-day workshop covering all aspects of user interface development with jQuery. Starts with a JavaScript refresher, followed by coverage of each major feature of jQuery. Real world code samples are included throughout.
Presented by Colin Clark and Justin Obara at the 2010 Jasig Conference in San Diego.
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
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
What are Events?
All the different visitors' actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
Driven by technologies such as HTML5, JavaScript, and jQuery, innovative new user experiences are thriving on the Web. This workshop, presented by Justin Obara and Colin Clark from the Fluid community (http://fluidproject.org), will provide Web designers and developers with an overview of modern Web accessibility techniques, providing hands-on ways to make HTML5 and jQuery-based applications more accessible, flexible, and inclusive of a diverse range of users. We’ll also cover some of the features of Fluid Infusion, an application framework built on top of jQuery.
This is the content of first workshop os a 3 workshop series for learning to create Single Page Web Apps.
This focuses on introducing the HTML, CSS and Javascript to the newbies.
Would you like to automate your acceptance tests against multiple browsers and multiple servers? How about make your UI tests run faster? And remove the boilerplate on them? Browser automation tools to the rescue! In this session, I'll share how you can gain back development time by using FluentLenium, an open source Java wrapper around the Selenium API. We'll take a brief look at what is new in the UI testing javascript ecosystem and then I’ll share with you some rules for writing better UI tests.
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
What are Events?
All the different visitors' actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
Driven by technologies such as HTML5, JavaScript, and jQuery, innovative new user experiences are thriving on the Web. This workshop, presented by Justin Obara and Colin Clark from the Fluid community (http://fluidproject.org), will provide Web designers and developers with an overview of modern Web accessibility techniques, providing hands-on ways to make HTML5 and jQuery-based applications more accessible, flexible, and inclusive of a diverse range of users. We’ll also cover some of the features of Fluid Infusion, an application framework built on top of jQuery.
This is the content of first workshop os a 3 workshop series for learning to create Single Page Web Apps.
This focuses on introducing the HTML, CSS and Javascript to the newbies.
Would you like to automate your acceptance tests against multiple browsers and multiple servers? How about make your UI tests run faster? And remove the boilerplate on them? Browser automation tools to the rescue! In this session, I'll share how you can gain back development time by using FluentLenium, an open source Java wrapper around the Selenium API. We'll take a brief look at what is new in the UI testing javascript ecosystem and then I’ll share with you some rules for writing better UI tests.
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.
jQuery is the new favorite of web developers. This lightweight JavaScript library makes developers love writing JavaScript code again! What needed 20 lines of code first is now reduced to 3 lines. Who wouldn’t be enthusiastic?! Microsoft showed its love for the library by fully integrating it in Visual Studio. I dare to ask: Should you stay behind? In this session, we’ll take a look at jQuery and we’ll teach you what you need to know to get on your way. More specifically, we’ll look at selectors, attributes, working with WCF, jQuery UI and much more. You may walk out of this session wearing a sticker: “I love jQuery”!
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...Julie Meloni
In these trying financial times, libraries and cultural heritage institutions in general face difficult resource allocation decisions: for example, do you spend hundreds of thousands of dollars on proprietary software or do you hire a few good software developers and library professionals who can lead the design of applications and platforms specific to your needs? For some, leveraging open source software and the communities that form around it helps solve some of these problems.
The University of Virginia Library is a key partner in the collaborative and open source project known as "Hydra”; the goal of the Hydra Project is to create a comprehensive set of open source repository workflow tools that allow librarians and scholars to manage describe, deliver, reuse and preserve digital information. U.Va.’s committment to the project includes the definition of metadata standards, the creation of search and discovery interfaces, and the development and implementation of multiple Hydra “heads” such as the interface and workflow in use for the U.Va. institutional repository. U.Va is also a key contributor to the Blacklight project; Blacklight is an open source discovery interface or "next-generation catalog" — and can be seen powering the newly updated U.Va. OPAC, Virgo.
This talk will provide a brief overview of both the Hydra and Blacklight projects and the tools under development, will describe some of the processes and challenges for development teams working within a library setting, and show some of the ways that open source software works (and where it gets tricky) within this setting.
Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...Julie Meloni
Given as part of a 24x7 group (no more than 24 slides, no more than 7 minutes) -- "Hydra: One Body, Many Heads" -- in the "Frameworks" panel at the Open Repositories 2011 conference.
Development Lifecycle: From Requirement to ReleaseJulie Meloni
This presentation was given as part of the User Experience (UX) community update series of meetings in the University of Virginia Library. For more information: http://bit.ly/dLbaXO
Everyone's a Coder Now: Reading and Writing Technical CodeJulie Meloni
These slides were part of my presentation in session H.18 "Writing text, writing code, writing connections" at the Conference on College Composition & Communication (4Cs) in Atlanta, GA (April 2011). More information at http://bit.ly/gQpszQ
I used these slides as part of a "Digital Dialogues" presentation at University of Maryland's Institute for Technology in the Humanities: "Community, Cohesion, and Commitment: Developing and Deploying Open Source Tools in the UVa Online Library Environment"...more info at http://bit.ly/ffTmFH
Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...Julie Meloni
I worked through these slides during the THATCamp Pacific Northwest 2010 Project Management Bootcamp Session. For more info on THATCamp PNW see http://www.thatcamppnw.org/
This presentation was used in an English 101 ("Introductory Writing") class in Fall 2008 at Washington State University. The topics for the day were summary, use of quotes and citations, using one's own voice, and otherwise working with sources to "enter the conversation" in order to continue it. Slides refer to some specific assignments and readings, but some of the content is general enough to be useful.
Mavericks: The Ultra-Collaborative Composition ClassroomJulie Meloni
I gave an extemporaneous version of this presentation at the CCCC 2009 conference in San Francisco. My presentation was part of a panel called "Collaborative Crosscurrents in First Year Composition." In general, the three speakers on this panel were discussing the efficacy of Microsoft Word vs Google Docs in the composition classroom. I am pro-Google Docs, and this presentation discusses what I did and discovered in my composition sections in Fall '08.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Learning About JavaScript (…and its little buddy, JQuery!)
1. Learning About JavaScript
…and its little buddy, JQuery!
GWU Libraries ● 26 June 2012
Julie Meloni // @jcmeloni // jcmeloni@gmail.com
2. Today’s General Outline
• Understanding JavaScript Basics
• About the DOM (Document Object Model)
• Where JQuery Fits in and How it Works
3.
4. The Very Very Basics
• Developed in 1995 – it’s no spring chicken
• No relation to the Java programming language
• An interpreted rather than a compiled language
▫ Interpreted by the web browser software
• 98% of web traffic is JavaScript-enabled
▫ 2% made up of old screenreader software and
ultra-security-conscious people
5. Practical Uses
• Improving navigation
• Offering dynamic text display
• Creating special effects in response to user
• As the basis for remote scripting (the J in AJAX)
• Offering more interactivity than static HTML
▫ But less dynamism than a server-side language
6. How it Looks in the Source Code
<script type="text/javascript">
<!-- Hide the script from old browsers
document.write(document.lastModified);
// Stop hiding the script -->
</script>
Might display: 06/25/2012 08:07:51
7. How it Looks in the Source Code v2
<!DOCTYPE html>
<html>
<head>
<title>JS Test</title>
</head>
<body>
<h1>JS Test</h1>
<p style=“color: red”>
<script type="text/javascript">
<!-- Hide the script from old browsers
document.write(document.lastModified);
// Stop hiding the script -->
</script>
</p>
</body>
</html>
8. Moving Into Programming Basics
• Like other programming languages, JavaScript
has:
▫ Variables (& Arrays)
▫ Operators
▫ Flow Control
▫ Objects
9. About JavaScript Variables
• A variable is a bucket that holds one piece of
information.
• Examples:
• var string_variable = “The Library”;
• var numeric_variable = 4;
• var myname = “Julie”;
10. About JavaScript Arrays
• An array is a type of variable (or bucket) that
holds many pieces of information.
• Example:
• rainbow = new array(“red”, “orange”, “yellow”,
“green”, “blue”, “indigo”, “violet”);
rainbow[0] holds “red”
rainbow[1] holds “orange”
11. About JavaScript Operators
• Arithmetic
• +, -, *, / (add, subtract, multiply, divide)
• Assignment
• = (“Assign the value of 4 to the variable called a”)
var a = 4;
• += (“Add the value of 5 to the variable that
already holds 4”)
var a += 5; // a now holds 9
• -= (“Subtract the value of 3 to the variable that
already holds 4”)
var a -= 3; // a now holds 1
12. About JavaScript Operators
• Comparison
• == (“when I compare the value in variable a to the
value in variable be, that comparison is true”)
a == b
• != (“when I compare the value in variable a to the
value in variable be, that comparison is not true”)
• a != b
• >, >= (“the value of variable a is greater than (or
greater than or equal to) the value of variable b”)
a > b
• <, <= (“the value of variable a is less than (or less
than or equal to) the value of variable b”)
a < b
14. About JavaScript Flow Control
• if
if (something is true) {
do something here
}
• if ... else if ... else
if (something is true) {
do something here
} else if (something is true) {
do something here
} else {
do something here
}
15. About JavaScript Flow Control
• switch
switch (something) {
case “blue”:
do something here
break;
case “apple”:
do something else here
break;
case “fire truck”:
do something else here
break;
default:
do something else here
break;
}
16. About JavaScript Flow Control
• while
while (something is true) {
do something here
}
• for
for (something is true) {
do something here
}
17. About JavaScript Objects
• Objects can store multiple pieces of data,
but the internal structure of the data is
different than that of an array.
• The items of data stored in an object are called the properties of the
object.
People objects in an address book might include a name, an address, and a
telephone number (Bob.address, Bob.phone, etc)
• Objects can use methods.
Methods are built-in functions that work with the object's data, e.g. Bob.display()
• JavaScript supports three kinds of objects:
• Built-in to the JavaScript language.
• Custom objects you create.
• DOM (Document Object Model) -- components of the browser and the
current HTML document.
19. What is the DOM?
• The DOM is the invisible structure of all HTML
documents
▫ The overall container object is called the
document.
Any container within the document that has an ID is
referenced by that ID.
For example, if you have a <div> with an ID called
wrapper, then in the DOM that element is referenced
by document.wrapper
20. But it actually starts before that…
• The DOM is not part of JavaScript or any other
programming language -- it's an API built in to
the browser.
• At the top of the browser object hierarchy is the
window object.
• Also access the history object and the location object
• Inside a window is a document.
• window.document.header-image
<img id=“header-image” src=“some.jpg”/>
21. So what about document?
• The document object has several properties,
such as:
• document.URL
• document.title
• document.lastModified
• document.cookie
• document.images
• …and more!
22. And within document?
• The document object contains…containers (also called
nodes).
<!DOCTYPE html>
<html>
<head>
<title>A Simple HTML Document</title>
</head>
<body>
<h1>This is a Level-1 Heading.</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
23. Nodes Have Properties Too!
<h1>This is a Level-1 Heading.</h1>
• nodeName is the name of the node, e.g. h1
• innerHTML is the text within the node, e.g. “This is
a Level-1 Heading”
24. So…events?
• JavaScript can be used to detect events and react
to them
• Events include clicked buttons, mouse pointers moving, etc.
• The script that you use to detect and respond to
an event is called an event handler.
• You don't need the <script> tag to define an event handler; you
can add an event handler attribute to an individual HTML tag.
<a href="http://www.google.com/"
onmouseover="alert('You moved!');">
I’m a link.</a>
<a href="" onmouseover="DoIt();">Move Me</a>
25. A Few Event Examples
• Mouse
• onmouseover
• onmouseout
• onmouseup
• onmousedown
• onclick
• ondblclick
• Keyboard
• onkeydown
• onkeyup
• Form Elements
• onblur
• onchange
• onsubmit
26.
27. Why JQuery (or any library?)
• Using a third-party library
• enables you to implement cross-browser scripting and sophisticated
UI elements without being a JavaScript expert.
• enables you to avoid reinventing the wheel for common tasks
• Execute code when the DOM is ready
• Collect elements
• Modify display
• Listen for events and enact upon them
• Execute AJAX requests
• …and more!
28. Loading JQuery
• Must be present in each calling page.
• You can download and host your own, or use a remotely hosted
version.
<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jq
uery.min.js" type="text/javascript"></script>
</head>
<body>
<!-- more html -->
</body>
</html>
29. Then What?
• jQuery has at its heart sophisticated, cross-browser methods for
selection of page elements.
• Selectors used to obtain elements; based on simple CSS-like selector
styles.
• To get an element that has an ID of someElement, use:
$("#someElement")
• To reference a collection of elements that use the someClass class name, use:
$(".someClass")
• You can manipulate HTML and CSS properties using built-in methods.
• To append the phrase "powered by jQuery" to all paragraph elements, for
example, we would simply write:
$("p").append(" powered by jQuery");
• To then change the background color of those same elements, we can
manipulate their CSS properties directly:
$("p").css("background-color","yellow");
• To hide all elements having in class hideMe, use:
$(".hideMe").hide();
30. Moving Forward
• Understanding what you want to do will help
you find the JQuery examples to do it.
▫ Everything is based on interactions (and events)
▫ Everything is rooted in things you want to do with
HTML and CSS
Even if it’s AJAX
31. Getting the Document Ready
<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// Your code here
});
</script>
</body>
</html>