Where should i write javascript?
Show
In this new video 🎬 I explain and show the 3 ways of how to write and execute your JavaScript code. 👩🏻💻 Where to write and execute JavaScript
👩🏻💻 Simple Text Editor vs. Special Code Editor 👩🏻💻 Finally, understanding how files in real projects are structured and referenced will help you a lot when getting started. Really understanding the above topics, will help you a lot when starting coding. 🙂 ✅ I will upload a complete JavaScript Tutorial for absolute beginners. So if you are completely new to programming this will give you a step by step guide to learn JavaScript. You can subscribe on Youtube to get notified 🙂 ✅ I'm happy to connect with you on
Chapter 1. Writing Your First JavaScript ProgramBy itself, HTML doesn’t have any smarts: It can’t do math, it can’t figure out if someone has correctly filled out a form, and it can’t make decisions based on how a web visitor interacts with it. Basically, HTML lets people read text, look at pictures, watch videos, and click links to move to other web pages with more text, pictures, and videos. In order to add intelligence to your web pages so they can respond to your site’s visitors, you need JavaScript. JavaScript lets a web page react intelligently. With it, you can create smart web forms that let visitors know when they’ve forgotten to include necessary information. You can make elements appear, disappear, or move around a web page (see Figure 1-1). You can even update the contents of a web page with information retrieved from a web server—without having to load a new web page. In short, JavaScript lets you make your websites more engaging, effective, and useful. NoteActually, HTML5 does add some smarts to HTML—including basic form validation. But because not all browsers support these nifty additions (and because you can do a whole lot more with forms and JavaScript), you still need JavaScript to build the best, most user-friendly and interactive forms. You can learn more about HTML5 and web forms in Ben Henick’s HTML5 Forms (O’Reilly) and Gaurav Gupta’s Mastering HTML5 Forms (Packt Publishing). Figure 1-1. The Interactive Ear (http://www.amplifon.co.uk/interactive-ear/), an interactive guide to human hearing, lets visitors learn about and explore the different parts of the human ear. New information appears in response to mouse movements and clicks. With JavaScript, you can create your own interactive effects. Introducing ProgrammingFor a lot of people, the term “computer programming” conjures up visions of super-intelligent nerds hunched over keyboards, typing nearly unintelligible gibberish for hours on end. And, honestly, some programming is like that. Programming can seem like complex magic that’s well beyond the average mortal. But many programming concepts aren’t difficult to grasp, and as programming languages go, JavaScript is a good first language for someone new to programming. Still, JavaScript is more complex than either HTML or CSS, and programming often is a foreign world to web designers; so one goal of this book is to help you think more like a programmer. Throughout this book, you’ll learn fundamental programming concepts that apply whether you’re writing JavaScript, ActionScript, or even writing a desktop program using C++. More importantly, you’ll learn how to approach a programming task so you’ll know exactly what you want to do before you start adding JavaScript to a web page. Many web designers are immediately struck by the strange symbols and words used in JavaScript. An average JavaScript program is sprinkled with symbols ({ } [ ] ; , () !=) and full of unfamiliar words ( Every programming language has its own set of keywords and characters, and its own set of rules for putting those words and characters together—the language’s syntax. You’ll need to memorize the words and rules of the JavaScript language (or at least keep this book handy as a reference). When learning to speak a new language, you quickly realize that placing an accent on the wrong syllable can make a word unintelligible. Likewise, a simple typo or even a missing punctuation mark can prevent a JavaScript program from working, or trigger an error in a web browser. You’ll make plenty of mistakes as you start to learn to program—that’s just the nature of programming. At first, you’ll probably find JavaScript programming frustrating—you’ll spend a lot of your time tracking down errors you made when typing the script. Also, you might find some of the concepts related to programming a bit hard to follow at first. But don’t worry: If you’ve tried to learn JavaScript in the past and gave up because you thought it was too hard, this book will help you get past the hurdles that often trip up folks new to programming. (And if you do have programming experience, this book will teach you JavaScript’s idiosyncrasies and the unique concepts involved in programming for web browsers.) In addition, this book isn’t just about JavaScript—it’s also about jQuery, the world’s most popular JavaScript library. jQuery makes complex JavaScript programming easier…much easier. So with a little bit of JavaScript knowledge and the help of jQuery, you’ll be creating sophisticated, interactive websites in no time. What’s a Computer Program?When you add JavaScript to a web page, you’re writing a computer program. Granted, most JavaScript programs are much simpler than the programs you use to read email, retouch photographs, and build web pages. But even though JavaScript programs (also called scripts) are simpler and shorter, they share many of the same properties of more complicated programs. In a nutshell, any computer program is a series of steps that are completed in a designated order. Say you want to display a welcome message using the web-page visitor’s name: “Welcome, Bob!” There are several things you’d need to do to accomplish this task:
While you may never want to print a welcome message on a web page, this example demonstrates the fundamental process of programming: Determine what you want to do, then break that task down into individual steps. Every time you want to create a JavaScript program, you must go through the process of determining the steps needed to achieve your goal. Once you know the steps, you’ll translate your ideas into programming code—the words and characters that make the web browser behave how you want it to. How to Add JavaScript to a PageWeb browsers are built to understand HTML and CSS and convert those languages into a visual display on the screen. The part of the web browser that understands HTML and CSS is called the layout or rendering engine. But most browsers also have something called a JavaScript interpreter. That’s the part of the browser
that understands JavaScript and can execute the steps of a JavaScript program. The web browser is usually expecting HTML, so you must specifically tell the browser when JavaScript is coming by using the The Much of the time, you’ll add the
The If you’re using HTML5, life is even simpler. You can skip the type attribute entirely:
In fact, web browsers let you leave out the type attribute in HTML 4.01 and XHTML 1.0 files as well—the script will run the same; however, your page won’t validate correctly without the type attribute (see the box on Validating Web Pages for more on validation). This book uses HTML5 for the doctype, but the JavaScript code will be the same and work the same for HTML 4.01, and XHTML 1. You then add your JavaScript code between the opening and closing
You’ll find out what this JavaScript does in a moment. For now, turn your attention to the opening and closing However, it’s perfectly valid to put The You can (and often will) attach multiple external JavaScript files to a single web page. For example, you might have created one external JavaScript file that controls a drop-down navigation panel, and another that lets you add a nifty slideshow to a page of photos. On your photo gallery page, you’d want to have both JavaScript programs, so you’d attach both files. In addition, you can attach external JavaScript files and add a JavaScript program to the same page like this:
Figure 1-2. Nike.com’s website uses JavaScript extensively to create a compelling showcase for their products. The home page (top) includes a row of navigation buttons along the top—Men, Women, Kids, and so on—that, when moused over, reveal a panel of additional navigation options. For example, mousing over the Sports button (circled in bottom image) reveals a panel listing different sports that Nike makes products for. Just remember that you must use one set of opening and closing You can keep external JavaScript files anywhere inside your website’s root folder (or any subfolder inside the root). Many web developers create a special directory for external JavaScript files in the site’s root folder: common names are js (meaning JavaScript) or libs (meaning libraries). NoteSometimes the order in which you attach external JavaScript files matters. As you’ll see later in this book, sometimes scripts you write depend upon code that comes from an external file. That’s often the case when using JavaScript libraries (JavaScript code that simplifies complex programming tasks). You’ll see an example of a JavaScript library in action in the tutorial on Attaching an External JavaScript File. Your First JavaScript ProgramThe best way to learn JavaScript programming is by actually programming. Throughout this book, you’ll find hands-on tutorials that take you step by step through the process of creating JavaScript programs. To get started, you’ll need a text editor (see Software for JavaScript Programming for recommendations), a web browser, and the exercise files located at https://github.com/sawmac/js3e (see the following Note for complete instructions). NoteThe tutorials in this chapter require the example files from this book’s website, www.missingmanuals.com/cds/jsjq3emm. (The tutorial files are stored as a single Zip file.) In Windows, download the Zip file and double-click it to open the archive. Click the Extract All Files option, and then follow the instructions of the Extraction Wizard to unzip the files and place them on your computer. If you have trouble opening the Zip file, the free 7-Zip utility can help: www.7-zip.org. On a Mac, simply double-click the file to decompress it. After you’ve downloaded and decompressed the files, you should have a folder named MM_JAVASCRIPT3E on your computer, containing all of the tutorial files for this book. To get your feet wet and provide a gentle introduction to JavaScript, your first program will be very simple:
Figure 1-3. The JavaScript Alert box is a quick way to grab someone’s attention. It’s one of the simplest JavaScript commands to learn and use. NoteSome versions of Internet Explorer (IE) don’t like to run JavaScript programs in web pages that you open directly off your hard drive, for fear that the code might do something harmful. So when you try to preview the tutorial files for this book in Internet Explorer, you might see a message saying that IE has blocked the script. Click “Allow blocked content.” This annoying behavior only applies to web pages you preview from your computer, not to files you put up on a web server. To avoid hitting the “Allow blocked content” button over and over, preview pages in a different web browser, like Chrome or Firefox. Writing Text on a Web PageThe script in the previous section popped up a dialog box in the middle of your monitor. What if you want to print a message directly onto a web page using JavaScript? There are many ways to do so, and you’ll learn some sophisticated techniques later in this book. However, you can achieve this simple goal with a built-in JavaScript command, and that’s what you’ll do in your second script:
NoteThe tutorial files you downloaded also include the completed version of each tutorial. If you can’t seem to get your JavaScript working, compare your work with the file that begins with complete_ in the same folder as the tutorial file. For example, the file complete_hello2.html contains a working version of the script you added to file hello2.html. The two scripts you just created may leave you feeling a little underwhelmed with JavaScript…or this book. Don’t worry—this is only the beginning. It’s important to start out with a full understanding of the basics. You’ll be doing some very useful and complicated things using JavaScript in just a few chapters. In fact, in the remainder of this chapter you’ll get a taste of some of the advanced features you’ll be able to add to your web pages after you’ve worked your way through the first two parts of this book. Attaching an External JavaScript FileAs discussed on External JavaScript Files, you’ll usually put JavaScript code in a separate file if you want to use the same scripts on more than one web page. You then instruct your web pages to load that file and use the JavaScript inside it. External JavaScript files also come in handy when you’re using someone else’s JavaScript code. In particular, there are collections of JavaScript code called libraries, which provide useful JavaScript programming. Usually, these libraries make it easy to do something that’s normally quite difficult. You’ll learn more about JavaScript libraries on About JavaScript Libraries, and, in particular, the JavaScript library this book (and much of the Web) uses—jQuery. Figure 1-4. Wow. This script may not be something to “document.write” home about—ha, ha, JavaScript humor—but it does demonstrate that you can use JavaScript to add content to a web page, a trick that comes in handy when you want to display messages (like “Welcome back to the site, Dave”) after a web page has downloaded. But for now, you’ll get experience attaching an external JavaScript file to a page, and writing a short program that does something cool:
|