Designing solutions through programming - January 16 2017 Lesson Notes

What are we going to learn today?[edit]

We will configure our IDE's
we will learn basic terminology about javascript
We will learn about DOM
We will work through very basic examples of javascript events using these examples.
you will be exposed to bootstrap
Another excellent bootstrap tutorial can be found https://www.youtube.com/watch?v=314m7YBRFvQ by clicking this link]

you will use the following code snippets to START exploring javascript:

<!DOCTYPE html>
<html>
<body>

<h1>A javascript example</h1>

<p id="demo1">JavaScript can change content inside a defined ID or even CLASS.</p>

<button type="button" onclick="document.getElementById('demo1').innerHTML = 'I love computer science!'">Click Me!</button>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>This example demonstrates how to assign an "onmouseover" and "onmouseout" event to a h1 element.</p>

<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse over me</h1>

<script>
function mouseOver() {
    document.getElementById("demo").style.color = "red";
}

function mouseOut() {
    document.getElementById("demo").style.color = "black";
}
</script>

</body>
</html>

What is our homework?[edit]

Please copy the file on our webserver, template.php to backup_template.php
We will learn about the bootstrap grid system
Please review some other components of bootstrap by clicking this link

How am I being assessed today?[edit]

You will be formatively assessed in class today

Standards we are covering today[edit]

Apply your understanding of grid system and bootstrap
Click here for all our standards

As a computer scientist, you have:[edit]

Confidence in dealing with complexity
Persistence in working with difficult problems
Tolerance for ambiguity
The ability to deal with open-ended problems
The ability to communicate and work with others to achieve a common goal or solution

Credits[edit]

Icons used with tremendous gratitude by Freepik from flaticon