Writing your First JavaScript Application - 02

Sign in to queue

Description

We get started by setting up our development environment and an HTML5 template webpage before building a simple 'Hello World' example. Then we create a more interesting example discussed at length in the next lesson. 

 

Download the entire series source code.

 

This video was updated August 16, 2012.

Tag:

JavaScript

Embed

Download

Download this episode

The Discussion

  • User profile image
    reddevil

    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.





     

     

  • User profile image
    BobTabor

    @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 ("WarningThe 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.

  • User profile image
    Mario Cisneros

    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

  • User profile image
    reddevil

    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

  • User profile image
    BobTabor

    @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.  Wink

  • User profile image
    Stephanie Hughes

    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

  • User profile image
    BobTabor

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

  • User profile image
    RadeM

    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?

  • User profile image
    BobTabor

    @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.

  • User profile image
    steve

    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!

  • User profile image
    steve

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

  • User profile image
    Doctor Who

    @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?

  • User profile image
    BobTabor

    @Doctor Who: I'm a big fan of your work!  Wink  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.  Smiley

  • User profile image
    pvmx

    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;

  • User profile image
    BobTabor

    @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!!!

  • User profile image
    Salas

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

  • User profile image
    Paurush

    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.

  • User profile image
    BobTabor

    @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.

  • User profile image
    wdownload

    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. 

  • User profile image
    Doctor Who

    , BobTabor wrote

    @Doctor Who: I'm a big fan of your work!  Wink  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.  Smiley

    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."  Big Smile

  • User profile image
    Giselle DuBois

    hello! just wondering how to open an account

  • User profile image
    Brigitte

    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...??? Smiley

     

  • User profile image
    annaqeeb

    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.
  • User profile image
    alan hawkins

    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

  • User profile image
    Keshav Saini

    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..

  • User profile image
    James Barty

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

  • User profile image
    SN1

    "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..!!!

  • User profile image
    BobTabor

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

  • User profile image
    SN1

    @BobTabor:problem solved..thanks..Big Smile

  • User profile image
    Prateek

    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>

  • User profile image
    BobTabor

    @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!

  • User profile image
    awesome

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

  • User profile image
    BobTabor

    @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.

  • User profile image
    Sunil Kumar Roy

    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.

  • User profile image
    Nihad Nagi

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

  • User profile image
    Sunil Kumar Roy

    @ 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.

  • User profile image
    ShafRay

    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.

  • User profile image
    NadiaSz

    Thank you, Bob - fantastic tutorials!

  • User profile image
    Aleksander Moriarty

    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>. : )

  • User profile image
    Niner627428

    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?

  • User profile image
    Niner627428

    @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.

  • User profile image
    Dan

    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>

  • User profile image
    Dan

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

  • User profile image
    BobTabor

    @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.  Smiley

  • User profile image
    Rachel

    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?

  • User profile image
    BobTabor

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

  • User profile image
    Sumanth

    Thank you Bob for your valuable video

  • User profile image
    Mike

    Just a heads up, you need to add the character encoding as you will now get an error rather than a warning.

  • User profile image
    BobTabor

    @Mike: The error ... are you referring to the web browser or to the HTML5 validator?  Thanks for the input ... curious to learn more.

  • User profile image
    Tim Stumph

    I am running IE10 and when I press F12 or select Developer Tools from the drop down the browser locks up for several seconds before displaying the panel at the bottom of the screen. From that point forward everything I do in IE10 takes an unusual amount of time to load. When I turn Developer Tools off everything returns to normal. Any suggestions?

  • User profile image
    BobTabor

    @Tim Stumph: That is not my experience, so I'm just guessing here.  Do you have any other plugins or extensions that might be interfering?  You may want to see if there's something trying to grab the browser's attention while F12 tools is attempting to do the same.

    Are you running any anti virus tools that may be vying for control of the browser?

    Also, is Windows Update up to date?  That's where I would start.

  • User profile image
    stumpht

    @BobTabor:Hmmmm....seems to only happen on my wife's computer, works just fine on my laptop also running IE10. I will continue to investigate. Thanks for the tips Bob.

  • User profile image
    Andrew Bogdanov

    Hi Bob! Just started watching this series and, man, it's simply awesome - the best I've seen over the internet! And that's because of you. Feeling great energy from you as a person. Really smooth and intelligent style of teaching. Its a pleasure simply listening to your come voice, no matter what the topic is. You are a true teacher, thank you for that!

  • User profile image
    BobTabor

    @Andrew Bogdanov: No, thank you for the nice note.  Smiley  Good luck my friend!

  • User profile image
    Kathrin

    Hello Bob,

    thank you very much for your videos.

    My code doesn't work correctly and I can't figure out why. I get the the alert window when the textbox is left empty, but the title doens't change after entering any text.
    I tried using your sourcecode, but that only makes it worse ;) Then nothing works at all, neither comes the alert window nor changes the title. I'm using the newest IE Version and already tried another browser as well without success.

    I'm a little puzzled and will just post my source code and hope someone can help:

    <!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');
    title.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>

    Thanks alot!

  • User profile image
    Kathrin

    I figured it out by myself :o)

    Your code didn't work because the method was still misspelled (without "e").

    My version didn't work because of a typo. Big surprise...^^ Couldn't find it before even though I looked for it.

  • User profile image
    BobTabor

    @Kathrin: Yeah, it's infuriating.  That's why you ultimately want to use a tool like Visual Studio 2012 (or 2013) Express for Web.  Syntax highlighting could help a lot.

  • User profile image
    hemantb

    Hi Bob !

    I have created a simple modal popup using css and javascript (No jquery used and i don't want to use it). I tried reading the value (which i provide while the popup is open ) of the <input type="text" id="someId"> and then alerting the value on click of a button, both of them are inside the popup. but i dont see any value in the alert. How to force read the values ?

    Thanks in advance !

    Hemant

     

  • User profile image
    BobTabor

    @hemantb: Could you show me your code?  All of it?  Use the "Insert Code Block" icon in the reply text box.  Thanks.

  • User profile image
    hemantb

    Hi Bob !

    I figured out how to fetch the value from a textbox in modal popup (please suggest any better method , I am using 'this' to pass the whole control to a function for eg :  <input type="text" id="txtUsername" onkeyup="changeValue(this); return false;"/> ) and then i read its value. 

    but there is one more problem, i want to validtate the value of that textbox, and show some error msg in a label , on the popup itself. I tried it but didn't work out. How can i do it ?

    I couldn't find a way to share a project with you so i just shared on 4shared. If its possible for you to download it,and check the application, it would be of great help for me. (Run the default.aspx page in the project ,in case of download)

    The complete project is here   http://www.4shared.com/zip/pccPOleb/WebApplication2.html

     Below is the code complete code, including css,js, and html

     

    /* Modal Pop Up CSS*/
    #dialogContainerMain {
        padding: 10px;
        z-index:100001;
        cursor:default;
        position:fixed;
    }
    
    #modalDialogOverlay {
        width:100%;
        height:100%;
        background-color:black;
        opacity:0.5;
        filter:alpha(opacity=50);
        z-index:1;
        display:block;
        cursor:wait;
        top:0px;
        left:0px;
        position:fixed;
    }
    
    /*#dialogContainerMain */
    .closeImg {
        background: url(../Images/close_blue.png) no-repeat;
        width: 32px;
        height: 32px;
        position: fixed;
        top: 8px;
        right: 8px;
        z-index: 100002;
        display: inline;
        
    }
    
    .dialogHidden{
        display:none;
    }
    
    /*Modal Dialog CSS Ends*/
    
    
    
    
    /* document css */
    /*Using an image for as background for popup. I Use it as a stage to put the controls */
    .loginDlg {
        width:619px;
        height:460px;
        background:url(../Images/LoginBg.png) no-repeat;
    
    }
    
    .myblack {
        width:100px;
        height:30px;
        background-color:black;
        text-align:center;
        color:white;
    }
    /*Document CSS ends */
    
    

    // ModalDialog.Js 
    
    function createOverlay() {
        var overlayElem = document.createElement('div');
        overlayElem.id = 'modalDialogOverlay';
    
        var checkOverlayElement = document.getElementById('modalDialogOverlay');
        //check for the form tag and add overlayDiv as First Child
    
        if (checkOverlayElement != null) {
            document.body.replaceChild(overlayElem, checkOverlayElement);
        }
        else {
            if (document.body.firstChild) {
                document.body.insertBefore(overlayElem, document.body.firstChild);
            }
            else {
                document.body.appendChild(overlayElem);
            }
        }
    }
    
    function showModalDialog(elementId, top, left, width, height, closeFunc) {
        
        createOverlay();
    
        var dialogContainerElement = document.createElement('div');
        dialogContainerElement.id = 'dialogContainerMain';
        dialogContainerElement.style.width = (width + 10) + 'px';
        dialogContainerElement.style.height = (height + 10) + 'px';
        dialogContainerElement.style.top = (top - 10) + 'px';
        dialogContainerElement.style.left = (left - 10) + 'px';
        dialogContainerElement.style.display = 'block';
        dialogContainerElement.style.position = 'fixed';
    
        
        var closeImgElement = document.createElement('a');
    
        var closeImgDiv = document.createElement('div');
        closeImgDiv.className = 'closeImg';
    
        closeImgElement.id = 'closeDialogLink';
        closeImgElement.onclick = function () {
            if (closeFunc != null && closeFunc != 'undefined') {
                hideDialog();
                closeFunc();
            }
            else {
                hideDialog();
            }
        };
    
        closeImgElement.appendChild(closeImgDiv);
        dialogContainerElement.appendChild(closeImgElement);
        
        var clientDlgElementContainer = document.createElement('div');
        clientDlgElementContainer.id = 'clientDlgElementContainer';
        clientDlgElementContainer.style.width = width + 'px';
        clientDlgElementContainer.style.height = height + 'px';
        clientDlgElementContainer.style.zIndex = 200003;
        //clientDlgElementContainer.style.backgroundColor = 'white';
        
        var dialogElement = document.getElementById(elementId);
    
        clientDlgElementContainer.innerHTML = dialogElement.innerHTML;
        dialogContainerElement.appendChild(clientDlgElementContainer);
    
        document.body.removeChild(dialogElement);//this is the dialog element on a page. It is removed once all the innerhtml gets copied to dialogContainerElement
        document.body.appendChild(dialogContainerElement);
    
    }
    
    function hideDialog(elementId) {
        
    
        var overlayElem = document.getElementById('modalDialogOverlay');
        overlayElem.style.display = 'none';
        overlayElem.className = 'dialogHidden';
        document.body.removeChild(overlayElem);
    
        var dialogElem = document.getElementById('dialogContainerMain');
        dialogElem.style.display = 'none';
        dialogElem.className = 'dialogHidden';
        document.body.removeChild(dialogElem);
    }
    
    

     

    <!--Page Html-->
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="Styles/Main.css" />
        <link rel="stylesheet" href="ModalDialog/Styles/ModalDialog.css" />
        <script type="text/javascript" src="ModalDialog/Scripts/ModalDialog.js"> 
        </script>
        <script>
               var txtVal = '';
               function showDialog() {
                   showModalDialog('CustomModalDlg', 100, 100, 639, 480);
               }
    
               function showMsg(msg) {
                   alert(msg);
    
               }
            function showMsg2(){
               alert("Message 2 : Hi !");
           }
               
            //Trying to validate the length of the string and show error inside popup itself
               function showtxtValue() {
                   var elem = document.getElementById('textUsername');
                   var ErrElem = null;
                   if (txtVal.length < 6) {
                       ErrElem = document.getElementById('lblError');
                       ErrElem.innerText = "string length should be greater than or equal to 6.";
                   }
                   else {
                       alert(txtVal);
                   }
                   
               }
    
            // This function is used to check for elements with particular class on the form and add an extra function call to the click event. It calls both inline func call as well as the eventListener func call.
               function checkclick() {
                   var parentElem = document.getElementById('dlgParent');
                   var pchileNodes = parentElem.children;
                   
                   
                   var btnelem = document.getElementsByClassName('myblack');
    
                   if (pchileNodes.length > 0) {
                       for (var i = 0; i < pchileNodes.length; i++) {
                           //if (pchileNodes[i].id) {
                           //    pchileNodes[i].id = pchileNodes[i].id + "_clone";
                           //}
                           if (pchileNodes[i].className == 'myblack') {
                               pchileNodes[i].addEventListener("click", function () { showMsg2(); return false; });
                           }
                       }
                   }
        
               }
    
            // This reads the value from a textBox object, on 'onkeyup' event
               function changeValue(controlObj) {
                   txtVal = controlObj.value;
               }
         </script>
    </head>
    <body >
        <form id="form1" runat="server">
        <div id="dlgParent">
            <button id="dlgClk" onclick="showDialog(); return false;">Click To View Modal Dialog</button>
            <br />
            <button id='click2' class="myblack" onclick="showMsg('Click again 1!'); return false;">Click 1</button>    
            <br />
            <button id='Button1' class="myblack" onclick="showMsg('click Again 2'); return false;">Click 2</button>
            <br />
            
        </div>
            <br />
            <button id="click3" class="myblack" onclick="checkclick(); return false;">Check</button>
            <br />
        <div>
            <div id="CustomModalDlg" style="display:none;">
                <div class="loginDlg">
                    <div style="width:580px; height:440px; float:left; margin-top:150px; margin-left:100px;">
                        
                        <input type="text" id="textUsername" name="txtname"  onkeyup="changeValue(this); return false;"/>
    
                        <button id="btnDlgclick" onclick="showtxtValue(); return false;">Click me</button>
                        
                        <label id="lblError"  style="font-family:Arial,Verdana,sans-serif; font-size:14px; font-weight:bold;"></label>
    
                    </div>   
                    
                </div>
            </div>
        </div>
       <div>
       <!-- <iframe style="width:760px; height:760px; border-width:3px; border-color:black; border-style:solid;" src="Default2.aspx"></iframe>-->
       </div>
        </form>
    </body>
    </html>
    

     

     Thanks in Advance !

  • User profile image
    Clint
    @hemantb: awesome job. WE are trying to keep the comments on the actual topic of the video. For questions and responds like this, I suggest heading to www.stackoverflow.com thanks!
  • User profile image
    hemantb

    @Clint: Yeah I could have gone there . But i asked a question here, and got reply here itself. So just making it easy for @BobTabor. 

  • User profile image
    Anandkumar

    Hi Bob,
    I felt really good by visiting this site and going through your video series on Java script fundamentals for absolute beginners and I felt as if I am attending a classroom with instructor in real. Please can you provide the link for your previous HTML5 and CSS course series as well.

    Thanks
    Anandkumar S.M.

  • User profile image
    Clint
  • User profile image
    DavidDilley

    Semantics will get you every time ... just like you said in this video, conversation is usually decipherable from our experience of communicating with others, however communicating with a browser is an exact language ... but I see that technical lingo is essentially the same with exactness as programming when referring to development technologies ... you were spot on when you replied to my comments in the HTML5 & CSS3 series about JAVA and JavaScript being totally different species. I guess I need to be as exact in my technology references as when I am writing code. I had intended to mean this "stuff" when I referred to needing some tuts in JAVA  Smiley  It's all in the branding ... sort of like the twist in the term "right to work" state.

    Oh, and my comment on MS was also intended as a side hand complement. After years in the corporate environment I must admit that I would not be able to do the things I have done in my life, meet the people I have come to know well, and have half the information I have gained without the opportunity to work for and the financial support of a major corp. The 'struggle' always comes from within over our independence of direction and the propagation of our ideas. Everything I developed during my time inside became 'intellectual property' of the company, and although I didn't mind that aspect so much, there were times I wanted to get a little credit for an innovative idea and be able to pass it along to others without entanglements.

    I believe MS has taken a very positive position on software development. Having worked with VS's C#, VB, and more currently web developer, I applauded their responsiveness to new technologies, unlike Apple who seems to want to control everything from a to z. It is probably why only real hard core Apple fans still tout their OS. I have helped to establish computer systems for numerous small business concerns, and have yet to find as much relevant software available for other OS as I have been able to employ for MS systems.

    PS. I took a look at your web site, very nice, and am considering getting on board. However, since it is just me, and I no longer have corporate funds, a staff of IT people, or a group of programmers, I  have to keep my budget low since it all comes out of my pocket now. I will work on 'holding' some back each month to go towards a 'lifetime' sub. 

  • User profile image
    Danny

    If you want to run scripts localy and you just turned on the checkbox and it still doesn't work , look for the enhanced protection mode within IE10, I am not shure if I remember correctly IE9 also having this, but im shure IE8 does not have it and only requires turning on the checkbox to run scripts from local files. furthermore , IE10 didn't wanted to show me the error after deliberately changing the function name to an undeclared one ('substitute') , it does show me however the refresh message but after refreshing no error showing me the mistakes in document....

  • User profile image
    Danny

    Lol I missed the fact that errors only occur on use of the function (when u click button) , the language is that layed back ofc (loosely typed) xD silly me / bob mentioned that again in video 3

  • User profile image
    IamHyder

    Hi there 

    I am not capable understanding English while listening please would you be kind to provide the subtitle files for this series...?

     

Add Your 2 Cents