He’s making a list!

20150830_132921

So thus far we have created a simple JavaScript HTML app.  We have separated the code from the page.    So the question here is why are we doing it?  Well I thought it would be fun to see if we could do our last states map project using, a different programming language.  I know I can do it in C# & V.NET but how about JavaScript.  OK, so to this first we are going to make the data available in a list. That means first we need to add list to our HTML page.  There are two kinds of list in HTML <ul> or (unordered listed), and <ol> or (ordered list).   In this case we are going to use an unordered list.  To this we will use the following code:

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Javascript</title>
http://myList.js
<style>
</style>
</head>
<body bgcolor=”#E6E6FA”>
<hr>
<ul id=”stateList”>
</ul>
<hr>
</body>
</html>

This give us a list,  but what about showing data in the list. Well to do that we will use the <li> or list item element of the list. We then put it into our code behind. Our code behind file is called “myList.js” and the HTML file should be called  “myList.HTML” . Remember both will need to be at the same folder. Here’s the code;

window.onload = function()
{
var test = [
“Alabama”,
“Alaska”,
“Arizona”,
“Arkansas”,
“California”,
“Colorado”,
“Connecticut”,
“Delaware”,
“Florida”,
“Georgia”,
“Hawaii”
]
var test2 = [
“Montgomery”,
“Juneau”,
“Phoenix”,
“Little Rock”,
“Sacramento”,
“Denver”,
“Hartford”,
“Dover”,
“Tallahassee”,
“Atlanta”,
“Honolulu”
]
for (var i = 0; i < test.length; i++)
{
//create new li element
var newStateListItem = document.createElement(“li”);
//create new text node
var stateListValue = document.createTextNode(test[i] + “: ” + test2[i] );
//add text node to li element
newStateListItem.appendChild(stateListValue);
//add new list element built in previous steps to unordered list
//called stateList
stateList.appendChild(newStateListItem);
}
}

That’s a lot of stuff. Let’s break it down.  We need something to hold our data. We are using two arrays, ( yes I know we could use one) but this is an attempt to keep things very simple later on. This is done with the var test = [data,data] statement.   Of course test2 holds the capital names. The next part of the function iterates thru the data and creates a <li>, (list item) for each.  The list item is give the value of the arrays and added to the stateList using appendChild.   This should give you the following output.

list

So that should get us started.

Advertisements

Let’s make it Confusing

 

PonyRide

Since the first time I heard the term JavaScript, I thought it had stupid name.  After all VBScript was based on Visual Basic syntax.  Why wouldn’t JavaScript be based on Java.  But that’s not the only issue I have with it.  Yes the names confusing, but the technologies and libraries that are used with it are also confusing.  jQuery for example the name makes you think it is a Java query language not a JavaScript extension library. But anyway lets see what we can do with it. Be for warned I am not proficient in JavaScript.  I’m OK with C#, or VB but have limited experience with JavaScript. My go to book for JavaScript is Mike McGrath’s book JavaScript in easy steps.  www.ineaysteps.com I like the way Mike McGrath presents the topic and have used several of his books. I wish I could say I liked JavaScript, I don’t.   I have never been a big fan of any kind of web development.  For an old desk top developer, web development seems so limiting. Especially the onset of WPF, in .NET.

Let’s start with the basics (like I have a choice). JavaScript is one part of the three parts that make up modern web development. The other two are HTML5(Hyper Text Markup Language) and CSS (Cascading Style Sheets). To write it you have the choice of including the script in the HTML Doc or referencing it from the HTML doc. Included JavaScript  is pretty easy to do.

In notepad create a simple html page:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
<meta charset=”utf-8″ />
</head>
<body>

Test

 

</body>
</html>

Save as myTest.html and then open in a browser.   The important thing here is to recognize you identified an area of the web page by using the id=  in the

portion of the HTML.  Note you could do the same with a <p></p> or any other element.  Doing this allows you to manipulate what shows up on the screen. . So how do we manipulate it?  We use the the page events change the page based on the function.  We identify where we want those changes to occur with “id=”

Here’s an example of how to do this.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
function init() {
document.getElementById(“panel”).innerHTML =”this is my test “
}

</body>
</html>

Ok lets break this down into its parts.  First of all why <!DOCTYPE html>, well honestly you don’t have worry about this in HTML5 but just don’t leave anything unsaid go here for full explanation. https://www.w3schools.com/tags/tag_doctype.asp

<Title></Title>

Is just the name of your page (not important).

<Head></Head>

This is area of the page where most people put information about the page (metadata).  It is also a good place to put your tags.  It is not the only place you can do this and most people will put the javascript into a separate file all together.  We look at that next time. You may wonder why we have the type = “text/javascript”, well in the old days we things like vbscript, which was Microsoft’ browser scripting language.   you don’t need to worry about this in modern browser, it just a relic of days gone by.

We put a function inside the script tags an use the function int(){} syntax.  I this case the name of the function is init, the parentheses is where we would pass parameters if we need too and code would go between the brackets{}.  So basically this is the code or set of instructions that we will call when the code is executed.  How do we execute the code well we do that with and event.  Here is the event:

A list of other types of events can be found here:  https://www.w3schools.com/tags/ref_eventattributes.asp

So now yo have the code, and you have the event. Now al you need is a place to put the information indicated by the code (the “panel”).  We’ll need to add the

 So here’s the whole code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
<meta charset=”utf-8″ />

function init()
{
document.getElementById(“panel”).innerHTML =”this is my test”
}

</head>
<body onload = “init()”>

 

</body>
</html>

Take this and paste it into note pad, save it as an HTML file and start making changes.  To run the program just open it with a browser.  Next time we will talk more about JavaScript.

 

 

 

 

 

 

 

