Writing your First JavaScript Application - 02

Using HTML5.validator.nu

If I paste my template code in Chrome :

The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 (subject to the utter previewness of this service)

If I paste my template code in IE9:

HTTP ERROR 415

Problem accessing /. Reason:

    application/x-www-form-urlencoded not supported. Please use multipart/form-data.

@reddevil: Hmm... I can't reproduce your error.  I just tried in in Chrome Version 21.0.1180.57 ... on a Mac even (!!!) ... on http://html5.validator.nu/ I *did* get a warning ("Warning: The character encoding of the document was not declared." ... I could have added a <meta charset="UTF-8"> to fix that warning) but otherwise it checks out.

Could you try opening up the files that come with the video series (see lesson 1) and try that code?  If it works, then it might have to do with something you typed in.  Let me know and we can take it from there.

Hi Bob,

I'm really enjoying your tutorial, one of the very best I've found! I just want to bring something to your attention and that is you don't have to include the type attribute in the script or link tags anymore under the new HTML5 syntax rules.

Keep up the great work,

Kind regards,
Mario

Bob. It's ok now. I tried the code in IE9 at work and no problems at all. So I guess my IE9 at home is a bit confused. Tx anyway, I'm enjoying this course

@Mario Cisneros: You are absolutely right.  I created the HTML5 series **AFTER** this series, and so I did more in-depth HTML5 study / practice after I created this series.  I wish I could go back and make that point more emphatically ... thank you for posting it!

@reddevil: Cool.  Crazy inter-webs.  

Superlatives are not sufficient. Like the previous HTML 5 and CSS3 course it has the depth and the process we are all looking for. You have made a positive mark on humanity that will go down in the annals of history.

Congrats.

Stephanie
LA

@Stephanie Hughes:  You're funny.  Glad this will help your studies!  

Bob, I want to thank you for another great series of video. I really like your work and I hope that you will continue that way. I have watched HTML5 and CSS3 Fundamentals Course and been able to download exercise files, but that's not the case with JavaScript Fundamentals Course. I'm able to watch and download the videos but I can't even see the links for downloading the exercise files. Can you help me?

@RadeM: The files you're looking for are on the same pages as the FIRST video in this series.  Look near the description.  Sorry for the confusion.

Hi Bob..

I wasn't able to get the expected results using the following syntax:

var myValue = document.getElementByID('myTextBox').value;
if (myValue.length === 0) {
alert("Please enter a real value in the text box!");
return;
}

It doesn't pop the alert. However, it works when I used the following:

var myValue = document.getElementById('myTextBox');
if (myValue.value.length === 0) {
alert("Please enter some text");
return;
}

I'm running this on Chrome, current version, and have also verified that I have the latest version of Java installed as well. Why the diff in syntax?

Thanks much!

Found the diff. The function name in the html call was misspelled in the downloaded code example.

@BobTabor: Is the URL http://html5.validator.nu/ you've mentioned in this series, the website for validating HTML5? Or is that the website best suited for Niue?

@Doctor Who: I'm a big fan of your work!    I'm not quite sure how to answer your question, however.  Yes, that URL is great for validating HTML5 from Niue, any other island in the South Pacific, or the rest of the world for that matter.  

Hi Bob! Really love your series!

I'm not an expert in JavaScript, but it seems to me there is some inconsistency in the code for this lesson:
...
var myTitle = document.getElementById('title');

title.innerHTML = myValue;
...

You declare the myTitle variable and don't use it. Therefore this code fragment should look like either

 title.innerHTML = myValue;

or

var myTitle = document.getElementById('title');

myTitle.innerHTML = myValue;

@pvmx:  Make sure you are watching the LATEST Version of this video.  If you downloaded it earlier OR watched from another source, we UPDATED TO FIX A BUG ... I was busy talking and didn't correctly type the code.  That is the version you are referring to.  WATCH THE LATEST VERSION (ABOVE) FOR THE CORRECT CODE.  Sorry for the confusion!!!

Great Video, thks. Really didactic and motivating. I'll follow the serie

