Some javascript code we worked on today is below. The point of the lecture was to
Some URLS with more information are:
It is worth working through the Javascript tutorials at W3Schools. They provide excellent reference with online practice. You can paste their code in js.do as well. Mathjax provides an excellent example of a callable external library of functionality from a CDN (external Content Distribution Network). In addition, I have a google drive JavaScript folder with selected online JS manuals and the example html files below . These examples can also be viewed here.
The html code below produces two right triangles, displays the code for determining the hypotenuse of both, and creates a button form that displays the hypotenuse. You can save this as html and run this code in your browser by loading the file in the address bar of your browser as file:///C:/MyTriangleCode.html.
<!DOCTYPE html>
<html>
<body>
<head>
<title>MathJax AsciiMath Test Page</title>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>
</head>
<body>
<p>A right triangle is defined by the formula `a^2 + b^2 = c^2` .
These right triangles have two sides of 250 pixels each. Therefore their hypotenuse equals:</p>
<p>
`sqrt(250^2 + 250^2)` or
</p>
<p id="demo"> Click the button below to display hypotenuse of these right triangles: </p>
<button onclick="myFunction()">Display Hypotenuse</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML=Math.sqrt((250 * 250) + (250 * 250));
}
</script>
<svg height="250" width="250">
<polygon points="250,1 250,250 1,250" style="fill:blue;stroke:black;stroke-width:1" />
</svg>
<svg height="250" width="250">
<polygon points=" 1,250 250,250 -0,1 " style="fill:red;stroke:black;stroke-width:1" />
</svg>
</body>
</html>
The html code below produces a circle, displays the code for determining the area of the circle, and creates a button form that displays said area. You can save this as html and run it in your browser by loading the file in the address bar of your browser as file:///C:/MyCircleCode.html.
<!DOCTYPE html>
<html>
<body>
<head>
<title>MathJax AsciiMath Test Page</title>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>
</head>
<body>
<p>A circle area is defined by the formula `pir^2` .
This circle has a radius of 100 pixels. Therefore its area equals</p>
<p>
`pi(100^2)`.
</p>
<p id="demo"> Click the button below to display the area of the circle here: </p>
<button onclick="myFunction()">Display area</button>
<svg height="250" width="250">
<circle cx="125" cy="125" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML=Math.PI * (100 * 100) ;
}
</script>
</body>
</html>
No comments:
Post a Comment