Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Introduction to Programming Basics Writing Your Program

What does Jim mean when he says his code is being stored in a text me file? Is that part of the developer tools?

Jim mentions that he has his code stored in a text me file ? What exactly is that ?

Hi Harry I am really new to this stuff....I downloaded sublime how does it interact with Chrome ? How do I get programs I write in it to run on a web page or java console ?

2 Answers

Harry James
Harry James
14,780 Points

Hello,

The way Sublime works is it allows you to create a .js (JavaScript) file where you can code just like you would in any normal language. To run the code in your browser, you must create a html site first.

To do this, hop open sublime and create a new file (This can be anything as long as it ends in .html but, in HTML, we often call the main page index.html so, this would be a good name to call it). Then, write/copy this code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JavaScript programming</title>
        <style>
            html {
                background: #FAFAFA;
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>JavaScript rocks</h1>
        <h2>Woohoo!</h2>
        <button id="action">Action</button>
        <input id="text_field">
        <script src="myjavafile.js"></script>
    </body>
</html>

Now, you can mess around with the titles as much as you like (You can change anything, actually) but, this page will be where it ties in with your .js file. See on the 3rd from the bottom line the myjavafile.js? Change this to the name of your JavaScript file and save.

IMPORTANT: You must have your JavaScript file in the same directory as your .html file. If it is in a different directory, you need to specify where it is found (C:\Users\Harry\Documents\myjavafile.js, for example (In windows)). So, to keep things simple, put both the index.html (Or whatever you called it) and the myjavafile.js (The name doesn't matter) in the same directory.

Next, we can open up our page. To do this, just open up the index.html file in Chrome (You can do this by Opening with Chrome or you can, in the Chrome address bar, type where you find the file (E.G: If you put it in your documents on windows, type C:\Users\Harry\Documents\index.html). Remember that if you changed the name of the .html file, you need to reflect that here.

You should now see a page with a button and 3 titles. Good! Your website is working! Next, let's test to see if the .js file is linking in fine. In your .js file, type:

console.log("Test success!");

Then, save these changes and refresh your website (You will need to refresh the website every time you make a change to the .js file). Now, press Ctrl+Shift+J on Windows or Cmd+Opt+J on a Mac. This brings up the Javascript console. In here, you should see Test success! logged to the console. If you do, everything is good! You can now work fine!

Just to clarify, you can write Javascript code in either the .js file or in the Javascript console built into Chrome. Note that if you write it into the console, it will be lost on the next refresh. If you write it in the .js file however, as long as it's in the file, it will remain on the page (Our Test success! message will display forever until we delete it).

If you have any more questions, feel free to ask :D

Awesome stuff Thanks alot

Harry James
Harry James
14,780 Points

It may sound daunting this big block of code but, JavaScript is one of the easiest languages out there. It's actually the HTML bit that takes up most of that block of code! You'll only need to write that bit once which is at the start :)

Sean T. Unwin
Sean T. Unwin
28,660 Points

TextMate is a text editor for Mac. You are free to use whichever editor you prefer.

what I suspected but just wanted to confirm Thanks for the quick turnaround Sean

Harry James
Harry James
14,780 Points

I recommend Sublime Text :) It's free for testing out/getting used to programming (You require a license for continued use however, it's a bit like WinRAR in that you can still continue using the software as much as you want). If you're going to use it seriously though, consider buying a license as, it does help fund the development of the software :) <-- Disclaimer.