Getting started with Javascript E-Book

Rémy Lentzner

• Herausgeber: Remylent
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Französisch
• Veröffentlichungsjahr: 2021

Seitenzahl: 76

Beschreibung

In this book you will learn how to write the JavaScript code. This language is used to control the web pages elements that are designed with HTML tags. You will discover the objects structure and their interaction inside the DOM (Document Object Model) that is represented by a tag tree. You will practice variables, conditional expressions and loops thanks to several workshops. You will study the methods that handle texts, numbers and dates. JavaScript enables you to manage events that occur in the web page, such as a mouse click or an exit from a field. The duo JavaScript/HTML has many assets that will help you to control your web pages better.

À PROPOS DE L'AUTEUR

Remy Lentzner has been a computer trainer since 1985. Specialized in mastering office automation tools, he supports companies in the professional training of their employees. Self-taught, he has fifteen computer books to his credit.

Leseprobe

REMY LENTZNER

Getting started with JavaScript

French original title : Bien débuter avec JavaScript

EDITIONS REMYLENT, Paris, 1ère édition, 2021

R.C.S. 399 397 892 Paris

25 rue de la Tour d’Auvergne - 75009 Paris

[email protected]

www.REMYLENT.FR

ISBN EPUB : 9782490275427

The Intellectual Property Code prohibits copies or reproductions intended for collective use. Any representation or reproduction in whole or in part by any means whatsoever, without the consent of the author or his successors in title or cause, is unlawful and constitutes an infringement, pursuant to articles L.335-2 and following of Intellectual Property Code.

This book is dedicated to Anna and Hélène.

I could not have written it without their support, advice, encouragements and proofreading.

Graphic illlustration : Anna Lentzner

In the same collection

Improve your PivotTables with Excel

Improve your skills with Google Sheets

Programming macros with Google Sheets

Getting started with HTML

Welcome to studying JavaScript language. This book is intended for all those who wish to learn it in order to organize and control the Internet page elements better. JavaScript fits into the organization of HTML tags, and you should know them before programming any functions.

You will discover how the language is structured through its organization : keywords, variables and control structures such as loops or conditional expressions. Because an Internet user can act on any part of an Internet page, the JavaScript language is event-driven, that is to say it "listens" to what happens, thanks to very specific commands you program in the code. Do not hesitate to reproduce the book examples to take up the syntax of the language.

This book is structured in 4 chapters.

Chapter 1 recalls some HTML code examples and shows that JavaScript is closely linked to it. You will learn how to write code inside simple functions that trigger at a specific time. You will study the DOM objects (Document Object Model) and its specificities.

Chapter 2 shows how to control the flow of the code using control structures. You will learn how to manipulate conditional expressions and loops.

Chapter 3 details the events management, such as mouse click or input area entry (or exit). You will appreciate the AddEventListener handler which listens to what happens within a web page. The events bubbling will show you how to avoid redundancies in the code.

Chapter 4 shows the most common methods that manipulate texts, numbers and dates.

I hope this book will give you a better understanding of the JavaScript language structure.

If you have any comments about this book or any questions, please do not hesitate to contact me at the following address : [email protected]. I will be sure to answer you.

Enjoy your reading.

The author

Table of contents

Chapter 1 Fundamentals

1.1 The efficient JavaScript/HTML duo

1.1.1 The Brackets editor helps to code

1.1.2 A web page without JavaScript code

1.1.3 An example with JavaScript coding

1.2 The DOM or the tags tree

1.2.1 The querySelector() and getElementById() methods

1.2.2 Creating the web page directly in JavaScript

1.2.3 Comments

1.3 Where can I find information about JavaScript?

1.4 The variables

1.4.1 Declaration and assignment

1.4.2 Scope of variables

1.4.3 Scripts without function

1.5 The functions

1.5.1 Creating a function

1.5.2 Calling a function

1.5.3 Passing values into a function

1.5.4 Passing variables into a function

1.5.5 Anonymous functions

Chapter 2 Control structures

2.1 The conditions

2.1.1 if

2.1.2 if ... else

2.1.3 if ... elseif ... else

2.1.4 switch

2.2 Comparison operators

2.3 Loops

2.3.1 while

2.3.2 do...while

2.3.3 for

2.3.4 for ... of

Chapter 3 Events

3.1 Events caused by the Internet user

3.1.1 Keyboard events

Capturing a key with keypress

Coloring when entering text

Ctrl, Alt, Shift and A with a keydown event

