The important parts of the front end development sphere including CSS3, advanced JavaScript, libraries such as jQuery, RequireJS and Promises. And finally, chrome developer tools for successful debugging and editing.
There's always a gap between theoretical knowledge and practice. Particularly, how to start you first web project when you are familiar with HTML, JS, and CSS. This presentation covers such aspects as project functionality, modeling, file organization, building initial layout with HTML, insights of CSS, and jQuery.
JavaScript Advanced - Useful methods to power up your codeLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-plus/?couponCode=SLIDESHARE
Useful methods and JavaScript code snippets power up your code and make even more happen with it.
This course is perfect for anyone who has fundamental JavaScript experience and wants to move to the next level. Use and apply more advanced code, and do more with JavaScript.
Everything you need to learn more about JavaScript
Source code is included
60+ page Downloadable PDF guide with resources and code snippets
3 Challenges to get you coding try the code
demonstrating useful JavaScript methods that can power up your code and make even more happen with it.
Course lessons will cover
JavaScript Number Methods
JavaScript String Methods
JavaScript Math - including math random
DOMContentLoaded - DOM ready when the document has loaded.
JavaScript Date - Date methods and how to get set and use date.
JavaScript parse and stringify - strings to objects back to strings
JavaScript LocalStorage - store variables in the user browser
JavaScript getBoundingClientRect() - get the dimensions of an element
JavaScript Timers setTimeout() setInterval() requestAnimationFrame() - Run code when you want too
encodeURIComponent - encoding made easy
Regex - so powerful use it to get values from your string
prototype - extend JavaScript objects with customized powers
Try and catch - perfect for error and testing
Fetch xHR requests - bring content in from servers
and more
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
Step by step learning with all steps included.
Get this Course
https://www.udemy.com/javascript-course-dom/?couponCode=SLIDESHARE
Document Object Model Power your websites make things happen online - JavaScript to create interactive web pages
Source code making it easy for you to try the code and experiment learning the code.
Challenges and tips to get you coding quickly.
Make you web pages come to life
DOM what it is
Element selection
Multiple element selection
Element manipulation - update content and select attributes
Elements and classes add remove and toggle
Traversing children and parents
Element style attribute
Challenge #1 image popup window
Create elements
Click events
Challenge #2 click event create elements
Challenge #3 click change background
Event Object
Key press event
Mouse move events
Challenge #4 - List items advanced remove,create element, click
Event bubbling and capturing
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
Monster JavaScript Course - 50+ projects and applicationsLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-projects/?couponCode=SLIDESHARE
Portfolio builder loaded with projects and applications that you can use, extend on and enhance to add to your portfolio
JUST GOT BIGGER - more updates to come - YOU FOUND IT
Grow your portfolio - showcase what you can build with JavaScript
Learn JavaScript have fun with interactive and dynamic web applications.
Over 529 downloadable resources - 57 articles - 43+ hours on-demand video, 57 Sections
Over 614 HD video lessons
Over 51+ projects and web applications. Projects can be used as started projects to extend and enhance. All JavaScript focused.
4 downloadable ebook guides 200 pages and 3 x 60 pages - with code and resource links
No libraries JUST JAVASCRIPT and JAVASCRIPT DOM
This is the course you've been looking for..........
Everything you need to get started with JavaScript, expand your knowledge about using JavaScript, and more included.
It’s arrived, and bigger than expected!!!
For anyone who wants to supercharge their JavaScript learning - building and applying JavaScript to over 50 projects and challenges… this course is for YOU!!!!
From JavaScript beginners to all levels, course is presented in a fun interactive format that will challenge you. Move through the lessons of the course as you want to learn them, variety of ways to benefit from it. Learn alongside, try before you see the solution, try after you view the solution. It’s up to you! Unique format for learning encouraging you to try the code. Of course source code is included in every step of the way.
Most often asked for ARE PROJECTS - and this course delivers! Over 50 and will grow over time as more projects and challenges get added. You can select the projects you want to do or take them in order, it’s up to you.
Loaded with games and so many mini projects guaranteed to help you learn more about JavaScript and DOM manipulation. All JavaScript code no libraries or short cuts.
Explore how to apply JavaScript to create interactive and dynamic web content - that will impress your friends.
Extend on the projects and add them to your portfolio, to showcase skills you have learned.
Useful real world projects coded with simple JavaScript for developers of all levels.
No better way to learn than to try the code and produce something fun and useful with it. Learn to create amazing things with JavaScript bringing your web content to life.
This will keep you busy and provide you the opportunity to learn and experiment with code. Try it. All the projects are designed in a starter type format so that you can build on them and customize to make it your own.
Portfolio Builder 50+ projects
This course includes full introduction to coding with JavaScript, all core syntax and how to apply it to make things happen. Create your own code - loaded with challenges and code snippets.
There's always a gap between theoretical knowledge and practice. Particularly, how to start you first web project when you are familiar with HTML, JS, and CSS. This presentation covers such aspects as project functionality, modeling, file organization, building initial layout with HTML, insights of CSS, and jQuery.
JavaScript Advanced - Useful methods to power up your codeLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-plus/?couponCode=SLIDESHARE
Useful methods and JavaScript code snippets power up your code and make even more happen with it.
This course is perfect for anyone who has fundamental JavaScript experience and wants to move to the next level. Use and apply more advanced code, and do more with JavaScript.
Everything you need to learn more about JavaScript
Source code is included
60+ page Downloadable PDF guide with resources and code snippets
3 Challenges to get you coding try the code
demonstrating useful JavaScript methods that can power up your code and make even more happen with it.
Course lessons will cover
JavaScript Number Methods
JavaScript String Methods
JavaScript Math - including math random
DOMContentLoaded - DOM ready when the document has loaded.
JavaScript Date - Date methods and how to get set and use date.
JavaScript parse and stringify - strings to objects back to strings
JavaScript LocalStorage - store variables in the user browser
JavaScript getBoundingClientRect() - get the dimensions of an element
JavaScript Timers setTimeout() setInterval() requestAnimationFrame() - Run code when you want too
encodeURIComponent - encoding made easy
Regex - so powerful use it to get values from your string
prototype - extend JavaScript objects with customized powers
Try and catch - perfect for error and testing
Fetch xHR requests - bring content in from servers
and more
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
Step by step learning with all steps included.
Get this Course
https://www.udemy.com/javascript-course-dom/?couponCode=SLIDESHARE
Document Object Model Power your websites make things happen online - JavaScript to create interactive web pages
Source code making it easy for you to try the code and experiment learning the code.
Challenges and tips to get you coding quickly.
Make you web pages come to life
DOM what it is
Element selection
Multiple element selection
Element manipulation - update content and select attributes
Elements and classes add remove and toggle
Traversing children and parents
Element style attribute
Challenge #1 image popup window
Create elements
Click events
Challenge #2 click event create elements
Challenge #3 click change background
Event Object
Key press event
Mouse move events
Challenge #4 - List items advanced remove,create element, click
Event bubbling and capturing
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
Monster JavaScript Course - 50+ projects and applicationsLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-projects/?couponCode=SLIDESHARE
Portfolio builder loaded with projects and applications that you can use, extend on and enhance to add to your portfolio
JUST GOT BIGGER - more updates to come - YOU FOUND IT
Grow your portfolio - showcase what you can build with JavaScript
Learn JavaScript have fun with interactive and dynamic web applications.
Over 529 downloadable resources - 57 articles - 43+ hours on-demand video, 57 Sections
Over 614 HD video lessons
Over 51+ projects and web applications. Projects can be used as started projects to extend and enhance. All JavaScript focused.
4 downloadable ebook guides 200 pages and 3 x 60 pages - with code and resource links
No libraries JUST JAVASCRIPT and JAVASCRIPT DOM
This is the course you've been looking for..........
Everything you need to get started with JavaScript, expand your knowledge about using JavaScript, and more included.
It’s arrived, and bigger than expected!!!
For anyone who wants to supercharge their JavaScript learning - building and applying JavaScript to over 50 projects and challenges… this course is for YOU!!!!
From JavaScript beginners to all levels, course is presented in a fun interactive format that will challenge you. Move through the lessons of the course as you want to learn them, variety of ways to benefit from it. Learn alongside, try before you see the solution, try after you view the solution. It’s up to you! Unique format for learning encouraging you to try the code. Of course source code is included in every step of the way.
Most often asked for ARE PROJECTS - and this course delivers! Over 50 and will grow over time as more projects and challenges get added. You can select the projects you want to do or take them in order, it’s up to you.
Loaded with games and so many mini projects guaranteed to help you learn more about JavaScript and DOM manipulation. All JavaScript code no libraries or short cuts.
Explore how to apply JavaScript to create interactive and dynamic web content - that will impress your friends.
Extend on the projects and add them to your portfolio, to showcase skills you have learned.
Useful real world projects coded with simple JavaScript for developers of all levels.
No better way to learn than to try the code and produce something fun and useful with it. Learn to create amazing things with JavaScript bringing your web content to life.
This will keep you busy and provide you the opportunity to learn and experiment with code. Try it. All the projects are designed in a starter type format so that you can build on them and customize to make it your own.
Portfolio Builder 50+ projects
This course includes full introduction to coding with JavaScript, all core syntax and how to apply it to make things happen. Create your own code - loaded with challenges and code snippets.
logical and arithmetic operators in java script .
switch in java script. if condition, else if condition and nested condition in java script
do , while , for Loops in java script.4 type of functions in java script.
the 5 layers of web accessibility - Open Web Camp IIDirk Ginader
Dirk Ginader, part of the Yahoo! Accessibility Taskforce, will talk about the “5 Layers of Web Accessibility”. He extents the commonly known 3 layers model consisting of HTML, CSS and JavaScript with 2 new layers for more accessibility. He shows how easy it can be to make a website or web application more accessible by following simple rules.
see:
http://openwebcamp.org/agenda/#5_layers_of_accessibility
JavaScript is the scripting language of the Web.
JavaScript is used in web pages to add functionality, validate forms, communicate with the server, and much more.
logical and arithmetic operators in java script .
switch in java script. if condition, else if condition and nested condition in java script
do , while , for Loops in java script.4 type of functions in java script.
the 5 layers of web accessibility - Open Web Camp IIDirk Ginader
Dirk Ginader, part of the Yahoo! Accessibility Taskforce, will talk about the “5 Layers of Web Accessibility”. He extents the commonly known 3 layers model consisting of HTML, CSS and JavaScript with 2 new layers for more accessibility. He shows how easy it can be to make a website or web application more accessible by following simple rules.
see:
http://openwebcamp.org/agenda/#5_layers_of_accessibility
JavaScript is the scripting language of the Web.
JavaScript is used in web pages to add functionality, validate forms, communicate with the server, and much more.
Quick start with React | DreamLab Academy #2DreamLab
Szybki start z React. Prezentacja przedstawiona na warsztatach z podstaw technologii React w ramach DreamLab Academy.
W razie pytań zapraszamy do kontaktu academy@dreamlab.pl
This is the first half of a presentation I gave at Squares Conference 2015 where I provided a brief introduction to React JS, then did live coding for 20 minutes to show more of the specifics of usage. Your milage may vary as the live code part was where the bulk of the teaching happened!
I've been working a lot with React lately and thought it would be a good idea to share what I've learned with the group.
During this talk we'll take a look at Facebook's React library while drawing comparisons to frameworks like Angular. We'll see how we can use React and friends to create a fast and efficient single page app. Attendees are expected to have some familiarity with ES6/ES7 since we the codebase we will be looking at leverages features from the spec.
What we'll be taking a look at:
• React
• React Router
• Redux
• Redux Sagas
• Webpack
• Babel
SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra Sencha
In this session, Lee will cover the top 10 new features of ECMAScript 2015, their benefits, and go through code examples of how to use them. She will also talk about ECMAScript 2015 compatibilities and incompatibilities with the most widely used browsers today, and how you should plan on developing your applications with ECMAScript 2015.
Overview of The Scala Based Lift Web FrameworkIndicThreads
All of us having experience with other web frameworks such as Struts,Tapestry, Rails, etc would ask “Why another framework? Does Lift really solve problems any differently or more effectively than the ones we’ve used before? The Lift Web Framework provides an advanced set of tools for quickly and easily building real-time, multi-users, interactive web applications. Lift has a unique advantage that no other web framework currently shares: the Scala programming language. Scala is a relatively new language developed by Martin Odersky and his group at EPFL Switzerland. Scala is a hybrid Object Oriented and Functional language that runs at native speeds on the JVM and fully interoperates with Java code. Lift is a hybrid web framework built on Scala. Lift derives its features and idioms from the best of existing web frameworks as well as the functional and OO features in Scala. It compiles to Java bytecode and runs on the JVM, which means that we can leverage the vast ecosystem of Java libraries just as we would with any other java web framework. This presentation details the advantages of this Scala based Web framework over all the existing frameworks that we have used uptil now and shows a small sample application built with Lift. We will create a basic application with a model that maps to RDBMS, web pages that correspond to back end logic and bind dynamically created content to elements on the webpage.
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...GITS Indonesia
Salah satu front-end developer GITS Indonesia, Warsono, mengisi workshop di universitas, mengenai Vue.js.
Ikuti kami di kanal berikut, agar tidak ketinggalan acara seru:
Instagram: @gitsindonesia
LinkedIn: GITS Indonesia
Website: gits.id
JavaScript: The Good Parts Or: How A C# Developer Learned To Stop Worrying An...Doug Jones
We rarely dive into current programming languages, touting the next new framework or the new features that will be out next year. This is about JavaScript the language as it exists today, what I picked up in going from C# to JS, and what C# picked up from JS along the way as well. It is based on Douglas Crockford's seminal book "JavaScript: The Good Parts".
In JS: CLASS <=> Constructor FN
new FN() => FN() { this }
FN = CLASS (FN = FN, FN = DATA)
Objects
Prototype / __proto__
Inheritence
Rewriting / Augmenting
built in objects
Similar to Front End Development: The Important Parts (20)
Team Lead! Care about your devs!
The research has shown that there's a strong correlation between successful onboarding process and employee retention. This deck explains the importance of a well thought and sound onboarding process for new employees. We will address what are the attributes of a good process and how to structure it for front end developers.
The presentation deck for pragmatic react workshop. Its goal is
To give the necessary knowledge and understanding about React in order to write the application.
https://github.com/bolshchikov-public/wazzapp
Angular, React and React Native - seemingly completely different frameworks, but can they work together in harmony under one application? Consider 10 different teams working in parallel, each relying on their favorite framework. Can we combine the product of these 10 teams into one mega app?
In this talk we will discuss the design principles and architecture of large scale multi-tenant mobile and web applications that serve as a foundation for the Wix Mobile App and Wix Business Manager for the web.
You will learn how to apply those principles and techniques at scale of over 10 teams, while embracing existing frameworks and building sound mega apps together.
This talk answers the main 5 questions that pop up when people wanna give a technical talk:
- where to find events
- how to choose a topic
- how to submit a talk?
- how to prepare a talk?
- how to make an awesome delivery
The proper planning and answering these simple questions will opens doors of many meetups and conferences for you.
Continuous Delivery is considered a holy grail of a software company. This practice allows to ship product to millions of users in a matter of minutes. Tooling is an important part of process, but when the company is growing, there's more to the story.
This talk discusses engineering practices, values, and engineering culture of the company. They enable the company to ship code on the high pace.
Web App Essentials cover the basic theoretical knowledge which are required for writing small and middle size application. The topics which are covered:
spa premises,
spa architecture,
mvc pattern and framework,
templating,
module pattern,
ui rendering,
amd,
base libraries.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
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.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
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.
5. LET'S FIND OUT
1. Is it possible to do shadows with CSS?
2. Who can write such function?
var result = addNumbers(2)(3);
6. LET'S FIND OUT
1. Is it possible to do shadows with CSS?
2. Who can write such function?
var result = addNumbers(2)(3);
3. Who can define "this"?
7. LET'S FIND OUT
1. Is it possible to do shadows with CSS?
2. Who can write such function?
var result = addNumbers(2)(3);
3. Who can define "this"?
4. How to call a function after completion of
two async functions together?
8. OUTLINE
I. CSS
1. Basics
2. CSS3
3. LESS
II. JavaScript
1. Functions: objects
2. Lexical scope: closures, module pattern
3. Execution contexts and "this" value
III. Tools and Libraries
1. RequireJS
2. jQuery
3. Promises
4. Chrome Dev Tools
10. CSS :: SELECTORS
Selector Description Example
*
Matches any element.
E Matches any E element (i.e., an
element of type E).
a
E F Matches any F element that is a
descendant of an E element.
div a
E > F Matches any F element that is a
child of an element E.
div > a
E:first-child Matches element E when E is the
first child of its parent.
li:first-child
E:link
E:visited
Matches element E if E is the source
anchor of a hyperlink of which the
target is not yet visited (:link) or
already visited (:visited).
a:link
a:visited
11. CSS :: SELECTORS (cont.)
Selector Description Example
E:active
E:hover
E:focus
Matches E during certain user
actions.
a:active
a:hover
a:focus
E + F Matches any F element immediately
preceded by a sibling element E.
div + div
E[foo] Matches any E element with the
"foo" attribute set (whatever the
value).
div[data-id]
E[foo="warning"] Matches any E element whose "foo"
attribute value is exactly equal to
"warning".
input[type=”text”]
DIV.warning Language specific. (In HTML, the
same as DIV[class~="warning"].)
div.navigation
E#myid Matches any E element with ID equal
to "myid".
div#main
27. FUNCTIONS :: LEXICAL ENV :: def
Definition:
A Lexical Environment is a specification type used to define
the association of Identifiers to specific variables and
functions based upon the lexical nesting structure of
ECMAScript code.
33. PROBLEM
<div>
I am div 1
</div>
<div>
I am div 2
</div>
<div>
I am div 3
</div>
var i, divs, len;
i = 0;
divs=document.getElementsByTagName('div');
len = divs.length;
for (i; i < len; i += 1) {
divs[i].addEventListener('click',
function () {
alert('I am div ' + i);
}, false)
}
http://jsbin.com/acoceb/1/edit
35. PROBLEM
<div>
I am div 1
</div>
<div>
I am div 2
</div>
<div>
I am div 3
</div>
var i, divs, len;
i = 0;
divs = document.getElementsByTagName
('div');
len = divs.length;
for (i; i < len; i += 1) {
(function (id) {
divs[i].addEventListener('click',
function () {
alert("I am div " + (id + 1));
}, false);
})(i);
}
http://jsbin.com/acoceb/5/edit
39. FUNCTIONS :: EXECUTION CONTEXT
Every line of JavaScript code is run in an
“execution context.”
ExecCont = {
LexicalEnv: {},
VarEnv: {},
ThisBinding: {}
}
40. FUNCTIONS :: EXECUTABLE CODE TYPES
● Global code
alert("hello world");
● Function code
function callMe () {
alert('hello world');
}
● Eval code
41. FUNCTIONS :: GLOBAL CONTEXT
var a = 1,
b = 3
c = a + b;
alert(c); // 4
alert(this); // window
42. FUNCTIONS :: FUNC CONTEXT :: method
var a = {
b: function() {
return this;
}
};
a.b(); //a;
a['b'](); //a;
var c = {};
c.d = a.b;
c.d(); //c
43. FUNCTIONS :: FUNC CONTEXT :: function
function a () {
return this;
}
var A = a(); // window
44. FUNCTIONS :: FUNC CONTEXT :: function
var a = {
b: function() {
return this;
}
};
var foo = a.b;
foo(); //window
45. FUNCTIONS :: FUNC CONTEXT :: function
var a = {
b: function() {
var c = function() {
return this;
};
return c();
}
};
a.b(); //window
48. function Builder () {
this.name = 'Arnold';
}
var b = new Builder();
// b = {
// name: 'Arnold'
// }
FUNCTIONS :: FUNC CONTEXT :: new
49. FUNCTIONS :: FUNC CONTEXT :: reference
Execution Context Syntax of function call Value of this
Global n/a global object (e.g. window)
Function
Method call:
myObject.foo();
myObject
Function
Baseless function call:
foo();
global object (e.g. window)
(undefined in strict mode)
Function
Using call:
foo.call(context, myArg);
context
Function
Using apply:
foo.apply(context, [myArgs]);
context
Function
Constructor with new:
var newFoo = new Foo();
the new instance
(e.g. newFoo)
Evaluation n/a value of this in parent context
source: http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/
52. REQUIREJS :: WHY?
● Web sites are turning into Web apps
● Code complexity grows as the site gets
bigger
● Assembly gets harder
● Developer wants discrete JS files/modules
● JavaScript doesn't have import yet
source: http://requirejs.org/docs/why.html
64. JQUERY :: SELECTORS
$(selector).method()
For example, $(‘#list’) will return the elements which has the attribute id=”list”.
For more, see http://api.jquery.com/category/selectors/.
73. TOOLS :: PROMISES :: def
In computer science, future, promise, and delay refer to
constructs used for synchronizing in some concurrent
programming languages. They describe an object that acts as a
proxy for a result that is initially unknown, usually because the
computation of its value is yet incomplete.
The term promise was proposed in 1976 by Daniel P. Friedman
and David Wise,[1] [...]
The terms future, promise, and delay are often used
interchangeably, although some differences in usage between
future and promise are treated below. Setting the value of a
future is also called resolving, fulfilling, or binding it.
Source: http://en.wikipedia.org/wiki/Futures_and_promises
75. TOOLS :: PROMISES :: Deferred Object
jQuery.Deferred() A constructor that creates a new Deferred object, can take an optional
initFunction parameter that will be called right after the deferred has
been constructed.
jQuery.when() A way to execute callback functions based on one or more objects that
represent asynchronous tasks.
jQuery.ajax() Performs an asynchronous Ajax requests where the jqXHR objects
returned by $.ajax() implement the Promise interface, giving them all
the properties, methods, and behaviour of a Promise.
deferred.resolve(arg1, arg2, ...) Resolve a Deferred object and call any 'done' Callback with the given
arguments.
deferred.reject(arg1, arg2, ...) Reject a Deferred object and call any 'fail' Callback with the given
arguments.
deferred.promise() Returns a promise, that is an immutable view of the deferred object: the
promise can be passed around safely since the underlying deferred
cannot be resolved or rejected through it.
76. TOOLS :: PROMISES :: Promise Object
deferred.then(resolveCallback,
rejectCallback)
Handlers to be called when the Deferred object is resolved or
rejected.
deferred.done() Functions or array of functions that are called when the Deferred
object is resolved.
deferred.fail() Functions or array of functions that are called when the Deferred is
rejected.
deferred.isResolved Determine whether a Deferred object has been resolved.
77. TOOLS :: PROMISES :: side 1
$.when(
// call functions
startChannel(),
drawLayout()
).done(function () {
// do when both are done
initModule.start();
})
78. TOOLS :: PROMISES :: side 2
function drawLayout () {
var dfd = $.Deferred();
function loadSettings() {
// do some ajax request;
}
function validate() {
...
// in case validation failed
dfd.reject();
}
function render() {
// render
return dfd.resolve();
}
return dfd.promise();
}