Intro to Javascript

Introduction to Javascript

Javascript is a programming language that
resides inside HTML documents to provide interactivity.

What we use JavaScript for?

make websites respond to user interaction
build apps and games (e.g. blackjack)
access information on the Internet
organize and present data (e.g. data visualization)

Introduction to Javascript

<script type="text/javascript" src="scriptname.js" >

Inside the html document we use the <script> tag
to declare a scripting language.

We can define two attributes: type and src
The language type and an external .js file.

Introduction to Javascript

Class Exercise: Hello World

Make a <button> tag
Style it with an external css
Create a .js file to react to button click
Alert prompt "Hello World!"

            var myButton = document.querySelector( "button" );
           myButton.addEventListener( "click", function( evt ) {
                alert( "Hello World!" );
            }, false);

Introduction to jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
jQuery is the most popular JavaScript library in use today.
Used in 80% of the top 10,000 websites.
It takes complex tasks and wraps them into single line commands

Introduction to jQuery

www.jquery.com/download

<script type="text/javascript" src="jquery URL" >

We can download the jQuery .js file to exist alongside the project files or we can link to the external .js file hosted on public development servers.

Introduction to jQuery

Class Exercise: Hello World (revisited)

Link to an external jQuery .js files
Alert "Hello World!" on button click

                $("button").click( function() {
                               alert("Hello World");
                } ) ;

Intro to jQuery Effects

Techniques for adding animation to a web page

.animate()
.slideUp()
.slideDown()
.show()
.hide()
.fadeIn()
.fadeOut()

Intro to jQuery Effects

Class Exercise: Apply animate() to a div

Make a <div> container
Style it with an external css
Animate the margin-top and margin-left using jQuery

.animate( property, speed, callback );

Intro to jQuery Mouse Events

Techniques for capturing mouse actions

.click()
.dblclick()
.hover()
.mousedown()
.mouseover()
.mouseleave()
.mousemove()

Intro to jQuery Mouse Events

Class Exercise: animate() a div using mouse hover()

Make a <div> container
Style it with an external css
Animate using jQuery Mouse Event hover()

$("div").hover(function(){
$(this).animate({ width: "300px" });
}, function() {
$(this).animate({ width: "100px" });
});