jQuery is a JavaScript library that makes it easier to manipulate web pages and add interactivity. It allows developers to select HTML elements, add or modify content, and animate elements using less code than traditional JavaScript. The jQuery library is linked to in the <head> section of an HTML page using a <script> tag. jQuery commands begin with $ and use CSS selectors inside parentheses to target elements. Common commands include fadeOut(), hide(), and slideUp() to animate elements. Parameters can be passed to commands to modify their behavior.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code amongst a team should be a joyful experience, not absolute terror.
Shay talks about how to how to write tactical HTML and CSS, crafting code that is maintainable, flexible, and extensible. Covering new methodologies such as OOCSS and SMACSS learn how to architect websites which are manageable and performant.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code amongst a team should be a joyful experience, not absolute terror.
Shay talks about how to how to write tactical HTML and CSS, crafting code that is maintainable, flexible, and extensible. Covering new methodologies such as OOCSS and SMACSS learn how to architect websites which are manageable and performant.
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
The first part of a three part beginner track, this talk is for the designer/developer that is just starting out with jQuery. Perhaps you’ve heard of jQuery or you’ve used it occasion- ally, this talk will help you understand the core jQuery library.
We will:
•Cover jQuery’s history
•Introduce you to the core team
•Explain how jQuery works
•Demonstrate how to set-up jQuery
•Explore core jQuery methods and structure • Look through a couple of real-world examples
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code.
Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.
Tonight we shared a simple way to edit your CSS using the Jetpack Custom CSS module.
For those who were unable to make tonight's Meetup or would like to follow along again with the presentation, here is the material we covered as well as a few exercises to try.
To download the resources used in this example, as well as tips for setting up your own local development server, you can find more information here:
http://www.meetup.com/Pittsburgh-WordPress-Developers-Designers/pages/Into_to_CSS_Files_and_Resources/
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. In this workshop you will learn how to write modular HTML and CSS, and how reuse code to build maintainable websites. After spending some time playing with legos and writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
The workshop is geared towards intermediate front end developers, with a love of legos, looking grow their skill set. A laptop and good attitude are preferred.
All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. At the end of the workshop and after spending time writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
Basic information about how DIVs react to certain conditions in HTML. This presentation is used as a part of a web design course at the UC Berkeley journalism school.
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
The first part of a three part beginner track, this talk is for the designer/developer that is just starting out with jQuery. Perhaps you’ve heard of jQuery or you’ve used it occasion- ally, this talk will help you understand the core jQuery library.
We will:
•Cover jQuery’s history
•Introduce you to the core team
•Explain how jQuery works
•Demonstrate how to set-up jQuery
•Explore core jQuery methods and structure • Look through a couple of real-world examples
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code.
Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.
Tonight we shared a simple way to edit your CSS using the Jetpack Custom CSS module.
For those who were unable to make tonight's Meetup or would like to follow along again with the presentation, here is the material we covered as well as a few exercises to try.
To download the resources used in this example, as well as tips for setting up your own local development server, you can find more information here:
http://www.meetup.com/Pittsburgh-WordPress-Developers-Designers/pages/Into_to_CSS_Files_and_Resources/
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. In this workshop you will learn how to write modular HTML and CSS, and how reuse code to build maintainable websites. After spending some time playing with legos and writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
The workshop is geared towards intermediate front end developers, with a love of legos, looking grow their skill set. A laptop and good attitude are preferred.
All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. At the end of the workshop and after spending time writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
Basic information about how DIVs react to certain conditions in HTML. This presentation is used as a part of a web design course at the UC Berkeley journalism school.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
Prezentacja z warsztatów http://gamejump.pl/games/workshop1-catchMole/ - dość ostry i szybki wstęp do frontendu. Czyli jakie nazwy powinniście kojarzyć ;-)
Wersja na google docs: https://docs.google.com/presentation/d/1ZKAkxlQfu0qEg5MctcqaYMyoe3SSLqljq1p3VeGPJGw/edit?usp=sharing
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.
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
Unit 8 - Information and Communication Technology (Paper I).pdfThiyagu K
This slides describes the basic concepts of ICT, basics of Email, Emerging Technology and Digital Initiatives in Education. This presentations aligns with the UGC Paper I syllabus.
Embracing GenAI - A Strategic ImperativePeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
Honest Reviews of Tim Han LMA Course Program.pptxtimhan337
Personal development courses are widely available today, with each one promising life-changing outcomes. Tim Han’s Life Mastery Achievers (LMA) Course has drawn a lot of interest. In addition to offering my frank assessment of Success Insider’s LMA Course, this piece examines the course’s effects via a variety of Tim Han LMA course reviews and Success Insider comments.
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...Levi Shapiro
Letter from the Congress of the United States regarding Anti-Semitism sent June 3rd to MIT President Sally Kornbluth, MIT Corp Chair, Mark Gorenberg
Dear Dr. Kornbluth and Mr. Gorenberg,
The US House of Representatives is deeply concerned by ongoing and pervasive acts of antisemitic
harassment and intimidation at the Massachusetts Institute of Technology (MIT). Failing to act decisively to ensure a safe learning environment for all students would be a grave dereliction of your responsibilities as President of MIT and Chair of the MIT Corporation.
This Congress will not stand idly by and allow an environment hostile to Jewish students to persist. The House believes that your institution is in violation of Title VI of the Civil Rights Act, and the inability or
unwillingness to rectify this violation through action requires accountability.
Postsecondary education is a unique opportunity for students to learn and have their ideas and beliefs challenged. However, universities receiving hundreds of millions of federal funds annually have denied
students that opportunity and have been hijacked to become venues for the promotion of terrorism, antisemitic harassment and intimidation, unlawful encampments, and in some cases, assaults and riots.
The House of Representatives will not countenance the use of federal funds to indoctrinate students into hateful, antisemitic, anti-American supporters of terrorism. Investigations into campus antisemitism by the Committee on Education and the Workforce and the Committee on Ways and Means have been expanded into a Congress-wide probe across all relevant jurisdictions to address this national crisis. The undersigned Committees will conduct oversight into the use of federal funds at MIT and its learning environment under authorities granted to each Committee.
• The Committee on Education and the Workforce has been investigating your institution since December 7, 2023. The Committee has broad jurisdiction over postsecondary education, including its compliance with Title VI of the Civil Rights Act, campus safety concerns over disruptions to the learning environment, and the awarding of federal student aid under the Higher Education Act.
• The Committee on Oversight and Accountability is investigating the sources of funding and other support flowing to groups espousing pro-Hamas propaganda and engaged in antisemitic harassment and intimidation of students. The Committee on Oversight and Accountability is the principal oversight committee of the US House of Representatives and has broad authority to investigate “any matter” at “any time” under House Rule X.
• The Committee on Ways and Means has been investigating several universities since November 15, 2023, when the Committee held a hearing entitled From Ivory Towers to Dark Corners: Investigating the Nexus Between Antisemitism, Tax-Exempt Universities, and Terror Financing. The Committee followed the hearing with letters to those institutions on January 10, 202
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
4. Web pages are made up of three
elements
• HTML - content
5. Web pages are made up of three
elements
• HTML - content
• CSS - design
6. Web pages are made up of three
elements
• HTML - content
• CSS - design
• JavaScript - interactivity
7. The problem with JavaScript
•
Simple tasks like manipulating a webpage take lots of code.
•
Different browsers have slightly different methods of doing things,
requiring coders to create fallbacks.
•
Writing code, like an animation, could be inefficient or not the the best
method of doing something.
8. The problem with JavaScript
•
Simple tasks like manipulating a webpage take lots of code.
•
Different browsers have slightly different methods of doing things,
requiring coders to create fallbacks.
•
Writing code, like an animation, could be inefficient or not the the best
method of doing something.
jQuery to the rescue!
9. jQuery is a library
written in JavaScript
• jQuery is cross-browser compatible.
• Makes performing tasks like updating the page, relatively
simple.
• Less code required to introduce interactivity.
11. JavaScript
function
fadeOut(elm,
interval)
{
for
(var
i=10;
i>0;
i-‐-‐)
{
var
opacity
=
i/10;
setTimeout(
function(opacity)
{
elm.setStyle("-‐moz-‐opacity",opacity);
elm.setStyle("opacity",opacity);
elm.setStyle("filter","alpha(opacity="
+
(opacity*100).toString()
);
//set
alpha
values
for
various
browsers
},
interval;
}
}
!
fadeOut(getElementById('box'),
100);
jQuery
12. JavaScript
function
fadeOut(elm,
interval)
{
for
(var
i=10;
i>0;
i-‐-‐)
{
var
opacity
=
i/10;
setTimeout(
function(opacity)
{
elm.setStyle("-‐moz-‐opacity",opacity);
elm.setStyle("opacity",opacity);
elm.setStyle("filter","alpha(opacity="
+
(opacity*100).toString()
);
//set
alpha
values
for
various
browsers
},
interval;
}
}
!
fadeOut(getElementById('box'),
100);
jQuery
$('#box').fadeOut();
13. Where do I get jQuery?
jquery.com
OR
Link directly to the "Content Delivery Network"
(CDN)
http://code.jquery.com/jquery.min.js
14. Where do I put jQuery?
<head>
!
<title>Some
page
title</title>
<style>
#container{
width:600px;
}
</style>
<script
src="jquery.min.js"></script>
<script>
//your
jquery
commands
go
here
</script>
!
</head>
15. Where do I put jQuery?
<head>
!
<title>Some
page
title</title>
<style>
#container{
width:600px;
}
</style>
<script
src="jquery.min.js"></script>
<script>
//your
jquery
commands
go
here
</script>
!
</head>
jQuery Library
16. Where do I put jQuery?
<head>
!
<title>Some
page
title</title>
<style>
#container{
width:600px;
}
</style>
<script
src="jquery.min.js"></script>
<script>
//your
jquery
commands
go
here
</script>
!
</head>
jQuery Library
Your jQuery commands
17. Where do I put jQuery?
<head>
!
<title>Some
page
title</title>
<style>
#container{
width:600px;
}
</style>
<script
src="jquery.min.js"></script>
<script>
//your
jquery
commands
go
here
</script>
!
</head>
jQuery Library
Your jQuery commands
CSS code (before/after)
78. Why is there a parenthesis at the
end of every jQuery command?
$("#someid").command();
wtf?
79. Why is there a parenthesis at the
end of every jQuery command?
$("#someid").command();
wtf?
To sometimes include additional information
about how the command should operate
oh.
80. What does the following jQuery
command do?
$("#title").fadeOut(4000);
81. What does the following jQuery
command do?
$("#title").fadeOut(4000);
Fades out some HTML element with an id
attribute "title" over the course of four seconds
82. What's wrong with the following
jQuery command?
$("#footer").text(This
is
copyrighted);
83. What's wrong with the following
jQuery command?
$("#footer").text(This
is
copyrighted);
When the parameter is text, it NEEDS
to have quotes or it won't work.
$("#footer").text("This
is
copyrighted");
108. What are functions?
•
Functions are simply blocks of code that are in a
waiting queue to be run.
•
Think of it as a way of saying "do the following…"
but only when activated.
•
Functions only run at certain times. In jQuery, a
function is usually runs when a user clicks a
button, or performs some type of action.
114. jQuery functions
parenthesis, which we
won't ever use in functions
$("#button").on("click",
function(){});
We put code inside the
curly brackets to be called
only after the event click
happens.
123. Describe all the parts of a function
from beginning to end.
function
124. Describe all the parts of a function
from beginning to end.
function()
125. Describe all the parts of a function
from beginning to end.
function(){}
126. Where does the code go that should
execute when this function is run?
function(){}
127. Where does the code go that should
execute when this function is run?
function(){}
Right here
128. What does the following do in
jQuery?
$("#button").on("click",
function(){
!
$("#title").fadeOut("fast");
!
});
129. What does the following do in
jQuery?
$("#button").on("click",
function(){
!
$("#title").fadeOut("fast");
!
});
When the HTML element with the id attribute "button"
is clicked, an element "title" will fade out quickly.
134. animate method
css property
value
jquery command
$("#box").animate({'left':'50px'},
3000);
jquery selector
Just to expose you to this command
(don't worry about memorizing it)
135. animate method
css property
value
jquery command
$("#box").animate({'left':'50px'},
3000);
curly brackets
jquery selector
Just to expose you to this command
(don't worry about memorizing it)
136. animate method
css property
jquery command
value
colon
$("#box").animate({'left':'50px'},
3000);
curly brackets
jquery selector
Just to expose you to this command
(don't worry about memorizing it)
137. animate method
css property
jquery command
value
colon
$("#box").animate({'left':'50px'},
3000);
curly brackets
jquery selector
milliseconds
Just to expose you to this command
(don't worry about memorizing it)
138. animate method
css property
jquery command
value
colon
$("#box").animate({'left':'50px'},
3000);
curly brackets
jquery selector
milliseconds
Just to expose you to this command
(don't worry about memorizing it)
139. jQuery "ready"
•
•
jQuery can't run until the entire webpage is fully loaded.
Because web pages run from the top to bottom, we need
to place a trigger to prevent jQuery from running until the
web page is fully loaded.
140. All jQuery code goes into a
"ready" block
$(document).ready(function(){
!
!
!
});