HEllo Sir
What is the use of writting "JavaScript Example" in Head.
I removed it from head but left it in body and when i double clicked on Template.html still "JavaScript Example" was displayed.

@Salas: Thanks!  autodidactic is one of my favorite words (and concepts)!

@Paurush: There's no point to it, really.  I tried to remember to change the title in each video.  If you're still seeing it after removing BOTH head and body, then you're browser is probably caching.

Hi bob muchas gracias( I'm Thankful) your tutorial is easy to understand i don't speak well English but i don't think is problem watching this video i discovered how people change content of div using JavaScript but i will follow your steps to make sure didn't gonna fall. 

Aug 20, 2012 at 6:19 PM, BobTabor wrote

@Doctor Who: I'm a big fan of your work!    I'm not quite sure how to answer your question, however.  Yes, that URL is great for validating HTML5 from Niue, any other island in the South Pacific, or the rest of the world for that matter.  

Thank you for your reply (and I'm very sorry it's taken me so long to get back to you.  It's entirely my own fault).

Yeah, I'm a big Doctor Who fan.  Have been watching it since I first saw it broadcast in the 80's on PBS, and I confess my favorite Doctor was played by Tom Baker, hence the use of his image on my avatar.  As Baker said to Harry Sullivan in The Robot, his first episode, "The definite article, you might say." 

hello! just wondering how to open an account

I find your tutorials very helpful....do u have any on Java... or PHP Mysql...or do know of any that might be as details as you are...???

Great Lesson !

But I would really recommend using Consolas font insteas of Courier New , for two reasons:

• It is the default ffont for Visual Studio and IE9 F12 developer tools
• Its 0 is inner striked to differentiate it from O.

I enjoy the video but the code for the second lessons does not work. I even tried the source code and it doesn't work.
When I debug in IE the following line for the this lesson:

var myValue = document.getElementByID('myTextBox').value;

I get this error:

SCRIPT438: Object doesn't support property or method 'getElementByID'
C9JS_02.html, line 7 character 15

Same problem here. The code of tutorial C9JS_02 doesn't work. I watched the video and practice the code in my local machine and it didn't work. So I downloaded the source file today and the source file too doesn't work..

@alan: you just have to change 'ID' to 'Id'. Function names are case sensitive, a common pitfall

"internet explorer restricted this webpage from running scripts or ActiveX controls"...dis is d msg dat pops up everytime I run my html page..despite having made changes in d security option of internet explorer as u had asked in d video....then later, even on refreshing,this pops up...there is no error wid  the script coz I used f12 developers tool to verify....kindly help..!!!

@SN1: Did you restart IE?  Completely shut it down, then retry?  That should solve it.

@BobTabor:problem solved..thanks..

The simple example rendered correctly. My f12 developer tool didn't show any errors when refreshed. I can't tell if my coding is flawed, but the "hello world again" didn't change in the title. here is my code:

<!DOCTYPE html>
<html>
<head>
<title>Javascript example</title>
<script type="text/javascript">
function substitute() {
var myValue - document.getElementByID('myTextBox').value;

if (myValue. length == 0) {
alert ('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementByID('title');
myTitle.innerHTML = myValue;
}
</script>
</head>
<body>
<h1 id="title">Javascript Example</h1>

<input type-"text" id="myTextBox" />
<input type="submit" value="Click Me" onclick="substitue"() />
</body>
</html>

@Prateek: Hi, I downloaded your code and debugged it ... there were at least 4 typo's that prevented it from running.

var myValue - document.getElementByID('myTextBox').value;

Should use = instead of -

Should use getElementById instead of getElementByID  (see capitalized D)

<input type-"text" id="myTextBox" />

Should use type="text" instead of type-"text"

<input type="submit" value="Click Me" onclick="substitue"() />

Should use onclick="substitue()" instead of onclick="substitue"()  (Parenthesis go INSIDE the double-quotes)

... after I found 4, I stopped debugging (so there might be more issues).  Be VERY CAREFUL as you write code ... it is much more strict than writing for humans who can try to understand what you mean.  Compilers / computers have no patience for impreciseness.  Hope that helps!

Hey Bob,what is the purpose of writing return statement? I didn't write in my code and it worked correctly...

@awesome: Return skips any additional evaluations in the branching statement.  In simple branching statements, you don't need it, but I think it's a good practice to use it nonetheless because it fully expresses your intent.  I generally do not like to imply intent, but rather be explicit.  Just a stylistic thing for smaller uses as in the case you described.  Hope that helps.

Bob
I wrote the code following your c9JS_02 file. It as follows:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function substitute() {
var myValue = document.getElimentById('myTextBox').value;

if (myValue.length == 0) {
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElimentById('title');
myTitle.innerHTML = myValue;
}
</script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>

<input type="text" id="myTextBox" />
<input type="submit" value="click Me" onclick="substitute()"
/>
</body>
</html>

When I click the "Click Me" button, nothing happens. I used F12 developer tool to check in. It shows the following message:
SCRIPT438: Object doesn't support property or method 'getElimentById'
C9JS_02.html, line 7 character 3, Though I didn't copy and paste from your file, I wrote it was it was and checked for several times.

Please tell me what to do.

@Sunil Kumar
It's getElement and not getEliment.
Regards,

@ Nahid Nagi
Thanks a lot for pointing out my mistakes. Though it was a silly mistake, it consumed a significant amount of time from me. Talking to each other for help is really great.

Woow I really do thank you Bob for all this, am on the band wagon since the HTML5 & CSS3 series, am on board till am good to go. And thanks for the code files because I was sweating with a minor problem in this lesson on these lines

var myTitle = document.getElementById('title').value;
myTitle.innerHTML = myValue;

but before I complained I needed to verify that my complaint is legit, and after comparing my code with yours I found that I didn't need to add the ".value" at the en of the top line.

anyways thanks for all this sorry am a few months late.

Thank you, Bob - fantastic tutorials!

Hi! That little piece of code is amazing! Great lesson!
I have one question about extending the use of that code.
Is it possible to write simmilar javascript code in "Index1.html" that could change the content in another document like "index2.html"? And another question. When I wrote in text box 'hello world' and then refresh the site, the 'hello world' dissapeared. Is there some way to make the text typed in the text box permament in a website? So after hitting 'refresh' button I would still have my 'Hello World' text in <h1>. : )

Hey Bob,

As usual, nice vid! But I'm stuck at the part where we get the "onclick" segment to work correctly. Because after I typed "substitute()" in the double quotes and refresh, nothing happens! A little help?

@Aleksander Moriarty: As far as I know, things like that can only be done with a Windows 8 app. I suggest you head down to http://msdn.microsoft.com/en-us/library/windows/apps/hh986964.aspx and go down the line of tutorials. For that, Notepad won't be useful enough. Windows 8 and Visual Studio 2012 is required. Visual Studio can be downloaded at http://www.microsoft.com/visualstudio/eng/downloads.

I've validated the code and saved document as html, but when I open it in a web browser (Firefox, Chrome, Safari...) it just shows the code in full, as if opened in a text editor:

<!DOCTYPE html>
<html>
<head>
<title>JS Example</title>
</head>
<body onload="alert('Hello World!')">
<h1>JS Example</h1>
</body>
</html>

^ Solved. My text editor was set to rich text. Changed setting and now all runs fine.

@Niner627428: Hi!  Hope I can help ... I'll need a bit more info ... could you (1) paste in the pertinent code that doesn't seem to work, and (2) point me to the moment in the video (example ... @5:45) so I can remember what I was trying to explain.  

Hi Bob, I'm using Mac OSX and Chrome instead of Windows 7 and IE v9. When I tried the exercise to replace the h1 text with whatever text I entered into the text box, I received this error in my Developer Tools console:

Uncaught TypeError: Object #<HTMLDocument> has no method 'GetElementById'

Any insight?

@Rachel: Could you post (or send me) your code?  I'll take a look at it.  bob at learn visual studio dot net