|
|
| (One intermediate revision by the same user not shown) |
| 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] | | # Another excellent bootstrap tutorial can be found [https://www.youtube.com/watch?v=314m7YBRFvQ by clicking this link] |
| # We will learn about [https://www.youtube.com/watch?v=GBKwdFEyJks DOM] | | # We will learn about the [https://www.youtube.com/watch?v=XFrbkhWP0rM the bootstrap grid system] |
| # 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> |
