Designing solutions through programming - January 16 2017 Lesson Notes: Difference between revisions

From Computer Science Wiki
(Created page with " __NOTOC__ <table cellspacing="10" style="width:100%;"> <tr> <td style="width:50%; margin:0; margin-top:10px; margin-right:10px; border:1px solid #dfdfdf; padding:0 1em 1em 1...")
 
No edit summary
Line 6: Line 6:


# We will configure our IDE's
# We will configure our IDE's
# we will learn basic terminology about [https://www.youtube.com/watch?v=ZyXuwTTKKM0 javascript]
# We will learn about [https://www.youtube.com/watch?v=GBKwdFEyJks DOM]
# We will work through very basic examples of javascript events [http://www.w3schools.com/js/js_events_examples.asp using these examples].
# you will be exposed to [https://www.youtube.com/watch?v=V7x_hosDoIo bootstrap]
# Another excellent bootstrap tutorial can be found https://www.youtube.com/watch?v=314m7YBRFvQ by clicking this link]
# Another excellent bootstrap tutorial can be found https://www.youtube.com/watch?v=314m7YBRFvQ by clicking this link]
# We will learn about the [https://www.youtube.com/watch?v=XFrbkhWP0rM the bootstrap grid system]




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


<syntaxhighlight lang='html' line='line'>
<!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>
</syntaxhighlight>
<syntaxhighlight lang='html' line='line'>
<!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>
</syntaxhighlight>


</td>
</td>

Revision as of 11:57, 16 January 2017

Class plan.png What are we going to learn today?[edit]

  1. We will configure our IDE's
  2. Another excellent bootstrap tutorial can be found https://www.youtube.com/watch?v=314m7YBRFvQ by clicking this link]
  3. We will learn about the the bootstrap grid system

Homework.png What is our homework?[edit]

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

Target.png How am I being assessed today?[edit]

  1. You will be formatively assessed in class today

Ourstandards.png Standards we are covering today[edit]

Computer1.png 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

Credit.png Credits[edit]

Use an idea, equation, principle, theory or law in relation to a given problem or issue.

Retrieved from "https://computersciencewiki.org/index.php?title=Designing_solutions_through_programming_-_January_16_2017_Lesson_Notes&oldid=4769"