IB Comp Sci SL - April 25 2017 Lesson Notes: Difference between revisions
Mr. MacKenty (talk | contribs) (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...") |
Mr. MacKenty (talk | contribs) |
||
Line 5: | Line 5: | ||
==[[File:class_plan.png]] What are we going to learn today?== | ==[[File:class_plan.png]] What are we going to learn today?== | ||
# We will discuss | # We will discuss server side and client side scripting | ||
# 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] | |||
# 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> |
Latest revision as of 12:31, 25 April 2017
|
|
|
|
||
|
|
|
|
- ↑ IB Diploma Programme Computer science guide (first examinations 2014). Cardiff, Wales, United Kingdom: International Baccalaureate Organization. January 2012.