Solved

Need some simple JavaScript assignments

Posted on 2008-11-01
29
454 Views
Last Modified: 2013-11-07
I am new to JavaScript so am currently reading O'Reilly's JavaScript: The Definitive Guide, which is excellent.  But I do want to get coding as too.

I do well with the clearly defined goals of a project and hope that I can get a few assignments to write little test programs which will force me to prove (or expand) my knowledge of JavaScript.

Could you post a few simple programs I can write?  I'd like to code them and post them for your "grade" so you can tell me what I got right and what I got wrong.  Once I get past this phase and have read further (I am now on Chapter 5) I will ask for harder programs to write on a different post.  And if this methodlogy works very well, I will ask on a third post for difficult programs to be "assigned" to me.

My real platform is C# and my strength has been WinForms, but I want to expand my understanding of ASP.NET.  So I hope to become more well versed with JavaScript since that appears to be a building block of being able to write ASP.NET very well.  I say this since it may influence the type of test programs you'd suggest.  I'm trying to stick with ASP.NET 2.0 and not going the route of AJAX until I feel I have nailed this.


Thanks for the help,
newbieweb
0
Comment
Question by:newbieweb
  • 16
  • 9
  • 3
  • +1
29 Comments
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 100 total points
ID: 22859530
OK, try this one.  It's hard to say what is hard for any one person, but if your focus is ASP, then try this --

1.  You have a FORM which has a hidden field in it.  You need to change that form field with javascript
2.  write a javascript statement to change the value in that hidden form field/
3.  submit the form to an ASP script.  Get the value passed to ASP by the javascript form change.
4.  Use ASP to refresh the user's page, and send a HTML text back that states to the user what the value in that form field was.  If you can do this, you have solved what people struggle with in ASP + javascript.

Hint --  http://www.google.com/search?num=30&q=javascript+write+to+form+field
http://www.google.com/search?num=30&q=submit+form+to+ASP
http://www.google.com/search?num=30&q=print+ASP+variables+in+HTML
0
 

Author Comment

by:newbieweb
ID: 22859565
do you mean ASP.NET? I so I will give this a try...

newbieweb
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22859577
you should be familiar with ASP (aka "classic asp") as well as ASP.NET.  You can't learn to drive a BUS until you also know how to drive a car ... huh?
0
 
LVL 18

Accepted Solution

by:
wilq32 earned 400 total points
ID: 22859644
ASP ? odd... maybe PHP ?:) you can even do in Python, cgi... blah whatever you want ;).

Mine proposition for you is:

1. Create simple gallery of images - few images in small version, one is big - make script that will change this big image (Difficult: simple).

2. Lets do some trics with images - maybe after clicking on image we see a animation of opacity (so it will look like getting from background)  (difficult: still easy, use setTimeout/setInterval).

3. Some DOM and function creating. Make a object in javascript that will make all of this functionality in one simple declaration:

document.body.appendChild( new imageGalery([arrayOfImages],bigWidthSize,bigHeightSize)

imageGalery = function (array,width,height)
{
}
Use some functionality of prototype:
imageGalery.prototype.changeImage = function (withImage)

(difficult: medium)


4. Let's rock. Make all of this connected to class you put in own element, so:

<script src="your.js" type="text/javascript">
<div class="gallery"> </div>

you will find this div, and include content of your script inside there.

(difficult:easy)







Just those tasks for now... If you wana something not related to images.. just tell :)
0
 

Author Comment

by:newbieweb
ID: 22859688
I don't want to start some lengthy project.  I said in my post I want simple JavaScript assignments.  Then I imagined a second and a third post where I would gradually request more complicated tasks.

I don't want to get into images yet, and I don't want to branch out into learning classic ASP either.  I just want simple little projects than can get me using this language, which is very new to me.

What is obvious to you is new for me, so imagine you're mentoring a kindergartner!

:)
0
 
LVL 18

Expert Comment

by:wilq32
ID: 22859706
1. Image gallery in javascript:

<script type="text/javascript">
function changeImage(number)
{
   document.getElementById('bigimage').src="big"+number+".jpg";
}
</script>

<img id="bigimage" src="big1.jpg">

<img onclick="changeImage(1)"  src="thumb1.jpg"><img onclick="changeImage(2)" src="thumb2.jpg">




That should be for first task for begginer. Does that look hard?:)


No images? Then maybe lets see some clock in action:

you have a normal input:

<input id="clock">

using setTimeout functions and  .innerHTML  of element, make function that will show actual time in this box (you will need function new Date())
0
 

Author Comment

by:newbieweb
ID: 22859746
OK.  You Win.  I will make a sample ASP.NET image gallery program as my first application which relies on your JavaScript function.

I will rename five JPEG's to big1.jpg...big5.jpg

