PrograMath is coded in three web languages: HTML, CSS, and JS. All three of them are written in plain text, unlike the visual programming we have done in school (Scratch, RoboPro), and are very popular today in web programming.
Put simply, HTML is the structure of a webpage, which encloses all the content of a webpage. The CSS styles a webpage and makes it look better. The JS does the processing of information, similar to many other programming languages. Learn about them more in depth below
Or, go directly to the code for the PrograMath widgets.
HTML is THE programming language of the web. It is a markup language, like XML (eXtensible Markup Language), which is defined by Wikipedia as:
A (document) markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the "marking up" of paper manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts.
Most webpages are written in HTML. There are three major parts of HTML:
| Tags | Attributes | Content | |
|---|---|---|---|
| Definition | Tags, or elements, are the markup of HTML. It makes up the structure of HTML, and (usually) everything is placed within an HTML tag. Many of them have default properties, such as the title and heading tags. | Attributes give special meaning to a HTML element by modifying certain properties of that element, like height or width. | Content is what makes up a webpage. It is the text placed within the tags, and is what is shown on the webpage. |
| Importance | Without tags, there would be no HTML. They define and structure the language, and without it, HTML could not be modified easily with attributes, and the content could only be plain text. | Without attributes, attributes could not be styled, and the page would still mostly be plain text. | Without content, there would be no webpage, because there is nothing to show. |
| Examples | <html>,<head>,<body> tags | id,class,style attributes | Everything shown on this page is content |
The HTML HelloWorld program (A "HelloWorld" program is often the simplest program that is written in any language and is taught first, showing the basics of correct syntax of that language):
<!doctype html>
<html>
<head>
<title>HelloWorld</title>
</head>
<body>
<h1>Hello,World!</h1>
</body>
</html>
See a live demo and explanation of the HTML HelloWorld program here, or learn HTML at W3Schools or CodeAcademy.
Most of this webpage is written in HTML. Press the "View Source" option in your browser to see the code (Click here if you are using Google Chrome, Mozilla Firefox, or Opera). An example of HTML in this webpage is this the table about the parts of HTML. Here is the code:
<table id="html_elem"> <!-- This is a comment. A comment is a piece of code that does not show up in the end program. -->
<thead> <!-- Some of this code is modified from the original to better show the use of attributes in HTML. -->
<tr>
<th style="background-color: rgb('200,200,200')"><br /></th>
<th class="headings">Tags</th>
<th class="headings">Attributes</th>
<th class="headings">Content</th>
</tr>
</thead>
<tbody>
<tr>
<th class="headings">Definition</th>
<td>Tags, or elements, are the markup of HTML. It makes up the structure of HTML, and (usually) everything is placed within an HTML tag. Many of them have default properties, such as the title and heading tags.</td>
<td>Attributes give special meaning to a HTML element by modifying certain properties of that element, like height or width.</td>
<td>Content is what makes up a webpage. It is the text placed within the tags, and is what is shown on the webpage.</td>
</tr>
<tr>
<th class="headings">Importance</th>
<td>Without tags, there would be no HTML. They define and structure the language, and without it, HTML could not be modified easily with attributes, and the content could only be plain text.</td>
<td>Without attributes, attributes could not be styled, and the page would still mostly be plain text.</td>
<td>Without content, there would be no webpage, because there is nothing to show.</td>
</tr>
<tr>
<th class="headings">Examples</th>
<td><span class="code"><html></span>,<span class="code"><head></span>,<span class="code"><body></span> tags</td>
<td><span class="code">id</span>,<span class="code">class</span>,<span class="code">style</span> attributes</td>
<td>Everything shown on this page, and on any page (e.g. <a href="en.wikipedia.org/" title="Wikipedia" target="blank" onclick="openLink('Wikipedia');" >Wikipedia</a>), is content</td>
</tr>
</tbody>
</table>
CSS adds style to a webpage and all its content. Without CSS, that "style" would just be "style". Here is the HTML for the plain "style":
style
<span style="font-weight:bold; text-decoration:underline; font-style:italic; font-size:20px; color:blue">style</span>
<span id="styled">style</span> <!-- This has a id attribute of "styled", which will how the following CSS code matches and manipultes this style. -->
/* This is a comment in CSS. */
#styled { /* This finds the element (tag) with the id attribute of "styled", like the "style" tag does. */
font-weight: bold; /* This is the CSS, the style for the word "style" */
text-decoration: underline;
font-style: italic;
font-size: 20px;
color: blue;
}
Through these examples of CSS, you can tell that CSS is just styling - no computational parts like JavaScript, and no tags like in HTML. It can style "properties" of elements like the following, and many more:
It has one simple purpose: to style content and make webpages look nice. It is still relatively new, so many older websites without CSS will be bland, mostly plain text.
Although the structure of CSS is simple, it still is extensive. Learn about it at W3Schools.
JavaScript really is a programming language - unlike HTML and CSS, it is not made to affect the look of a webpage - instead, it is used to work with the webpage by processing data.
JavaScript has similar structure to many other object-oriented programming (OOP) languages, such as Java, C++, etc. It supports "objects", "functions" (also known as methods and subroutines in other languages), and much more. It can do simple operations on numbers, use if, switch, and many other common programming language constructs, as well as many unique web-related functions. It is regarded as "the language of the Web" by many programmers. Here is an example of a JavaScript "function", or a block of code, that makes a popup that says, "Hello, World!"
function HelloWorld() {
alert("HelloWorld");
}
To run, or call, this function, the following code needs to be run
HelloWorld();
Or, you can call it through an "event" (for example a click). Here it is called through a button.
<button onclick="HelloWorld()">Popup "HelloWorld"</button>
Here are some code pieces from the Graphing widget.
HTML (This is what gets displayed on the webpage):
<canvas id="graph" height="500" width="500"></canvas>
<a id="info" onclick="info()">Info</a>
<h2 id="funcCont">
X-range:
<input id="xran" value="-250,250" onblur="changeGraph()" />
Y-range:
<input id="yran" value="-250,250" onblur="changeGraph()" />
<br />
Function:
<input id="function" value="y=2*x+75" />
<button type="button" onclick="changeGraph()">Graph</button>
</h2>
CSS (This is what changes a webpage's appearance):
* {
margin: 0;
padding: 0;
}
body {
width: 500px;
}
button,input {
padding: 5px;
}
canvas {
display: block;
}
#funcCont {
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
h2 {
font-family: georgia;
width: 500px;
font-size: 1em;
text-align: right;
}
#info {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
background-color: rgba(230,230,230,0.75);
}
#info:hover {
background-color: rgba(210,210,210,0.75);
}
.note {
color: red;
font-weight: bold;
}
#noteContainer {
font-weight: normal;
position: fixed;
width: 80%;
top: 10%;
left: 10%;
padding: 20px;
border: 5px solid black;
background-color: rgba(255,255,255,0.75);
display: none;
text-align: justify;
}
#xran,#yran {
width: 60px;
}
JS (This is what makes a program compute and process data):
function draw() {
c.clearRect(0,0,500,500);
c.strokeStyle = "rgb(150,150,200)";
c.lineWidth = 1;
c.strokeStyle = "rgb(250,75,75)";
c.lineWidth = 2;
c.beginPath();
c.moveTo(0,250);
c.lineTo(500,250);
c.stroke();
c.beginPath();
c.moveTo(250,0);
c.lineTo(250,500);
c.stroke();
c.strokeStyle = "rgb(0,0,0)";
c.lineWidth = 1;
c.beginPath();
if(!/[xy].*=|=.*[xy]/i.test(expression))
alert("Function does not have a 'y' or 'x' and '='.");
else if(/[^\s\*\/+\-yx=(tan)(cos)(sin)\)\(0-9\.\^]/i.test(expression))
alert("Function contains characters other than digits,'*','/','+','-','y','x','=','sin','cos','tan','(',')'. Invalid character: '" + expression.substr(expression.search(/[^\s\*\/+\-yx=tancosin\)\(0-9\.\^]/i)) + "'",1);
else {
for(x = -250; x <= 250; x++) {
noy = expression.substr(2);
noy = noy.replace(/x/gi,x);
noy = noy.replace(/--/g,"");
noy = noy.replace(/\(\)/g,"");
res = parseInt(calculate(noy));
if(x%50 == 0) console.log(res);
// done parsing
//xCoor = x+250;
//yCoor = 250-(res);
xCoor = ((500/(range[1]-range[0]))*x) + 250;
yCoor = 250 - (500/(range[3]-range[2]))*res;
if(x == -250)
c.moveTo(parseInt(xCoor),parseInt(yCoor));
else
c.lineTo(parseInt(xCoor),parseInt(yCoor));
}
c.stroke();
}
}
The code in the widgets are similar, because they have similar functions: to parse (analyze) a user-inputted math expression (from a string into an expression), and evaluate the expression. Although the built-in JavaScript function eval() could do this (for example, the string "(500+30)/53" could be simplified by calling eval() like so: eval("(500+30)/53"), and the returned result would be "10"), I did this from scratch to challenge myself.
The programs look through the expressions (for example, "(500+30)/53","200*15/17-56000+22","321321321.2*231/(3334-2)") and simplify them using PEMDAS: It first finds, and then evaluates, all parentheses, then exponents, then multiplication/division, then addition/subtraction.
mdi = /(-?\d+(\.\d+)?)([\*\/])(-?\d+(\.\d+)?)/g; // These are known as "Regular Expressions", or "regex", and are used to find match certain "patterns" in a string.
asu = /(-?\d+(\.\d+)?)([\+\-])(-?\d+(\.\d+)?)/g;
par = /\(([^\(\)]+)\)/g;
sct = /(sin|cos|tan)\(([^\(\)]+)\)/g;
num = /\d+(\.\d+)?/g;
pow = /((-)?\d+(\.\d+)?)\^((-)?\d+(\.\d+)?)/g;
Nnum = /[^0-9\.]/g;
doN = /--/g;
while((result = sct.exec(exp)) !== null) { // These code "blocks decide what to do with the matched code (matched code: the code that the regex "matched")
if(x%50 == 0) console.log(exp);
exp = exp.replace(sct,
function(match,$1,$2) {
if($1 == "sin")
return Math.sin(calculate($2));
else if($1 == "cos")
return Math.cos(calculate($2));
else
return Math.tan(calculate($2));
});
}
while((result = par.exec(exp)) !== null) {
exp = exp.replace(par,
function(match,$1) {
return calculate($1);
});
}
while((result = pow.exec(exp)) !== null) {
if(x%50 == 0) console.log(exp);
exp = exp.replace(pow,
function(match,$1,$2,$3,$4,$5) {
return calculate(Math.pow(parseFloat($1),parseFloat($4)));
});
}
while((result = mdi.exec(exp)) !== null) {
if(x%50 == 0) console.log(exp);
exp = exp.replace(mdi,
function(match,$1,$3,$4,$5) {
if($4 == "*")
return parseFloat($1) * parseFloat($5);
else
return parseFloat($1) / parseFloat($5);
});
exp = exp.replace(doN,"");
}
while((result = asu.exec(exp)) !== null) {
if(x%50 == 0) console.log(exp);
exp = exp.replace(asu,
function(match,$1,$3,$4,$5) {
if($4 == "+")
return parseFloat($1) + parseFloat($5);
else
return parseFloat($1) - parseFloat($5);
});
exp = exp.replace(doN,"");
}
Information about development here.
A short quiz here.
For more information or better, simpler explanation, get Jon or contact him at jlam55555@gmail.com.
© Copyright 2014 JLam, INC. All Rights Reserved