jQuery or Angular

20170425_164753

The art work provided by grandson I have decided to look at jQuery.  I just went through the process of teaching a couple of students how to do a simple application in JavaScript.  So I thought maybe I’d evaluate some of the JavaScript frameworks.  After looking at some Pluralsight courses.  I would start trying to work with jQuery.   I have had some experience with MVC, and decided that there would be less overhead in experimenting with jQuery over Angular.   I not saying I would recommend either, (since I have no real experience in either.  Dan Wahlin has a jQuery Fundamentals class on Plural sight so I start the course. I have to say one of the issues I have with JavaScript  in general is the lack of a decent  debugger.  Microsoft has spoiled me with visual studio.  It could also be that because of my lack of experience I have not found the right set of tools to use.  I keep seeing references to Firebug, after down loading it to Firefox I find that they are recommending you use their debugger tools.  So I have started using that.  I have been using Notepad+ for my code editor.   I intend to  learn jQuery over the next couple weeks an then write  a simple app, before going on to try Angular.  First thing first.   I always have an issue in JavaScript.  I always want to type “scr=” instead of “src=”  that issue has carried over to jQuery.   I know src=”jQuery.js”, is pointing to the jQuery library file I down loaded  from jQuery.com, and that src is also used to point the code behind in JavaScript. But what does src stand for?  Well I know it stands for source in HTML because of course I ask BING.  I don’t know why my brain thinks it should be scr, maybe counseling is in order.   The first step is to get the jQuery Libray,  you can download it from “www.jquery.com” or you point to it on the web by using “http://ajax.microsoft.com/ajax/jquery-3.8.2.js” not if you run this from a phone you should use the min or minimal version. So point pointing to use  “http://ajax.microsoft.com/ajax/jquery-3.8.2.min.js”  Oh an by the way this is referred to a Content Delivery Network or CDN. I love acronyms, it helps us keep the developers from mating with the network admins. Ok, to get an alert on a web page in JavaScript you’d use a “window.onload” event,  but in jQuery you use a document.ready.j1j3

As you can see we have replaced the “onload” with “ready” and replaced the “=” with “()”.     Also notice the $ that is an alias for jquery.  What fun we will have!

 

Advertisements

Bing Map Part 2 (the split)

20150822_124806

I know the image has nothing to do with the text.

Last time we made a list delimited by “|” in Javascript. This time we will split that up in order to use it.  Lets just look at a few:

window.onload = function()
{
var states = [
“Alaska|Juneau|58.301935| -134.419740”,
“Arizona|Phoenix|33.448457|-112.073844”,
“Arkansas|Little Rock|34.736009|-92.331122”,
“California|Sacramento|38.555605|-121.468926”,
“Colorado|Denver|39.7391667|-104.984167”,
“Connecticut|Hartford|41.767|-72.677”,
“Delaware|Dover|39.161921Florida”,
“Tallahassee|0.4518|-84.27277|-75.526755”,
“Georgia|Atlanta|33.76|-84.39”,
“Hawaii|Honolulu|21.30895|-157.826182”]

for (states i = 0; i < states.length; i++)

{

var res = str.split(“|”);

var newStateListItem = document.createElement(“li”);
var stateListValue = document.createTextNode(“state name: ” + res[0] );
newStateListItem.appendChild(stateListValue);
var stateListValue = document.createTextNode(” captital name:” + res[1] );
newStateListItem.appendChild(stateListValue);
stateList.appendChild(newStateListItem);

}

}

This will demonstrate this in a list.  Like so:

short

So as you can see we have split the array into four  parts.

In part 3 I’ll take the lat & log data from our data set and make pins on the Bing Map.

JavaScript Bing Map Part 1.

list2

Well it’s time to wrap this up.  We have created a list in JavaScript and HTML.  We’ve created a map in HTML. Now let’s marry the two together.

First the HTML map:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html>

<head>

<title>Map with valid credentials</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0

var map = null;

 

function getMap()

{

map = new Microsoft.Maps.Map(document.getElementById(‘myMap’), {credentials: “YOUR BING KEY”});

}

</head>

<body onload=”getMap();”>

</body>

</html>

Now for the data. We made a list using the data in a previous post.  Let’s complete the data set. Remember before we used the double array method to put data into a list.

_____________________________________________________________

var test = [
“Alabama”,
“Alaska”,
“Arizona”,…
And
var test2 = [
“Montgomery”,
“Juneau”,
“Phoenix”,…

______________________________________________________________

That worked but it is not the best way to do this.   As in anything there are multiple ways of doing it.  But in this case I’m going to put the state name, the capital, latitude and longitude all into a single string. I will then split that string in order to use those values.  I will dived them using a “|” and later split them using that symbol.  For example:

var state = [“Alabama|Montgomery|32.361538|-86.279118”, “Alaska|Juneau… 

So with that in mind here is our java script to create the array we will use to make our map markers of the state capitals.

window.onload = function()

{

var state = [

“Alabama|Montgomery|32.361538|-86.279118”,

“Alaska|Juneau|58.301935| -134.419740”,

“Arizona|Phoenix|33.448457|-112.073844”,

“Arkansas|Little Rock|34.736009|-92.331122”,

“California|Sacramento|38.555605|-121.468926”,

“Colorado|Denver|39.7391667|-104.984167”,

“Connecticut|Hartford|41.767|-72.677“,

“Delaware|Dover|39.161921Florida”,

“Tallahassee|0.4518|-84.27277|-75.526755”,

“Georgia|Atlanta|33.76|-84.39”,

“Hawaii|Honolulu|21.30895|-157.826182”,

“Idaho|Boise|43.613739|-116.237651”,

“Illinois|Springfield|39.783250|-89.650373”,

“Indiana|Indianapolis|39.790942|-86.147685”,

“Iowa|Des Moines|41.590939|-93.620866”,

“Kansas|Topeka|39.04|-95.69”,

“Kentucky|Frankfort|38.197274|-84.86311”,

“Louisiana|Baton Rouge|30.45809|-91.140229”,

“Maine|Augusta|44.323535|-69.765261”,

“Massachusetts|Boston|42.2352|-71.0275,

“Michigan|Lansing|42.7335|-84.5467”,

“Minnesota|Saint Paul|44.95|-93.094”,

“Mississippi|Jackson|32.320|-90.207,

“Missouri|Jefferson City|38.572954|-92.189283”,

“Montana|Helana|46.595805|-112.027031″,

“Nebraska|Lincoln|40.809868|-96.675345”,

“Nevada|Carson City|39.160949|-119.753877”,

“New Hampshire|Concord|43.220093|-71.549127”,

“New Jersey|Trenton|40.221741|-74.756138”,

“New Mexico|Santa Fe|35.667231|-105.964575”,

“New York|Albany|42.659829|-73.781339”,

“North Carolina|Raleigh|35.771|-78.638”,

“North Dakota|Bismarck|46.813343|-100.779004”,

“Ohio|Columbus|39.962245|-83.000647”,

“Oklahoma|Oklahoma City|35.482309|-97.534994”,

“Oregon|Salem|44.931109|-123.029159”,

“Pennsylvania|Harrisburg|40.269789|-76.875613”,

“Rhode Island|Providence|41.82355|-71.422132”,

“South Carolina|Columbia|34.000|-81.035”,

“South Dakota|Pierre|44.367966|-100.336378”,

“Tennessee|Nashville|36.165|-86.784”,

“Texas|Austin|30.266667|-97.75”,

“Utah|Salt Lake City|40.7547|-111.892622”,

“Vermont|Montpelier|44.26639|-72.57194”,

“Virginia|Richmond|37.54|-77.46”,

“Washington|Olympia|47.042418|-122.893077”,

“West Virginia|Charleston|38.349497|-81.633294”,

“Wisconsin|Madison|43.074722|-89.384444”,

“Wyoming|Cheyenne|41.145548|-104.802042]

Now we have our data in an array called states.  Each row is separated by a comma, and each field is separated by a “|”.   We can iterate thru the records easily enough. So using our earlier example.

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

————————————————————————————————-

 for (var i = 0; i < test.length; i++)
    {     
            var newStateListItem = document.createElement(“li”);
             var stateListValue = document.createTextNode(test[i]);
            newStateListItem.appendChild(stateListValue);
            stateList.appendChild(newStateListItem);
      
    }
}

This should give you an idea of the data we will be using. In  part 2 I will show you how to split it out using JavaScript split() Method.

Making the Map in HTML/JavaScript

HtmlMap
Well it’s time to make the map.  I have been shown how to make a simple list from our data in JavaScript using two arrays so now lets put a default map in the HTML.
So let’s create new HTML called “JavaScriptMap.HTML”. Here s what it should look like:

Map with valid credentials

http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0
var map = null;

function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById(‘myMap’), {credentials: ‘Your credentails’});
}
This requires you get A Bing Maps key to do this you must go to Microsoft and register you will be given a key that you can use for your map.  Once you have it input the credentials where it says “Your Credentials” and bobs your uncle.

HtmlMap

 Remember you’ll have to get you credentials from bing

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.

Breaking up is hard to do.

Not really!

water1

JavaScript can be easily separated from  the HTML code.  To do this we just add a line of code  and your done.  Let look at an example in our example.  Here is the original code with some enhancement.

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

function init()
{
document.getElementById(“panel”).innerHTML =”this is my test”
document.getElementById(“panel2″).innerHTML =”this is my test2”
}
</head>
<body onload = “init()”>
<p id = “panel2”></p>
</body>
</html>

If you copy this into note pad and save it as an html file, then you should get this when you open itmyTest

As you can see it just print two lines to the screen.  If we separate the scrip we will get the same results. Lets try it, note I have added a “bgcolor” to make it easier to read:

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

</head>
<p id = “panel2”></p>
</body>
</html>

And for the JavaScript:

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

This should be saved  as “myTest.js” in the same folder as the html file.  Here is the results:

myTest2

So there you go.  Next post we will get back to the data and maybe some styling.

 

 

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.