I would like to add a Left and a Right button where I start with a value of 1, then increment up to 5.  I would like to disable the Left and the Right buttons when the current value is 1 or 5.  I will display the image for the current index.  What is it that keeps the index value?


My second addition will be to put a clock on it that increments every second.
0
 

Author Comment

by:newbieweb
ID: 22859761
HTML is stateless.  Does the JavaScript global value persist?
0
 

Author Comment

by:newbieweb
ID: 22859764
I guess I could just use the C# object to retain that value...
0
 

Author Comment

by:newbieweb
ID: 22859828
Some basic questions hooking this up...

I want to use OnClientClick() but need to use the object to store the value, which I will increment and decrement with each button click.

How do I call the object to retrieve the value??


        <asp:Button ID="leftBtn" runat="server" OnClientClick=changeImage(??) Style="z-index: 100;
            left: 130px; position: absolute; top: 325px" Text="Left" />
0
 

Author Comment

by:newbieweb
ID: 22859848
Forget the last question.  I am doing it now with 100% JavaScript.   But I can not make the image show.  I use an ImageButton.  Can you see the problem?


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    var index=0;
   
    function changeImage(number)
    {
        document.getElementById('bigimage').src="big"+number+".jpg";
    }
   
    function decrementImageIndex()
    {
        if ( index > 0 )
            changeImage(--index);
    }

    function incrementImageIndex()
    {
        if ( index < 4 )
            changeImage(++index);
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="leftBtn" runat="server" OnClientClick=decrementImageIndex() Style="z-index: 100;
            left: 130px; position: absolute; top: 325px" Text="Left" />
        <asp:Button ID="rightBtn" runat="server" OnClientClick=incrementImageIndex() Style="z-index: 101;
            left: 229px; position: absolute; top: 325px" Text="Right" />
        <asp:ImageButton ID="bigimage" runat="server" Height="270px" Style="z-index: 103;
            left: 58px; position: absolute; top: 33px" Width="286px" />
   
    </div>
    </form>
</body>
</html>
0
 

Author Comment

by:newbieweb
ID: 22859860
I located the images in the App_Data folder.  I have big1.jpg to big5.jpg in the App_Data folder.

Any idea why the image does not show?

newbieweb
0
 

Author Comment

by:newbieweb
ID: 22859986
I also tried:

document.getElementById('bigimage').src="App_Data/big"+number+".jpg";

but that did not work.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22860042
You can see the mess you get into by people who are just looking for a battle.  Good luck, I am out of it.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 18

Expert Comment

by:wilq32
ID: 22860593
I went sleep - sorry for no answer :)

Please - lets stick to HMTL and javascript only. Forget about ASP. If you want to understand javascript well... then forget about ASP that will make it more confusing. Change those ASP lines into normal HTML:

        <asp:Button ID="leftBtn" runat="server" OnClientClick=decrementImageIndex() Style="z-index: 100;
            left: 130px; position: absolute; top: 325px" Text="Left" />
        <asp:Button ID="rightBtn" runat="server" OnClientClick=incrementImageIndex() Style="z-index: 101;
            left: 229px; position: absolute; top: 325px" Text="Right" />
        <asp:ImageButton ID="bigimage" runat="server" Height="270px" Style="z-index: 103;
            left: 58px; position: absolute; top: 33px" Width="286px" />

to:

<button onclick="decrementImageIndex()">left</button>
<button onclick="incrementImageIndex()">right</button>
<img id=bigimage">


Some first notes - you put javascript into events but without bracers. If you want attach events to your elements you need to use bracers.

Function should work ok, so after you solve minor problem that should work :)/
0
 
LVL 18

Expert Comment

by:wilq32
ID: 22860602
Pure HTML and JS solution should look like this. Notice that i made small mistake in previous comment by putting <img id=bigimage"> (i lost bracet here uhm). If you want be good in javascript you need some basics of HTML too.

You put all block in form, so clicking button takes you again to the same page (reloading it) so javascript is useless in that case. The truth is, that javascript that you made was ok, but the HTML was bad ^^ (just stick to pure HTML as i said ;>)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml" >

    <title>Untitled Page</title>

    <script type="text/javascript">

    var index=0;

    

    function changeImage(number)

    {

        document.getElementById('bigimage').src="big"+number+".jpg";

    }

    

    function decrementImageIndex()

    {

        if ( index > 0 )

            changeImage(--index);

    }
 

    function incrementImageIndex()

    {

        if ( index < 4 )

            changeImage(++index);

    }

</script>

</head>

<body>

    <div>

<button onclick="decrementImageIndex()">left</button>

<button onclick="incrementImageIndex()">right</button>

<img id="bigimage">    

    </div>

</body>

</html>

Open in new window

0
 

Author Comment

by:newbieweb
ID: 22863497
wilg32,

OK.  I now have this little gallery program working with a "Left" and a "Right" button that lets me display any of 5 images on the screen.  But when it starts there is no image displayed.  I need to hit the Right button to display the first image.

