Javascript

Javascript Programming For Absolute Beginners: Ultimate Guide To Javascript Coding, Javascript Programs And Javascript Language

William Sullivan

• Editorial: PublishDrive
• ISBN:
  9781978421868
• Categoría: Informatique
• Categoría: Algorithmes de programmation

??? Javascript: Javascript Programming For Absolute Beginners???

The best starter guide for javascript! The fundamentals of javascript are often missed, however, this book's primary focus and emphasis is learning the essentials and to build from the ground up.

What You'lll Learn

• The history of JavaScript and its uses
• Setting Up Your Environment
• The Vital Basics of HTML and CSS
• Statements, Comments & Variables
• How to properly use jQuery
• String Operators
• JavaScript Array Methods
• Loops and Iteration
• How To Use Functions
• And much, much more!
• Within this book you will learn various mechanisms of javascript programming: variables, conditional statements, and why learning these core principles lead to success. Once you gain knowledge of the fundamental building blocks of javascript you will gain confidence to tackle more complex topics down the road. Programming books can easily retail for 100s of dollars, why not start with an expert you can trust and for an affordable price?
  The immense value of this book cannot be understated, and this is a once in a life time opportunity for you to take advantage of and invest in yourself by empowering yourself with the right tools and knowledge for success. What are you waiting for? Includes: 21 practice questions! Note* For best visual experience of diagrams it is highly recommend you purchases the paperback version for best image quality. ??? Grab your copy now!???

Section 1: Setting Up Your Environment

Before you can even begin to write any JavaScript, you are going to need a couple of things – a text editor and a decent web browser that contains tools for web development. For this, we are going to use the Chrome browser and look at a text editor called Brackets.

Chrome

One of the most important things about learning JavaScript is learning the console and that includes how to set it up. Chrome has its own built-in console and this is perfect for inputting your scripts and code – even better, it’s free. This is how you get it:

1. Open the web browser you are using and type in www.google.com/Chrome
2. Download the Chrome browser. From here, it is your choice as to whether you keep Chrome as your primary browser or you just use it for doing your JavaScript. Follow all the on-screen instructions to download and install Chrome browser
3. Open the Chrome browser and look for an Options circle in the top right corner – click it and you will see some more options
4. Select More Tools and then Developer Tools
5. Now select Console and the console pad will load. You should see the symbol > on it – this is your command prompt and it is where all your code will be input.

Now you can begin to use the console in Chrome so take the time out to explore it; learn what it is all about and how to use it.

Shortcut

There is a shortcut to open your console:

●  Download and install Chrome

●  In the address bar, type about: blank and a blank page will load

Getting Started

Now that you have set up your console, you can type console.log() at your command prompt – this will log you in.  Now is the time to begin exploring and learn what JavaScript is all about – as I mentioned earlier, you will find lots of practical examples to help you out through the book so use them and learn. A couple of helpful hints – you can click the button that says Preserve Log to preserve anything that you input and if you want to save your work, right-click anywhere in the console and choose Save As.

Now let’s look at text editors. You can choose any that you want but I would recommend Brackets

Brackets

Brackets is open source and is specifically designed for web development. It is built using JavaScript making it the very best editor, providing plenty of useful tools and help for you to learn how to code much easier and much more effectively.

1. Open your web browser and type in http://brackets.io/
2. Download the version that corresponds to your operating system – Linux, Windows or Mac

When you open Brackets for the first time, you will be presented with a project named “Getting Started.”  Onscreen instructions will show you how to use the features in Brackets

●  Opening a folder is simple – click File>Open Folder. You will see this in the file tree that is to the left of your screen. This is your projects folder and it has some settings related to it. To move between projects, simply click on the root folder name in the tree or you can drag the relevant folder form your operating system into Brackets and it will open.

●  Instead of showing your opened files in tabs, Brackets shows them in a list titles “Working Files” and you will find this above the tree. Clicking on a file in that tree will allow you to view the file but it won’t get put into the Working Files List. This way, you can look through the files without having to open each one. Any changes that are made to a file will be put automatically into the Working Files list and to add a file to the list without having to edit it first, you simply double-click the name.

To begin with, a single editor will be on show in Brackets view but you can split it so you see two editors. These can be horizontal or vertical and to choose, click View and then on Horizontal Split or Vertical Split. The main view will now show as two and you can view two files at the same time. You will also get another Working Files list so you can see what is open in each pane. You can also drag files between the two panes.

Brackets is very clever in that, whatever view layout you had for each project, it will remember it. Opening a project will show you which layout was there when you saved and closed the project. To close split view and go back to a single pane, just click on View and then on No Split. You won’t shut down any open files by doing this; the separate lists of Working Files will now be merged into one and all changes will be stored until you chose to discard or to save them.

Have a play, learn your way around Brackets and then open a new console, ready to start coding.

Section 2: The Browser

Your First JavaScript

Open your text editor and input the following:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>-A First Script</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Here we have the beginnings of your webpage – the HEAD and BODY tags and the TITLE area. Save this as first_script.html. A word of note – if you use Notepad as your Editor, change Save As to All File Types otherwise you will have a text file and not an HTML page.

Next, we are going to add some tags so, in-between the BODY tags, type in:

<SCRIPT LANGUAGE = "Javascript">

alert("Hello World")

</SCRIPT>

You always add a program script between the opening and closing <SCRIPT> tags. One of the SCRIPT tag attributes is called LANGUAGE and this is what tells your browser the name of the script language that is in use – in our case, this is JavaScript. This is added after the = sign – note that the word JavaScript has been enclosed in double quotation marks. This isn’t absolutely necessary, you could even skip the LANGUAGE attribute altogether and have this:

<SCRIPT>

alert("Hello World")

</SCRIPT>

Do note that if you omit the forward slash at the start of the closing SCRIPT tag your code is not going to work. As you can with all HTML tags, your SCRIPT tags may be written in lowercase, if it is easier for you, like this:

<script>

alert("Hello World")

</script>

Another note – while SCRIPT tags do not follow case sensitivity, JavaScript does. The code we have written is one line and all it is doing is displaying a popup dialog box that shows the words, “Hello, World”. Have a go at it. Make sure you save your works and then use Windows Explorer or Windows or Finder on the Mac to go to where the HTML file was saved. Double-click the file to run it in the browser

Change the alert line to read:

Alert("Hello World")

Note that alert is now started with a capitalized ‘A’. Save and load the page in the browser again and you will notice that the box now no longer shows up. Change back to a lowercase ‘a’, save, reload and the box will reappear.

These Alert boxes display information to website users. Between the round brackets, you input what text you want the user to see and make sure it is in between a set of quote marks – use single or double, not a combination.

Confirm and Prompt

You can also have Confirm and Prompt boxes – the Confirm box will give you an OK and a Cancel button and these are generally used with IF statements to determine which button is clicked. More about IF statement later but, t...