Pressing several keys at the same time

3.1.2 Mouse events

Displaying two images according to the left click

Mouse position on a map of Europe

An image cut into several parts

3.2 Events in a form

3.2.1 About the form element structure

3.2.2 Tags that create elements

3.2.3 The <input> tag

3.2.4 Workshop : a form to request information

3.3 AddEventListener and bubbling

3.3.1 Listening to a click on 3 images

3.3.2 Checking empty fields in a form

3.3.3 The boiling of events

How can this bubbling help us ?

An example without bubbling

Bubbling avoids redundancy

Chapter 4 Text, number and date

4.1 Manipulating strings of characters

4.1.1 Concatenating string

4.1.2 Concatenating special characters

4.1.3 The length property

4.1.4 The confirm dialog box

4.1.5 Text manipulation methods

4.2 Number manipulation

4.2.1 Accuracy and rounding

4.2.2 The very important parseFloat method

4.2.3 The Math objects

4.3 Handling dates

4.3.1 Calculating your age

4.3.2 Methods that affect dates

Chapter 1 Fundamentals

This chapter recalls some HTML code examples and shows that JavaScript is closely linked to it, within the <html> and </html> tags. You will study how to write code inside simple functions that are triggered at a given moment. An HTML page is structured according to a document object pattern called DOM. The JavaScript language is object-oriented and is able to manage all the objects inside the Internet page, thanks to several specific expressions, such as methods and properties. JavaScript can also control the flow of the code using variables.

1.1 The efficient JavaScript/HTML duo

JavaScript is a programming language created in the 1990s to efficiently manipulate the information stored in a web page. When you want to create an Internet page, you use HTML (Hypertext Markup Language), that is a markup language designed to display data with any browsers. Under any circumstances, HTML cannot perform calculations or other complex operations. JavaScript will take care of this since it will be able to execute commands. When developing applications for the Internet, you work with HTML that helps you to create the structure of the web pages. The tags enable you to put the objects in place. For instance, you can create titles, text, images, links, input fields, headers, footers, logos, menus and many others.

At the same time, CSS (Cascading Styles Sheets) is used to organize the data presentation. For example, you can set a page logo, right-aligned and wrapped with a border. Likewise, a specific font and a text size can be specified.

The job of CSS language is essentially to manage the presentation.

Finally, you will use JavaScript to create functions that perform operations above the objects. For example, you can make a calculation from different dates, find a result from numerical values, or manage web user actions when using the mouse or the keyboard.

There is also the PHP language that is used to manage data in a client-server context. This language is preferred by programmers when information is sent to a server and when an answer is needed. It is also possible to use some derivative JavaScript language, that handles these client-server operations, but this kind of programming is complex and beyond the scope of this book.

The HTML-CSS-JAVASCRIPT trio is often referred to as standard web language.

If you don't know HTML-CSS at all, you should start by learning them. If you want to practise, you can purchase the book Getting started with HTML at www.remylent.fr.

Creating Web pages is always an integration between HTML tags, CSS presentation commands and JavaScript functions.

1.1.1 The Brackets editor helps to code

With any text editor, you can write a web page that contains the HTML/JavaScript code. You type the code and you save the file, first with an .html extension, then with a .txt extension. Afterwards, you open your .html file with your browser. You will see the result immediately. To modify the code, reopen the .txt file. This solution is not practical at all because it forces you to open the .txt file to make a change, then you have to save the file again with .html and .txt extension.

On other way (among many others) is to use the free Brackets Editor that I use for my program tests. This tool allows you to write the code, then you will see the result immediately, via the Live Preview option. If you change the code, simply refresh the web page in the browser to see the result. You can download Brackets for Mac at https://brackets.fr.uptodown.com/mac, but you can also download it for Windows or another operating system.

The software Brackets always shows the result in the default browser. If you want to use another browser, simply change the default one.

Not all browsers display the HTML/CSS/JAVASCRIPT code in the same way. And that is why we have difficulties to create web pages that work correctly on many software platforms as computers, tablets, mobiles, connected objects, etc). If you want to develop strong applications, your code will have to take these differences into account.

1.1.2 A web page without JavaScript code

Figure 1.1 shows an example of an HTML page that displays a list of choices. A menu offers to click on four links that call up another specific page.

Figure 1.1 : A menu in a HTML page

The code below shows how to make this page. HTML instructions are tags, i.e. expressions wrapped with < and > signs.

<html>

<! beginning of the header >

<head>

<! beginning of style definition>