35,99 €
Mehr erfahren.
- Herausgeber: John Wiley & Sons
- Kategorie: Wissenschaft und neue Technologien
- Serie: Sybex Study Guide
- Sprache: Englisch
Pass the LPI Web Development Essentials exam and set yourself up for success at a new web development job
In LPI Linux Professional Institute Web Development Essentials Study Guide: Exam 030-100, accomplished IT educator and systems engineer, Audrey O’Shea delivers an easy-to-follow and hands-on roadmap to passing the LPI Web Development Essentials exam and hitting the ground running at a new job as a web developer. In the book, you’ll explore the software development skills, web technologies, HTML, CSS, Node.js, and JavaScript info you need to implement modern applications and solutions in a web environment.
You will find:
- Introductory coverage of SQL, HTML, JavaScript, CSS, and MongoDB
- A heavy emphasis on real-world job skills, as well as the technologies used every day by web developers in the field
- Complimentary access to the Sybex interactive online learning environment and test bank, complete with hundreds of practice questions, electronic flashcards, and a searchable glossary of important terms
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 621
Veröffentlichungsjahr: 2023
Ähnliche
Table of Contents
Cover
Table of Contents
Title Page
Copyright
Dedication
Acknowledgments
About the Author
About the Technical Editor
Introduction
What Does This Book Cover?
Who Should Read This Book
Exam Tips
Interactive Online Learning Environment and Test Bank
Additional Resources
LPI Web Development Essentials Exam Objectives
Objective Map
Assessment Test
Answers to Assessment Test
Chapter 1: Web Development Basics
Developer Types
Creating Software
Maintaining Software
Summary
Exam Essentials
Review Questions
Chapter 2: Client/Server Computing
Client‐Side
Server‐Side
Summary
Exam Essentials
Review Questions
Chapter 3: Database Management Systems
Database Structures and Languages
Relational Database Concepts
Content Maintenance and Delivery
Summary
Exam Essentials
Review Questions
Chapter 4: Client/Server Communication
HTTP
HTTP Client‐Side
HTTP Server‐Side
WebSocket API
Caches and Cookies
HTTP Security Concerns
Summary
Exam Essentials
Review Questions
Chapter 5: HTML Introduction
What Is HTML?
The HTML Skeleton
HTML Syntax
HTML Head
Summary
Exam Essentials
Review Questions
Chapter 6: Content Markup
The Basics
Block and Inline Elements
Hierarchical Structure
Lists
Styles
Semantic and Non‐Semantic Elements
Summary
Exam Essentials
Review Questions
Chapter 7: References and Embedded Resources
Page Anchors
External Resource Links
Using Images
The
<iframe>
Tag
Summary
Exam Essentials
Review Questions
Chapter 8: Creating HTML Forms
Anatomy of an Input Form
Commonly Used Attributes
Button Types
Adding Functionality
Summary
Exam Essentials
Review Questions
Chapter 9: Introducing CSS
Applying Styles to HTML
CSS Accessibility Features
Summary
Exam Essentials
Review Questions
Chapter 10: Applying CSS Styles
Other Selectors
CSS Inheritance
CSS Pseudo‐Classes
CSS Order of Precedence
Summary
Exam Essentials
Review Questions
Chapter 11: CSS Styling Fundamentals
Units of Measure
Common Properties
Summary
Exam Essentials
Review Questions
Chapter 12: CSS Layout and Box Model
The CSS Box Model
CSS Website Layout
Summary
Exam Essentials
Review Questions
Chapter 13: JavaScript Essentials
JavaScript Statements and Syntax
Adding Comments
Inserting JavaScript into HTML
JavaScript as an External File
The JavaScript Console
Summary
Exam Essentials
Review Questions
Chapter 14: JavaScript Data
Variables, Constants, and Scope
Objects and Methods
Data Types
Summary
Exam Essentials
Review Questions
Chapter 15: Functions and Control Structures
Functions
Conditional Statements
Summary
Exam Essentials
Review Questions
Chapter 16: The DOM
DOM Structure
DOM Methods and Properties
Changing CSS Styling Using the DOM
DOM Events
Summary
Exam Essentials
Review Questions
Chapter 17: NodeJS Basics
What Is Node.js?
Installing Node.js
Installing a Node.js Module
Running a Node.js App
Summary
Exam Essentials
Review Questions
Chapter 18: NodeJS Express
Node.js vs. Node.js Express
Installing Express
Routing and Serving Files
User Input and Validation
Templates
Security Concerns
Summary
Exam Essentials
Review Questions
Chapter 19: Manipulating SQLite with NodeJS
Installing the SQLite Module
Creating a SQLite Database
Opening and Closing the Database
Managing SQLite Data with NodeJS
Security Concerns
Summary
Exam Essentials
Review Questions
Appendix: Answers to Review Questions
Chapter 1: Web Development Basics
Chapter 2: Client/Server Computing
Chapter 3: Database Management Systems
Chapter 4: Client/Server Communication
Chapter 5: HTML Introduction
Chapter 6: Content Markup
Chapter 7: References and Embedded Resources
Chapter 8: Creating HTML Forms
Chapter 9: Introducing CSS
Chapter 10: Applying CSS Styles
Chapter 11: CSS Styling Fundamentals
Chapter 12: CSS Layout and Box Model
Chapter 13: JavaScript Essentials
Chapter 14: JavaScript Data
Chapter 15: Functions and Control Structures
Chapter 16: The DOM
Chapter 17: NodeJS Basics
Chapter 18: NodeJS Express
Chapter 19: Manipulating SQLite with NodeJS
Index
End User License Agreement
List of Tables
Chapter 11
TABLE 11.1 Absolute units
TABLE 11.2 Common relative measurements
TABLE 11.3 Color values
TABLE 11.4 Text properties
Chapter 14
TABLE 14.1 Summary of scope types by keyword
TABLE 14.2 Primitive data types
TABLE 14.3 Arithmetic operators and their purpose
TABLE 14.4 Assignment operators and what they do
Chapter 15
TABLE 15.1 Comparison operators
Chapter 18
TABLE 18.1 EJS tag options.
Chapter 19
TABLE 19.1 Using LIKE and wildcards.
List of Illustrations
Chapter 1
FIGURE 1.1 Source code example
FIGURE 1.2 Adding a library
FIGURE 1.3 Simple function call
Chapter 2
FIGURE 2.1 Path of a website request
FIGURE 2.2 Edge and Firefox browsers
FIGURE 2.3 Client application on a desktop
Chapter 3
FIGURE 3.1 Flat‐file database
FIGURE 3.2 Relational database
FIGURE 3.3 One‐to‐many relationship
FIGURE 3.4 Input form example
Chapter 4
FIGURE 4.1 Web page
GET
Request
FIGURE 4.2 Web page
POST
request
FIGURE 4.3 Additional
POST
header
FIGURE 4.4 Header status codes
Chapter 5
FIGURE 5.1 The HTML skeleton
FIGURE 5.2 The
<title>
and
</title>
tags
FIGURE 5.3 HTML attributes
FIGURE 5.4 HTML comments
FIGURE 5.5 HTML skeleton file
FIGURE 5.6 HTML practice file
Chapter 6
FIGURE 6.1 Parent and child elements
FIGURE 6.2 Block elements
FIGURE 6.3 Division and preformatted elements
FIGURE 6.4 Inline elements for text
FIGURE 6.5 Unordered list
FIGURE 6.6 Ordered list with nested items
FIGURE 6.7 Description list
FIGURE 6.8 Exercise 6.1 Browser output.
FIGURE 6.9 Exercise 6.1 Hierarchy diagram.
FIGURE 6.10 Exercise 6.2 Browser output.
FIGURE 6.11 Exercise 6.3 Browser output.
Chapter 7
FIGURE 7.1 Navigation bar
FIGURE 7.2 A broken link
FIGURE 7.3 Relative links
FIGURE 7.4 Inline images
FIGURE 7.5 Background image
FIGURE 7.6 Clickable image with marked points
FIGURE 7.7 An iframe in a page
FIGURE 7.8 Text with image behind.
Chapter 8
FIGURE 8.1 A simple input form
FIGURE 8.2 Date options
FIGURE 8.3 A required email
FIGURE 8.4 Passwords and numbers
FIGURE 8.5 Files, phones, and hidden elements
FIGURE 8.6 Buttons
FIGURE 8.7 Radio buttons and check boxes
FIGURE 8.8 A review box
FIGURE 8.9 The form
Chapter 9
FIGURE 9.1 A CSS rule
FIGURE 9.2 Using the
<style>
tag
FIGURE 9.3 Linking to a CSS file
Chapter 10
FIGURE 10.1 Using the
id
attribute to apply a style
FIGURE 10.2 Using classes
Chapter 11
FIGURE 11.1 Comparing absolute measurements
FIGURE 11.2 Opacity
FIGURE 11.3 Border styles
FIGURE 11.4 Generic font styles
FIGURE 11.5 Font options
FIGURE 11.6 List style examples
FIGURE 11.7 Adjusting line height
Chapter 12
FIGURE 12.1 Boxes around block and inline elements
FIGURE 12.2 CSS box model layers
FIGURE 12.3 Padding around an element
FIGURE 12.4 Float text around an image
FIGURE 12.5 Floating a section left
FIGURE 12.6 Flexbox vs. list
FIGURE 12.7 A CSS grid layout container
FIGURE 12.8 Answer to Exercise 12.2
Chapter 13
FIGURE 13.1 An alert box
FIGURE 13.2 The Chrome console
FIGURE 13.3 Answer to Exercise 13.2
Chapter 15
FIGURE 15.1 Anatomy of a function
FIGURE 15.2 A looping program
Chapter 16
FIGURE 16.1 A DOM tree
FIGURE 16.2 Command output
FIGURE 16.3 Choosing one array element
FIGURE 16.4 Looping through array elements
Chapter 17
FIGURE 17.1 Code output
Chapter 18
FIGURE 18.1 Multiple paths
FIGURE 18.2 An
index.js
file and related
main.ejs
file
Guide
Cover
Table of Contents
Title Page
Copyright
Dedication
Acknowledgments
About the Author
About the Technical Editor
Introduction
Begin Reading
Appendix: Answers to Review Questions
Index
End User License Agreement
Pages
iii
iv
v
vii
viii
xvii
xviii
xix
xx
xxi
xxii
xxiii
xxiv
xxv
xxvi
xxvii
xxviii
xxix
xxx
xxxi
xxxii
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
249
248
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
LPIWeb Development EssentialsStudy Guide
Exam 030-100
Audrey O'Shea
Copyright © 2024 by John Wiley & Sons, Inc. All rights reserved.
Published by John Wiley & Sons, Inc., Hoboken, New Jersey.Published simultaneously in Canada and the United Kingdom.
ISBNs: 9781394186785 (Paperback), 9781394186808 (epdf ), 9781394186792 (epub)
No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning, or otherwise, except as permitted under Section 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate percopy fee to the Copyright Clearance Center, Inc., 222 Rosewood Drive, Danvers, MA 01923, (978) 750‐8400, fax (978) 750‐4470, or on the web at www.copyright.com. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748‐6011, fax (201) 748‐6008, or online at www.wiley.com/go/permission.
Trademarks: WILEY, the Wiley logo, and the Sybex logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. Linux Professional Institute is a registered trademark of Linux Professional Institute, Inc. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.
Limit of Liability/Disclaimer of Warranty: While the publisher and authors have used their best efforts in preparing this book, they make no representations or warranties with respect to the accuracy or completeness of the contents of this book and specifically disclaim any implied warranties of merchantability or fitness for a particular purpose. No warranty may be created or extended by sales representatives or written sales materials. The advice and strategies contained herein may not be suitable for your situation. You should consult with a professional where appropriate. Further, readers should be aware that websites listed in this work may have changed or disappeared between when this work was written and when it is read. Neither the publisher nor authors shall be liable for any loss of profit or any other commercial damages, including but not limited to special, incidental, consequential, or other damages.
For general information on our other products and services or for technical support, please contact our Customer Care Department within the United States at (800) 762‐2974, outside the United States at (317) 572‐3993 or fax (317) 572‐4002.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic formats. For more information about Wiley products, visit our web site at www.wiley.com.
Library of Congress Control Number: 2023944293
Cover image: © Jeremy Woodhouse/Getty ImagesCover design: Wiley
To Rick, I couldn't do what I do without your love and support.—Audrey
Acknowledgments
It takes many people to create a high‐quality book, and the following people added greatly to the quality of this one. A big thank‐you to Jan Lynn Neal and Pete Gaughan for answering all those questions and keeping me on track, and of course to the team at Wiley working in the background taking care of editing, artwork, and layout. I would like to extend a special thank‐you to Kenyon Brown, for matching my skill set with this project, and for actively promoting women in non‐traditional roles. Tanner Souva did a great job as technical editor, catching those late‐night errors and making valuable suggestions. And of course, I must acknowledge my husband, Rick, for filling in for me on so many things at home, and my family for enduring my endless apologies because “I have a chapter due on Monday.”
About the Author
Audrey O'Shea lives on the shore of Lake Ontario in upstate New York, where she is an instructor at a technical school teaching electronics, computer operating systems, hardware, networking, security, programming, and life in general. She also works as a computer consultant when she isn't writing. Audrey is a member of Phi‐Kappa‐Phi honor society and Women in Technology International. She holds numerous IT industry certifications, and her lifelong goal is to promote the involvement of other women in the information technology field.
Audrey's other published works include A Geek Girl's Guide to Electronics and the Internet of Things (Wiley, 2020) and CompTIA A+ Complete Practice Tests: Exam Core 1 220‐1101 and Exam Core2 220‐1102, Third Edition (Wiley, 2022). She's also served as technical editor for the A+ Complete Practice Tests, Exam Core 1 220‐1001 and Exam Core 2 220‐1002, 2nd Edition (Wiley, 2019) by Jeff Parker and Quentin Docter, and CompTIA ITF+ CertMike, by Mike Chapple (Wiley, 2023) books.
About the Technical Editor
Born in Phoenix, Arizona, Tanner Souva lived in Phoenix for 2 years before moving to Copenhagen, New York. Tanner graduated from Jefferson Community College for Computer Information Technology with an associate degree.
Tanner originally joined the company Keyes Security/Information Technology in high school as a software engineer intern and then was promoted to a paid position. Keyes was acquired and merged into Level Nine Group, a company that focuses on the security of medical and commercial devices/applications.
Introduction
Whether on their smartphones or a desktop computer, the majority of people rely on web technologies on a daily basis for information about all sorts of things as well as connection to companies or organizations, and perhaps even friends and family. Linux powers the majority of the world's smartphones, web servers, and supercomputers. Linux is even the operating system of choice for the Space Station, so learning about Linux in any capacity is a smart move for your IT career.
The Linux Professional Institute (LPI) Web Development Essentials Study Guide: Exam 030‐100 covers the knowledge that a beginner in web development will be expected to know, including how web servers and clients communicate, and front‐end and back‐end technologies. On the front‐end, the part that the users see, the certification focuses on the following development tools:
Hypertext Markup Language (HTML)
JavaScript (JS)
Cascading Style Sheets (CSS)
On the back‐end, where data is stored and manipulated, the certification focuses on the following:
Node.js
Node.js Express
SQLite
Together, these provide the foundation you need to get up and running with web development. So, let's get started!
What Does This Book Cover?
This book covers the topics outlined in the LPI Web Development Essentials: Exam 030‐100 available at www.lpi.org/our-certifications/web-development-essentials-overview.
Chapter 1
, “Web Development Basics”
This chapter begins with an outline of the types of website development and developers as well as the types of programming languages. It also explains programming editors and editing environments, along with programming paradigms and version control systems.
Chapter 2
, “Client/Server Computing”
The information in this chapter explains the relationship between a web client and a web server.
Chapter 3
, “Database Management Systems”
This chapter provides an overview of database management systems and relational database concepts. Databases are the backbone of an interactive web page.
Chapter 4
, “Client/Server Communication”
Here you learn how the client and server communicate—the communication begins with a request from the client to the server.
Chapter 5
, “HTML Introduction”
In this chapter, you learn about the skeleton of an HTML page, which is what all web pages start with.
Chapter 6
, “Content Markup”
This is your introduction to “marking up” the content to provide a web page's structure.
Chapter 7
, “References and Embedded Resources”
Here you learn how to include images and references to other pages in your HTML page.
Chapter 8
, “Creating HTML Forms”
This chapter shows you how to create input forms that enable your web page visitors to provide information and interact with your web page.
Chapter 9
, “Introducing CSS”
This chapter introduces you to Cascading Style Sheets (CSS) that provide the formatting of your web page content.
Chapter 10
, “Applying CSS Styles”
Here you learn how the styles you created in
Chapter 9
are applied to the page and what order they're applied in.
Chapter 11
, “CSS Styling Fundamentals”
This chapter focuses on units of measure and common properties like color and font and how to use them.
Chapter 12
, “CSS Layout and Box Model”
This chapter introduces you to the CSS box model and how to make text flow as you like between other elements.
Chapter 13
, “JavaScript Essentials”
Here you are introduced to JavaScript and what it can do for your web page as well as how to attach your JavaScript file to an HTML file.
Chapter 14
, “JavaScript Data”
In this chapter, you learn about the types of data that are used by JavaScript and the difference between variables and constants.
Chapter 15
, “Functions and Control Structures”
You learn how to create functions and conditional statements in this chapter as well as examine data coercion and truthy and falsy values.
Chapter 16
, “The DOM”
Here you focus entirely on the document object model (DOM), which is a method for specifying what element of the page you would like to use or have a style applied to.
Chapter 17
, “NodeJS Basics”
This chapter moves us to the back‐end of the website, where you learn how to use Node.js to program a server.
Chapter 18
, “NodeJS Express”
Here you learn to use Node.js Express to route and serve files, use templates, and validate user input. You also explore the dangers of cross‐site scripting and request forgery.
Chapter 19
, “Manipulating SQLite with NodeJS”
In this final back‐end chapter, you install and work with SQLite databases by entering, changing, and retrieving data.
Who Should Read This Book
As the title implies, this book is intended for people who have an interest in developing websites. Even if you're not planning to become certified (but you should consider it!), this book introduces you to the technologies that are most commonly used to build and maintain websites, and gives you some tips along the way. The topics covered are ubiquitous in the web development world. HTML, JavaScript, and CSS are the building tools for the front‐end and Node.js and Node.js Express provide the runtime and framework for the back‐end of websites. Regardless of your career trajectory, this book is an excellent place to start.
You don't need programming experience to work with the exercises in the book; the exercises are intended to explain the process to a novice.
The book assumes you have some experience with Linux operating systems, although even novice Linux users should be able to follow the instructions for installing and working with the tools presented. If you're typically a Microsoft Windows user, there are some suggestions in here for you as well. Working with the front‐end technologies isn't much different regardless of the operating system, but you'll eventually want to have a Linux computer to practice with. Luckily Linux is free and will work on even most older computers.
Exam Tips
The LPI Web Development Essentials exam consists of 40 multiple choice/multiple answer questions. You'll have sixty minutes to complete the exam. Unlike some other certifications, this one doesn't expire, so once you've passed it, it's good for your lifetime.
Many of the questions ask you to select more than one answer, so be sure to read the questions carefully. Take your time, but remember that there is a time limit and you must submit the exam before the time runs out.
This exam is all multiple choice, but simulates the preciseness of writing code, so ensure that you know the syntax of the various commands presented in this book. Not only for the exam, but for your work as a web designer.
As with any exam, the sooner you take it after taking the course or reading the book, the more you'll remember. Devote yourself to studying in the week (or weeks) before the exam, but the night before, make sure you get a good night's sleep, and take a few minutes to relax before you go in.
Wishing you success!
Interactive Online Learning Environment and Test Bank
The author has worked hard to create some really great tools to help you with your certification process. The interactive online learning environment that accompanies the LPI Web Development Essentials Study Guide: Exam 030‐100 includes a test bank with study tools to help you prepare for the certification exam—and increase your chances of passing it the first time! The test bank includes the following:
Sample tests
All the questions in this book are included online, including the assessment test at the end of this Introduction and the review questions at the end of each chapter. In addition, there is one custom practice exam with 100 questions. Use these questions to assess how you're likely to perform on the real exam. The online test bank runs on multiple devices.
Flashcards
The online text bank includes two sets of flashcards with over 100 questions each. They are specifically written to challenge you, so don't get discouraged if you don't ace your way through them at first. They're there to ensure that you're really ready for the exam. And no worries—armed with the review questions, practice exams, and flashcards, you'll be more than prepared when exam day comes. Questions are provided in digital flashcard format (a question followed by a single correct answer). You can use the flashcards to reinforce your learning and provide last‐minute test prep before the exam.
Glossary
A glossary of key terms from this book is available as a fully searchable PDF.
Go to www.wiley.com/go/sybextestprep to register and gain access to this interactive online learning environment and test bank with study tools.
Additional Resources
This text covers all of the objectives of the LPI Web Development Essentials certification, but sometimes you want to know more about a particular command or find lists of things. Some resources that will help you with that follow:
www.Nodejs.org
www.Expressjs.com
www.sqlite.org/docs.html
www.w3schools.com/html
www.w3schools.com/css
www.w3schools.com/js/default.asp
https://developer.mozilla.org/en-US/docs/Web/CSS
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Learn/JavaScript
LPI Web Development Essentials Exam Objectives
This table lists the sections and the percentage each represents of the exam.
Section
% of examination
031: Software Development and Web Technologies
15%
032: HTML Document Markup
20%
033: CSS Content Styling
20%
034: JavaScript Programming
25%
035: Node.js Server Programming
20%
Total
100%
Exam objectives are subject to change at any time without prior notice and at Linux Professional Institute's sole discretion. Please visit LPI Web Development Essentials website (www.lpi.org/our-certifications/exam-030-objectives) for the most current listing of exam objectives.
Objective Map
Objective
Chapter(s)
Section 031: Software Development and Web Technologies
031.1 Software Development Basics (weight: 1)
1
031.2 Web Application Architecture (weight: 2)
1, 2, 3
031.3 HTTP Basics (weight: 3)
2, 4
Section 032: HTML Document Markup
032.1: HTML Document Anatomy (weight: 2)
5
032.2: HTML Semantics and Document Hierarchy (weight: 2)
5, 6
032.3: HTML References and Embedded Resources (weight: 2)
7
032.4: HTML Forms (weight 2)
8
Section 033: CSS Content Styling
033.1 CSS Basics (weight:1)
9
033.2 CSS Selectors and Style Application (weight: 3)
9, 10
033.3 CSS Styling (weight: 2)
11
033.4 CSS Box Model and Layout (weight: 2)
12
Section 034: JavaScript Programming
034.1 JavaScript Execution and Syntax (weight: 1)
13
034.2 JavaScript Data Structures (weight: 3)
14
034.3 JavaScript Control Structures and Functions (weight: 4)
15
034.4 JavaScript Manipulation of Website Content and Styling (weight: 2)
16
Section 035: Node.JS Server Programming
035.1 Node.JS Basics (weight: 1)
17
035.2 Node.JS Express Basics (weight: 4)
18
035.3 SQL Basics (weight: 3)
19
How to Contact Wiley or the Author
If you believe you’ve found a mistake in this book, please bring it to our attention. At John Wiley & Sons, we understand how important it is to provide our customers with accurate content, but even with our best efforts an error may occur. In order to submit your possible errata, please email it to our Customer Service Team at [email protected] with the subject line “Possible Book Errata Submission.”
The author would appreciate your input and questions about this book! Email Audrey O'Shea at [email protected].
Assessment Test
Which two programming languages can use the
.c
file extension? (Choose two.)
C
C++
JavaScript
Java
What is the word
float
an example of in both JavaScript and C++?
Syntax
Pseudocode
Keyword
Operator
What do we call a website whose content is the same regardless of who logs into it?
Client
Dynamic
Single‐page
Static
What makes creating a web page possible for people with no programming experience?
APIs
Content management systems (CMSs)
JavaScript
Web application packaging
What type of database is used when data does not easily fit into rows and columns?
Structured database
Relational database
Unstructured database
SQL database
What type of field is used to sort and find specific data?
Key
Primary
Lock
Logical
Which of these stores your username for your favorite shopping site?
Cookies
WebSockets
Cache
HTTP
Which of these will store information as long as the client is connected to the server?
Virtual host
Private cache
Session cookie
Method
What type of cache can be used by multiple people at the same company?
Session
Private
Public
Shared
Which of these is the markup language used to create and format documents for a browser to interpret?
HTTP
HTML
HTTPS
Java
In what section does the
<title>
tag go?
<html>
<body>
<head>
<start>
Which tag identifies the person who wrote the web page?
<meta name= "author" content="Chris Cross">
<h1>Chris Cross</h1>
<title>Chris Cross </title>
<meta name="Chris Cross">
What element is described as one that is structurally above the element being considered, regardless of how many layers are between?
Parent
Child
Ancestor
Descendant
Which semantic element is used to identify the bottom of the page where you'll likely find legal and copyright information about the page?
<footer>
<header>
<bottom>
<main>
What type of URL will include the full path to a web page?
Absolute
Main
Relative
Specific
Which tag and attribute are used to embed an image into a web page? (Choose two.)
<img>
<em>
alt
src
What type of image appears behind the entire web page?
Background
Inline
Page
Source
In the code line
<label for=" breed" >Choose a breed.</label>
, what will show when the browser renders the page?
Label
Breed
Choose a breed
The entire line
What button type will not be visible on the client's browser output?
Image
Button
Submit
Hidden
Which of the following are attributes of
<form>
? (Choose two.)
method
action
POST
GET
Which of the following is not a method to enter styles into an HTML file?
Linking to a CSS file
Using the style attribute
Using the style tag
Linking to a file with a
.style
extension.
You want the area behind your text to be pink. Which of the following does that for you?
style="color:pink;"
style="background‐color:pink;"
<p> "background=pink"
<p "pink">
Which of these is a type selector?
p
#myList ul
name
!important
What happens in inheritance?
A parent object inherits from a child.
The style applied to a parent stops there.
A child object inherits a style from a parent.
A child object must be styled the same as the parent.
Which of the following properties can cause text to display sideways?
text‐decoration‐style:
text‐align‐last:
text‐emphasis:
text‐orientation:
Which of the following properties will make text taller?
font‐size: xxx‐large
border‐style: solid
font‐height: large
font‐weight: dense
Which type of measurement doesn't change?
Relative units
Absolute units
em
vh
Which part of the CSS box model makes a box visible?
Margin
Border
Padding
Stuffing
Which of the following will keep an object on the screen even if you're scrolling? (Choose two.)
position: fixed
position: absolute
position: relative
position: sticky
Which of these does not exist?
CSS box model
CSS flexbox model
CSS grid layout
CSS padding model
Which of these is used in JavaScript to create a list of shortcuts to full URLs?
<defer>
type="importmap"
type="async"
<ul>
Which of these is the variable in the code lines
let x=y;
and
var greeting;
? (Choose two.)
let
x
y
greeting
Which of the following keywords is used to define a value that does not change?
const
let
var
def
Which of these data types represents
true
or
false
?
Number
String
Boolean
Binary
When a variable is defined outside of function or block of code, what is its scope?
Available
Block
Function
Global
What kind of function is
alert( )
?
User‐defined
Predefined
Performance
Process
You're designing a program that chooses a day based on a day number. Which of these commands is best to use? (Choose two.)
switch
break
for
while
In web development, what does DOM stand for?
Document Order Model
Document Object Markup
Document Object Management
Document Object Model
Which method is used to add a class to a DOM object?
classList.toggle()
setAttribute()
classList.add()
changeAttribute()
What programming tool uses code almost identical to JavaScript but runs on the server‐side of a website?
Perl
Ruby
Node.js
PHP
Which command will end an REPL session?
.break
.exit
.help
.save
What folder contains EJS files?
/ejs
/images
/scripts
/views
Which of these commands creates a new instance of Express?
const express=require("express" );
const app=express();
const port=3000;
app.get("/", (req, res));
Which of these commands is used to delete a SQLite3 table?
DROP
DELETE
REMOVE
UNINSTALL
Which of the following query types will retrieve all the records from a database and then apply a query to the records?
db.each()
db.get()
db.all()
db.filter()
Answers to Assessment Test
A, B. C and C++ can both use the
.c
file extension. JavaScript uses a
.js
extension and Java uses a
.java
file extension. See
Chapter 1
for more information.
C. Keywords are reserved by a programming language because they have a specific meaning. Examples of keywords are
float
,
var
,
short
,
finally
,
goto
, and so on. Each language may have hundreds or more keywords. See
Chapter 1
for more information.
D. A website whose content does not change no matter who accesses it is known as a static website. A dynamic website does change based on the visitor. See
Chapter 2
for more information.
B. Content management systems enable a user to create a website even if they have no programming knowledge. See
Chapter 2
for more information.
C. When data doesn't fit easily into rows and columns, it is called unstructured data and is stored in an unstructured database. See
Chapter 3
for more information.
A. A key field is one that can be used to sort and find data. See
Chapter 3
for more information.
A. A cookie stores information about a client on the client's computer that the website can later read. See
Chapter 4
for more information.
C. Session cookies hold information about the user as long as the session is active. See
Chapter 4
for more information.
D. A shared cache can be used by multiple people at the same company to make retrieving information faster. See
Chapter 4
for more information.
B. Hypertext Markup Language (HTML) is the markup language that is used to create and format documents that will be interpreted and displayed by a browser. See
Chapter 5
for more information.
C. You'll find the
<title>
tag in the head section of an HTML page. See
Chapter 5
for more information.
A.
<meta name= "author" content="Chris Cross">
is used to identify the author of a web page, assuming Chris Cross is the person who wrote it. See
Chapter 5
for more information.
C. An element is an ancestor if it is anywhere in the hierarchy, in the same branch, above the element being considered. See
Chapter 6
for more information.
A. A footer appears at the bottom of a page. See
Chapter 6
for more information.
A. Absolute URLs include the full path to a URL. A relative URL will refer to a file that's in the same file structure. See
Chapter 7
for more information.
A, D. Images are embedded using the
<img>
tag and
src
attribute. The
alt
attribute is used for alternative text, and the
<em>
tag makes text bold. See
Chapter 7
for more information.
A. Background images can appear behind an entire page or for an element. Inline images are mingled in with text. See
Chapter 7
for more information.
C. Text between the beginning label tag
<label>
and the ending lable tag
</label>
will be displayed. See
Chapter 8
for more information.
D. A hidden button is still there, but not visible to the page visitor. See
Chapter 8
for more information.
A, B. The three attributes of form are
method
,
action
, and
enctype
.
POST
and
GET
are possible values of the
method
attribute. See
Chapter 8
for more information.
D. To style an HTML file, you can use the style attribute, the style tag, or an external CSS file. See
Chapter 9
for more information.
B.
To make the area behind a paragraph pink, you need to use the
background‐color
property. See
Chapter 9
for more information.
A. Only
p
is a type selector.
#myList ul
is a descendant selector of an
id
,
name
is not a selector, and
!important
is a property. See
Chapter 10
for more information.
C. Just as in real life, a child object inherits its style from a parent; however, the style can be overridden. See
Chapter 10
for more information.
D. Text orientation can turn text from horizontal to vertical. See
Chapter 11
for more information.
A.
font‐size
is used to make the text bigger or smaller. While
font‐height
sounds right, it isn't a valid property. See
Chapter 11
for more information.
B. Relative units change depending on how and where the website is viewed. Absolute units don't. em and vh are relative units. See
Chapter 11
for more information.
B. A border is a visible feature of the CSS Box model. See
Chapter 12
for more information.
A, D. The
fixed
and
sticky
values for the
position
attribute will keep an object from scrolling with the page, although they do it differently.
relative
and
absolute
depend on the original position and the body of a document, respectively. See
Chapter 12
for more information.
D. The CSS padding model doesn't exist. Padding is one of the components of the CSS box model. See
Chapter 12
for more information.
B.
type="importmap"
is used to create a list of shorter references to a group of long URLs. See
Chapter 13
for more information.
B, D.
x
and
greeting
are both variables. The first is declared by
let
, and the second is declared by
var
. While
y
is commonly used as a variable, the code may simply be referring to the letter y. See
Chapter 13
for more information.
A. Constants are values that do not change in a program. They are defined using the
const
keyword. See
Chapter 14
for more information.
C.
true
and
false
are Boolean values. See
Chapter 14
for more information.
D. If a variable is not defined inside a block or function, that variable is global and can be used anywhere in the program. See
Chapter 14
for more information.
B.
alert ( )
is a predefined function. See
Chapter 15
for more information.
A, B. Using
switch
and
break
here would likely work best. See
Chapter 15
for more information.
D. DOM stands for Document Object Model. It's a way of accessing objects in an HTML hierarchical tree. See
Chapter 16
for more information.
C. The
classList.add()
method enables you to add a class to the chosen DOM object. See
Chapter 16
for more information.
C. Node.js is a server‐side framework that enables the programmer to create code using JS on the server‐side. See
Chapter 17
for more information.
B.
.exit
will end a REPL session. See
Chapter 17
for more information.
D. EJS files must be stored in a
/views
file. See
Chapter 18
for more information.
B. The
app
object contains all the Express functions and is the core of Express. See
Chapter 18
for more information.
A.
DROP
deletes a table.
DELETE
deletes a database.
REMOVE
and
UNINSTALL
are not valid SQLite3 commands. See
Chapter 19
for more information.
C.
db.all()
will retrieve all the records from a database before running a query. See
Chapter 19
for more information.
Chapter 1Web Development Basics
LINUX PROFESSIONAL INSTITUTE, WEB DEVELOPMENT ESSENTIALS EXAM 030‐100 OBJECTIVES COVERED IN THIS CHAPTER:
031 Software Development and Web Technologies
031.1 Software Development Basics: The candidate should be familiar with the most essential concepts of software development and be aware of important programming languages.
Key Knowledge Areas:
Understand what source code is
Understand the principles of compilers and interpreters
Understand the concept of libraries
Understand the concepts of functional, procedural and object‐oriented programming
Awareness of common features of source code editors and integrated development environment (IDE)
Awareness of version control systems
Awareness of software testing
Awareness of important programming languages (C, C++, C#, Java, JavaScript, Python, PHP)
031.2 Web Application Architecture
Key Knowledge Areas:
Understand the principles of APIs
The main focus of this chapter is the first subobjective of the Linux Professional Institute (LPI) Web Development Essentials Exam, software development. Along the way, you'll learn about the different types of web development and get a bird's‐eye view of how programs are created. We'll compare writing environments and compiled versus interpreted languages, then look at different programming paradigms and what happens after a program is written. Grab your favorite note‐taking tool, and let's get started!
Developer Types
Most likely, you already know that web development is the process of creating and maintaining web pages. Web pages can be found on servers across the Internet or on your own corporate server used to disseminate information internally. Regardless of where the site exists, there are different developer roles at work creating and maintaining the site.
Let's look first at the front‐end developer. Front‐end developers work on the parts of a website with which the users interact. It's more than just how the website looks. There are actions to consider, such as what happens when you click a button or mouse over a particular spot. These developers are creating the user experience. You can think of this as an artistic endeavor, but front‐end developers also need to be able to program using software such as JavaScript, Hypertext Markup Language (HTML), and Cascading Style Sheets (CSS)—which are all covered in later chapters. Front‐end development is a combination of programming skill and artistic design to create a positive experience for whoever visits the website, whether they are on a PC, a Mac, or their smartphone. The front‐end of a website is also sometimes called the client‐side.
Back‐end developers are responsible for what's happening behind the scenes in a website; they're responsible for the parts that the user doesn't see but that are extremely important. Consider your favorite website for purchasing gifts. The background of that website most certainly has databases containing information about you, your prior orders, and their available inventory. The back‐end is also called the server‐side.
Finally, there are full‐stack developers. As you might have guessed, full‐stack developers are responsible for the entire process of designing a website, which includes both what the end users experience and the information and functionality that resides with the servers supporting the website.
Creating Software
Software, in a very broad sense, consists of lines of instructions for a processor to follow. That processor can be located in a computer, a smartphone, or even the microcontroller of your favorite Internet of Things (IoT) device. Software allows users to interact with hardware and data. Several different methods for developing software exist, most of which will have several iterations of the process before a program is complete. You may have heard of the Agile, Waterfall, Shell, or Sprint methods, but full‐on software development and project management isn't within the scope of this certification, so we'll discuss creating software in more general terms.
Software often starts with pseudocode. Pseudocode is in human language, describing what we would like the program to do, for example:
Ask the user to input their first name.
Ask the user to input their date of birth.
Calculate the user's age as of today.
Print out “Hello %firstname%. I see that you are %age% years old.” (% signs indicate something that changes.)
From there, software is turned into source code. Source code is still written in a format that humans can understand, if those humans are programmers. Source code is the result when a programmer takes those lines of pseudocode and turns them into instructions that are written in a particular programming language. In the Windows environment, most web browsers will allow you to see the source code of a web page, such as in Figure 1.1, by pressing Ctrl+U.
Just as humans speak different languages, there are different programming languages. Programming languages consist of a specific set of rules and words that are used to tell software or hardware to perform tasks. Each language has its own words and rules, similar to human grammar, that distinguish one language from another. Examples of these languages are C, C++, C# (the # is read as sharp,) Java, JavaScript, Python, Ruby, Perl, and PHP, to name a few. Each of these languages will have its advantages and disadvantages, and one may be preferred over another, depending on the project at hand. Some are used more on the front‐end (for example, HTML, CSS, JavaScript, jQuery), whereas others tend to be used more on the back‐end (for example, C#, Java, Python, PHP, Ruby, SQL).
Each of these languages will have their own syntax. Syntax refers to the exact order and presentation of the commands, including spaces, punctuation, capitalization, and so on. For example, in JavaScript, I would declare a variable to store the user's input for their first name with a line that says var firstName. The same variable in C++ would be declared as string firstName.
FIGURE 1.1 Source code example
Data can be presented in different types such as characters, strings, Boolean, integers, and floats. (These types of data will be discussed more in depth in Chapter 14, “JavaScript Data.”) A first name, as in the previous example, would be a string of characters, and var refers to the term variable, which is data that may change.
Different programs also use different keywords. Keywords are words reserved by a program because they have a specific meaning in that particular program. Some JavaScript keywords are goto, float, short, finally, and char, in addition to many more. C++ also uses the keywords goto, float, short, and char, but has many others that are not the same as JavaScript, such as auto and union. These are just a few of the keywords that are available in various languages. A single language can have dozens to hundreds of keywords.
Keywords can be described as different types depending on what they do. The following are just a few keywords that are used in Python. Keywords can be operators (and, or, not, is), or they can control program flow (if, else), control how many times (iterations) a program does something (for, while), or import data (import, from, as). They can even handle problems (try, except, finally, else). These are just some of the functions available using keywords. Remember, some keywords are used in many programs, whereas others are specific to a particular program. Like learning any human language, once you master one, the others are easier to learn.
Just as different programming languages may share the same keywords, programmers may share their work in libraries. At its most basic level, a library is a collection of code that is shared to be reused by others. Programming languages have a standard library that is distributed with the program to provide functionality and solve common problems and needs. Python, for example, has an extensive standard library and thousands of third‐party packages (libraries or modules) that can be added to the program. The common assumption is that a library is a collection of packages, and a package is a collection of modules, although all three terms are sometimes used interchangeably.
Libraries may solve a particular problem that many programmers encounter, or an uncommon problem that is annoying for just a few programmers. An example of a common problem is how to work with a particular LCD screen. A programmer will create code to interface with the LCD screen and share it with other programmers as a library. Libraries are essential to programmers and save time because the programmers don't need to re‐create the solution. Every programming language will have libraries available for it, and some libraries will work with more than one language.
Regardless of the programming language, libraries need to be imported before they can be used. The exact command to import a library will vary by program. For Python, it's importlibraryName, where you would replace libraryName with the actual name of the library. C++ uses #include <packageName> where packageName is replaced with the actual name of the package. Figure 1.2 shows a line of code that includes a library in the Arduino integrated development environment (IDE) for working with an LCD screen.
FIGURE 1.2 Adding a library
To further complicate the process, source code is not always written in just one programming language. Because each language has different strengths, one language may embed, or call, something written in another language. This happens often with websites that have JavaScript code embedded in an HTML document. Programmers may also use an application programming interface (API), which provides a set of rules and protocols that let two dissimilar systems share information, or in this case, two different programming languages. APIs make a programmer's work simpler, and many APIs have been created for various purposes. An API may be private, for use within a single entity, or it may be shared with specific partners or be public and available to anyone to use.
Text Editors and IDEs
Digital devices, such as computers, tablets, and smartphones, are only able to discern if a particular circuit is on or off, so everything in a computer system is represented as either a 1 (the circuit is turned on) or a 0 (the circuit is turned off.) The binary number system represents all values using only two digits; 1 and 0. Machines understand binary notation, and although some of us can easily convert short binary numbers to decimal numbers, a document written entirely in binary wouldn't be easily understood by humans. It's amazing to think that a detailed, colorful image or even a symphony playing is just a bunch of 1s and 0s to a computer!
Machine language is binary code that can be read by computing devices but is not readable by most humans. Source code must be converted to machine language before the computing device can follow the source code to carry out the programmer's wishes.
You may have wondered what tool you can use to write your own source code. Source code can be written using almost any simple text editor. A text editor is a program that allows the user to enter text in a human language or in a programming language, then save it with an appropriate file extension for the language in which the document is written. Examples of text editors are Notepad in Microsoft Windows, or Notepad ++ that works on Microsoft Windows, TextEdit that works with Macs, or Vim that is included in many Linux distributions. In Exercise 1.1, “Hello World,” we will use Vim to write your first program. Atom is an open source and cross‐platform text editor.
Programs are written in plain text. Some text editors, such as Microsoft WordPad, add formatting characters to the text and are not a suitable choice for writing source code. Other text editors, like Notepad++, use different colors to alert the programmer when something is amiss, such as an error in syntax. Some even provide autosuggestions for completing lines of code.
If you would like to try it, the latest edition of Notepad++ can be downloaded from https://notepad-plus-plus.org/downloads. Download the installer onto a Windows‐based machine, taking note of where you saved it. Double‐click the installer file and follow the onscreen prompts to complete the installation. Notepad++ is a favorite of mine because the colors quickly show me the error of my ways, enabling me to avoid hours of troubleshooting code.
Each program will have a specific file extension to identify the language that the program is written in. Regardless of which tool you use to create your source code, be sure to save it using the proper extension. A file extension is the part of a filename that follows a period, such as figure1.jpg. The jpg after the period tells the operating system that this is a JPEG image. The following are some popular programming extensions and the programs they identify:
.c
: C and C++
.cpp
: C++
.cs
: Visual C#
.css
: Cascading Style Sheet
.htm
or
.html
: HTML files
.java
: Java
.js
: JavaScript
.php
: PHP
.py
: Python
.sql
: Structured Query Language
Although Structured Query Language (SQL) is the language specifically used to communicate with a database, it makes the list. SQL meets the definition of a programming language because it requires very specific keywords and syntax to communicate between humans manipulating data and a database.
Some source code, such as HTML, can be used as soon as you've saved it from your text editor, and we will do just that in Chapter 5, “HTML Introduction.” Other languages require an additional step called compiling. Compiling is a process that converts source code to machine language. For those languages that need to be compiled, you need to download additional tools, unless you use an integrated development environment (IDE). An IDE provides the text editor, a compiler, and other tools necessary to convert source code to machine language.
An IDE must support the language that the programmer is writing in. Code::Blocks is a free IDE that supports several languages. Visual Studio Code is cross platform and is very popular and free to try, but continued use requires a subscription. PyCharm is, as you likely guessed, an IDE for the Python language, but it also supports JavaScript and SQL. It has a free version and a full (paid) version as well. Many IDEs have the features of better text editors and may have debugging and testing features as well.
Compiled Languages
A compiled language is one that requires the source code to be converted into machine language before it can be used. Source code must be compiled into machine code for each platform that it will run on, such as Windows, macOS, or Linux. Remember that machine language is simply 1s and 0s, but they must be arranged in a manner that a processor can use. The GNU Complier Collection (GCC) and Tiny C Compiler (TCC) are both free compilers, although their licensing is somewhat different. The GCC can be used to compile many different languages, including C and C++. Intel also has a C++ compiler, as does IBM, and there are other compilers for use with ARM processors and different programming languages.
Compiled programs take a little longer to create because of the extra compiling step, and they need to be compiled multiple times to be available for multiple platforms. For example, to have the program available to run on Windows, macOS and Linux, it would need to be compiled three times, once for each OS. The advantage of compiled programs is that they tend to run more quickly when executed than programs that are not compiled. C++ and C are typically compiled languages.
Some compilers can also output bytecode. Bytecode is the output of a compiler that is intended to be interpreted by a runtime or virtual machine (VM) instead of running directly on a processor. Bytecode is somewhere between source code and machine code. It's a bit slower than running a compiled language, but the advantage of bytecode is that it can be used by multiple platforms—it isn't necessarily compiled for each specific one. A runtime provides the environment that bytecode needs to run. Similar to a mini operating system, the runtime provides access to hardware, software, and the user. A Java Virtual Machine (JVM) provides a runtime environment for Java programs. Each platform will have its own JVM that is often installed with the operating system. Python automatically compiles its code into bytecode, so it will run on any machine that has a Python interpreter on it. Bytenode is a bytecode compiler for node.js.
