tag:blogger.com,1999:blog-83260070286243885912024-02-18T19:25:19.362-08:00Web Design is easyLearn HTML, CSS, PHP, MySQL, JavaScript and more here. World of complete and concise information on web design and development. A Beginners guide and a recollection ground for professionals.Anonymoushttp://www.blogger.com/profile/02002278468336701699noreply@blogger.comBlogger121125tag:blogger.com,1999:blog-8326007028624388591.post-4595203705668936642015-11-25T16:51:00.001-08:002015-11-25T16:51:04.761-08:00#Technetronic2015 (Official Guinness World Record Attempt)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7ObsY3STYtQYli6iOKLvqs9s0991ufPdexvHtK59fx5yXqnAo5t1AD3UQ11GjHPaUXlDutZOcQZgwI53ci2FGe7b2W3Y2hBrOvOo3fUapqQFpHfDUJfGzgUcmq30TDUIFiLbc-4f9hg/s1600/Technetronic+2015+5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7ObsY3STYtQYli6iOKLvqs9s0991ufPdexvHtK59fx5yXqnAo5t1AD3UQ11GjHPaUXlDutZOcQZgwI53ci2FGe7b2W3Y2hBrOvOo3fUapqQFpHfDUJfGzgUcmq30TDUIFiLbc-4f9hg/s640/Technetronic+2015+5.jpg" width="640" /></a></div>
<div style="background-color: white; color: #141823; font-family: helvetica, arial, sans-serif; font-size: 14px; line-height: 19.32px; margin-bottom: 6px;">
<br /></div>
<div style="background-color: white; color: #141823; font-family: helvetica, arial, sans-serif; font-size: 14px; line-height: 19.32px; margin-bottom: 6px;">
Technetronic is an annual IT focused event initiated by a group of young, upcoming IT undergraduates and professionals with the purpose of improving the standard of technology in the Nation Nigeria. Technetronic 2015's main goal is to initiate advancement in the growth of computing technology and the development of software developers in Nigeria.</div>
<div style="background-color: white; color: #141823; font-family: helvetica, arial, sans-serif; font-size: 14px; line-height: 19.32px; margin-bottom: 6px; margin-top: 6px;">
Technetronic 2015 will take place at the New Multipurpose Hall, Yaba College of Technology, Yaba Lagos on Thursday the 3rd of December 2015. The event will comprise of various activities which includes a Guinness World Record Attempt for The Largest Amount of People Learning How to Write Computer Programs in the World, and the first edition of the Internet and Technology Awards Nigeria.</div>
<div style="background-color: white; color: #141823; font-family: helvetica, arial, sans-serif; font-size: 14px; line-height: 19.32px; margin-bottom: 6px; margin-top: 6px;">
The Largest Programming Lesson World Record Attempt, simply will be bringing together over 2500 IT oriented individuals and citizens who are passionate about technology; enlightening them on the basics and concepts of instructing electronics and computer devices, orientate them on the need for computer specialists in our fast rising ICT enabled society and highlight the importance of acquiring computing knowledge in present day Nigeria. Participants will be given a run through on how to write web programming languages such as PHP in a live practical session in attempt for the World’s Largest Programming Lesson which happens be the first technological record attempt in Nigeria involving large amount of participants, and also the biggest ICT event in 2015.</div>
<div style="background-color: white; color: #141823; font-family: helvetica, arial, sans-serif; font-size: 14px; line-height: 19.32px; margin-bottom: 6px; margin-top: 6px;">
Also featuring on Technetronic 2015 agenda is The Internet and Technology Awards; the major aim of this award is to commend the continuous, never ending efforts of individuals and organizations in Nigeria’s technology industry whom have tirelessly continued to deliver quality technological services and related products. The awards boasts of categories such as hashtag of the year, university portal of the year, Internet service provider of the year, and over 47 other innovative technology and internet oriented categories.</div>
<div style="background-color: white; color: #141823; font-family: helvetica, arial, sans-serif; font-size: 14px; line-height: 19.32px; margin-bottom: 6px; margin-top: 6px;">
The Organization Zinospot Ng has claimed that innovative events such as Technetronic 2015 will task developers and tech-service provider in the nation to improve the quality of services they provide, as well as create a platform to promote the nation's technology industry beyond the walls of Africa. They further encourage all individuals interested in a forward moving technology industry to partake in the events, tasking the governing bodies, organizations and institutions to emulate the National Association of Computer Science Students YABATECH Chapter, Smile Nigeria,<a href="https://web.facebook.com/l.php?u=http%3A%2F%2FOnsele.com%2F&h=gAQH5nXpnAQEs8zF9T8t4npg7yfdhJEvux-dUe7w9SAGXyA&enc=AZP8VgtknXdiZcRJMkid3VW2ZrrEOQrsMgfs19GcsEaxh-XRzTtbPrpqpyZdySBlxfHaV9CzXoNo47gMCcSydeF0QVRjTjY-GpnAQr4--87UB1GqVlp9I1ri99FZWkmr-mLrVaJ3NiUhbGtih88UQe2lobmy6b60VBSsF3y6f_Ly-lcOcD6S4uxBy_fRIjdQ5JUwZjGM8d8lXHXdQUyqWmWv&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">Onsele.com</a>, <a href="https://web.facebook.com/l.php?u=http%3A%2F%2FBellanaija.com%2F&h=zAQF8XxD3AQE1gFI38kJSBGCSI2uvZzFZFgfM7EJS1vgnGw&enc=AZN6j2e60EEDrhXlwt9JhxU2l9GZbDvsZEno7MqN5eqN84fyqPFB-HeVDVo2frEg6S8nipqu4OcsmbNEMgLZCTCzHpXwxtgrJzPsImDkRcBjuAzsypt80tun8qgKDj-raCt19tjCsxSpH2UaG1M8ryYlS_YYaYd26-VtpbisA9NA6U_3nX3nRBVyCRfFX416tqJay78yPjIw1dVrBzHTiPIG&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">Bellanaija.com</a>, Naijaloaded.com.ng, <a href="https://web.facebook.com/l.php?u=http%3A%2F%2FOlodonation.com%2F&h=QAQGDTB7-AQH0-nSfpnrN-EZaDSHS-LbIHyMUe_jqNCecJw&enc=AZNRHFGbO8w2ZXwk6Ok80wUgPmzvHCoJEWimZXEZf3Y9nq6k-_iL7I0t8Jy6fQlyphEgAiOoFWLWnaqtoHQVfyIXmL1fpN7__27uFRglk3xNsEi1jFYJMPQWC6k1ziBcSWIuzC1WdZBom2TpzZNa_w32RMilGIvQmyzJ05WhQKIcCU_4Joh4jGlKmAnFGe8EkzHOiXlPF5GUhJh2RPSP3RXL&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">Olodonation.com</a> and other notable organization and bodies involved in the project to invest in projects such as these as it is one way to tackle unemployment, promote the growth of technology in the nation and empower the youth’s in Nigeria.</div>
<div style="background-color: white; color: #141823; display: inline; font-family: helvetica, arial, sans-serif; font-size: 14px; line-height: 19.32px; margin-top: 6px;">
Individuals and organizations who are interested in the event can visit the Technetronic 2015 website at <a href="https://web.facebook.com/l.php?u=http%3A%2F%2Fwww.technetronic.ml%2F&h=XAQEENuP-AQFsNKYsopwGT3YI63PF_R-RfHgCpcRZntzVZw&enc=AZPzd3SX6w8GSLWaQbjlWjsL6RDrYrl5sFq_cyVWvhjivs1T8IW1TtfRDxCoeUj9TO29mj0OBPfdBy0ijcu1k5Ur-6N6gMWXDUDRAemAVxVVte3aKLu55vfV1qG3-oZZFQPmIi4ZEPoNwgtfNoQcENcXoCE4livr5CrqWO6zv6HocQMrnk_KQMmKxdtKKPzXGdeTiuZMMJKplHj9Ww2QJiqv&s=1" rel="nofollow" style="color: #3b5998; cursor: pointer; text-decoration: none;" target="_blank">www.technetronic.ml</a>, call 07055069014, 08134831118, email admin@technetronic.ml for registration, enquires and sponsorship. Registration is free.</div>
Zino Adidihttp://www.blogger.com/profile/08032647839655903802noreply@blogger.com2tag:blogger.com,1999:blog-8326007028624388591.post-24620088979330957912015-02-08T02:53:00.003-08:002015-02-09T23:41:04.670-08:00CSS3: Filters<span style="font-family: Trebuchet MS, sans-serif;">The filter property gives You the power to manipulate image view by adding blur, changing brightness, saturation, contrast, opacity ans so on. </span><br />
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">We'll gonna introduce You the most important and usable of them.</span><br />
<br />
<span style="font-family: Trebuchet MS, sans-serif;">NOTE: The CSS3 filter property requires vendor prefixes for some of the browsers.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<div style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<span style="font-family: Trebuchet MS, sans-serif;">-webkit-filter: blur(3px); // chrome and safari</span></div>
<div style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<span style="font-family: Trebuchet MS, sans-serif;">-moz-filter: blur(3px); // mozilla and gecko</span></div>
<div style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<span style="font-family: Trebuchet MS, sans-serif;">-o-filter: blur(3px); // opera</span></div>
<div style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<span style="font-family: Trebuchet MS, sans-serif;">-ms-filter: blur(3px); // IE</span></div>
<div style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<span style="font-family: Trebuchet MS, sans-serif;">filter: blur(3px); // for old browser versions</span></div>
</div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif; font-size: large;">Syntax:</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">filter: function( value );</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif; font-size: large;">Example:</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">filter: blur( 3px );</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><u>We'll gonna discover 8 filter function:</u></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif; font-size: large;">blur()</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">This function make an image or any element blurry.</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">filter: blur(3px);</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="125" width="200" /></span></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="200" style="-moz-filter: blur(3px); -ms-filter: blur(3px); -o-filter: blur(3px); -webkit-filter: blur(3px); filter: blur(3px);" width="320" /></span></a></div>
<div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">
<span style="font-size: large;">contrast()</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">This function allows You to change the contrast.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Default value is 1. If its higher than 1, the contrast will be higher and if its lower then 1, lower contrast.</span><br />
<div style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<div style="font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<span style="font-family: 'Trebuchet MS', sans-serif;">filter: </span><span style="font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">contrast(1.5);</span></div>
<div style="font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<br /></div>
</div>
</div>
<div style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="200" style="-moz-filter: contrast(1.5); -ms-filter: contrast(1.5); -o-filter: contrast(1.5); -webkit-filter: contrast(1.5); filter: contrast(1.5);" width="320" /></span></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="125" width="200" /></span></a><span style="font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span></div>
<div style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<br />
<span style="font-family: Trebuchet MS, sans-serif; font-size: large;">brightness()</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Using this function You can change the brightness.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">The value is same as contrast().</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">filter: </span><span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">brightness(0.4);</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="125" width="200" /></span></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="200" style="-moz-filter: brightness(0.4); -ms-filter: brightness(0.4); -o-filter: brightness(0.4); -webkit-filter: brightness(0.4); filter: brightness(0.4);" width="320" /></span></a><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<br />
<span style="font-family: Trebuchet MS, sans-serif; font-size: large;">grayscale()</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">With this You can make black and white images, with other words Grey images.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Max value is 100%. Change the value to see the effect.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">filter: </span><span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">grayscale(100%);</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="125" width="200" /></span></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="200" style="-moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: grayscale(100%);" width="320" /></span></a><span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span></span><br />
<span style="font-family: Trebuchet MS, sans-serif; font-size: large;">opacity()</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Opacity can change easily the transparency of an image or any element.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Value is also in percentes. 100% is absolutely visible, 0% is absolutely transparent.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">filter: </span><span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">opacity(50%);</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="125" width="200" /></span></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="200" style="-moz-filter: opacity(50%); -ms-filter: opacity(50%); -o-filter: opacity(50%); -webkit-filter: opacity(50%); filter: opacity(50%);" width="320" /></span></a></div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<br />
<span style="font-family: Trebuchet MS, sans-serif; font-size: large;">sepia()</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Convert Your image to sepia.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Value is in percents. Max is 100%. Minimum 0%.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">filter: </span><span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">sepia(100%);</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="125" width="200" /></span></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="200" style="-moz-filter: sepia(100%); -ms-filter: sepia(100%); -o-filter: sepia(100%); -webkit-filter: sepia(100%); filter: sepia(100%);" width="320" /></span></a><span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span></span>
<br />
<span style="font-family: Trebuchet MS, sans-serif; font-size: large;">saturate()</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">This function saturates the image.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Default value is 100% and its unchanged. Higher and lower value makes the changes.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">filter: </span><span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;">saturate(220%);</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="125" width="200" /></span></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="200" style="-moz-filter: saturate(220%); -ms-filter: saturate(220%); -o-filter: saturate(220%); -webkit-filter: saturate(220%); filter: saturate(220%);" width="320" /></span></a><span style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span>
<span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span><span style="background-color: white; font-size: 14.8500003814697px; line-height: 20.7900009155273px;"><br /></span><span style="font-size: large;">
invert()</span></span><br />
<span style="background-color: white; font-family: Trebuchet MS, sans-serif; line-height: 21px;">Inverts the samples in the input image.</span><br />
<span style="background-color: white; font-family: Trebuchet MS, sans-serif; line-height: 21px;">Value of 100% is absolutely inverted, and value of 0% is unchanged.</span><br />
<span style="background-color: white; font-family: Trebuchet MS, sans-serif; line-height: 21px;"><br /></span>
<span style="background-color: white; font-family: Trebuchet MS, sans-serif; line-height: 21px;">filter: invert(100%);</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="background-color: white; font-size: 14px; line-height: 21px;"><br /></span>
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="125" width="200" /></span></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><span style="color: black; font-family: Trebuchet MS, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="200" style="-moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(100%); -webkit-filter: invert(100%); filter: invert(100%);" width="320" /></span></a><span style="background-color: white; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px;"><br /></span><br />
<span style="background-color: white; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px;"><br /></span>
<span style="background-color: white; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px;"><br /></span>
<span style="background-color: white; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px;"><br /></span>
<span style="background-color: white; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px;"><br /></span>
<span style="background-color: white; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px;"><br /></span>
<span style="background-color: white; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px;"><br /></span>
<span style="background-color: white; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px;"><br /></span>
<span style="background-color: white; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px;"><br /></span>
<span style="background-color: white; color: #4d4e53; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 21px;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><b>EXAMPLE CODE:</b></span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><html></span><br />
<span style="font-family: Courier New, Courier, monospace;"><head></span><br />
<span style="font-family: Courier New, Courier, monospace;"><style></span><br />
<span style="font-family: Courier New, Courier, monospace;">#lee_hyori {</span><br />
<span style="font-family: Courier New, Courier, monospace;">width: 580px;</span><br />
<span style="font-family: Courier New, Courier, monospace;">height: 370px;</span><br />
<span style="font-family: Courier New, Courier, monospace;">-webkit-filter: sepia(100%);</span><br />
<span style="font-family: Courier New, Courier, monospace;">-moz-filter: sepia(100%);</span><br />
<span style="font-family: Courier New, Courier, monospace;">-o-filter: sepia(100%);</span><br />
<span style="font-family: Courier New, Courier, monospace;">-ms-filter: sepia(100%);</span><br />
<span style="font-family: Courier New, Courier, monospace;">filter: sepia(100%);</span><br />
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;"></style></span><br />
<span style="font-family: Courier New, Courier, monospace;"></head></span><br />
<span style="font-family: Courier New, Courier, monospace;"><body></span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><img id="lee_hyori" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg"/></span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"></body></span><br />
<span style="font-family: Courier New, Courier, monospace;"></html></span>Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-37391791427707190902015-02-05T07:47:00.000-08:002015-02-08T02:55:52.774-08:00Blur Effect : CSS<span style="font-family: Trebuchet MS, sans-serif;">Now and here we'll gonna discover how to create blurred images and element. </span><br />
<div>
<span style="font-family: Trebuchet MS, sans-serif;">The below example shows You how to to make an image to look blurry.</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">To do that we use the <i><u>filter</u> </i>property.</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><u>filter: blur(3px);</u></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">Two words and 1 value.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Trebuchet MS, sans-serif;"></span></div>
<span style="font-family: Trebuchet MS, sans-serif;">
</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">The value can be any number followed by "px".</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><u>To make it cross-browser we simply use vendor prefixes.</u></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">-webkit-filter: blur(3px);</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">-moz-filter: blur(3px);</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">-o-filter: blur(3px);</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">-ms-filter: blur(3px);</span></div>
<div>
<span style="font-family: Trebuchet MS, sans-serif;">filter: blur(3px);</span></div>
<div>
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="127" width="200" /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" height="204" style="-moz-filter: blur(3px); -ms-filter: blur(3px); -o-filter: blur(3px); -webkit-filter: blur(3px); filter: blur(3px);" width="320" /></a><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: 'Trebuchet MS', sans-serif;">Example code:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><html></span><br />
<span style="font-family: Courier New, Courier, monospace;"><head></span><br />
<span style="font-family: Courier New, Courier, monospace;"><style></span><br />
<span style="font-family: Courier New, Courier, monospace;">.lee_hyori {</span><br />
<span style="font-family: Courier New, Courier, monospace;">width: 580px;</span><br />
<span style="font-family: Courier New, Courier, monospace;">height: 370px;</span><br />
<div>
<u><span style="font-family: Courier New, Courier, monospace;">-webkit-filter: blur(3px);</span></u></div>
<div>
<u><span style="font-family: Courier New, Courier, monospace;">-moz-filter: blur(3px);</span></u></div>
<div>
<u><span style="font-family: Courier New, Courier, monospace;">-o-filter: blur(3px);</span></u></div>
<div>
<u><span style="font-family: Courier New, Courier, monospace;">-ms-filter: blur(3px);</span></u></div>
<div>
<u><span style="font-family: Courier New, Courier, monospace;">filter: blur(3px);</span></u></div>
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;"></style></span><br />
<span style="font-family: Courier New, Courier, monospace;"></head></span><br />
<span style="font-family: Courier New, Courier, monospace;"><body></span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /><img class="lee_hyori" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg"/></span><br />
<span style="font-family: Courier New, Courier, monospace;"><br />
</body></span><br />
<span style="font-family: Courier New, Courier, monospace;"></html></span><br />
<br />
<br />
<span style="font-family: Georgia, Times New Roman, serif;">You can use this for everything from images to forms, paragraphs and so on.</span>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F1.bp.blogspot.com%2F-DV27oDNOQbk%2FVNOJwOjBBLI%2FAAAAAAAAAME%2F3ryxwoSR6sw%2Fs1600%2Flee-hyori-3106-1920x1200.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtn0lGNpIoG7LYb2RYQ0Nn3w47mdUfSnkqZ82mfn5WJlv-gDIsSJMCL7VN8Cny2pmutjagmZtVIObPWSFSl2pAr1g12gdrW1LrLkE7hq6LGrhD5UVI6MHblQj7tc4vUN_tz91-H99uQqCN/s1600/lee-hyori-3106-1920x1200.jpg" -->Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-24914261757517417072014-10-29T11:20:00.001-07:002014-10-29T11:20:19.513-07:00Change the styles of the selected area usign CSS<span style="font-family: Trebuchet MS, sans-serif;">This tutorial demonstrates how to use the ::selection selector, which allows you to set different font and background color for the marked area. The default is black fonr color and blue background. Now let us show You how to change that.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">First we simply call the <i><span style="color: #666666;">::selection</span></i> selector.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<i><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">::selection {</span></i><br />
<span style="color: #999999; font-family: Trebuchet MS, sans-serif;">// You can add only 2 properties : color, background </span><br />
<i><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">}</span></i><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><b><span style="color: red;">NOTE:</span></b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">The ::selection selector is not supported in Internet Explorer 8 and earlier versions.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">Firefox support the <i><span style="color: #666666;">::selection</span></i> selector, but the -moz- vendor prefix is required.( <i><span style="color: #666666;">::-moz-selection</span></i> )</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<b><span style="font-family: Trebuchet MS, sans-serif;">EXAMPLE:</span></b><br />
<br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><html></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><head></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><title>::selection selector</title></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><style></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="background-color: white;"><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">::selection {</span></span><br />
<span style="background-color: white;"><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">color: #fff;</span></span><br />
<span style="background-color: white;"><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">background: #000;</span></span><br />
<span style="background-color: white;"><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">}</span></span><br />
<span style="background-color: white;"><span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><br /></span></span>
<span style="background-color: white;"><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">::-moz-selection {</span></span><br />
<span style="background-color: white;"><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">color: #fff;</span></span><br />
<span style="background-color: white;"><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">background: #000;</span></span><br />
<span style="background-color: white;"><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">}</span></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"></style></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"></head></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><body></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><p>This is a simple example.</p></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><p>Shows you how to use ::selection.</p></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><p>You can change the color.</p></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><p>Also the background.</p></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><p>Enjoy with our <a href="http://easilylearnhtml.blogspot.com/p/tips-tricks.html" target="_blank">Tips & Tricks</a> every day.</p></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"></body></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"></html></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<span style="font-family: Trebuchet MS, sans-serif;"><u>DEMO cannot be added because it will effect to the other elements of the page.</u></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-57293583714664428812014-10-28T01:44:00.000-07:002014-10-29T11:25:47.708-07:00Vertical and Horizontal Center Alignment of Element(CSS)<span style="font-family: Trebuchet MS, sans-serif;"> <span style="font-size: large;">Vertical and Horizontal Center Alignment of Element(CSS)</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
This is for those who knows CSS.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
As you know you can set specific element in the center of it's parent using <span style="color: #444444;">"margin: auto;"</span>.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<b>Using CSS position property.</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">With this property you can set your element without affecting the others.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Im going to show you how to set the element in the center verticaly and horizontaly. To do that you need to use also the margin: auto; property.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">We simply add :</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #444444;">margin: auto;</span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">position: absolute;</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span><br />
<ul>
<li><span style="font-family: Trebuchet MS, sans-serif;">if we want to set it centered horizontaly we do that:</span></li>
</ul>
<br />
<span style="font-family: Trebuchet MS, sans-serif;">
<span style="color: #444444;">margin: auto;</span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">position: absolute;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">left: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">right: 0;</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
Now when you resize the page it wil be always at the center.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span><br />
<ul>
<li><span style="font-family: Trebuchet MS, sans-serif;">You can also set vertical center alignment by doing this :</span></li>
</ul>
<span style="font-family: Trebuchet MS, sans-serif;">
<span style="color: #444444;">margin: auto;</span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">position: absolute;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">top: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">bottom: 0;</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span><br />
<ul>
<li><span style="font-family: Trebuchet MS, sans-serif;">Or set centered alignment for horizonal and vertical :</span></li>
</ul>
<span style="font-family: Trebuchet MS, sans-serif;">
<span style="color: #444444;">margin: auto;</span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">position: absolute;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">left: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">right: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">top: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">bottom: 0;</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
Now no matter what you resize, the heigth or the width of the page the element will be always at the center of the page.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<b>EXAMPLE:</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #444444;"><html></span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><head></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><title></title></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><style></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">.myDiv {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">width: 300px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">height: 230px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">background: red;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">margin: auto;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">position: absolute;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">left: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">right: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">top: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">bottom: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></style></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></head></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><body></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><div class="myDiv"></div></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></body></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></html></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<br />
<br />
#easilylearnhtml</span>Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-48475620132941145882014-10-27T10:17:00.001-07:002014-10-29T11:28:17.114-07:00Change the cursor image of the mouse<span style="font-family: Trebuchet MS, sans-serif; font-size: x-large;"> Change the cursor of the mouse</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
This tutorial demonstrates how we can change the cursor image for our elements with just one line of code.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
The syntax is very easy:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #444444;">cursor: url(URL to image);</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
but if you want it to work fine, in addition you have to add <i>auto</i> after this :</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #444444;">cursor: url(URL to image), auto;</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<b>Example:</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #444444;"><html></span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><head></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><title>I am changing my cursor image</title></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><style></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
#block {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">width: 400px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">height: 240px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">background: #333;</span><br />
<span style="background-color: yellow; color: #444444; font-family: Trebuchet MS, sans-serif;">cursor: url(Cursor-icon.png), auto;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
</style></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></head></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><body></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><div id="block"></div></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></body></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></html></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><b><br /></b>
</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="color: blue; font-size: large;">LIVE DEMO:</span>
<body>
<style>
#block {
width: 400px;
height: 240px;
background: #333;
cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZEWT_Df0xVuvPrFkswT62VVEJz1io2hKt7rPFQsUViQf7rCKM3e-tqx5YpGLLfWWNDPL3G5C6gJ_MbHiSOuJkEG37ILnkPpxdEv-jVtMaEAoqmRqxzgv3Y6lGDIcjQuXCnceCWnIhfsAX/h16/Cursor-icon.png"), auto;
}
</style>
<div id="block">
</div>
</body>
</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="color: blue; font-size: large;"><br /></span></span>
<span style="font-family: Trebuchet MS, sans-serif;">We are accepting question here and in our facebook page. </span>Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-30176692877694500342014-10-26T09:43:00.002-07:002014-10-29T11:31:14.316-07:00Pure JavaScript Live Form Validation(Non styled)<span style="font-family: Trebuchet MS, sans-serif;">This is a perfect example for cool and responsive popup Sign Up/In form.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">All you need to do is to add the HTML, CSS and Javascript to your page and add some styles.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">You should pass the code here :</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<b><span style="font-family: Trebuchet MS, sans-serif;">EXAMPLE:</span></b><br />
<span style="font-family: Trebuchet MS, sans-serif;"><b><br /></b><span style="color: #444444;">
<html></span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><head></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><title>Form Validation</title></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><style></span><br />
<span style="color: #999999; font-family: Trebuchet MS, sans-serif;">// Here paste the CSS CODE</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></style></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></head></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><body></span><br />
<span style="color: #999999; font-family: Trebuchet MS, sans-serif;">// Here paste the HTML CODE</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><script></span><br />
<span style="color: #999999; font-family: Trebuchet MS, sans-serif;">// Here paste the JAVASCRIPT CODE</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></script></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></body></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></html></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">****HTML CODE****</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><div class="form"></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><form action="http://www.easilylearnhtml.blogspot.com" method="get" class="form"></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">Username: <input type="text" class="user" /></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">Password: <input type="password" class="pass" /></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">Email: <input type="text" class="email" /></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><input type="submit" class="submit" /></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></form></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></div></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">****CSS CODE****</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">body {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 0;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">.user, .pass, .email {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>border: 1px solid #BFBFBF;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">****JAVASCRIPT CODE****</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">function addEventHandler(evtTarget, evt, fnction, bubl) {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (addEventListener) {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>evtTarget.addEventListener(evt, fnction, bubl);</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>} else if (attachEvent) {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>evtTarget.attachEvent("on" + evt, fnction);</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="color: #444444;">}</span> <span style="color: #999999;">// cross-browser event handler</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #999999; font-family: Trebuchet MS, sans-serif;">// Real time for validation</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">function autoFormValidation(form, patt) {</span><br />
<span class="Apple-tab-span" style="color: #444444; font-family: Trebuchet MS, sans-serif; white-space: pre;"> </span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>addEventHandler(form, "input", function(e) {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var pattern = patt;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var target = e.target.value;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>var check = pattern.test(target);</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (!check) {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>e.target.style.border = "3px solid red";</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>} else { <span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span> e.target.style.border = "3px solid green";</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}, false);</span><br />
<span class="Apple-tab-span" style="color: #444444; font-family: Trebuchet MS, sans-serif; white-space: pre;"> </span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>addEventHandler(form, "input", function(e) {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.target.value == 0) {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>e.target.style.border = "1px solid #BFBFBF";</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}, false);</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #999999; font-family: Trebuchet MS, sans-serif;">// checks if the fields are filled correct</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">addEventHandler(document.querySelector(".form"), "submit", function(e) {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (document.querySelector(".user").value == 0 || document.querySelector(".pass").value == 0 ||</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>document.querySelector(".email").value == 0) {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>e.preventDefault();</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>alert("Some of the forms arent filled");<span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span class="Apple-tab-span" style="color: #444444; font-family: Trebuchet MS, sans-serif; white-space: pre;"> </span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (document.querySelector(".user").style.border == "3px solid red" ||</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>document.querySelector(".pass").style.border == "3px solid red" ||</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>document.querySelector(".email").style.border == "3px solid red" ) {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>e.preventDefault();</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>alert("Edit the red fields...");</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}, false);</span><br />
<span class="Apple-tab-span" style="font-family: Trebuchet MS, sans-serif; white-space: pre;"> </span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><span style="color: #444444;">autoFormValidation(document.querySelector(".user"), /^\w{4,}$/);</span> <span style="color: #999999;">// username input</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="color: #444444;">autoFormValidation(document.querySelector(".pass"), /^\w{6,}$/);</span> <span style="color: #999999;">// password input</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="color: #444444;">autoFormValidation(document.querySelector(".email"), /^[a-zA-z0-9_]{4,}[@]{1}[a-z]{2,}\.{1}[a-z]{2,}$/);</span> <span style="color: #999999;">//email input</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #0b5394; font-family: Trebuchet MS, sans-serif; font-size: large;"><b>LIVE DEMO:</b></span><br />
<span style="color: #0b5394; font-family: Trebuchet MS, sans-serif; font-size: large;"><b><br /></b></span>
<body>
<style>
body {
margin: 0;
padding: 0;
}
.user, .pass, .email {
border: 1px solid #BFBFBF;
}
</style>
<div class="form">
<form action="http://www.easilylearnhtml.blogspot.com" class="form" method="get">
Username: <input class="user" type="text" />
<br />
Password: <input class="pass" type="password" />
<br />
Email: <input class="email" type="text" />
<br />
<input class="submit" type="submit" />
</form>
</div>
<script>
function addEventHandler(evtTarget, evt, fnction, bubl) {
if (addEventListener) {
evtTarget.addEventListener(evt, fnction, bubl);
} else if (attachEvent) {
evtTarget.attachEvent("on" + evt, fnction);
}
} // cross-browser event handler
// Real time for validation
function autoFormValidation(form, patt) {
addEventHandler(form, "input", function(e) {
var pattern = patt;
var target = e.target.value;
var check = pattern.test(target);
if (!check) {
e.target.style.border = "3px solid red";
} else {
e.target.style.border = "3px solid green";
}
}, false);
addEventHandler(form, "input", function(e) {
if (e.target.value == 0) {
e.target.style.border = "1px solid #BFBFBF";
}
}, false);
}
// checks if the fields are filled correct
addEventHandler(document.querySelector(".form"), "submit", function(e) {
if (document.querySelector(".user").value == 0 || document.querySelector(".pass").value == 0 ||
document.querySelector(".email").value == 0) {
e.preventDefault();
alert("Some of the forms arent filled");
}
if (document.querySelector(".user").style.border == "3px solid red" ||
document.querySelector(".pass").style.border == "3px solid red" ||
document.querySelector(".email").style.border == "3px solid red" ) {
e.preventDefault();
alert("Edit the red fields...");
}
}, false);
autoFormValidation(document.querySelector(".user"), /^\w{4,}$/); // username input
autoFormValidation(document.querySelector(".pass"), /^\w{6,}$/); // password input
autoFormValidation(document.querySelector(".email"), /^[a-zA-z0-9_]{4,}[@]{1}[a-z]{2,}\.{1}[a-z]{2,}$/); //email input
</script>
</body>Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-68083443476821947932014-10-25T14:09:00.000-07:002014-10-29T11:41:22.988-07:00CSS3 Keyframes Slideshow<h1 style="font-size: 25px; text-align: center;">
<span style="font-family: Trebuchet MS, sans-serif;">CSS3 Keyframes Slideshow</span></h1>
<span style="font-family: Trebuchet MS, sans-serif;">This is just example on what you can do with <a href="http://easilylearnhtml.blogspot.com/2014/10/css3-keyframe-animations.html" target="_blank">keyframes</a>, its not tutorial, if You are not familiar with keyframes animation, CSS as language or HTML, click here : <a href="http://easilylearnhtml.blogspot.com/2014/10/css3-keyframe-animations.html" target="_blank">CSS3 Keyframes Full Tutorial</a> || <a href="http://easilylearnhtml.blogspot.com/p/css.html" target="_blank">CSS Full Tutorial</a> || <a href="http://easilylearnhtml.blogspot.com/p/html_8.html" target="_blank">HTML Full Tutorial</a></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">The below keyframe code is only for Chrome and Safari but you can add support for mozilla, opera and IE by copying the code and adding the -moz-, -ms- and -o- vendor prefixes.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<b>Note:</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: red;">All those strange letters are just links. Dont thing about them.</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<b>Example:</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #444444;"><html></span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><head></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><title>CSS3 @keyframes slideshow</title></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><style></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">.slideShow {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 400px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>height: 200px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>border: 1px solid #000;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RHZUEIFXFHXQj8LLbGZB8-bbUaSyYB5bo1g3J4XZ_sIgyL2FQdIf64nh1xjy6fIwLx_W09Gb65MW7o4RTCdcQGZBu9KhPjasb6Hj5zncCUAHcwTpzXD4sjvaklsbwaDpP0Ms55OFOAQ5/w400-h200-p/crew.jpg);</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-repeat: no-repeat;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-animation: slideShow 15s 1s infinite alternate;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -moz-animation: slideShow 15s 1s infinite alternate;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">-ms-animation: slideShow 15s 1s infinite alternate; </span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">animation: slideShow 15s 1s infinite alternate;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
}</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #999999;">// Chrome and Safari</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #444444;">@-webkit-keyframes slideShow {</span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>0% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RHZUEIFXFHXQj8LLbGZB8-bbUaSyYB5bo1g3J4XZ_sIgyL2FQdIf64nh1xjy6fIwLx_W09Gb65MW7o4RTCdcQGZBu9KhPjasb6Hj5zncCUAHcwTpzXD4sjvaklsbwaDpP0Ms55OFOAQ5/w400-h200-p/crew.jpg) ;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> }</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>25% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH8yZaTmlCOwYv19X21lRL0z_03dOfIolPWw_kgms1Z5xmAjgMOXGjvOMLSALRYnxDz9SRT21_rLWirX3wlcxmY1E5Fqz9wuUs3KlTvm66FK-7gzPGEtu1ilkbHHm3Ewmut_o1ythYxMEr/w400-h200-p/elder.jpg) ;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>50% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzLcaBwL47BE3Lf8Iqw4_ff8ST5Vr36ctxuJDwupbEQTdsRCXxvJZpW520-PT8aGgjlSdogF1o2JXvVMWhoWeJ1EPXNMiD9wBR8CJGNj9UOobo46pne2iCZFXp2nbUGGvlE6M9ULjVsFj/w400-h200-p/nfs.jpg) ;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>75% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD0EEEBImHDmjlnKZMApo9BtVVrsF14WYJA0w3ewBATEAToeuapGkV_BB9D4aDSmhFYZyIqaaCxzEynxDWpaUuMGV9mQSoCbYtnyj73B5Gb-UJhf8fvAxiKp7w5VdCvXRv5XcvV-FcMN9O/w400-h200-p/poseidon.jpg) ;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>100% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHUnTqNYWUeFmpkg1UsuNamJLtLUkCYA74O5-Qj3r8k7wBvGU7wyHQBS2i87t4lWnF_zCDMgr_5AJzpOsN313-iGGAnUf5FHmHuX5AHaJKpatBn9hVESgBgyiaMWsvb97D8qBfNiUJsiw/w400-h200-p/tanks.jpg);</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></style></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></head></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><body></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><div class="slideShow"></div></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></body></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></html></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span><br />
<span style="font-family: Trebuchet MS, sans-serif; font-size: large;"><b><u>LIVE DEMO</u></b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><b><u><br /></u></b></span>
<body>
<style>
.slideShow {
width: 400px;
height: 200px;
border: 1px solid #000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RHZUEIFXFHXQj8LLbGZB8-bbUaSyYB5bo1g3J4XZ_sIgyL2FQdIf64nh1xjy6fIwLx_W09Gb65MW7o4RTCdcQGZBu9KhPjasb6Hj5zncCUAHcwTpzXD4sjvaklsbwaDpP0Ms55OFOAQ5/w400-h200-p/crew.jpg);
background-repeat: no-repeat;
-webkit-animation: slideShow 15s 1s infinite alternate;
-moz-animation: slideShow 15s 1s infinite alternate;
-ms-animation: slideShow 15s 1s infinite alternate;
animation: slideShow 15s 1s infinite alternate;
}
@-webkit-keyframes slideShow {
0% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RHZUEIFXFHXQj8LLbGZB8-bbUaSyYB5bo1g3J4XZ_sIgyL2FQdIf64nh1xjy6fIwLx_W09Gb65MW7o4RTCdcQGZBu9KhPjasb6Hj5zncCUAHcwTpzXD4sjvaklsbwaDpP0Ms55OFOAQ5/w400-h200-p/crew.jpg) ;
}
25% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH8yZaTmlCOwYv19X21lRL0z_03dOfIolPWw_kgms1Z5xmAjgMOXGjvOMLSALRYnxDz9SRT21_rLWirX3wlcxmY1E5Fqz9wuUs3KlTvm66FK-7gzPGEtu1ilkbHHm3Ewmut_o1ythYxMEr/w400-h200-p/elder.jpg) ;
}
50% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzLcaBwL47BE3Lf8Iqw4_ff8ST5Vr36ctxuJDwupbEQTdsRCXxvJZpW520-PT8aGgjlSdogF1o2JXvVMWhoWeJ1EPXNMiD9wBR8CJGNj9UOobo46pne2iCZFXp2nbUGGvlE6M9ULjVsFj/w400-h200-p/nfs.jpg) ;
}
75% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD0EEEBImHDmjlnKZMApo9BtVVrsF14WYJA0w3ewBATEAToeuapGkV_BB9D4aDSmhFYZyIqaaCxzEynxDWpaUuMGV9mQSoCbYtnyj73B5Gb-UJhf8fvAxiKp7w5VdCvXRv5XcvV-FcMN9O/w400-h200-p/poseidon.jpg) ;
}
100% {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHUnTqNYWUeFmpkg1UsuNamJLtLUkCYA74O5-Qj3r8k7wBvGU7wyHQBS2i87t4lWnF_zCDMgr_5AJzpOsN313-iGGAnUf5FHmHuX5AHaJKpatBn9hVESgBgyiaMWsvb97D8qBfNiUJsiw/w400-h200-p/tanks.jpg);
}
}
</style>
<div class="slideShow">
</div>
</body>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-54487658600544291532014-10-24T02:32:00.000-07:002014-10-29T11:46:10.031-07:00CSS3 @keyframe Animations<span style="font-family: Trebuchet MS, sans-serif; font-size: large;">CSS3 Animation/Keyframes</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
@keyframes allow us to make amazing animations without using Flash, javascript or animated images.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<b>There's few important steps:</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
1. Choose the element you want to animate and give it class or id.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
Example:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #444444;"><div class="anime"></div></span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span><br />
<hr />
<span style="font-family: Trebuchet MS, sans-serif;">2. Make sure that your element appear in the page by adding some styles.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />Example:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #444444;">.anime {</span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> width: 300px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> height: 200px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> background-color: #ff0033;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span><br />
<hr />
<span style="font-family: Trebuchet MS, sans-serif;">3. There's few properties that you can use.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<b><span style="font-family: Trebuchet MS, sans-serif;">animation-name </span></b><br />
<span style="font-family: Trebuchet MS, sans-serif;">You always have to add this property if you want to make animation. This is the name of your animation. It can be everything.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<u>Possible values</u> : </span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<ul>
<li><span style="font-family: Trebuchet MS, sans-serif;">Animation name</span></li>
</ul>
<div>
<br /></div>
<div>
<br /></div>
<span style="font-family: Trebuchet MS, sans-serif;">
<b>animation-delay </b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Pass only 1 value, for example if it's 3s(seconds), the animation will start after 3 sec when page loads.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<u>Possible values</u> : </span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<ul>
<li><span style="font-family: Trebuchet MS, sans-serif;">Seconds<span style="color: #999999;"> // animation-delay: 2s; </span></span></li>
</ul>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<b>animation-direction</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Specifies whether or not the animation should play in reverse on alternate cycles.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<u>Possible values</u> :</span><br />
<u><span style="font-family: Trebuchet MS, sans-serif;"><b>normal</b> | Default value.</span></u><br />
<span style="font-family: Trebuchet MS, sans-serif;"><u><br /></u>
<u><b>reverse</b> | The animation should play in reverse direction</u></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><u><br /></u>
<u><b>alternate</b> | The animation will be played as normal every odd time (1,3,5,etc..) and in reverse </u><u>direction every even time (2,4,6,etc...)</u></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><u><br /></u>
<u><b>alternate-reverse</b> | The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)</u></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<br />
<b>animation-duration</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Defines how many seconds it will take the animation to complete one cycle.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><u>Possible values</u> : </span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<ul>
<li><span style="font-family: Trebuchet MS, sans-serif;">Seconds</span></li>
</ul>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><b><br /></b>
<b>animation-iteration-count</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Defines the number of times an animation should be played</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><u>Possible values</u> :</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<ul>
<li><span style="font-family: Trebuchet MS, sans-serif;">Number(1,2,3,4 etc.)</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">Infinite</span></li>
</ul>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><b><br /></b>
<b>animation-play-state</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Specifies whether the animation is running or paused.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<u>Possible values</u> : </span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<ul>
<li><span style="font-family: Trebuchet MS, sans-serif;">paused</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">running</span></li>
</ul>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<b>animation-timing-function</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">The animation-timing-function specifies the speed curve of the animation.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<u>Possible values</u> :</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<br />
<ul>
<li><span style="font-family: Trebuchet MS, sans-serif;">linear</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">ease</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">ease-in</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">ease-out</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">ease-in-out</span></li>
</ul>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<b>animation</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">This is shorthand property for setting all animation properties in one,</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">except the animation-play-state and the animation-fill-mode property.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<u>Syntax</u> :</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">animation: name duration timing-function delay iteration-count direction play-state;</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />Example:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">-webkit-animation: spinner 5s ease 0s infinite alternate running;</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<br /><b>Example of all properties:</b></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><b><br /></b><span style="color: #444444;">
.anime {</span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-name: spinner;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-duration: 5s;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-timing-function: ease-out;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-delay: 1s;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-iteration-count: infinite;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-direction: alternate;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-play-state: running;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: red; font-size: large;">Note:</span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Always use them with vendor prefixes:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span><br />
<ul>
<li><span style="font-family: Trebuchet MS, sans-serif;">-webkit- | for google chrome and safari</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">-moz- | for mozilla</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">-ms- | for Internet Explorer</span></li>
<li><span style="font-family: Trebuchet MS, sans-serif;">-o- | for Opera</span></li>
</ul>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<br />
4. Next step is the real animation. Now you will going to use @keyframes. Always use vendor prefixes.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Syntax:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /><span style="color: #444444;">
@-prefix-keyframes animationName {</span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> </span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
Example:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /><span style="color: #444444;">
@-webkit-keyframes spinner {</span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
}</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
5. We can control the animation all the time. To do that you need to use percents.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
Here's what will going to happen:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">at 10% of the animation the background will change, at 30% the width, at 60 the height and at 100% it will spin the element 360deg.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
SYNTAX:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /><span style="color: #444444;">
@-webkit-keyframes spinner {</span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> 10% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #fff;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>30% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>width: 400px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>60% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>height: 300px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>100% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-transform: rotate(360deg);</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
Full example:</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /><span style="color: #444444;">
<html></span></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><head></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><title>My first Animation</title></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><style></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
.anime {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> width: 300px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> height: 200px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> background-color: #ff0033;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-name: spinner;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-duration: 5s;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-timing-function: ease-out;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-delay: 0s;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-iteration-count: infinite;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-direction: alternate;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"> -webkit-animation-play-state: running;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;">}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
@-webkit-keyframes spinner {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
10% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #fff;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>30% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>width: 400px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>60% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>height: 300px;</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>100% {</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-transform: rotate(360deg);</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
}</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br />
</style></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></head></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><body></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><div class="anime"></div></span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></body</span><br />
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"></html></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
Note: </span><br />
<span style="font-family: Trebuchet MS, sans-serif;">Experiment with the code all the time for better and amazing results. Learn with <a href="http://www.facebook.com/easilylearnhtml" target="_blank">#EASILYLEARNHTML</a> Team all the time.</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br />
<span style="color: #666666; font-size: large;"><b><a href="http://easilylearnhtml.blogspot.com/2014/10/css3-keyframes-slideshow.html" style="background-color: white;" target="_blank">CLICK FOR LIVE DEMO</a></b></span></span>Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-42162474869291897032014-07-03T01:49:00.003-07:002014-10-29T11:50:31.394-07:00Chapter 12: JavaScript Functions<div class="MsoNormal">
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 22.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Trebuchet MS, sans-serif; font-size: large;">Functions</span></span><br />
<span lang="EN-CA" style="font-size: 22.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Trebuchet MS, sans-serif; font-size: large;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">As we start to add more code
we want to make sure that it doesn’t get messy and hard to read. So as it all
languages we’ll going to break apart large element in JavaScript into smaller
reusable modular pieces. All we doing is taking several statements, wrapping
them up and giving them a name, and that means we are creating functions. To
make one we take the code that we want to enclose, no matter the size of the
script. We surround with a curly braces to create a code block to say where
this function starts and ends. We use the word function, we also give it a
name. You decide what to be the name, but you have to remember but you can’t
start the name of your function with number<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: Trebuchet MS, sans-serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><b>Example</b></span><span style="font-size: 12.0pt; line-height: 115%;"><b>:</b><o:p></o:p></span></span><br />
<span style="font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><html><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><head><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><title>Untitled
Document</title><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"></head><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><body><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><script><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">function anyFunction() {<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"> console.log("This is
function example.");<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">}<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"></script><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"></body><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"></html><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">After the function is
declared, we can call it.<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">We can use the name of the
function with the opening and closing parentheses ( <i>always use open and closing parentheses when you declare function</i> ),
semi-colon because it is a full statement. And all the code inside the function
will be executed. Now note that as soon as you put your code in a function it
won’t execute, it won’t run unless you explicitly call it.<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Its good practice to define
your functions before you calls them.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: Trebuchet MS, sans-serif;"><b><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span></b><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><html><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><head><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><title>Untitled
Document</title><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"></head><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><body><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><script><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">function anyFunction() {<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"> console.log("This is
function example.");<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">}<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">anyFunction();<o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"></script><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"></body><o:p></o:p></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="color: #444444;"></html></span><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 16.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Functions with parameters<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;">When you call a function you can pass values to it
named arguments or parameters.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;">We can create 2 types of arguments – single and
multiple which is separated with comas.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;">function myFunction(parameterX, parameterY, parameterZ)
{<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;"><span style="color: #999999;">// code to be executed</span><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><b><span lang="EN-CA">Example</span>:</b><span lang="EN-CA"><o:p></o:p></span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><html><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><head><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><title>Untitled Document</title><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></head><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><body><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><script><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">function anyFunction( x, y, z) {<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">var calc = x-y+z ;<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">console.log(calc);<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">anyFunction(20, 10, 5);<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">anyFunction(40, 27, 4);<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></script><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></body><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;"><span style="color: #444444;"></html></span><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;">When the function is called it receives values called
arguments.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;">The parameters and the
arguments must be in the same order:<span lang="EN-CA"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><span lang="EN-CA">var a</span> = <span lang="EN-CA">myFunction(x, y,
z)</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;">You can use the arguments as local variable when they
are placed inside the function.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;">Often the arguments
are used to compute a return value.<span lang="EN-CA"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; mso-line-height-alt: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 18pt;">JavaScript return<o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;">We can optionally return values. Not only can a
function accept information, but we can also send some back. If you want to
return information all you need to do is to use the word return, and then pass
back a variable, string, number, it’s up to you.<o:p></o:p></span><br />
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><b><span lang="EN-CA">Example</span>:</b><span lang="EN-CA"><o:p></o:p></span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><html><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><head><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><title>Untitled Document</title><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></head><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><body><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><script><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">function myFunction( x, y, z) {<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">var calc = x-y+z ;<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">console.log(calc);<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">// we can return values<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">return calc;<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">myFunction(20, 10, 5);<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">myFunction(40, 27, 2);<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></script><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></body><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;"><span style="color: #444444;"></html></span><span style="font-size: x-small;"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; mso-line-height-alt: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 18pt;">Parameter Mismatch<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12pt;">One of the usual issues with the functions to take
parameters is what happens if you get something wrong with them. For example if
you pass the wrong amount of information in them.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12pt;">In the below example we add an extra information, and
when the code is executed the value 200 would be ignored by JavaScript.<o:p></o:p></span><br />
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12pt;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><b><span lang="EN-CA">Example</span>:</b><span lang="EN-CA"><o:p></o:p></span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><html><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><head><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><title>Untitled Document</title><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></head><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><body><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><script><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">function myFunction( x, y, z) {<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">var calc = x-y+z ;<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">console.log(calc);<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">myFunction(20, 10, 5, 333);<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></script><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></body><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;"><span style="color: #444444;"></html></span><span style="font-size: x-small;"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12pt;">But what happened if I pass in only 2 values and we
have 3 parameters?<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12pt;">And what will happen is that the missing one will be
passes as undefined. The variable z will be the undefined one.<o:p></o:p></span><br />
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 12pt;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><b><span lang="EN-CA">Example</span>:</b><span lang="EN-CA"><o:p></o:p></span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><html><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><head><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><title>Untitled Document</title><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></head><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><body><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><script><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">function myFunction( x, y, z) {<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">console.log( x + y + z);<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">myFunction("Hello ","World ");<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></script><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></body><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;"><span style="color: #444444;"></html></span><span style="font-size: x-small;"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 12.65pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background: white; mso-line-height-alt: 12.65pt;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif; font-size: 18pt;">variable scope/ Local variable<o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;">Variable
scope means where this variable is visible, what part of your code can see it,
and what part can use it.<o:p></o:p></span><br />
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background: white; line-height: 12.65pt;">
<span style="font-family: Trebuchet MS, sans-serif;"><b><span lang="EN-CA">Example</span>:</b><span lang="EN-CA"><o:p></o:p></span></span><br />
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><html><o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><head><o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><title>Untitled
Document</title><o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></head><o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><body><o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"><script><o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">function
myFunction() {<o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">var
x = 500;<o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">console.log(x);<o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">}<o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">myFunction();<o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;">console.log(x);<o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span style="color: #444444; font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></script><o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="color: #444444; font-family: Trebuchet MS, sans-serif;"></body><o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;"><span style="color: #444444;"></html></span><o:p></o:p></span></div>
<div style="background: white; line-height: 12.65pt;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background: white; line-height: 12.65pt;">
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span></div>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA" style="font-family: Trebuchet MS, sans-serif;">In
the above example in function myFunction() we create a variable named x and we
call it, and then it will input 500. But if we try to use this variable outside
of the function the result will be undefined, x doesn’t exist outside the
function. In this case the variable x is called Local variable, because we use
the word var inside the function.<o:p></o:p></span></div>
<span style="font-family: Trebuchet MS, sans-serif;"><br /></span>
<div style="background: white; line-height: 12.65pt;">
<span lang="EN-CA"><span style="font-family: Trebuchet MS, sans-serif;">But
if we want to create a variable that is visible for the entire file of code
what you have to do is to define the variable x outside any function. And then
the variable becomes a Global Variable.</span><span style="color: #404040; font-family: Verdana, sans-serif;"><o:p></o:p></span></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-90756703782103490092014-07-03T01:46:00.002-07:002014-07-16T08:54:58.916-07:00Chapter 11: JavaScript Loops<div class="MsoNormal">
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 24.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript Loops<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA"><span style="font-family: Georgia, Times New Roman, serif;">Very
quickly we’ll find ourselves writing code that we want to have happen multiple
times. Sometimes when we want to change background color, hiding everything in
a menu, we’ll realise that this code we want repeated.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA"><span style="font-family: Georgia, Times New Roman, serif;">The main
issues what any loop, is not when to loop, looping is easy, it’s when to stop. <o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 18.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">While Loop<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">So let’s first fig rout the most basic kind of loop.
Well we’ve seen if statements before. And this is all we have here. If this
conditions is true in the parentheses we’ll execute the code inside the curly
braces. All we do here is to replace the if with the word while, we have a
loop. Whatever is in the block get done every time the loop goes around.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 0;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">while ( a < 9) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">a++;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">} <o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> <o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">In the above example we ask is
a less than 9, and return true. Without the increment a++ at the end of the
body of the loop we create infinite loop. So the loops will start increment
every time we go around the loop and we’ll keep on going.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">There’s another variant of the while loop called
do…while loop. This keep the same basic format, but we actually move the
condition to the end. So instead of while a is less than 10 been at the start
of the block is actually at the end of the block, because of that we actually
need a semi-colon at the end of the do…while loop. <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 1;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">do {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a)<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">a++;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">} while ( a < 10);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">So let you know. while loops
are much more common than these do..while loop. In most loops is expected to check
the condition before entering the loop, and it’s more readable that way too.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 18.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">for Loop <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">With the for loop you actually
bring three pieces together inside the parentheses they all there at the top.
First we set up the index, so in this case var i </span><span style="font-size: 12.0pt; line-height: 115%;">= </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">1, it follows semi-colon, than we
check the condition is less than 10, than even it’s right at the top this is
the incrementer, this happens at the end of every loop. We don’t have to go by one.
You could go up by 4, 3, 10 or 500 if you wanted. So this is very readable,
because everything about the loop is right there at the top, you don’t have to
look outside the loop for the index or the increment. So for loop is very
common way of doing this.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 0;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">for (i=0; a<10; a++) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log(a);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 18.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Break<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Break is a word that will jump
us out of the loop. Inside the for we have if statement for example and say is
a equal to 25, no it isn’t. So will skip passed that code block and continue on
hit the end of the loop go back up, check condition again, yes I is still less
than 3000, continue on till i is equal to 25 and manually hit break. As soon as
we hit break we basically manually say </span><span style="font-size: 12.0pt; line-height: 115%;">„</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">we are done</span><span style="font-size: 12.0pt; line-height: 115%;">“</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">, we jump completely out of the loop and we can
continue on.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">If we say break we are
completely done with the loop.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;">Example</span><span style="font-size: 12.0pt; line-height: 115%; mso-bidi-font-size: 18.0pt;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;">for
( i = 0; i < 3000; i++ ) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log(i);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;">if (
i == 25) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;">break;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-size: 18.0pt;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 18.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Continue <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The word continue doesn’t mean
jump out of the loop, it means jump back up and check the condition again.
Don’t continue and further with this iteration just this one. We are not done
with the entire loop but we are done with this time around. <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">for ( i = 0; i < 99; i++ )
{<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log(i);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if ( i == 12) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">continue;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">// do stuff<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html></span><o:p></o:p></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-66001681603258379132014-07-03T01:40:00.002-07:002014-07-16T08:54:29.612-07:00Chapter 10: Operators - Ternary<div class="MsoNormal">
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 24.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Ternary<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Finally the last one is the Ternary</span><span lang="EN-CA" style="font-size: 24.0pt; line-height: 115%; mso-ansi-language: EN-CA;"> </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">operator.
The general format of this is that you have a condition, you asking something,
you say what happened of this is true and what happens if this is false. You
can actually think of it as a many if else statements. So let me show you a
example here</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Syntax</span><span style="font-size: 12.0pt; line-height: 115%;">:<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Condition ? true </span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"> false<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Default example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var player1 = 400;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var player2 = 495;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var winner;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if (player1 < player2) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("player2
is winner");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">} else {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("player1
is winner");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Ternary Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var player1 = 400;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var player2 = 495;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var winner;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">( player1 < player2 ) ? console.log("player2
is winner") : console.log("player1 is winner") ;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html></span><o:p></o:p></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-37192780383636659402014-07-03T01:32:00.001-07:002014-07-16T08:54:13.490-07:00Chapter 9: JavaScript Modulus / Increment / Decrement<div class="MsoNormal">
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 24.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Modulus<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">In JavaScript we have modulus or remainder operator.
The one is little different. Probably the classic example is using it to do
something like calculating a year. So in this case I create a variable called
year that is equal to 2003 and I can’t variable named remainder and I set that
equal to year % 4. The Percent here is modulus or remainder operator. What it
means is divide the variable year ( 2003) by 4. This don’t give me the result.
Give me the remainder. In this case 4 will go to year 500 times, and the
remainder would be 3.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var year = 2003;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var reminder = year%4;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(reminder);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 24.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Increment and Decrement<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Next we have shorthand for adding to a variable. We already
saw this but let’s explain in wider.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">How you know we can use this</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a = a + 1);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">or we can use that</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a += 1);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">OR<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var increment = ++a;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(increment);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">The result of all would be variable a </span><span style="font-size: 12.0pt; line-height: 115%;">+ </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">1</span><span style="font-size: 12.0pt; line-height: 115%;">;</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The above example is used to increment the variable a.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">But we can use it also to decrement it.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 20;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var c = 30;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(--a);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(b = b - 1);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(c -= 1);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html></span><o:p></o:p></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-90148357846302070332014-07-03T01:26:00.002-07:002014-07-16T08:53:28.685-07:00Chapter 8: JavaScript Operators<div class="MsoNormal">
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 24.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript
Operators<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Just about
every statement we’ll write is going to be involved an operation. To perform
lots of this operations we need operators. That means the symbols we use to
manipulate a values.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The most
obvious are probably the arithmetic operators.<o:p></o:p></span></span></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableLightShading" style="border-collapse: collapse; border: none; mso-border-bottom-alt: solid black 1.0pt; mso-border-bottom-themecolor: text1; mso-border-top-alt: solid black 1.0pt; mso-border-top-themecolor: text1; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border-bottom: solid black 1.0pt; border-left: none; border-right: none; border-top: solid black 1.0pt; mso-border-bottom-themecolor: text1; mso-border-top-themecolor: text1; padding: 0cm 5.4pt 0cm 5.4pt; width: 210.95pt;" valign="top" width="281">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><span style="font-size: 12pt;">+</span></b><b><span lang="EN-CA" style="font-size: 12pt;"><o:p></o:p></span></b></span></div>
</td>
<td style="border-bottom: solid black 1.0pt; border-left: none; border-right: none; border-top: solid black 1.0pt; mso-border-bottom-themecolor: text1; mso-border-top-themecolor: text1; padding: 0cm 5.4pt 0cm 5.4pt; width: 241.0pt;" valign="top" width="321">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<b><span lang="EN-CA" style="font-size: 12pt;"><span style="font-family: Georgia, Times New Roman, serif;">Addition<o:p></o:p></span></span></b></div>
</td>
</tr>
<tr>
<td style="background: silver; border: none; mso-background-themecolor: text1; mso-background-themetint: 63; padding: 0cm 5.4pt 0cm 5.4pt; width: 210.95pt;" valign="top" width="281">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<b><span style="font-size: 12pt;"><span style="font-family: Georgia, Times New Roman, serif;">-<o:p></o:p></span></span></b></div>
</td>
<td style="background: silver; border: none; mso-background-themecolor: text1; mso-background-themetint: 63; padding: 0cm 5.4pt 0cm 5.4pt; width: 241.0pt;" valign="top" width="321">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span lang="EN-CA" style="font-size: 12pt;"><span style="font-family: Georgia, Times New Roman, serif;">Subtraction<o:p></o:p></span></span></div>
</td>
</tr>
<tr>
<td style="border: none; padding: 0cm 5.4pt 0cm 5.4pt; width: 210.95pt;" valign="top" width="281">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<b><span style="font-size: 12pt;"><span style="font-family: Georgia, Times New Roman, serif;">*<o:p></o:p></span></span></b></div>
</td>
<td style="border: none; padding: 0cm 5.4pt 0cm 5.4pt; width: 241.0pt;" valign="top" width="321">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span lang="EN-CA" style="font-size: 12pt;"><span style="font-family: Georgia, Times New Roman, serif;">Multiplication<o:p></o:p></span></span></div>
</td>
</tr>
<tr>
<td style="background: silver; border-bottom: solid black 1.0pt; border: none; mso-background-themecolor: text1; mso-background-themetint: 63; mso-border-bottom-themecolor: text1; padding: 0cm 5.4pt 0cm 5.4pt; width: 210.95pt;" valign="top" width="281">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><span style="font-size: 12pt;">/</span></b><b><span lang="EN-CA" style="font-size: 12pt;"><o:p></o:p></span></b></span></div>
</td>
<td style="background: silver; border-bottom: solid black 1.0pt; border: none; mso-background-themecolor: text1; mso-background-themetint: 63; mso-border-bottom-themecolor: text1; padding: 0cm 5.4pt 0cm 5.4pt; width: 241.0pt;" valign="top" width="321">
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span lang="EN-CA" style="font-size: 12pt;"><span style="font-family: Georgia, Times New Roman, serif;">Division<o:p></o:p></span></span></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The equal sign is the most
used operator, called assignment operator.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">: <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 5;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a+b);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a*b);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a-b);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a/b);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">You might see
something like this</span><span style="font-size: 12.0pt; line-height: 115%;">:<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a
= a + 1);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">In this
example to variable score is added 1. But there’s shorthand for this by adding </span><span style="font-size: 12.0pt; line-height: 115%;">+</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"> sign before
the equal sign. Both examples are similar.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a
+= 1);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Another ways</span><span style="font-size: 12.0pt; line-height: 115%;">:<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a += 2);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a -= 2);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a *= 2);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a /= 2);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Multiplication and division is more important in JavaScript
so when you have code like that</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10 + 5*5;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log(a);<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Comparison operator<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The equal sign is the comparison operator in JavaScript.
<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The single equal sign is a command.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 20;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if (a = b) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("This
will alwasy return true.");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The above example will always return true because we set
an equal to the value of b, than this return true and the code in the block
will be always executed.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">So remember</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">One equal sign is assignment.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Two equal sign are the equality operator, you are asking.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Three equal signs is strict equality operator.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Comparisons</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">If ( a </span><span style="font-size: 12.0pt; line-height: 115%;">== </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">b) { … Checking equality<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">If ( a !</span><span style="font-size: 12.0pt; line-height: 115%;">= </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">b) { …
Not equal to <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">If ( a </span><span style="font-size: 12.0pt; line-height: 115%;">=== </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">b) { … Strict equality<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">If ( a !</span><span style="font-size: 12.0pt; line-height: 115%;">== </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">b) { … Not strictly equal to <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">If ( a ></span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%;"> </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">b) { … Greater than<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">If ( a <</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%;"> </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">b) { … Less than<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">If ( a ></span><span style="font-size: 12.0pt; line-height: 115%;">= </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">b) { …
Greater than or equal to<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">If ( a <</span><span style="font-size: 12.0pt; line-height: 115%;">= </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">b) { …
Less than or equal to<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Sometimes we want to know if a is strictly equal to be
and and c is strictly equal to d we do that</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var c = 30;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var d = 30;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if (a === b && c === d) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a
is equal to be and c is equal to d");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">OR<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var c = 30;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var d = 30;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if ((a === b) && (c === d)) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a
is equal to be and c is equal to d");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">The above example uses double </span><span style="font-size: 12.0pt; line-height: 115%;">„</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">&</span><span style="font-size: 12.0pt; line-height: 115%;">“</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">, which means
</span><span style="font-size: 12.0pt; line-height: 115%;">„</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">and</span><span style="font-size: 12.0pt; line-height: 115%;">“</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">.</span><span lang="EN-CA" style="font-size: 28.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">What if we are interested one OR the other situation.
If the variable a is strictly equal to be OR if the variable c is strictly
equal to d. We use the double vertical bar.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 10;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var c = "30";<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var d = 30;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if ((a === b) || (c === d)) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("The
code block will be executed even if one of the conditions return true.");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html></span><o:p></o:p></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-90587888842286618522014-07-03T01:19:00.001-07:002014-07-16T08:52:40.275-07:00Chapter 7: JavaScript Conditions <div class="MsoNormal">
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 24.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript
conditions<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">In JavaScript
we need to ask questions. We always need to run script when a certain condition
is true. And if the condition is true we will execute whatever code is inside
the braces { } .<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">We will begin
with if statement.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">If statement
syntax example</span><span style="font-size: 12.0pt; line-height: 115%;">:<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if
(condition) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">// code goes
here<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">// …<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">// …<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">} <o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">In this
tutorial we will use this terminology - parentheses (), brackets [], and braces
{} . All of these are always found in pairs. If you have an opening one you
will need a closing one. It may be several lines later, but need to be there.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example for
if statement</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 20;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 100;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if (a<b) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a is
less than b");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Always our
condition will be equal to true or false.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">We can also
use equality to see if something is equal to something by using these </span><span style="font-size: 12.0pt; line-height: 115%;">==</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">: <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 100;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 100;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if (a == b) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a is
equal to b");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">JavaScript
has another way for checking equality, the triple equal sign. When you want to
ask if something is equal to something you will never use a single equal sign, because
this is assignment not equality and its set a value not checking value. We can
use double if triple equal signs for checking equality</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"> In below
examples we use the if else statement. You will see learn how to use it later
on this chapter.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a =
"100";<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 100;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if (a === b)
{<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a is
equal to b");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">else {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a is
not strictly equal to b because it's string.");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Or if we want
to ask is something is not equal to something, we can do this</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 200;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 100;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if (a !== b)
{<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a is
not equal to b");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">If a is not
equal to be it will alert true, in this case it will alert </span><span style="font-size: 12.0pt; line-height: 115%;">„</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">a is not
equal to be</span><span style="font-size: 12.0pt; line-height: 115%;">“</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The curly
braces after the if condition is called blocks. There you add your code, which
will be executed if the condition is true or false. Always use the code blocks.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">If you want
to execute some code block if the conditions is equal to false you can follow the
if with the else statement. <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 200;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 100;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if (a == b) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a is equal
to b");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">} else {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a is not
equal to b");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">OR<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var a = 200;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var b = 100;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">if (a == b) {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a is equal
to b");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">} <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">else {<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> console.log("a is not
equal to b");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Both examples
are similar.<o:p></o:p></span></span></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">You can also
nest more if’s into the if or else statement, but don’t do that too much deeper
because it will make your code hard to read. Instead of this you can next them
into different function.</span><o:p></o:p></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-21923447984355869992014-07-03T01:14:00.000-07:002014-07-16T08:52:08.121-07:00Chapter 6: JavaScript Variables<div class="MsoNormal">
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 26.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript
Variables<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">In all programs
and all programming languages we have to keep track of many pieces of data. So we create variables to store data
inside them.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">The variable
is a container, its grabbing a little piece of data (information) and giving it
a name so we can use it. Creating variables is very easy. Just type var variablename</span><span style="font-size: 12.0pt; line-height: 115%;">;</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">EXAMPLE</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var bar;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The name for
your variable must be written as one word, no spaces are allowed. It can starts
with word, letter, underscore, dollar sign, but you cannot start with number.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The above
value hasn’t value, so this variable is undefined.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Now we have
to define our variable, to set value.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var bar;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">bar = 20;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">console.log(bar)</span><span style="font-size: 12.0pt; line-height: 115%;">;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The equal
sign setting variable bar to 300.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">You can also
combine them into one statement</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">: <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var bar = 20;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">console.log(bar)</span><span style="font-size: 12.0pt; line-height: 115%;">;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The word var
is not required in JavaScript. But leaving var may lead to unexpended behavior.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Variable name
are case-sensitive. So var x</span><span style="font-size: 12.0pt; line-height: 115%;">;</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"> and var X</span><span style="font-size: 12.0pt; line-height: 115%;">;</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"> will be different variables.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">You can also
create multiple variables nested in one line</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var bar,
head, x, y, foo;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">You can
assign values to them</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var bar = 40,
head = "Hello", x = "This is x variable", y = true;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">But better
practice is to add one variable to one line because it will be hard to read.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Variables can
store numbers, Boolean values (true or false, always in lowercase) – you don’t
need quotes around them, you can also add piece of text (string) – you can use
either double quotes or you can use single quotes, no matter which you use, but
don’t mix them. The most common practice is to you double quotes but that’s
your own choice.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This
is a heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This
is a paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var bar=
500; // number in
variable<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var x =
"Hello World"; //
Piece if text(String)<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var y =
true; // Boolean value
true<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">var demo =
false; // Boolean value
false<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html></span><o:p></o:p></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-43825367972286589402014-07-03T01:10:00.000-07:002014-07-16T08:51:16.037-07:00Chapter 5: Where To / How To<div class="MsoNormal">
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Like most
programming languages the default behaviour when JavaScript when runs is to
start at the first statement and move down executed each of them one by one.
This will happened when the browser sees your code. We can put the script tag
in <head> section, in <body> section in our html page or in the
middle. The best practise for most of the web designers is to add the script
tag just before the closing body tag.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a
heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a
paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">alert("This is a simple
alert.");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Now when we execute the above
code in browser the code will be executed line by line through the HTML and
when sees the script tag it will be executed after the HTML content, and that
what we want.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">But if you add the script tag
inside the head section the code will first alert the JavaScript and then will
execute our html, and we don’t want that</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">alert("This is a simple
alert.");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a
heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a
paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">The next question is where to
put JavaScript. Well, it’s not god practice to mix JavaScript with html because
it will be hard to edit and read. That’s because of this we use separate JavaScript
file in which you done need to add the script tag. Just type your JavaScript.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Here is an example how to add
external JavaScript file which have to be in the body section again.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Inside the
src</span><span style="font-size: 12.0pt; line-height: 115%;">=““</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">attribute
add the path location of your script which must be with .js extension.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><div
id="demo"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h1>This is a
heading.</h1><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p>This is a
paragraph.</p><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></div><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script
src="script.js"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">We suggest you to put stylesheets
and the top, the scripts at the bottom.</span><o:p></o:p></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-34891812275333558942014-07-03T01:04:00.000-07:002014-07-16T08:50:46.065-07:00Chapter 4: JavaScript Comments<div class="MsoNormal">
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 16.0pt; line-height: 115%; mso-ansi-language: EN-CA;">JavaScript
comments</span><span style="font-size: 16.0pt; line-height: 115%;">: <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">You can
simply add a comment in JavaScript by adding //</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%;"> </span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">before the
code you want to be inside comment.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">// console.log("Hello
World");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">// alert("Hi world");
<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript ignores anything
after // and begins after the next line. <o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">You can also add multiple
comment by adding /* before and */ after the code you wanted to comment.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">/* <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> alert("This is a multiple
comment.");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"> alert("This also is a part of the
comment."); <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">*/<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html></span><o:p></o:p></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-35970289242129731892014-07-03T00:52:00.002-07:002014-07-16T08:49:45.991-07:00Chapter 3: JavaScript Statements<div class="MsoNormal">
<div style="margin-bottom: .0001pt; margin: 0cm;">
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12pt; line-height: 115%;">JavaScript
statements</span><span style="font-size: 12pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12pt; line-height: 115%;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript
like in most programming languages is grouped into statements, to say piece by
piece what your script to do.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">Each JavaScript
statement should end with the semicolon and don’t forgot about it because you
will into problems. Just because of this you can put multiple statements in one
line, but don’t do this it makes it hard to read. Split it into multiple lines.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Multiple statements in one
line</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">alert("this is an
alert"); console.log("This is an message in the console of the
browser.");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Multiple statements in multiple
lines</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">alert("this is an
alert"); <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log("This is an
message in the console of the browser.");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript might be
case-sensitive but not sensitive to spaces and line return between different
pieces of the language.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">Example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Untitled
Document</title><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></head><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.log("Hello
World");<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console . log
(" Hello World " ) ;<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">console.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">log<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">("Hello
World"); <o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></script><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></body><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></html><o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">All above
examples are correct.</span><o:p></o:p></span></div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-79697633122984435892014-07-03T00:40:00.000-07:002014-07-03T00:46:51.427-07:00Chapter 2: Introducing<div class="MsoListParagraph" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -36.0pt;">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 28.0pt; line-height: 115%; mso-ansi-language: EN-CA; mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="font-size: 7pt; line-height: normal;"> </span></span><!--[endif]--><span lang="EN-CA" style="font-size: 28.0pt; line-height: 115%; mso-ansi-language: EN-CA;">JavaScript Introducing</span></span></div>
<div style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -36.0pt;">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 28.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript refer to a three code web languages. The
first is HTML – the markup language of the web, for content and stricture of
the entire page, than the CSS – the style sheet language for presentation ,
what the font, what the background color , what’s the border type, what’s the
margin between two paragraphs and so on. And then is JavaScript the programming
language, for the behaviour of the page, which add interactivity, what happened
when the mouse is over element, what happens when you click button or any
element, when you type the wrong value in a form field etc. JavaScript no need
of installing because its placed in every browser.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">First before everything we have to know where to put
js. JavaScript can we added inside the html, or with external link. <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">The below example demonstrates how to add JavaScript
in html page by using the <script> tag. See this example</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
<div class="MsoNormal">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">EXAMPLE</span><span style="font-size: 12.0pt; line-height: 115%;">:</span><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><o:p></o:p></span></span></div>
<div class="MsoNormal">
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="color: magenta; font-family: Georgia, Times New Roman, serif;"><html></span></span></div>
<div style="text-align: left;">
<span style="font-family: Georgia, 'Times New Roman', serif; font-size: 12pt; line-height: 115%;"><span style="color: blue;"><head></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><title>Simple HTML Page</title><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: blue;"></head></span><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #38761d;"><body></span><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><h2>This is a simple h2 heading</h2><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><p><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">This is a paragraph.<o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"></p><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: red;"><script></span><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span style="font-family: Georgia, Times New Roman, serif;"><span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;">alert(“This JS is inside HTML page.”)</span><span style="font-size: 12.0pt; line-height: 115%;">;<o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: red;"></script></span><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #38761d;"></body></span><o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<div style="text-align: left;">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: white;"><span style="color: magenta;"></html> </span></span> <o:p></o:p></span></span></div>
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript is
easy to use because you don’t need to use a special program called compiler to
run your code, and we dnt need to do that with JavaScript. We simply write our
code and we handed over to the web browser. JavaScript is case-sensitive like C#, Pascal, or HTML4 which is all case-insensitive. In HTML you can miss
the closing tag it doesn’t really matter, but in JavaScript matters.</span><o:p></o:p></span></div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0Bulgaria42.733883 25.48582999999996442.733883 25.485829999999964 42.733883 25.485829999999964tag:blogger.com,1999:blog-8326007028624388591.post-85132006128352293992014-07-03T00:33:00.001-07:002014-07-03T00:34:07.861-07:00Chapter 1: JavaScript Welcome <div class="MsoListParagraph" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -36.0pt;">
<span lang="EN-CA" style="font-size: 28.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript Welcome</span></span><span style="font-size: 28.0pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoListParagraph" style="margin-left: 54.0pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -36.0pt;">
<span lang="EN-CA" style="font-size: 28.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;"><br /></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript is the programming language of the web
invented for the web, to add behavior and interactivity to your pages. <o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">In this tutorial we will discover almost everything in
JavaScript, because this language can go much deeper.<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">We will start with syntax, how to write it, where to
put it, how to use it and for what. We’ll going to introduce you the most
important things like how to work with variables, events, function, strings,
arrays, objects, DOM(Document Object Model) which allows you to get, set or
change content on your pages. You will see the best practices, and how to debug
JavaScript, so let’s go start.<o:p></o:p></span></span></div>
<br />
<div class="MsoNormal">
<span lang="EN-CA" style="font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-CA;"><span style="font-family: Georgia, Times New Roman, serif;">JavaScript is a language that works with HTML and CSS
which you have to know if you want to learn JavaScript. You just have to know
how to create simple pages, manipulating content with CSS and the basic HTML
tags. But if you don’t HTML or CSS than go check our tutorials and when you are
ready come back to JavaScript.</span><o:p></o:p></span></div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0Нигерия9.081999 8.675277000000051-6.7730055 -11.979019999999949 24.9370035 29.329574000000051tag:blogger.com,1999:blog-8326007028624388591.post-16200323359857958402014-01-26T05:39:00.001-08:002014-01-26T05:39:24.412-08:00jQuery Intro and Install<span style="font-family: Georgia, Times New Roman, serif; font-size: x-large;">jQuery</span><div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: x-large;"><br /></span></div>
<div>
<h2 style="background-color: white; font-size: 22px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
<span style="font-family: Georgia, Times New Roman, serif;">What is jQuery?</span></h2>
<div style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="font-family: Georgia, Times New Roman, serif;">jQuery is a lightweight, "write less, do more", JavaScript library.</span></div>
<div style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="font-family: Georgia, Times New Roman, serif;">The purpose of jQuery is to make it much easier to use JavaScript on your website.</span></div>
<div style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="font-family: Georgia, Times New Roman, serif;">jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</span></div>
<div style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="font-family: Georgia, Times New Roman, serif;">jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.</span></div>
<div style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="font-family: Georgia, Times New Roman, serif;">The jQuery library contains the following features:</span></div>
<ul style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<li><span style="font-family: Georgia, Times New Roman, serif;">HTML/DOM manipulation</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">CSS manipulation</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">HTML event methods</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Effects and animations</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">AJAX</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Utilities</span></li>
</ul>
<div>
<span style="color: #404040; font-family: Georgia, Times New Roman, serif; font-size: x-small;"><span style="line-height: 16.899999618530273px;"><br /></span></span></div>
</div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Install jQuery</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><br /></span></div>
<div>
<h2 style="background-color: white; font-size: 22px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
<span style="font-family: Georgia, Times New Roman, serif;">Downloading jQuery</span></h2>
<div style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="font-family: Georgia, Times New Roman, serif;">There are two versions of jQuery available for downloading:</span></div>
<ul style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<li><span style="font-family: Georgia, Times New Roman, serif;">Production version - this is for your live website because it has been minified and compressed</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">Development version - this is for testing and development (uncompressed and readable code)</span></li>
</ul>
<div style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="font-family: Georgia, Times New Roman, serif;">Both versions can be downloaded from <a href="http://jquery.com/download/" style="background-color: transparent; color: black;" target="_blank">jQuery.com</a>.</span></div>
<div style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="font-family: Georgia, Times New Roman, serif;">The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):</span></div>
<div style="background-color: white; color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div style="color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="background-color: white;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #444444; font-size: 14px; line-height: normal;"><head></span><br style="color: #444444; font-size: 14px; line-height: normal;" /><span style="color: #444444; font-size: 14px; line-height: normal;"><script src="jquery-1.10.2.min.js"></script></span><br style="color: #444444; font-size: 14px; line-height: normal;" /><span style="color: #444444; font-size: 14px; line-height: normal;"></head></span></span></span></div>
<div style="color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="background-color: white;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #444444; font-size: 14px; line-height: normal;"><br /></span></span></span></div>
<div style="color: #404040; font-size: 13px; line-height: 16.899999618530273px;">
<span style="background-color: white;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #444444; font-size: 14px; line-height: normal;"><br /></span></span></span></div>
<h2 style="background-color: white; font-family: verdana, helvetica, arial, sans-serif; font-size: 22px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Alternatives to Downloading</h2>
<div style="background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; line-height: 16.899999618530273px;">
If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).</div>
<div style="background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; line-height: 16.899999618530273px;">
Both Google and Microsoft host jQuery.</div>
<div style="background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; line-height: 16.899999618530273px;">
To use jQuery from Google or Microsoft, use one of the following:</div>
<div style="background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; line-height: 16.899999618530273px;">
<br /></div>
<div style="background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; line-height: 16.899999618530273px;">
<span style="color: black; font-family: 'courier new'; font-size: 14px; line-height: normal;"><head></span><br style="color: black; font-family: 'courier new'; font-size: 14px; line-height: normal;" /><span style="color: black; font-family: 'courier new'; font-size: 14px; line-height: normal;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></span><br style="color: black; font-family: 'courier new'; font-size: 14px; line-height: normal;" /><span style="color: black; font-family: 'courier new'; font-size: 14px; line-height: normal;"></script></span><br style="color: black; font-family: 'courier new'; font-size: 14px; line-height: normal;" /><span style="color: black; font-family: 'courier new'; font-size: 14px; line-height: normal;"></head></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-52575731395603417522014-01-10T06:47:00.000-08:002014-01-10T06:47:58.938-08:00Cool effect with HTML, CSS and JavaScript<span style="font-family: Georgia, Times New Roman, serif; font-size: x-large;">Code</span><br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: x-large;"><br /></span>
<html><br />
<body><br />
<br />
<div style="width:100px;height:100px;background-color:red;" id="demo"><br />
</div><br />
<br />
<script><br />
function Get()<br />
{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById('demo').style.width="500px";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById('demo').style.height="500px";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById('demo').style.backgroundColor="hsla(216,100%,50%,0)";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById('demo').style.webkitBorderRadius="100px";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById('demo').style.WebkitTransition="2s ease-out";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById('demo').style.webkitTransform="rotate(1080deg)";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById('demo').style.webkitTransform="skew(480deg)";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
}<br />
<br />
</script><br />
<input type="button" value="Click" onclick="Get()" /><br />
</body><br />
</html><br />
<br />
<br />
Click on the button!
<html>
<body>
<div id="demo" style="background-color: red; height: 100px; width: 100px;">
</div>
<script>
function Get()
{
document.getElementById('demo').style.width="500px";
document.getElementById('demo').style.height="500px";
document.getElementById('demo').style.backgroundColor="hsla(216,100%,50%,0)";
document.getElementById('demo').style.webkitBorderRadius="100px";
document.getElementById('demo').style.WebkitTransition="2s ease-out";
document.getElementById('demo').style.webkitTransform="rotate(1080deg)";
document.getElementById('demo').style.webkitTransform="skew(480deg)";
}
</script>
<input onclick="Get()" type="button" value="Click" />
</body>
</html>Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-59093048493573983252014-01-05T12:07:00.003-08:002014-10-27T07:28:15.452-07:00Download Adobe Dreamweaver CS6<span style="font-size: x-large;">Adobe Dreamweaver CS6 : Download Torrent</span><br />
<a href="http://zamunda.net/download.php/329214/Adobe%20Dreamweaver%20CS6.torrent" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjaaEijOrSx5LHaHTuoq-FM62OObu36DxWT5wrsFBtxPE2E60yfEu0tCewATDIbaZrOGUAoLFAo1nmAPh7xnzuY9mQQyIHyvODEgjhNHD5la_PVyvZER-E5bR9AEIdqzFpb4rw20I_wmJh/s200/Download_button1.png" height="63" width="200" /></a><span style="font-size: x-large;"><br /></span><br />
<span style="font-size: x-large;"><br /></span>
<br />
System requirements:<br />
<br />
<br />
<li style="margin-bottom: 6pt; margin-top: 6pt;">Intel® Pentium® 4 or AMD Athlon® 64 processor</li>
<li style="margin-bottom: 6pt; margin-top: 6pt;">Microsoft® Windows® XP with Service Pack 3 or Windows 7 with Service Pack 1. Adobe® Creative Suite® 5.5 and CS6 applications also support Windows 8. Refer to the CS6 FAQ for more information about Windows 8 support.*</li>
<li style="margin-bottom: 6pt; margin-top: 6pt;">512MB of RAM</li>
<li style="margin-bottom: 6pt; margin-top: 6pt;">1GB of available hard-disk space for installation; additional free space required during installation (cannot install on removable flash storage devices)</li>
<li style="margin-bottom: 6pt; margin-top: 6pt;">1280x800 display with 16-bit video card</li>
<li style="margin-bottom: 6pt; margin-top: 6pt;">Java™ Runtime Environment 1.6 (included)</li>
<li style="margin-bottom: 6pt; margin-top: 6pt;">DVD-ROM drive</li>
<br />
<div>
<br />
Free Download uTorrent from the official website : <a href="http://www.utorrent.com/downloads/complete/os/win" style="-moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; background: green; border: 1px solid #00A300; color: white; display: block; font-size: 18px; height: 20px; padding-bottom: 5px; padding-top: 5px; text-align: center; text-decoration: none; width: 140px;" target="_blank">Downlaod</a><br />
<br />
Instalation:<br />
<br /></div>
<div>
<br /></div>
<div>
1. Open setup.exe</div>
<div>
2. Stop internet connection.</div>
<div>
3. Install.</div>
<div>
4. Copy the content from folder Crack in the installation folder.</div>
<div>
5. Enjoy.</div>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0tag:blogger.com,1999:blog-8326007028624388591.post-67875256422934679102013-12-21T10:52:00.001-08:002013-12-21T11:30:55.181-08:00 CSS » Padding<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Georgia, Times New Roman, serif;"><img border="0" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHCI4pEE_QPwsvtVRguwlnDQF-QJCrKtir_6Bnoy244mEBU5uIIYEz9ONxMGAt_vcBLesNmIo8hCeN0TupfH81UN-8sRkuAt1aDIlFIr9ZtgHrl8bp_mQ5Hup-fiBFlhmE03isfa00nDWt/s400/fonts.jpg" width="400" /></span></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="background-color: white; font-size: 14px; line-height: 18px;"><span style="font-family: Georgia, Times New Roman, serif;">The CSS padding properties define the space between the element border and the element content.</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: white; font-size: 14px; line-height: 18px;"><br /></span>
<span style="background-color: white; font-size: 14px; line-height: 18px;">In this tutorial we will show You how to set left, right, bottom and top padding. After this we will show You how to use the shorthand property(all in one).</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;">There's two possible values - length( in pixels, pt, em, etc. ) and % ( <span style="background-color: white; font-size: 13px; line-height: 16px;">Defines a padding in % of the containing element</span> ).</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfdpLYTN0uoUt_e_0Apfk-cbQcbgbqH9gvoj8bNzknD3PSsU_Chbn18zAS55gGvg9qXk-iJaZRvnii_3NeZCE22ETbw8JbkzLPgRxSWPziGRbb0TPrt9WOIPaGVkgKcmtJ91Fsf4NTzpOS/s1600/Untitled-2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfdpLYTN0uoUt_e_0Apfk-cbQcbgbqH9gvoj8bNzknD3PSsU_Chbn18zAS55gGvg9qXk-iJaZRvnii_3NeZCE22ETbw8JbkzLPgRxSWPziGRbb0TPrt9WOIPaGVkgKcmtJ91Fsf4NTzpOS/s400/Untitled-2.jpg" width="400" /></a></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<span style="font-family: Georgia, Times New Roman, serif;"><br />
<br />
<span style="background-color: yellow; font-size: large;"><br /></span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: yellow; font-size: large;"><br /></span></span>
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: yellow; font-size: large;"><br /></span></span>
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: yellow; font-size: large;"><br /></span></span>
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: yellow; font-size: large;"><br /></span></span>
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: yellow; font-size: large;"><br /></span></span>
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: yellow; font-size: large;">Individual Sides</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
You can specify different padding for different sides.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
<span lang="EN-US" style="background-color: white; color: #333333; font-size: 15px; line-height: 20px;">» </span><span style="background-color: red; color: #eeeeee; font-size: 16px;">EXAMPLE:</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: red; color: #eeeeee; font-size: 16px;"><br /></span>
<html></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><head></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><style></span><br />
<span style="font-family: Georgia, Times New Roman, serif;">.demo {</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #03C;</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>color: #FFF;</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">}</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">#padd {</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>padding-top: 30px;</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"> padding-bottom: 30px;</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"> padding-right: 20px;</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"> padding-left: 20px;</span><br />
<span style="font-family: Georgia, Times New Roman, serif;">}</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></style></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></head></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><body></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><h3 class="demo">This is heading with default padding.</h3><br /></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><p id="padd" class="demo">This is paragraph with ready padding.</p></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></body></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"></html></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
<br />
<span style="font-size: large;"><span lang="EN-US" style="background-color: white; color: #404040; line-height: 16px;">» </span><span style="background-color: lime; color: red; line-height: 16px;">Result:</span></span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="font-size: large;"><span style="background-color: lime; color: red; line-height: 16px;"><br /></span></span>
<span style="font-size: large;"><span style="background-color: lime; color: red; line-height: 16px;"><br /></span></span>
</span><br />
<h3 style="background-color: #0033cc; color: white;">
<span style="font-family: Georgia, Times New Roman, serif;">This is heading with default padding.</span></h3>
<br />
<div style="background-color: #0033cc; color: white; padding-bottom: 30px; padding-left: 20px; padding-right: 20px; padding-top: 30px;">
<span style="font-family: Georgia, Times New Roman, serif;">This is paragraph with ready padding.</span></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br />
</span><br />
<hr />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
</span><br />
<h2 style="font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
<span style="background-color: yellow;"><span style="font-family: Georgia, Times New Roman, serif; font-size: large;">Shorthand property</span></span></h2>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">Now You will see how to use all CSS padding properties in one property.</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span lang="EN-US" style="background-color: white; color: #333333; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 20px;">» </span><span style="background-color: red; color: #eeeeee; font-family: Georgia, 'Times New Roman', serif; font-size: 16px;">EXAMPLE:</span></div>
<div>
<span style="background-color: red; color: #eeeeee; font-family: Georgia, 'Times New Roman', serif; font-size: 16px;"><br /></span></div>
<div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><html></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><head></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><style></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">.demo {</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #03C;</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>color: #FFF;</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">}</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">#padd {</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 30px 20px;</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;">}</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"></style></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"></head></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><body></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><h3 class="demo">This is heading with default padding.</h3><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><p id="padd" class="demo">This is paragraph with ready padding.</p></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"></body></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"></html></span></div>
</div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<div>
<span lang="EN-US" style="background-color: white; color: #404040; font-family: Georgia, 'Times New Roman', serif; font-size: large; line-height: 16px;">» </span><span style="background-color: lime; color: red; font-family: Georgia, 'Times New Roman', serif; font-size: large; line-height: 16px;">Result:</span></div>
<div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div>
<h3 style="background-color: #0033cc; color: white;">
<span style="font-family: Georgia, Times New Roman, serif;">
This is heading with default padding.</span></h3>
<br />
<div style="background-color: #0033cc; color: white; padding: 30px 20px;">
<span style="font-family: Georgia, Times New Roman, serif;">This is paragraph with ready padding.</span></div>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<hr />
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span>
<br />
<div style="background-color: white; font-size: 13px; line-height: 16px;">
<span style="font-family: Georgia, Times New Roman, serif;">The padding property can have from one to four values.</span></div>
<ul style="background-color: white; font-size: 13px; line-height: 16px;">
<li><b><span style="font-family: Georgia, Times New Roman, serif;">padding:25px 50px 75px 100px;</span></b><ul>
<li><span style="font-family: Georgia, Times New Roman, serif;">top padding is 25px</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">right padding is 50px</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">bottom padding is 75px</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">left padding is 100px</span></li>
</ul>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></li>
<li><b><span style="font-family: Georgia, Times New Roman, serif;">padding:25px 50px 75px;</span></b><ul>
<li><span style="font-family: Georgia, Times New Roman, serif;">top padding is 25px</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">right and left paddings are 50px</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">bottom padding is 75px</span></li>
</ul>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></li>
<li><b><span style="font-family: Georgia, Times New Roman, serif;">padding:25px 50px;</span></b><ul>
<li><span style="font-family: Georgia, Times New Roman, serif;">top and bottom paddings are 25px</span></li>
<li><span style="font-family: Georgia, Times New Roman, serif;">right and left paddings are 50px</span></li>
</ul>
<span style="font-family: Georgia, Times New Roman, serif;"><br /></span></li>
<li><b><span style="font-family: Georgia, Times New Roman, serif;">padding:25px;</span></b><ul>
<li><span style="font-family: Georgia, Times New Roman, serif;">all four paddings are 25px</span></li>
</ul>
</li>
</ul>
Anonymoushttp://www.blogger.com/profile/16650383891185776966noreply@blogger.com0