Augusta Warrior Project – Introduction to Web Development – About me
Augusta Warrior Project – Introduction to Web Development – About me
2 0
wwp-6
On Github aczietlow / wwp-6
Augusta Warrior Project
Introduction to Web Development
Created by Chris Zietlow / @aczietlow / aczietlow@gmail.com
Sponsored by The Clubhouse
About me
- PHP developer for Palantir.net
- Owner of Spyder Byte Design
- Member of Clubhouse
- Co-organizer of Aug Linux User Group
About the Clubhouse
We are quite literally a clubhouse, a dojo even. Members pay dues. We run events and classes, and buy tools based on what our members want and need to build a project, improve themselves, start a business, or give back to the community.
One of the clubs at the club house may interest you. Refresh Augusta are a group of media and web professionals in the Augusta area.
This Class
What we're going to cover in this class.
- HTML
- CSS
- Javascript*
- jQuery
- version control
Javascript
JavaScript is a Scripting Language
- A scripting language is a lightweight programming language.
- JavaScript is programming code that can be inserted into HTML pages.
- JavaScript code can be executed by all modern web browsers.
- JavaScript is easy to learn. (yay!)
Getting started
You can use javascript to write new elements to your html page.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>his is a paragraph.</p>");
</script>
Getting started
Javascript can react to events.
<button type="button" onclick="alert('Welcome!')">Click Me!</button>
Getting started
Javascript can change content!
x=document.getElementById("demo") //Find the element
x.innerHTML="Hello JavaScript"; //Change the content
Getting started
Let's add some javascript to our page!
<!DOCTYPE html>
<html>
<body>
<p>
Using javascript we can write directly to the html document.
</p>
<script>
document.write("<h1>heading</h1>");
document.write("<p>New content</p>");
</script>
</body>
</html>
JavaScript Statements
- JavaScript statements are "commands" to the browser.
- The purpose of the statements is to tell the browser what to do.
- This JavaScript statement tells the browser to write "Hello Dolly" inside an HTML element with id="demo":
document.getElementById("demo").innerHTML="Hello Augusta";
Semicolon ;
- Semicolon separates JavaScript statements.
- Normally you add a semicolon at the end of each executable statement.
alert("hello world");
JavaScript Code
- JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
- Each statement is executed by the browser in the sequence they are written.
- This example will manipulate two HTML elements:
document.getElementById("demo").innerHTML="Hello Augusta";
document.getElementById("myDIV").innerHTML="How are you?";
JavaScript Code Blocks
- JavaScript statements can be grouped together in blocks.
- Blocks start with a left curly bracket, and end with a right curly bracket.
- The purpose of a block is to make the sequence of statements execute together.
- A good example of statements grouped together in blocks, are JavaScript functions.
- This example will run a function that will manipulate two HTML elements:
function myFunction()
{
document.getElementById("demo").innerHTML="Hello Augusta";
document.getElementById("myDIV").innerHTML="How are you?";
}
JavaScript function example:
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello Augusta";
document.getElementById("myDIV").innerHTML="How are you?";
}
</script>
<h1 id="demo">My heading</h1>
<div id="myDIV">Insert Content here</div>
<button value="click me" onclick="myFunction();">Click Me</button>
</body>
</html>
JavaScript Functions and Events
- The JavaScript statements, in the example above, are executed while the page loads.
- More often, we want to execute code when an event occurs, like when the user clicks a button.
- If we put JavaScript code inside a function, we can call that function when an event occurs.
Case Sensitive
- JavaScript is case sensitive.
- Watch your capitalization closely when you write JavaScript statements:
- A function getElementById is not the same as getElementbyID.
Example
- Create a simple html page with an image.
- Create a javascript function that uses the alert function
- Add an onclick attribute to the html image tag, and set the value to your javascript function name
Example Explained
<html>
<body>
<script>
function meow() {
alert("Cat says meow");
}
</script>
<img width="150" onclick="meow();" src="http://2.bp.blogspot.com/-wNG9jajTdTk/T9d7gtvm4mI/AAAAAAAANOY/X5eZH3wqkNs/s1600/funny-cat-pictures-part-2-06-13-2012-016.jpg" />
</body>
</html>
Date Example
<html>
<body>
<script>
var date = new Date();
document.getElementById("date").innerHTML=date;
</script>
<h3 id="date">My heading</h1>
</body>
</html>