Fiddling with Web Applications
To get started with JSFiddle, open your web browser and type jsfiddle.net into the address bar. You’ll see the JSFiddle website, shown in Figure 4-1.
You can resize any of the panes in JSFiddle by clicking and dragging the border that separates them.
Follow these steps to run your first JSFiddle program:
- Click the Run button on the top toolbar. A pop‐up window containing the message “Hi, everyone!” appears.
- Close the pop‐up window by clicking OK.
Viewing our fiddles
We’re going to let you in on a secret. Every program in this tutorial is available for you to view, run, copy, and play around with at http://jsfiddle.net/user/forkids/fiddles. That’s right! We’ve done your homework! We’ve formatted it nicely for you and tested it out.
This is our own JSFiddle public dashboard. The public dashboard is where any JSFiddle user can share programs (known as “fiddles” in JSFiddle) with the world
Although we’ve typed up every project for you already, it’s important that you go through each step of every project for yourself so that you really understand. To get the most out of this tutorial, feel free to copy, modify, completely change, and rewrite our code to see what it does and make it your own! Keep on fiddlin’!
Playing with fiddles
When programmers share their programs on JSFiddle, they agree that anyone who wants to can make a copy of their work, change it, and republish it. However, it’s always polite to give the original author credit when you borrow code. We’ve made copies of each of the programs below so that we can be sure that they’ll be the same when you view them. If you want to find out who the original author of a program is, open Fiddle Options from the left navigation bar.
Follow these steps to view and run some of the programs in our list of amazing JSFiddle demos:
- Go to our public dashboard at http://jsfiddle.net/user/forkids/fiddles. You see a list of all the examples and projects from the entire tutorial. You may need to use the page navigation at the bottom of the list to see additional pages of results.
- Find a demo that sounds interesting to you and open it. Find a demo that sounds interesting to you and open it.
If you find a program that you like, try figuring out how it works! Change some values to see what happens.
Anything that you do to a program in JSFiddle won’t overwrite the original. You can try changing things all you want, and no harm will come of it. The worst that can happen is that the program won’t run.
Fiddling with CSS
We cover CSS in much more detail in tutorial 6. For now, follow these steps to try out changes to one of our programs:
- Go to http://jsfiddle.net/forkids/vaj023L5.You see the Bubbles demo, shown in Figure 4-2.
- Take a closer look at each of the four main areas of the screen.Three of them have some code, and the fourth is displaying the bubble animation. Can you figure out just by reading the code what any of this might do?
- Look at the CSS pane (in the upper right).You see three lines of code.
- Find the code that reads
border: 8px solid #FFFFFF;and change it to
border: 8px solid #FFFFFF;.
- Click the Run button in the top toolbar to start the animation over.You’ll notice that the walls of the bubbles have gotten much thicker, as shown in Figure 4-3.
Based on the change that you just made and the effect that it had on the output of the program, what do you think the part of the statement that says solid does? To find out, try the following steps:
- In the CSS pane, change the first value after border: to a smaller number (such as 2 or 3) and click Run. The walls of the circles get thin again.
- Change the second value after border: to one of the following
- Click Run to see what it does.This value tells the browser what the style of the border should be. Figure 4-4 shows the bubbles with the border style set to dotted.
Now take a look at the third value after
border:, which is currently set to
#FFFFFF. This string of characters represents the border color property of the bubbles.
Color in CSS is usually written using a special code called hexadecimal notation, which uses three sets of values ranging from 00 to FF to tell the browser how much red, green, and blue to put in.
We cover CSS colors in detail in tutorial 6. You can also use many of the standard color names that you know. A list of the most common color names that web browsers understand is shown in Table 4-1.
|Table 4-1||Standard HTML Color Names|
|Color Name||Hexadecimal Value||Color Swatch|
Follow these steps to change the color of the bubbles:
- Choose a color name or its hexadecimal code from Table 4-1.
- Replace the color value (#FFFFFF) in the CSS pane with your new value.
- Click Run.
Your new color appears in the Result pane.
Fiddling with HTML
But you can do much more with HTML! To make some changes to the HTML for the Bubbles demo, try the following:
- Put your cursor after
</div>and type the following:
<h1>I love bubbles!</h1>
Your HTML pane should now have the following HTML code:
<div id="o"></div><h1>I love bubbles!</h1>
HTML code is actually called HTML markup for reasons that we explain in tutorial 5.
- Press Run to see your changes in the Result pane.
The bubbles now have a special message below them, as shown in Figure 4-5.
In HTML, <h1> and </h1> are known as tags. Tags around text tell the browser that the text represents something special. In this case, <h1> represents a first‐level header, the largest and most important header on the page.
Another very useful HTML tag is the <p> tag, which marks paragraphs. To insert a <p> tag, follow these steps:
- After the
</h1>tag, press Return (Mac) or Enter (Windows) to move to the next line.
and then type anything at all that you want to say. When you’re done, end the paragraph by typing
- Click Run to see your changes in the Result pane.
max = 36and change it to
max = 80.
- Click Run.
Many of the bubbles, but not all of them, are now larger than they were before.
Based on the behavior of the bubbles when you changed the value of max, do you have a guess as to what will happen if you change the line that reads
min = 12? Try it out and see if you’re right!
bubbles = 100and timerDelay = 8000. You can change these values using the steps you’ve used several times now:
- Change the value.
- Click Run to see the results of the change.
Try changing both of these values to see what happens. By playing around with these values (or maybe just by guessing), you’ll discover that the value of bubbles tells how many bubbles should be created and timerDelay has something to do with the speed of the bubbles.
Can you figure out exactly what the bubbles and timerDelayvalues do by experimenting with them? Hint: The value of timerDelay is a number of milliseconds (or thousandths of a second). So, 8,000 milliseconds equals 8 seconds. Change the value to 10000, click Run, and then time the action on the screen. Then change the value to 1000, click Run, and time it again.
If you guessed that bubbles controls how many bubbles will be created and timerDelay controls how quickly those bubbles appear, you’re correct!
Creating a JSFiddle Account
Creating a JSFiddle account isn’t required in order to proceed with the tutorial, but it will make viewing and sharing your work later on easier.
Follow these steps to create a JSFiddle account:
- Click the Fork button in the top menu.When you create your own version of a program that’s based on someone else’s code, it’s called forking their code.
- Select the URL of your program in the browser address bar and copy it, or just write it down somewhere so you can use it after you create an account.
- Click the Login/Sign Up link in the upper‐right corner of the screen. The Log In page appears, as shown in Figure 4-7.
- Click the Sign Up link under the login form. The Create an Account page appears.
- Fill out the Create an Account form and click Create an Account. The Edit Your Profile page appears, as shown in Figure 4-8. If you like, you can make changes here and save them, but that isn’t required.
- Click the Editor link at the top of the screen. Click the Editor link at the top of the screen.
- Paste or type the URL that you saved in Step 2 into the browser address bar and press Return or Enter. You’re brought back to your version of the Bubbles demo.
- Click Fork again to bring your version of the program into your new JSFiddle account. Notice that the URL in the browser address bar now contains your JSFiddle username!
Sharing Your Fiddle
Now that you’ve created your own personalized version of the Bubbles demo, it’s time to show your friends!
- Click the Share button in the top toolbar.
You’ll see the option to copy the address for your Bubbles demo, to view the program in full‐screen mode, and to share your program on Facebook or Twitter.
If you want to share your programs on Facebook or Twitter, remember to tag us (@SirNodeOfficial on Twitter or https://twitter.com/SirNodeOfficial, and we’ll check out your creations!
- Highlight the full‐screen URL in the Share menu, as shown in Figure 4-9, and copy it by pressing ⌘+C (Mac) or Ctrl+C (Windows) or by choosing Edit➪Copy in your browser.
- Open a new browser window tab (by pressing ⌘+T [Mac] or
Ctrl+T [Windows]) and paste the full‐screen address into the
The bubbles display onscreen without the code panes.
If the Bubbles demo doesn’t work for you in full‐screen mode, try changing the https in the browser address bar to http and press Return or Enter.
If you want to return to the original Bubbles program, you can do so by going back to our public dashboard at https://jsfiddle. net/user/forkids/fiddles.
But what if you want to have your own dashboard where you can create and save your own collection of JSFiddle programs? Read on!
Now that you have your own account, you can create your own public dashboard.
To create your own public dashboard on JSFiddle follow these steps:
- With your latest version of the Bubbles app on your screen,
click Fiddle Options in the left navigation bar.
The Fiddle Options menu opens.
- Type a name for your Bubbles program.
This can be anything you like, but we recommend including the word bubbles in the name so that you remember what it is later!
- Click Update in the top toolbar.
- Click Set as Base in the top toolbar.
JSFiddle creates a new version of your program each time you save it. The Set as Base button makes the currently displayed version of your program the version that displays when someone links to your program from your public dashboard.
- Click your username in the upper‐right corner of the screen
and select Public Dashboard.
Your public dashboard appears, complete with your version of the Bubbles program listed. Your dashboard should resemble Figure 4-10.