Fluent Essays

Follow the attached file step by step to complete a mini project. the result of the project should be 4 file, HW0A, HW0B, HW0C, and HW0D. firstapp.pdf Unformatted Attachment Preview Often, the best way to learn is to do: so we’re going to start off by creating a simple application. The point of this chapter is not to explain everything that’s going on: there’s a lot that’s going to be unfamiliar and confusing, and my advice to you is to relax and not get caught up in trying to understand everything right now. The point of this chapter is to get you excited. Just enjoy the ride; by the time you finish this book, everything in this chapter will make perfect sense to you. TIP If you don’t have much programming experience, one of the things that is going to cause you a lot of frustration at first is how literal computers are. Our human minds can deal with confusing input very easily, but computers are terrible at this. If I make a grammatical error, it may change your opinion about my writing ability, but you will probably still understand me. JavaScript—like all programming languages— has no such facility to deal with confusing input. Capitalization, spelling, and the order of words and punctuation are crucial. If you’re experiencing problems, make sure you’ve copied everything correctly: you haven’t substituted semicolons for colons or commas for periods, you haven’t mixed single quotation and double quotation marks, and you’ve capitalized all of your code correctly. Once you’ve had some experience, you’ll learn where you can “do things your way,” and where you have to be perfectly literal, but for now, you will experience less frustration by entering the examples exactly as they’re written. Historically, programming books have started out with an example called “Hello, World” that simply prints the phrase “hello world” to your terminal. It may interest you to know that this tradition was started in 1972 by Brian Kernighan, a computer scientist working at Bell Labs. It was first seen in print in 1978 in The C Programming Language, by Brian Kernighan and Dennis Ritchie. To this day, The C Programming Language is widely considered to be one of the best and most influential programming language books ever written, and I have taken much inspiration from that work in writing this book. While “Hello, World” may seem dated to an increasingly sophisticated generation of programming students, the implicit meaning behind that simple phrase is as potent today as it was in 1978: they are the first words uttered by something that you have breathed life into. It is proof that you are Prometheus, stealing fire from the gods; a rabbi scratching the true name of God into a clay golem; Doctor Frankenstein breathing life into his creation. 1 It is this sense of creation, of genesis, that first drew me to programming. Perhaps one day, some programmer —maybe you—will give life to the first artificially sentient being. And perhaps its first words will be “hello world.” In this chapter, we will balance the tradition that Brian Kernighan started 44 years ago with the sophistication available to programmers today. We will see “hello world” on our screen, but it will be a far cry from the blocky words etched in glowing phosphor you would have enjoyed in 1972. In this book, we will cover the use of JavaScript in all its current incarnations (server-side, scripting, desktop, browser-based, and more), but for historical and practical reasons, we’re going to start with a browser-based program. One of the reasons we’re starting with a browser-based example is that it gives us easy access to graphics libraries. Humans are inherently visual creatures, and being able to relate programming concepts to visual elements is a powerful learning tool. We will spend a lot of time in this book staring at lines of text, but let’s start out with something a little more visually interesting. I’ve also chosen this example because it organically introduces some very important concepts, such as Instructor Note for DGM 6108 This course will only cover browser-based, client-side scripting. If you are interested in other forms of JavaScript coding, you might want to read more of the book from which we have adapted this chapter. However, please note that this book is a little out-of-date (despite being published in late 2016!), since it assumes ES6 is not yet the standard version of JavaScript supported by every browser. Chapter 2 of this book goes into great detail about setting up a development environment for working with ES6 (the version of JavaScript that you will learn in this class), but thanks to developments over the past three years, you need nothing more than a text editor and a modern web browser to do your development work for this course! event-driven programming, which will give you a leg up on later chapters. Just as a carpenter would have trouble building a desk without a saw, we can’t write software without some tools. Fortunately, the tools we need in this chapter are minimal: a browser and a text editor. I am happy to report that, as I write this, there is not one browser on the market that is not suited to the task at hand. Even Internet Explorer—which has long been a thorn in the side of programmers—has cleaned up its act, and is now on par with Chrome, Firefox, Safari, and Opera. That said, my browser of choice is Firefox, and in this text, I will discuss Firefox features that will help you in your programming journey. Other browsers also have these features, but I will describe them as they are implemented in Firefox, so the path of least resistance while you go through this book will be to use Firefox. You will need a text editor to actually write your code. The choice of text editors can be a very contentious—almost religious—debate. Broadly speaking, text editors can be categorized as text-mode editors or windowed editors. The two most popular text-mode editors are vi/vim and Emacs. One big advantage to text-mode editors is that, in addition to using them on your computer, you can use them over SSH—meaning you can remotely connect to a computer and edit your files in a familiar editor. Windowed editors can feel more modern, and add some helpful (and more familiar) user interface elements. At the end of the day, however, you are editing text only, so a windowed editor doesn’t offer an inherent advantage over a text-mode editor. Popular windowed editors are Atom, Sublime Text, Coda, Visual Studio, Notepad++, TextPad, and Xcode. If you are already familiar with one of these editors, there is probably no reason to switch. If you are using Notepad on Windows, however, I highly recommend upgrading to a more sophisticated editor (Notepad++ is an easy and free choice for Windows users). Describing all the features of your editor is beyond the scope of this book, but there are a few features that you will want to learn how to use: Syntax highlighting Syntax highlighting uses color to distinguish syntactic elements in your program. For example, literals might be one color and variables another (you will learn what these terms mean soon!). This feature can make it easier to spot problems in your code. Most modern text editors will have syntax highlighting enabled by default; if your code isn’t multicolored, consult your editor documentation to learn how to enable it. Bracket matching Most programming languages make heavy use of parentheses, curly braces, and square brackets (collectively referred to as “brackets”). Sometimes, the contents of these brackets span many lines, or even more than one screen, and you’ll have brackets within brackets, often of different types. It’s critical that brackets match up, or “balance”; if they don’t, your program won’t work correctly. Bracket matching provides visual cues about where brackets begin and end, and can help you spot problems with mismatched brackets. Bracket matching is handled differently in different editors, ranging from a very subtle cue to a very obvious one. Unmatched brackets are a common source of frustration for beginners, so I strongly recommend that you learn how to use your editor’s bracket-matching feature. Code folding Somewhat related to bracket matching is code folding. Code folding refers to the ability to temporarily hide code that’s not relevant to what you’re doing at the moment, allowing you to focus. The term comes from the idea of folding Instructor Note for DGM 6108 For this course, please always use Brackets or Visual Studio Code as your code editor and always use Chrome as your web browser. There are still variations between browsers that cause some things not to work consistently, so for this class we use Chrome as our reference browser so that we all will encounter the same bugs. The authors choice of browser (Firefox) is likely because it is the most forgiving in terms of problems that a beginning might encounter, but we want you to finish this course prepared to handle any issues that you may encounter in future web development efforts -- so please use Chrome! If you do not currently have Google Chrome and Brackets installed on your computer, please download and install them now from http://www.google.com/ chrome and http://brackets.io before continuing with this lesson! a piece of paper over on itself to hide unimportant details. Like bracket matching, code folding is handled differently by different editors. Autocompletion Autocompletion (also called word completion or IntelliSense 2 ) is a conve- nience feature that attempts to guess what you are typing before you finish typing it. It has two purposes. The first is to save typing time. Instead of typing, for example, encodeURIComponent, you can simply type enc, and then select encodeURIComponent from a list. The second purpose is called discoverability. For example, if you type enc because you want to use encodeURIComponent, you’ll find (or “discover”) that there’s also a function called encodeURI. Depending on the editor, you may even see some documentation to distinguish the two choices. Autocompletion is more difficult to implement in JavaScript than it is in many other languages because it’s a loosely typed language, and because of its scoping rules (which you will learn about later). If autocompletion is an important feature to you, you may have to shop around to find an editor that meets your needs: this is an area in which some editors definitely stand out from the pack. Other editors (vim, for example) offer very powerful autocompletion, but not without some extra configuration. JavaScript—like most programming languages—has a syntax for making comments in code. Comments are completely ignored by JavaScript; they are meant for you or your fellow programmers. They allow you to add natural language explanations of what’s going on when it’s not clear. In this book, we’ll be liberally using comments in code samples to explain what’s happening. In JavaScript, there are two kinds of comments: inline comments and block comments. An inline comment starts with two forward slashes (//) and extends to the end of the line. A block comment starts with a forward slash and an asterisk (/*) and ends with an asterisk and a forward slash (*/), and can span multiple lines. Here’s an example that illustrates both types of comments: console.log(echo); // prints echo to the console /* In the previous line, everything up to the double forward slas is JavaScript code, and must be valid syntax. The double forward slashes start a comment, and will be ignored by JavaSc This text is in a block comment, and will also be ignored by JavaScript. Weve chosen to indent the comments of this bl for readability, but thats not necessary. */ /*Look, Ma, no indentation!*/ Cascading Style Sheets (CSS), which we’ll see shortly, also use JavaScript syntax for block comments (inline comments are not supported in CSS). HTML (like CSS) doesn’t have inline comments, and its block comments are different than JavaScript. They are surrounded by the unwieldy : HTML and CSS Example We’re going to start by creating three files: an HTML file, a CSS file, and a JavaScript source file. We could do everything in the HTML file (JavaScript and CSS can be embedded in HTML), but there are certain advantages to keeping them separate. If you’re new to programming, I strongly recommend that you follow along with these instructions step by step: we’re going to take a very exploratory, incremental approach in this chapter, which will facilitate your learning process. It may seem like we’re doing a lot of work to accomplish something fairly simple, and there’s some truth in that. I certainly could have crafted an example that does the same thing with many fewer steps, but by doing so, I would be teaching you bad habits. The extra steps you’ll see here are ones you’ll see over and over again, and while it may seem overcomplicated now, you can at least reassure yourself that you’re learning to do things the right way. NOTE For this exercise, you’ll want to make sure the files you create are in the same directory or folder. I recommend that you create a new directory or folder for this example so it doesn’t get lost among your other files. Let’s start with the JavaScript file. Using a text editor, create a file called main.js. For now, let’s just put the following lines in this file: (function() { use strict // your code will start here... console.log(main.js loaded); // ...and end here }()) In this chapter, you’ll put all of your code in between the two comments. The function and use strict are there to help prevent any conflicts, and you’ll learn more about how that works in Chapter 7. Instructor Note for DGM 6108 For this class, please make a folder (directory) called HW0A This will be the standard format used for the assignments that you do not upload to your web space. Please be sure to capitalize your first and last name and to use the same capitalization shown above for HW0A. In programming, everything is case-sensitive, meaning that HW and hw would be treated as different entities! Note that the character between each word of the directory name is an underscore, not a space or a dash. In programming, whitespace is special and can only be used in certain places, and we will be very strict about this in this course. Have you ever noticed a URL that contains a bunch of weird \%20 where you would expect spaces? That is why you do not put spaces in directory names! The reason for not using dashes (-) is somewhat more obscure, but its also important, trust us! Finally, please note that the 0 in HW0A is the number zero. Instructor Note for DGM 6108 Be very careful about typing in the code exactly as you see it here. Parentheses, curly braces, single quotes, and double quotes each have very different meanings in JavaScript. If you use the wrong ones, your program will not work correctly! Brackets can help you to see where you went wrong by showing imbalanced parentheses, quotes, etc. (i.e., where you have not properly created a pair of parentheses or other punctuation, or where you have ended one pair so that it overlaps another rather than being nested properly. Then create the CSS file, main.css. We don’t actually have anything to put in here yet, so we’ll just include a comment so we don’t have an empty file: /* Styles go here. */ Then create a file called index.html: My first application! Welcome to Learning JavaScript, 3rd Edition. While this book isn’t about HTML or web application development, many of you are learning JavaScript for that purpose, so we will point out some aspects of HTML as they relate to JavaScript development. An HTML document consists of two main parts: the head and the body. The head contains information that is not directly displayed in your browser (though it can affect what’s displayed in your browser). The body contains the contents of your page that will be rendered in your browser. It’s important to understand that elements in the head will never be shown in the browser, whereas elements in the body usually are (certain types of elements, like , which is what links the JavaScript file into your document. It may seem odd to you that one goes in the head and the other goes at the end of the body. While we could have put the