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.

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s