How can I have it display image "0" when I load the page?

Thanks,
newbieweb
0
 
LVL 18

Expert Comment

by:wilq32
ID: 22863936
<img id="bigimage">   there is no first image set you can make by doing this by:

<img id="bigimage" src="firstimage.jpg">

0
 

Author Comment

by:newbieweb
ID: 22863967
Thanks.  You're a BIG help!

One last feature before I consider this assignment done so I can close out this post.

How do I disable the Left button when the first image is displayed, enable it when I click the Right button, and disable the Right button when I reach the last image??

Thanks,
newbieweb
0
 

Author Comment

by:newbieweb
ID: 22864020
Here's my latest atempt at this, but the buttons are not disabling.  Am I using the wrong property name?

    var index=0;
    var numImages=5;
   
    function changeImage(number)
    {
        document.getElementById('bigimage').src="big"+number+".jpg";
        enableButtons();
    }
   
    function decrementImageIndex()
    {
        if ( index > 0 )
            changeImage(--index);
    }
 
    function incrementImageIndex()
    {
        if ( index < numImages )
            changeImage(++index);
    }
      
    function enableButtons()
    {
      // enable or disable the button
               var leftBtn = document.getElementById('leftBtn');
      leftBtn.enable = index > 0;
            
               var rightBtn = document.getElementById('rightBtn');
               rightBtn.enable = index < numImages;
   }      
</script>
</head>
<body>
    <div>
<button id="leftBtn" onclick="decrementImageIndex()">left</button>
<button in="rightBtn" onclick="incrementImageIndex()">right</button>
<img id="bigimage" src="big0.jpg">    
    </div>
</body>
</html>
0
 
LVL 18

Expert Comment

by:wilq32
ID: 22864201
almost good here, but instead of .enable,   try use :  .setAttribute("enabled","true")   or false :)   you can check too with .style.display="none" and "block", those are interesting efects too :)
0
 

Author Comment

by:newbieweb
ID: 22864273
I'm getting errors with this code:

function enableButtons()
{
   // enable or disable the button
   var leftBtn = document.getElementById('leftBtn');
   leftBtn.setAttribute("enabled", index > 0 ? "true" : "false");
            
    var rightBtn = document.getElementById('rightBtn');
    rightBtn.setAttribute("enabled", index < numImages ? "true" : "false");
}      
0
 
LVL 18

Expert Comment

by:wilq32
ID: 22865714
leftBtn.setAttribute("enabled", index > 0 ? "true" : "false");
 
well, proper statement is:

(index > 0) ? "true" : "false"

but i found that it sometimes need to be in bracers again, so just for sure use:

 leftBtn.setAttribute("enabled", ((index > 0) ? "true" : "false"));
0
 

Author Comment

by:newbieweb
ID: 22867103
OK.  I changed it but still got an error.  Then found th source of the bug:

<button in="rightBtn" onclick="incrementImageIndex()">right</button>

instead if "id" I had typed "in".  So there's no longer a runtime error.  But the buttons are not getting disabled.  Any ideas?
0
 
LVL 18

Expert Comment

by:wilq32
ID: 22869818
sorry for this confusing ;) I also went confused, there is no such a parameter like enabled, just disabled ;D
0
 

Author Comment

by:newbieweb
ID: 22869915
OK.  We're making progress.  I can disable the button from within JavaScript.  But I am puzzled why this function does not work:

function enableButtons(number)
{
   // enable or disable the button
   var leftBtn = document.getElementById('leftBtn');
   leftBtn.setAttribute("disabled", ((number > 0) ? "false" : "true"));
            
   var rightBtn = document.getElementById('rightBtn');
   rightBtn.setAttribute("disabled", ((number < numImages) ? "false" : "true"));
}

am I missing something?

newbieweb
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 22870936
You should close this question now, it is really not a good question. If you want to learn JavaScript and need some assignment, just go to the JavaScript zone, there are plenty of them.
Really, try to close a question before you ask a related question: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23869458.html
0
 

Author Comment

by:newbieweb
ID: 22871163
The other one is ASP.NET wherase this question was about ASP.  I took the advice of scrathcyboy to learn ASP and not be so focused on ASP.NET. So I am trying to understand how they are different.

Sorry if you find this post bothersome.  wilg32 was helping me out to complete the asignment he'd given me.

But I've made a lot of progress with it, and don't want to be a problem to anyone, and will close it out.



Thanks,
newbieweb
0
 
LVL 18

Expert Comment

by:wilq32
ID: 22871839
Oh well... the problem there is that i cheat you a little ^^ I mean setAttribute works for all attributes that are set from <HTML> too.... buy you know... Disabled  is a element that is set or not, so you have to use .removeAttribute('disabled')   ... I hope this will work now :)
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now