Add the Map Data

worldThe next step is to add data. I found my data on the web by doing a simple query for the LAT/LONG of  US state capitals.  I then created a data set based on that information. Here is a sample of the code.

public MainWindow()
{
InitializeComponent();
MakeDataSet();

}

public void MakeDataSet()
{
DataTable table1 = new DataTable(“StateCapitals”);
table1.Columns.Add(“STATE”);
table1.Columns.Add(“Capital”);
table1.Columns.Add(“LAT”);
table1.Columns.Add(“LOG”);
table1.Rows.Add(“Alabama”, “Montgomery”, “32.361538”, “-86.279118”);
table1.Rows.Add(“Alaska”, “Juneau”, “58.301935”, “-134.419740”); table1.Rows.Add(“Arizona”, “Phoenix”, “33.448457”, “-112.073844”);
table1.Rows.Add(“Arkansas”, “Little Rock”, “34.736009”, “-92.331122”);
table1.Rows.Add(“California”, “Sacramento”, “38.555605”, “-121.468926”);
table1.Rows.Add(“Colorado”, “Denver”, “39.7391667”, “-104.984167”);
table1.Rows.Add(“Connecticut”, “Hartford”, “41.767”, “-72.677”);
table1.Rows.Add(“Delaware”, “Dover”, “39.161921”, “-75.526755”);
table1.Rows.Add(“Florida”, “Tallahassee”, “30.4518”, “-84.27277”);
table1.Rows.Add(“Georgia”, “Atlanta”, “33.76”, “-84.39”);
table1.Rows.Add(“Hawaii”, “Honolulu”, “21.30895”, “-157.826182”);
table1.Rows.Add(“Idaho”, “Boise”, “43.613739”, “-116.237651”);
table1.Rows.Add(“Illinois”, “Springfield”, “39.783250”, “-89.650373”);
table1.Rows.Add(“Indiana”, “Indianapolis”, “39.790942”, “-86.147685”);
table1.Rows.Add(“Iowa”, “Des Moines”, “41.590939”, “-93.620866”);
table1.Rows.Add(“Kansas”, “Topeka”, “39.04”, “-95.69”);
table1.Rows.Add(“Kentucky”, “Frankfort”, “38.197274”, “-84.86311”);
table1.Rows.Add(“Louisiana”, “Baton Rouge”, “30.45809”, “-91.140229”);
table1.Rows.Add(“Maine”, “Augusta”, “44.323535”, “-69.765261”); table1.Rows.Add(“Maryland”, “Annapolis”, “38.972945”, “-76.501157”);
table1.Rows.Add(“Massachusetts”, “Boston”, “42.2352”, “-71.0275”);
table1.Rows.Add(“Michigan”, “Lansing”, “42.7335”, “-84.5467”);
table1.Rows.Add(“Minnesota”, “Saint Paul”, “44.323535”, “-69.765261”);
table1.Rows.Add(“Mississippi”, “Jackson”, “32.320”, “-90.207”);
table1.Rows.Add(“Missouri”, “Jefferson City”, “38.572954”, “-92.189283”);
table1.Rows.Add(“Montana”, “Helana”, “46.595805”, “-112.027031”);
table1.Rows.Add(“Nebraska”, “Lincoln”, “40.809868”, “-96.675345”);
table1.Rows.Add(“Nevada”, “Carson City”, “39.160949”, “-119.753877”);
table1.Rows.Add(“New Hampshire”, “Concord”, “43.220093”, “-71.549127”);
table1.Rows.Add(“New Jersey”, “Trenton”, “40.221741”, “-74.756138”);
table1.Rows.Add(“New Mexico”, “Santa Fe”, “35.667231”, “-105.964575”); table1.Rows.Add(“New York”, “Albany”, “42.659829”, “-73.781339”);
table1.Rows.Add(“North Carolina”, “Raleigh”, “35.771”, “-78.638”);
table1.Rows.Add(“North Dakota”, “Bismarck”, “46.813343”, “-100.779004”);
table1.Rows.Add(“Ohio”, “Columbus”, “39.962245”, “-83.000647”);
table1.Rows.Add(“Oklahoma”, “Oklahoma City”, “35.482309”, “-97.534994”);
table1.Rows.Add(“Oregon”, “Salem”, “44.931109”, “-123.029159”);
table1.Rows.Add(“Pennsylvania”, “Harrisburg”, “40.269789”, “-76.875613”);
table1.Rows.Add(“Rhode Island”, “Providence”, “41.82355”, “-71.422132”);
table1.Rows.Add(“South Carolina”, “Columbia”, “34.000”, “-81.035”);
table1.Rows.Add(“South Dakota”, “Pierre”, “44.367966”, “-100.336378”); table1.Rows.Add(“Tennessee”, “Nashville”, “36.165”, “-86.784”);
table1.Rows.Add(“Texas”, “Austin”, “30.266667”, “-97.75”);
table1.Rows.Add(“Utah”, “Salt Lake City”, “40.7547”, “-111.892622”);
table1.Rows.Add(“Vermont”, “Montpelier”, “44.26639”, “-72.57194”);
table1.Rows.Add(“Virginia”, “Richmond”, “37.54”, “-77.46”);
table1.Rows.Add(“Washington”, “Olympia”, “47.042418”, “-122.893077”);
table1.Rows.Add(“West Virginia”, “Charleston”, “38.349497”, “-81.633294”);
table1.Rows.Add(“Wisconsin”, “Madison”, “43.074722”, “-89.384444”);
table1.Rows.Add(“Wyoming”, “Cheyenne”, “41.145548”, “-104.802042”);

DataSet set = new DataSet(“StateCapitals”);
set.Tables.Add(table1);
}