Start Programming Using HTML CSS and JavaScript

1st Edition Iztok Fajfar (Author) pdf download

https://ebookname.com/product/start-programming-using-html-css-
and-javascript-1st-edition-iztok-fajfar-author/

Get Instant Ebook Downloads – Browse at https://ebookname.com

Instant digital products (PDF, ePub, MOBI) available
Download now and explore formats that suit you...

Security for Web Developers Using JavaScript HTML and

CSS Early Release Raw Unedited John Paul Mueller

https://ebookname.com/product/security-for-web-developers-using-
javascript-html-and-css-early-release-raw-unedited-john-paul-
mueller/

HTML CSS and JavaScript Mobile Development For Dummies

1st Edition William Harrel

https://ebookname.com/product/html-css-and-javascript-mobile-
development-for-dummies-1st-edition-william-harrel/

Building Android Apps with HTML CSS and JavaScript 2nd

Edition Jonathan Stark

https://ebookname.com/product/building-android-apps-with-html-
css-and-javascript-2nd-edition-jonathan-stark/

Melancholy Medicine and Religion in Early Modern

England Reading The Anatomy of Melancholy 1st Edition
Mary Ann Lund

https://ebookname.com/product/melancholy-medicine-and-religion-
in-early-modern-england-reading-the-anatomy-of-melancholy-1st-
edition-mary-ann-lund/
Scientists Experts and Civic Engagement Walking a Fine
Line Amy E. Lesen

https://ebookname.com/product/scientists-experts-and-civic-
engagement-walking-a-fine-line-amy-e-lesen/

The Encyclopedia of Stress And Stress related Diseases

2nd Edition Facts on File Library of Health and Living
Ada P. Kahn

https://ebookname.com/product/the-encyclopedia-of-stress-and-
stress-related-diseases-2nd-edition-facts-on-file-library-of-
health-and-living-ada-p-kahn/

Nonlinear Partial Differential Equations for Scientists

and Engineers Second Edition Lokenath Debnath

https://ebookname.com/product/nonlinear-partial-differential-
equations-for-scientists-and-engineers-second-edition-lokenath-
debnath/

An Introduction to Language 1st Edition Kirk Hazen

https://ebookname.com/product/an-introduction-to-language-1st-
edition-kirk-hazen/

Message in a Mobile Mixed Messages Tales of Missing and

Mobile Communities at the University of Khartoum 1st
Edition Siri Lamoureaux

https://ebookname.com/product/message-in-a-mobile-mixed-messages-
tales-of-missing-and-mobile-communities-at-the-university-of-
khartoum-1st-edition-siri-lamoureaux/
Allostery Methods and Protocols 1st Edition James K.
Kranz

https://ebookname.com/product/allostery-methods-and-
protocols-1st-edition-james-k-kranz/
 START
PROGRAMMING
using HTML, CSS,
and JAVASCRIPT
 CHAPMAN & HALL/CRC
TEXTBOOKS IN COMPUTING

Series Editors

John Impagliazzo Andrew McGettrick

Professor Emeritus, Hofstra University Department of Computer
and Information Sciences
University of Strathclyde

Aims and Scope

This series covers traditional areas of computing, as well as related technical areas, such as
software engineering, artificial intelligence, computer engineering, information systems, and
information technology. The series will accommodate textbooks for undergraduate and gradu-
ate students, generally adhering to worldwide curriculum standards from professional societ-
ies. The editors wish to encourage new and imaginative ideas and proposals, and are keen to
help and encourage new authors. The editors welcome proposals that: provide groundbreaking
and imaginative perspectives on aspects of computing; present topics in a new and exciting
context; open up opportunities for emerging areas, such as multi-media, security, and mobile
systems; capture new developments and applications in emerging fields of computing; and
address topics that provide support for computing, such as mathematics, statistics, life and
physical sciences, and business.

Published Titles

Paul Anderson, Web 2.0 and Beyond: Principles and Technologies

Henrik Bærbak Christensen, Flexible, Reliable Software: Using Patterns and Agile Development
John S. Conery, Explorations in Computing: An Introduction to Computer Science
John S. Conery, Explorations in Computing: An Introduction to Computer Science and Python
Programming
Iztok Fajfar, Start Programming Using HTML, CSS, and JavaScript
Jessen Havill, Discovering Computer Science: Interdisciplinary Problems, Principles, and
Python Programming
Ted Herman, A Functional Start to Computing with Python
Pascal Hitzler, Markus Krötzsch, and Sebastian Rudolph, Foundations of Semantic Web
Technologies
Mark J. Johnson, A Concise Introduction to Data Structures using Java
Mark J. Johnson, A Concise Introduction to Programming in Python
Lisa C. Kaczmarczyk, Computers and Society: Computing for Good
Mark C. Lewis, Introduction to the Art of Programming Using Scala
Efrem G. Mallach, Information Systems: What Every Business Student Needs to Know
Bill Manaris and Andrew R. Brown, Making Music with Computers: Creative Programming in
Python
Uvais Qidwai and C.H. Chen, Digital Image Processing: An Algorithmic Approach with MATLAB®
David D. Riley and Kenny A. Hunt, Computational Thinking for the Modern Problem Solver
Henry M. Walker, The Tao of Computing, Second Edition
 Chapman & Hall/CRC
TEXTBOOKS IN COMPUTING

START
PROGRAMMING
using HTML, CSS,
and JAVASCRIPT

Iztok Fajfar
University of Ljubljana
Slovenia
CRC Press
Taylor & Francis Group
6000 Broken Sound Parkway NW, Suite 300
Boca Raton, FL 33487-2742
© 2016 by Taylor & Francis Group, LLC
CRC Press is an imprint of Taylor & Francis Group, an Informa business

No claim to original U.S. Government works

Version Date: 20150904

International Standard Book Number-13: 978-1-4987-3145-4 (eBook - PDF)

This book contains information obtained from authentic and highly regarded sources. Reasonable efforts have been
made to publish reliable data and information, but the author and publisher cannot assume responsibility for the valid-
ity of all materials or the consequences of their use. The authors and publishers have attempted to trace the copyright
holders of all material reproduced in this publication and apologize to copyright holders if permission to publish in this
form has not been obtained. If any copyright material has not been acknowledged please write and let us know so we may
rectify in any future reprint.

Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or uti-
lized in any form by any electronic, mechanical, or other means, now known or hereafter invented, including photocopy-
ing, microfilming, and recording, or in any information storage or retrieval system, without written permission from the
publishers.

For permission to photocopy or use material electronically from this work, please access www.copyright.com (http://
www.copyright.com/) or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923,
978-750-8400. CCC is a not-for-profit organization that provides licenses and registration for a variety of users. For
organizations that have been granted a photocopy license by the CCC, a separate system of payment has been arranged.

Trademark Notice: Product or corporate names may be trademarks or registered trademarks, and are used only for
identification and explanation without intent to infringe.
Visit the Taylor & Francis Web site at
http://www.taylorandfrancis.com
and the CRC Press Web site at
http://www.crcpress.com
To my family
 Contents

Acknowledgments xi

Introduction xiii

About the Author xvii

1 Content and Structure 1

1.1 Opening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Introducing HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 The Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Minimal HTML Document . . . . . . . . . . . . . . . . . . . . . . . 4
1.5 Formatting a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.6 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2 Building a Sound Structure 15

2.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.2 Lists and Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.3 Generic <div> and <span> Elements . . . . . . . . . . . . . . . . . 21
2.4 Sectioning Elements . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.5 Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.6 Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.7 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3 Presentation 35
3.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.2 Setting up a Web Server . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.3 Introducing CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.4 CSS Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.5 CSS Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
3.6 CSS Pixel Unit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3.7 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

4 More Control over Style 51

4.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 51

vii
 4.2 Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.3 ID Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.4 Grouping Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4.5 Nesting Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.6 The HTML Ancestry Tree . . . . . . . . . . . . . . . . . . . . . . . 61
4.7 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
4.8 Determining Style Specificity . . . . . . . . . . . . . . . . . . . . . . 64
4.9 Relative Sizes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
4.10 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

5 Understanding CSS Boxes 71

5.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 71
5.2 CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
5.3 Element Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
5.4 Positioning and Element Flow . . . . . . . . . . . . . . . . . . . . . 80
5.5 Containing Block . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
5.6 Hiding Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
5.7 Floated Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
5.8 Special Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
5.9 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

6 Behavior 101
6.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 101
6.2 Server Side Includes . . . . . . . . . . . . . . . . . . . . . . . . . . 104
6.3 Introducing JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 105
6.4 Values and Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
6.5 Operators and Expressions . . . . . . . . . . . . . . . . . . . . . . . 114
6.6 Concluding Remarks and Homework . . . . . . . . . . . . . . . . . . 124

7 Controlling Program Flow 127

7.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 127
7.2 Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
7.3 Design a Simple Program . . . . . . . . . . . . . . . . . . . . . . . . 136
7.4 Type Conversions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
7.5 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

8 Introducing Objects 147

8.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 147
8.2 switch Conditional . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
8.3 Math Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
8.4 do/while Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
8.5 Date Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
8.6 Concluding Thoughts and Homework . . . . . . . . . . . . . . . . . 164

9 Understanding Arrays and Strings 165

9.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 165
9.2 Array Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
9.3 for Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
9.4 Array Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

viii Contents
 9.5 String Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
9.6 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

10 Understanding Functions 187

10.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 187
10.2 Writing Function Definitions . . . . . . . . . . . . . . . . . . . . . . 188
10.3 References to Function Objects . . . . . . . . . . . . . . . . . . . . . 195
10.4 Variable Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
10.5 Passing Function Arguments by Reference . . . . . . . . . . . . . . . 200
10.6 The Scope Chain and Closures . . . . . . . . . . . . . . . . . . . . . 201
10.7 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

11 Building Your Own Objects 205

11.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 205
11.2 JavaScript Objects Revisited . . . . . . . . . . . . . . . . . . . . . . 207
11.3 Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
11.4 Constructor Overloading . . . . . . . . . . . . . . . . . . . . . . . . 211
11.5 Factory Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
11.6 The prototype Object . . . . . . . . . . . . . . . . . . . . . . . . . 214
11.7 More on Setting and Querying Object Properties . . . . . . . . . . . . 217
11.8 Sudoku Puzzle Helper . . . . . . . . . . . . . . . . . . . . . . . . . . 219
11.9 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

12 Using JavaScript to Control the Browser 227

12.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 227
12.2 Deeper into the Browser . . . . . . . . . . . . . . . . . . . . . . . . 229
12.3 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
12.4 Scripting Documents . . . . . . . . . . . . . . . . . . . . . . . . . . 233
12.5 Timer Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
12.6 Scripting Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
12.7 Introducing Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
12.8 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

13 User Interface 245

13.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 245
13.2 Using Family Relations to Manipulate Elements . . . . . . . . . . . . 247
13.3 Completing Math Worksheet Generator . . . . . . . . . . . . . . . . 249
13.4 Completing Sudoku Puzzle Helper . . . . . . . . . . . . . . . . . . . 255
13.5 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

A Solution to the Last Homework: Sudoku Generator 265

B Ways to Continue 271

B.1 Graphics with Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . 271
B.2 Local Data Storage through Web Storage . . . . . . . . . . . . . . . . 279
B.3 Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
B.4 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
B.5 Go Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Contents ix
C HTML Mini Reference 305
C.1 Root Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
C.2 Document Metadata . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
C.3 Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
C.4 Sections and Structure . . . . . . . . . . . . . . . . . . . . . . . . . 311
C.5 Grouping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
C.6 Text-Level Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . 321
C.7 Embedded Content . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
C.8 Tabular Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
C.9 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
C.10 Global Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
C.11 Event-Handler Attributes . . . . . . . . . . . . . . . . . . . . . . . . 338

D CSS Mini Reference 339

D.1 CSS Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
D.2 inherit keyword . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
D.3 Text Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
D.4 List Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
D.5 Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
D.6 Spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
D.7 Background Properties . . . . . . . . . . . . . . . . . . . . . . . . . 357
D.8 Table Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
D.9 Size Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
D.10 Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
D.11 Pseudo-Classes and Pseudo-Elements . . . . . . . . . . . . . . . . . 367

E JavaScript Mini Reference 373

E.1 Operator Precedence and Associativity . . . . . . . . . . . . . . . . . 373
E.2 arguments[] (Core JavaScript) . . . . . . . . . . . . . . . . . . . . 374
E.3 Array (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 374
E.4 Boolean (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 379
E.5 console (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . 380
E.6 Date (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 383
E.7 document (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . 391
E.8 Element (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . 396
E.9 Event (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . . 402
E.10 Function (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 405
E.11 Global Variables, Functions, and Objects (Core JavaScript) . . . . . . 406
E.12 Math (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 409
E.13 Node (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . . 414
E.14 Number (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 416
E.15 Object (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . 420
E.16 String (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 421
E.17 window (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . 427

x Contents
 Acknowledgments

A huge thank you goes to the guys at Taylor and Francis, especially to my editor Randi
Cohen for her enthusiasm for the whole project, my project coordinator Ashley We-
instein, who oversaw production attentively, and technical reviewers for their detailed
comments making the whole book more enjoyable. Many thanks also to the proof-
reader for correcting typos and grammar. Indeed, it was a great pleasure to work with
such a professional team.

Honestly, all this wouldn’t have happened were it not for Igor and the other guys from
the morning-coffee crew, who suggested that I should really write a book. Thanks,
chaps, it cost me a year of my life. Thank you to all my amazing students for sitting
through my programming lectures and asking nasty questions. Man, how should I
know all that? I shall not forget to also thank the other teaching staff from the team.
The joy of working together is immeasurable. I’m deeply indebted to Žiga, who had
painstakingly read the whole manuscript before releasing it to the wild. (I sincerely
hope you spotted all the silly mistakes so I don’t make a fool of myself.) Thank you,
Andrej, for technical advice on preparing the camera-ready PDF. Those are really
details that make a difference. A thousand thanks go to Tanja and Tadej for that little
push that did the trick. You are terrific!

I also wish to extend my considerable gratitude to everyone that gave away their pre-
cious time, energy, and invaluable expertise answering questions on forums, posting
on blogs, and writing all those wonderful LATEXpackages. It’s impossible to list you
all by name because I’m contracted for only 400 or so pages.

A colossal thank you goes out to my mom and dad for instantiating and personalizing
me. It wasn’t the easiest assignment in the world but you did a marvelous job! Many
thanks to my second parents, Dana and Ivo, for telling me that I should also eat if I am
ever to finish the book. A zillion thanks go out to my close family. Thank you, Erik, for
patiently checking which page I am on with an I-want-my-daddy-back determination;
and thank you, Monika, for tons of understanding and supportive coffee mugs. I love
you!

I am also thankful for the support of the Ministry of Education, Science, and Sport of
the Republic of Slovenia within the research program P2-0246—Algorithms and Opti-

xi
mization Methods in Telecommunications, which made possible some of the research
for this book.

And, of course, thank you, the reader. Without you, this book wouldn’t make much
sense, would it?

—Iztok Fajfar (iztok.fajfar.eu), March 2015

xii Acknowledgments
 Introduction

Easy to Use
Normally, putting honey in my tea is not a particularly demanding task, but that morn-
ing my hand was paralyzed in astonishment, trying to do its routine job of pouring
some honey in the steaming cup. Honey labels usually say things like “All Natural,”
“Contains Antioxidants,” or “With Grandma’s Recipe Book.” Over time, I’ve got used
to more absurd labels like “Improved New Flavor” or “Gathered by Real Bees.” The
label that knocked me out was surprisingly plain, with an award-winning message
printed on it: “Easy to Use.” I don’t recall honey ever being hard to use, except maybe
when it crystallizes, or when I was six months old, but that’s probably not exactly
what the author of the message had in mind.

You can also buy programming books that promise easy and quick learning, even as
fast as in 24 hours. An average adult can read a novel in 24 hours. But let’s face it, no
one can read—let alone understand and learn—a 500-page technical book in 24 hours.
While using honey is not difficult even when it doesn’t explicitly say so, learning to
program is not easy. It can be fun if you’re motivated and have decent material to
study from, but it’s also an effort. If you’re not ready to accept that, then this book
is not for you. Otherwise, I invite you to join Maria, Mike, and me at exploring the
exciting world of computer programming. It’s going to be fun but it’s also going to be
some work.

About the Book

This handbook is a manual for undergraduate students of engineering and natural
science fields written in the form of a dialog between two students and a professor
discovering how computer programming works. It is organized in 13 thematic meet-
ings with explanations and discussions, supported by gradual evolution of engaging
working examples of live web documents and applications using HTML, CSS, and
JavaScript. You will see how the three mainstream languages interact, and learn some
of the essential practices of using them to your advantage. At the end of each meeting
there is a practical homework, which is always discussed at the beginning of the next
meeting. There is also a list of related keywords to help you review important topics

xiii
of each meeting.

The general structure of the book is multilayered: the basic language syntax and rules
are fleshed out with contents and structure while still keeping things simple and man-
ageable, something that many introductory textbooks lack.

The main body of the text is accompanied by five appendices. The first of them con-
tains a solution of the last homework, the second summarizes (also with examples)
some major directions in which you can continue your study, including hints on some
of the relevant sources. The last three appendices are abbreviated references of the
three languages used in the book.

There will be situations when you need to use yet more languages and technologies in
order to get the job done. Some such situations are gently dealt with in this book. For
example, you will learn just enough about a Server Side Includes language to be able
to include external HTML code, which will save you a tremendous amount of time
and energy.

Is This Book for Me?

If you know absolutely nothing about computer programming and want to learn, this
is the book for you. It has been written with a complete beginner in mind in the first
place.

If you have been exposed to programming before, you might find the book useful
as well. Today, many people learn from examples and forums, and thus acquired
knowledge is mostly skills and not much theory. If you ever want to build more
serious software, you need a firm and systematic understanding of what is going on.
You need a framework to which you can systematically attach your partial skills to
form a sound structure of connected knowledge. Hopefully, this book can give you
this as well.

Last but not least, if you’re a teacher of an introductory programming course, you
might find a handful of useful examples and approaches for your classes on the few
hundred pages that follow.

But most likely, as there are as many learning styles as there are learners, you will
have to find out for yourself whether or not this book is for you.

How to Avoid Reading the Whole Book

Don’t panic! If you are only up to JavaScript programming, you can just read Meeting
1 to get a basic idea of what HTML is (you need this in order to be able to run the
JavaScript examples in this book), and then you can immediately skip to Meeting
6—more specifically, Section 6.3. There are some examples involving CSS in the
JavaScript part but they won’t stand in the way of your learning JavaScript. Later, if
you feel like it, you can just as well skim over Meeting 3, where you can get the basic
idea of what CSS is all about.

xiv Introduction
For Your Safety
This book is not about cutting-edge web technologies, so you don’t need any pro-
tective equipment. It is more about general computer programming and some web-
related principles using the mainstream web languages HTML, CSS, and JavaScript
as examples. Some of the principles are over 40 years old, but are extremely important
because they allow you to write cleaner and more easily maintainable code, and they
will not go away just like that.

It’s a busy world, and the sixth edition of ECMAScript standard (the standardized
version of JavaScript) has just entered the official publication process. The good news
is that it only introduces additions to its predecessor, so the essential concepts stay.
Also, while CSS3 isn’t completely finished yet, there already exist some so-called
“level 4” CSS modules. Fortunately, they are also just additions to the CSS standard
and there are no serious plans for a single CSS4 specification on the horizon. This
book pays attention to the basic concepts that have matured with the latest HTML5,
CSS3, and ECMAScript 5 standards to the point where it seems these concepts are
going to persist for some time.

The Software Used

In researching this book, I used Google Chrome and Notepad++ v6.5.3 (notepad-plus-
plus.org ) on a Windows 7 Professional SP1 64bit operating system. I also used the
EasyPHP DevServer 13.1 VC11 web development server (www.easyphp.org ). How-
ever, you will be able to follow most of the examples and experiments in this book
using any modern browser and plain text editor. They are already installed on your
computer, so you can start experimenting right away.

Conventions Used in This Book

The following typographical conventions are used in this book:

A monospaced font is used for all code listings and everything that you normally
type on a keyboard, including keys and key combinations.

A monospaced italic font is used as a general placeholder to mark items that

you should replace with an actual value or expression in your code.

An italic font is used to indicate the first appearance of a term, or as an emphasis.

A sans serif font is used to indicate a menu item.

A sans serif italic font is used to indicate URLs and file names and extensions.

Feedback and Supporting Online Material

I deeply appreciate having any comments, suggestions, or errors found brought to my
attention at the email address [email protected]. You will find source code
of the examples in this book and some additional materials and problems for each
chapter at fajfar.eu/start-programming.

Introduction xv
 About the Author

Iztok Fajfar got his first computer in the early 1980s, a ZX Spectrum with an amaz-
ing 48 KB of RAM. Computers soon turned into a lifelong fascination and an indis-
pensable companion, assisting him in his professional work and hobbies alike. Iztok
has a PhD degree in electrical engineering from the University of Ljubljana, Slovenia,
where he is currently Associate Professor at the Faculty of Electrical Engineering. His
research topics include evolutionary algorithms, in particular, genetic programming.
He teaches computer programming at all levels, from assembly to object-oriented, and
to all kinds of audience. Now and then he even ventures to explain to his mother-in-
law how to forward an email, and he hasn’t given up yet. He is also a programmer
and writer. Iztok lives with his family in Ljubljana, and when he is not programming,
or teaching, or researching weird stuff, he makes the most yummy pancakes, not to
mention the pizza.

xvii
 Meeting 1
Content and Structure

1.1 Opening
Professor: I’m thrilled that you accepted my invitation to help me with a new book
I am researching. There are three languages awaiting us in this course: HTML, CSS,
and JavaScript.

Mike: Why three? You’ll just confuse us, won’t you?

Professor: The languages have been designed for quite specific purposes and work
very differently, so there is little danger in confusing them. At the same time, the three
languages nicely complement each other: HTML holds the structure and content of a
web page, CSS takes care of presentation, and JavaScript is responsible for action. I
like to say that HTML is bones, CSS is flesh, and JavaScript is the brain and muscles
of web programming.

Maria: How much of a chance is there of us learning three languages to the level that
we can use any of them to our advantage?

Professor: You don’t have to be a guru in any of them to start using them effectively.
It’s only important that you know the basic principles. The good news is you don’t
have to install or learn to use any new software. All you need to start off is already
installed on your computer.

Do you have any programming experience?

Maria: Actually, I use a computer a lot but not for programming. I have never written
a computer program before.

Mike: Neither have I.

Professor: In a way, programming is like speaking. You speak English, right?

Mike: Yes...?

Professor: I even know people who have learned Finnish. Quite well, to be honest.

1
English and Finnish are examples of natural languages, which people learn to com-
municate with other people. However, if you want to talk to computers, you have to
learn artificial languages so that computers understand and obey you. It’s very similar.
The only difference is that people won’t obey you if you lack charm, while computers
won’t obey you if you’re not accurate. Accuracy is crucial. Similar to both is that it
takes a certain amount of practice before your interlocutor understands you. I won’t
lie to you on this one.

Maria: I’m just starting to learn Spanish and I must use a sign language a lot. I
suppose you cannot use a sign language with a computer.

Professor: That’s true. In natural languages, people use context and even a sign
language to guess what others have to say even though what they say may not be
grammatically correct. Computers don’t do that, though, and that’s the difficult part
of programming. You have to be exact.

All right. Let’s start programming, shall we?

1.2 Introducing HTML

Professor: To be precise, HTML is not a programming language but it is a so-called
markup language. That’s what the acronym HTML stands for: Hypertext Markup
Language. Markup is a modern approach for adding different annotations to a docu-
ment in such a way that these annotations are distinguishable from plain text. Markup
instructions tell the program that displays your text what actions to perform while the
instructions themselves are hidden from the person that views your text. For example,
if you want a certain part of your text to appear as a paragraph, you simply mark up
this part of the text using appropriate tags:

<p>But it’s my only line!</p>

Maria: It looks quite straightforward. Are those p’s in the angle brackets like com-
mands?

Professor: You could say that. They are called tags and they instruct or command a
browser to make a paragraph out of the text between them.

Mike: That’s like formatting, isn’t it?

Professor: In a way, yes. Tags are like commands in a word processor that allow
you to format paragraphs, headings, and so forth. However, they only specify what to
format, not how to do it.

The above code fragment is an example of an HTML element—the basic building

block of an HTML document. An HTML document is composed exclusively of ele-
ments. Each element is further composed of a start tag and end tag, and everything in
between is the content:

2 Meeting 1. Content and Structure

 Start Tag Content End Tag
<p> But it’s my only line! </p>

The start tag is also called the opening tag while the end tag is also called the closing
tag. By the way, the name, or the abbreviation of the name of the element is written
inside the tags. In particular, p stands for a paragraph. The closing tag should have an
additional slash (/) before the element’s name.

In order for a paragraph to show in the browser, we need to add two more things to
get what is generally considered the minimum HTML document. The first line should
be a special declaration called DOCTYPE, which makes a clear announcement that
HTML5 content follows. The DOCTYPE declaration is written within angle brack-
ets with a preceding exclamation mark and the html keyword after it: <!DOCTYPE
html>. Although it looks like a tag, this is actually the only part of an HTML docu-
ment that isn’t a tag or an element. As a matter of fact, this code is here for historical
reasons. I don’t want to kill you with details, but you have to include it if you want
your document to be interpreted by the browser correctly.

One more thing that the minimum document should contain is a <title> element.
This element is necessary as it identifies the document even when it appears out of
context, say as a user’s bookmark or in search results. The document should contain
no more than one <title> element.

Putting it all together, we get the following code:

<!DOCTYPE html>
<title>The Smallest HTML Document</title>
<p>But it’s my only line!</p>

Maria: You just showed us what the document code should look like. But I still don’t
know where to type the code and how to view the resulting page.

1.3 The Tools

Professor: You can use any plain text editor you like. For example, you can use the
Windows Notepad, which is already on your computer if you use Windows.

Mike: What if I don’t use Windows?

Professor: It doesn’t matter. Just about any operating systems contains a plain text
editor. Personally, I use Notepad++, a programmer-friendly free text editor (notepad-
plus-plus.org ).

After you type the code, it is important that you save the file with a .htm or .html
extension. While it doesn’t really matter which one you use, it is quite important that
you choose one and stick to it consistently. Otherwise, you could throw yourself into
a real mess. For example, you could easily end up editing two different files (same
names, different extensions) thinking they’re one and the same file.

1.3. The Tools 3

Now we open the file in a browser and voilà!

Notice how the content of the <title> element appears at the top of the browser tag.

Mike: How did you open the file in the browser?

Professor: Oh yes, sorry about that. Inside Notepad++, I chose Run→Launch in

Chrome. If you use another browser, it will automatically appear under the Run menu
item in your Notepad++. You can of course also simply double-click the file or drag
and drop it into the browser. Once the file is open in the browser, you don’t have to
repeat this operation. If you modify the source code—the original HTML code, that
is—you simply refresh the browser window. If you use Chrome like I do, you can do
that by pressing F5. Later, you will use more than a single file to build a page. In that
case, you will sometimes have to force reload all files of a page, which you can do
by pressing Ctrl+F5 on Chrome. On Windows, to switch between the text editor and
browser quickly, you press Alt+Tab, a standard key combination for switching between
running tasks.

Maria: What would happen if we forgot to include the <title> element?

Professor: Nothing fatal, to be honest. One of the basic rules of rendering web pages
is that the browser always tries its best to show the content. Of course, if the document
isn’t fully formatted according to the recommendations, the results are sometimes not
in our favor. If you forget the title, then the name of the file containing the document
usually takes over its role. If nothing else, that looks ugly and unprofessional.

1.4 Minimal HTML Document

Professor: One of the general prerequisites to good technical design is simplicity,
which should not be confused with minimalism. In our last example, we saw a truly
minimal HTML document, which you will rarely see in practice. Even with no extra
content it is normally a good idea to flesh out this skeleton HTML document. For in-
stance, most web developers share the belief that the traditional <head> and <body>
elements can contribute to clarity, by cleanly separating your document into two sec-
tions. You pack all the content into the <body> section, while the other information
about your page goes to the <head> section. Sometimes it is also a good idea to wrap
both these sections in the traditional <html> element:
<!DOCTYPE html>
<html>
<head>
<title>The Smallest HTML Document</title>
</head>

4 Meeting 1. Content and Structure

 <body>
<p>But it’s my only line!</p>
</body>
</html>

Mike: I noticed that an element can contain not only text but another element as well.
For example, you placed the <title> element within the <head> element.

Professor: Good observation! The content of an element can in fact be any valid
HTML conforming to the rules of that specific element. We call putting one element
into another nesting. When an element is nested (contains other HTML elements), it
is important that it contains whole elements, including start and end tags. So if, for
example, an <elementA > starts before an <elementB >, then it must by all means
end after the <elementB >:

<elementA > ... <elementB > ... </elementB > ... </elementA >

The element that is contained inside another element inherits some of its behavior,
and we often say that the contained element is a descendant of its owner, which is in
turn its parent. The direct descendant is also called a child. This concept will become
especially important when we come to styling elements with CSS. Now I only mention
it so that later the terms will already sound familiar to you.

Maria: What are those periods inside?

Professor: Oh, yes. A set of three periods is an ellipsis. An ellipsis indicates the
omission of content that is not important for understanding the explanation.

We will soon come back to our last example and furnish it with a little more. For
that purpose we need another element called <meta>. This element is used to pro-
vide additional page description (so-called metadata), which is not displayed on the
page, but can be read by a machine. The information stored in the <meta> element
includes keywords, author of the document, character encoding, and other metadata.
The <meta> element has neither content nor the closing tag:

<meta>

An element that is composed only of the opening tag is called an empty or void ele-
ment.

Mike: I don’t understand that. Where do you put all the information you talked about
if there is no content?

Professor: That’s the job for attributes. An attribute is the means of providing addi-
tional information about an HTML element. For example, by using the src attribute
on the <img> element, one can tell the browser where to find the image to display.
There are two things you should know about attributes: they are always specified after
the element name in the start tag, and they come in name/value pairs like this one:

1.4. Minimal HTML Document 5

 Another Random Document on
Scribd Without Any Related Topics
gone hunting, by an anonymous letter that a rival has made an
assignation with the Countess; he hopes that jealousy will divert his
mind from the wedding. On the other side he assures him of
Susanna's intention to keep her appointment in the garden;
Cherubino, who has been allowed to delay his departure at Figaro's
intercession, is to be disguised so as to take Susanna's place at the
interview. |The page comes to be dressed; all at once the Count
knocks, having hurried home in jealous haste. Cherubino slips into
the inner room, of which the Countess locks the door; as the Count
is plying her with angry questions Cherubino throws down a chair;
the Countess explains that Susanna is within, but refuses to allow
her to come out, or even to answer, and will not give up the key.
The Count, enraged, secures all means of egress, and drags the
Countess away with him to fetch an axe and break the door open.
Susanna, who has been concealed in an alcove during this scene,
proceeds to liberate Cherubino; he, finding no other exit available,
springs through the window into the garden, and Susanna takes his
place in the cabinet. The Count returning with the Countess,
determined to employ force in opening the door, she confesses that
the page is in the inner chamber, whereby his rage is still further
excited; to the astonishment of them both Susanna steps forth. The
Countess soon collects herself, and explains that their only intention
has been to punish him for his want of faith, and that Figaro wrote
the letter as a preliminary to the trick; the Count is forced to sue for
pardon, which he obtains with difficulty. Figaro now enters with the
information that all is prepared for the wedding, and being taxed by
the Count with the letter, denies all knowledge of it, and is with
difficulty brought to understand the position of affairs. This danger is
hardly over when the gardener enters, half tipsy, with the complaint
that some one has just jumped from the window of the cabinet upon
his flowers; Figaro declares that he was there with Susanna, and
had jumped into the garden from fear of the Count's fury. The
gardener says that he thought he had recognised Cherubino, but
LE NOZZE DI hands Figaro a paper which had been dropped in
FIGARO.
the garden. The Count, his suspicions newly
awakened, demands the contents of the paper; the Countess
recognises in it the page's patent, and whispers through Susanna to
Figaro, who is able to ward off this fresh danger. Marcellina now
appears supported by Bartolo, and makes known Figaro's promise of
marriage; the Count, in high delight, promises to support her claims
in a court of justice, and by dismissing Basilio, who puts forward his
claims to Marcellina's hand, revenges himself for the letter which
Basilio had presented to him.
Before the sitting of the court the Countess conceives the design
of herself taking Susanna's place at the rendezvous with the Count.
The trial which takes place results in Figaro's being ordered to pay
his debt to Marcellina, or in default to marry her. The Count appears
at the goal of his wishes, but Figaro's evasion—that he must have
the consent of his parents—leads to the discovery that he is the
long-lost son of Bartolo and Marcellina, who thereupon decide to
celebrate their espousals together with his; Susanna, entering with
money obtained from the Countess to redeem Figaro, is indignant at
finding him in Marcellina's arms, but her anger is speedily turned to
delight at hearing the true position of affairs.
During the solemn wedding ceremony—at which Cherubino,
disguised as Fanchette, appears among the village maidens and is
recognised—Susanna gives the Count a letter dictated by the
Countess, in which she appoints the place of rendezvous; a pin
which is stuck into the letter is to be returned as a token of
understanding. Figaro sees that the Count reads the letter and pricks
himself with the pin, without noticing that Susanna has given it to
him; hearing afterwards from Fanchette that she is commissioned by
the Count to convey the pin back to Susanna, he easily surmises
what it means. Beside himself with jealousy, he stations his parents
and friends in the neighbourhood of the appointed place, and repairs
thither himself to surprise and punish the guilty pair.
In the darkness of night the Countess and Susanna, having
exchanged clothes, come to put their husbands to the proof;
Susanna has been warned by Marcellina of Figaro's designs. Scarcely
is the Countess alone, when she is alarmed by the approach of
Cherubino, who presses a kiss on the supposed Susanna; the Count,
entering on the instant, salutes the page with a box on the ear,
which is received instead by the listening Figaro. Alone with the
Countess, the Count addresses her in the most endearing terms,
presents her with money, and with a costly ring, and endeavours to
go off with her; she escapes him in the darkness, and he seeks her
in vain.
In the meantime Susanna, as the Countess, comes to the enraged
Figaro, but forgetting for a moment to disguise her voice, he
recognises her, and turns the tables by proposing to her to revenge
herself for her lord's want of faith by her own, whereupon she
DA PONTE'S makes herself known by boxing his ears. Peace is
LIBRETTO.
easily restored by his explanation, and as the
Count approaches, seeking his Susanna, they continue to counterfeit
love. The Count in a rage calls for his people with torches, Figaro's
friends hasten in, and with them the Countess. The Count, to his
shame, discovers that it was his wife who accepted his presents and
declarations of love, and the pardon which she accords to him brings
the confusion to an end.
Such is a mere outline of this amusing play of intrigue, where one
knot twisting in with another, one embarrassment growing out of
another, call forth ever and again fresh contrivances, while an
abundance of effective situations and characteristic detail make the
witty and satirical dialogue one of the most graphic character
pictures of the time. 3 Da Ponte has arranged his libretto with much
skill, having no doubt received important aid from Mozart himself.
The progress of the piece is left almost unaltered, the necessary
abbreviations being judiciously made. 4 Thus, the lengthy trial scene
is omitted, and only the result in its bearing on the plot is
communicated. Sometimes an under-plot is added, such as Basilio's
appearance as Marcellina's lover. The clearness of the plot is not
often endangered, as it certainly is by the alteration which omits all
mention of a son of Bartolo and Marcellina previous to their
recognition of Figaro as their offspring. The musical pieces are
introduced with admirable discrimination in such positions as to
allow free and natural scope to the musical rendering of each
situation without hindering the progress of the plot, and this is no
small praise in such a piece as "Figaro." The whole scheme of the
drama demands that quite as much attention shall be given to the
LE NOZZE DI ensemble movements and finales as the solo airs;
FIGARO.
and this is of great advantage to the musical
construction. The definite and prearranged progress of the action
fulfils all the conditions of operatic representation with regard to the
position and diversity of the musical pieces; the poetical conceptions
are clever and appropriate, a suggestion of Beaumarchais being
often amplified in the musical working-out. The French comedy was
of wonderful advantage in maintaining the dialogue; and, shortened
and modified as it was of necessity, it retained far more of the spirit
and life of the original than was usual in the recitatives of opera
buffa. This is not indeed the case as far as the German adaptations
of the opera are concerned. I am not aware whence proceeded the
first translation made use of in Berlin in 1790. 5 In 1791 Knigge
adapted the opera for Schroder in Hamburg; 6 in 1792 it was given
in Vienna, translated by Gieseke; and in 1794 Vulpius's translation
appeared. A new translation, giving not only Da Ponte's verses, but
Mozart's improvements on them, is a pressing necessity. The vast
superiority of "Le Nozze di Figaro," in characterisation, plot, and
dialogue, to the very best of opera buffa libretti may be easily
discerned by comparing it with other famous operas, such as Casti's
"Re Teodoro" or "Grotta di Trofonio." In many essential points
"Figaro" overstepped the limits of opera buffa proper, and brought to
view entirely new elements of dramatic construction. The political
element indeed, on which perhaps most of the effect of the comedy
depended, was altogether omitted from the opera. Not only does the
dialogue receive its essential character from the satire and scorn
which it freely casts upon the abuses of political and social life—the
whole tendency of the play is to depict the nobleman of the period,
who, himself without truth and honour, demands both from others,
indulges his lust without scruple, and thereby causes his
dependents, injured in their moral rights, to turn against him their
DA PONTE'S intellectual superiority, so that he is finally
LIBRETTO.
worsted and disgraced. This conception of the
nobility and their position in relation to the citizen class is expressed
with energy and malice, and found such a response in the prevailing
opinions of the time, that the production of the piece against the
expressed will of the King appeared to be a public confirmation of
the principles which inspired it; and Napoleon might with justice say
of "Figaro": "C'était la révolution déjà en action." 7 Every trace of
these feelings has vanished in the opera, as will be clearly perceived
by a comparison of the celebrated "Frondeur-monologue" of Figaro
in the fifth act with the jealous song in the opera. The omission was
made not so much in deference to the Emperor Joseph's scruples as
with the right conviction that the political element is altogether out
of place in music.
The omission of political satire is the more serious because it
leaves as the central point of the plot an immorality which is not
exactly justified, but not by any means seriously punished; only
treated with a certain frivolity. The noble libertine is opposed by true
and upright love, honest devotion to duty and honourable conduct;
but these moral qualities are not made in themselves effective; the
true levers of the plot are cunning and intrigue employed as
weapons of defence. The whole piece appears in a doubtful light,
the atmosphere surrounding Count Almaviva is impure, and the
suppression of those circumstances which could alone make the
phenomenon natural affects more or less the whole spirit of the plot,
and deprives the dialogue of much of its point and double meaning.
Beaumarchais might fairly plead that, having undertaken to give a
true picture of the manners of his time, absolute truth of conception
and detail was necessary to insure the right moral effect; it was for a
later age to perceive how completely the author of the satire was
himself under the influence of the time which he depicts and would
fain improve. This justification is denied to the opera. It has no title
to be considered as a picture of morals, neither can it pretend to
LE NOZZE DI exercise any direct influence, whether moral or
FIGARO.
political, on the minds of men. The dialogue is
undoubtedly in many respects purer than in the comedy; but the
plot and its motives, the chief situations, the whole point of view,
become all the more decidedly frivolous. How came it, then the
Mozart could choose such a subject for his opera, and that the public
could accept it with approbation? It must in the first place be borne
in mind that the facts on which the plot is founded, and the point of
view from which these facts are regarded, had at that time
substantial truth and reality; men were not shocked at seeing on the
stage that which they had themselves experienced, and knew to be
going on in their own homes. A later age is disgusted by the contrast
between semblance and reality, and at the representation of
immorality in all its nakedness; the taste of the time demands that it
shall be shown after another form and fashion. A glance at the
entertaining literature, and even at the operas of the last half of the
eighteenth century, shows clearly that representation of immorality
plays an important part therein in a form which bespeaks the temper
and spirit of the time; and further, that a desire for the
representation of moral depravity is an infallible symptom of moral
disease. It cannot, therefore, be wondered at that a picture of the
moral corruption which penetrated all classes, from the highest to
the lowest, and which had brought all social and political relations to
the verge of dissolution, should have been regarded with eager
approbation and enjoyment. The age which produced and enjoyed
"Figaro" took a lighter view of sensual gratification and the moral
turpitude connected therewith than that which seems right to a
generation grown serious by reason of higher aims and nobler
struggles. It need not here be discussed how far manners and
opinions which change with the times are to be regarded as absolute
morality; the point we are proving is undeniable, and is apparent,
often painfully so, in all the light literature and memoirs of the day.
Caroline Pichler writes in reference to this very period: 8 —
MORAL TENDENCY There prevailed a taste for all that was beautiful
OF FIGARO.
and pleasant in Vienna at that time. The mind
had freer movement than at present, and anything might be written
and printed which was not in the strictest sense of the word contrary
to religion and the state. There was not nearly so much stress laid
upon good manners. Plays and romances of a tolerably free
tendency were admitted and discussed in good society. Kotzebue
was very much thought of. His pieces, as well as Gemmingen's
"Deutscher Hausvater," Schroder's "Ring," and many others which
are sunk in oblivion, together with a number of tales and romances
(Meissner's sketches above all) were founded on indecent subjects.
They were read without scruple or concealment by all the world, and
every young girl.
I myself saw and read them all repeatedly; "Oberon" I knew well,
and Meissner's "Alcibiades." No mother felt any scruple at allowing
her daughter to become acquainted with such works; and indeed
living examples of what we read moved before us with so little
concealment of their irregular and immoral doings, that it would not
have been possible for any mother to keep her daughter in
ignorance on these points.
It is sufficient to refer to the reading of Wieland's works.
What can be more repugnant to our ideas than to find a young girl
writing to her lover:—
I hope you will soon get the new "Amadis"; it is the funniest, most
whimsical book. I wonder how you will like Olinda! Master Amadis is
a little too like butter—he melts in every sunbeam.
Our wonder increases when we reflect that this young girl is
Caroline Flachsland, and her lover is Herder. 9 There can be no
doubt that in this respect Mozart was a child of his time; that he
willingly allowed himself to glide along the pleasant stream of life in
Vienna, and that his merrier moods were often productive of free
and even coarse jests. The frivolous element in Beaumarchais'
comedy was not, therefore, likely to repel him, although it would be
unfair to assert that it mainly attracted him; he accepted it, as others
did, as the sauce which was most likely to be of acceptable flavour.
His chief concern was doubtless the gradual unfolding and
continual interest of the plot, and the graphic delineation of
character, qualities which were entirely overlooked by the ordinary
opera buffa. Any approach to probability or analogy with actual life
LE NOZZE DI was not thought of, and was not often replaced
FIGARO.
even by a fanciful poetic vein of humour; attempts to give
consistency to the caricatures of individuals and situations only
served to bring their irreconcilable contrasts into stronger relief. In
"Figaro," on the contrary, the interest depends upon, the truth the
representation of actual life. The motives of the actors are serious,
they are carried out with energy and intellect, and from them the
situations are naturally developed; only the light in which they are all
portrayed is that of Beaumarchais' strongly accented "gaieté," which
is by no means innocent, and in its essence nothing less than
musical. It is one of the strongest proofs of Mozart's genius that he
should have undertaken, moved as he was by the dramatic
signification of the piece, to infuse a new soul into it by his musical
treatment; so sure was he that whatever came home to his mind
might be used as the germ of a living creation. The musical
representation, however, could only be a true one by relying entirely
on the emotions which alone are capable of being expressed in
music. 10 The whole piece is raised to a higher sphere by the
subordination of the powers of understanding and intellect, which
Beaumarchais had made the chief factors in his design.
Beaumarchais' aim was to preserve his plot and characters from
vulgarity or caricature; the point of view whence the musical
reconstruction proceeded led inevitably to an ennobling of the whole
representation. In depicting emotions, whether as the impulse to
action, or as giving significance even to the least commendable
promptings of the mind, the musician was in his own element, and
MUSICAL the wealth of dramatic situations and characters
TREATMENT OF THE
DRAMA.
was a pure gain to an artist who knew how to
turn it to account. The piercing eye of genius
finds materials for its finest performance where a more superficial
view reveals nothing but difficulties. If each of the characters,
pursuing the interests they have at heart, are to express their inner
sentiments at every point in conformity with their nature, it follows
that the aim of dramatic characterisation in its true sense must be
the representation of individuality, sharp and precise in form, true
and pure as to its source; thus only will the exaggeration of
caricature be avoided. This holds good of all the chief characters in
"Figaro"—of the Count and Countess, Figaro, Susanna, and
Cherubino. They are so entirely governed by their emotions and
passions, so completely involved in the complications proceeding
therefrom, that an artistic representation must depend on the
depicting of these emotions in their fullest truth.
Bartolo and Marcellina seem to invite a treatment in caricature. In
the "Barber of Seville" we find the same Bartolo as a buffo character.
This is made impossible here by the fact that they are to appear
afterwards as Figaro's parents, and ought not, therefore, to cut
grotesque figures in our eyes. Beaumarchais' point, that Marcellina
gives herself airs of superiority to Susanna, "parce qu'elle a fait
quelques études et tourmenté la jeunesse de Madame" is not
available for musical characterisation, but Mozart brings it out
skilfully in another way. In the duet (Act I., 5), in which Susanna and
Marcellina vie with each other in impertinence and provocation, the
expression is toned down by the actual, disputing being left to the
orchestra, and the two women are put quite on an equality. Susanna
prevails over Marcellina only by reason of her youthful grace, and
the whole appears an outbreak of that jealous susceptibility which is
said to be an attribute of the female sex. Nobler women would not
yield to such impulses, but these two belong to no exalted sphere,
and give the rein to their angry humours. But they never forget
themselves so far as to offend delicacy, and the general tone is a
gay one, Marcellina being shown in no way inferior to Susanna. 11
LE NOZZE DI Afterwards, when graver matters engage her,
FIGARO.
when she asserts her claims upon Figaro in the
first finale, or recognises him as her son in the sestet, the musical
expression is sustained and full of true feeling. A singer who was
able to form her conception of the part from these touches of
character would make of Marcellina something quite different from
the ordinary old housekeeper, whom we have unhappily been used
to see and hear, no doubt from a mistaken endeavour to render the
illusion that Figaro's mother must be an old woman, and sing like an
old woman. Marcellina's air (Act IV., 2)," on the other hand, does not
assist the characterisation, and is the only piece in the whole opera
which fails of its effect. The whole style of it, even to the passages,
is old-fashioned, like the traditional air for a seconda donna; it
appears to have been a concession made to the taste of the singer.
Basilio, the man of cold intellect and malicious cunning, is not a
figure which can be made comic by caricature. Mich. Kelly (1764-
1825), for whom it was written, was an Irishman, who had studied
in Naples, and was highly successful as a tenor in Italy and Vienna;
his powers as a mimic fitted him especially for comic parts. 12
Basilio's malice and scorn are expressed in the terzet (Act I., 7) with
delicacy and character, and, in contrast with Susanna's painful
excitement and the Count's anger, they give to the piece an irony,
such as has seldom found expression in music. The point justly
noted by Ulibicheff (II., p. 45 ) that Basilio, in his attempts to pacify
the Count after finding the page in the arm-chair, repeats the words:
"Ah, del paggio quel ch' ho detto era solo un mio sospetto," a fifth
higher, brings out in a striking degree his character of refined malice.
The effect is heightened by the use of the same motif by the Count,
BASILIO. when he is telling how he found the page with
Barberina; and it is attained in the simplest manner by the natural
development of the musical structure. Basilio falls into the
background in the course of the opera; the comic way in which
Beaumarchais makes him banished by the Count, and his courtship
of
Marcellina, would have afforded good operatic situations, but
abbreviation and simplification were absolutely necessary, and much
that was not essential had to be sacrificed. The air which is given to
Basilio in the last act (Act IV., 3) scarcely affords compensation. Da
Ponte, deprived of Beaumarchais' guidance in this place, makes
Basilio illustrate by the fable of the asses' skin that those who can
flatter and deceive succeed in the world. The musical rendering
follows the story, the orchestra giving the characteristic detail. The
expression of ease and self-complacency, and above all the
incomparable idea, deservedly noticed by Ulibicheff, of turning the
last sentence of the heartless poltroon: "Onte, pericoli, vergogna e
morte col cuojo d' asino fuggir si puö," into a sort of parody of a
triumphal march, give the air a character of its own". Executed with
humour and delicate mimicry it becomes in fact an epitome of
Basilio's character, with its utter want of genial qualities. But tone-
painting occurs only in such touches as those of the storm, the
yelping dog, the hurried retreat, and never comes to the foreground.
This means of effect, elsewhere so favourite a device in opera buffa,
is always sparingly used by Mozart. The "Din din, don, don," in the
duet between Susanna and Figaro (Act I., 2) can scarcely be called
tone-painting any more than it can be said to be word-painting; it is
hardly more than an interjection, which has the advantage in its
musical rendering of being incorporated as a motif in the structure of
the piece. Nor can the term be justly applied to the march like tone
of Figaro's "Non più andrai" (Act I., 9). Certain forms and phrases
have developed themselves in music as expressions of warlike ideas,
and they are employed as a matter of course where these ideas
occur; Figaro, describing to the page the military life before him, has
it mirrored as it were by the orchestra. Mozart wisely guards against
LE NOZZE DI entering upon any musical details in the picture,
FIGARO.
which would have led to a distorted tone-
painting; he confines himself to the barest and most general
allusions produced by association of ideas. It is often difficult to
decide how far the association of ideas contributes to the partly
involuntary, partly conscious construction of the musical expression.
For instance in the first duet between Figaro and Susanna (Act I., 1),
the motif for the bass—[See Page Image]
with the corresponding one for the first violins, goes very well with
Figaro's measuring of the room, the diminutions expressing clearly
enough his repeated stretches. It cannot be doubted that the
situation has suggested the motif, but whether Mozart intended to
express the action of measurement is far less certain, and any idea
of tone-painting is out of the question. The subordinate characters
of the drunken gardener Antonio and the stuttering judge Don
Curzio might under other circumstances have been made into
caricatures in the sense of opera buffa, but they appear in situations
which have so decided a character of a totally different kind that
they could not have departed from it without serious injury to that
harmony of the whole which none knew better than Mozart how to
preserve. The little cavatina (Act IV., 1)
for Barbarina, (Fanchette in Beaumarchais) is very significantly not
exactly caricatured, but drawn in stronger colours than is elsewhere
the case. This little maid, in her liking for Cherubino, and with an
open-hearted candour which makes her a true enfant terrible to the
Count, is altogether childish, and not only naïve but unformed. It is,
therefore, natural that she should express her grief for the lost pin,
and her fear of punishment, like a child; and when we hear her
sobbing and crying over it we receive the same ludicrous impression
which grown-up people rarely fail to feel at the sight of a child
expressing the sorrow of his heart with an energy quite out of
proportion to the occasion. The fact that the strong accents which
Mozart here multiplies to produce the effect of the disproportion of
FIGARO. childish ideas are afterwards made use of to
express real emotion does no injury to the truth of his
characterisation. In a similar way the expression of sentiment is
exaggerated when it is represented as feigned; as, for instance, the
last finale, when Figaro makes love to the supposed Countess,
whom he has recognised as Susanna, and grows more and more
vehement in order to excite the Count's jealousy. Here we have a
parody of the accents of strongest passion (Vol. II., p. 427). How
differently does the same Figaro express his true feelings! How
simple and genuine is the expression of his love in the first duet (Act
I., 1), when he interrupts his measurements to exclaim to his pretty
bride, with heartfelt joy: "Si, mio core, or è più bello!" and in the last
finale, when he puts an end to pretence and, in an exalted mood,
with the feeling of his newly won, safely assured happiness fresh
upon him, exclaims: "Pace! pace, mio dolce tesoro!" Equally true is
Figaro's expression of the jealousy which results from his love. At
first indeed this feeling is a curiously mingled one. Warned by
Susanna herself, he has full confidence in her, and feels all his
intellectual superiority to the Count; he contemplates his situation
with a humour which is admirably rendered in the celebrated
cavatina (Act I., 3). Cheerfully as it begins, the expression of
superciliousness and versatility has a tinge of bitterness and
resentment, betraying how nearly he is touched by the affair which
he affects to treat so lightly. Afterwards, when he believes himself
deceived, grief and anger are strongly expressed in the recitative
preceding his air (Act IV., 4). But his originality asserts itself even
here. The consciousness of what his situation has of the ludicrous
never forsakes him, and his anger against the whole female sex,
which he works up more and more, involuntarily assumes a comic
character. Here we have one of the many points which Mozart added
to the text.
LE NOZZE DI The somewhat unflattering description of
FIGARO.
womankind runs—

Queste chiamate dee

Son streghe che incantano per farci penar,
Sirene che cantano per farci affogar,
Civette che allettano per trarci le piume,
Comete che brillano per toglierci il lume—

and so on, until at the end—

Amore non senton, non senton pietà—

Il resto non dico, già ognuno lo sà.

He has no sooner pronounced the fatal "il resto non dico," when
he seems unable to get out any more; and so it runs—

Son streghe che incantano—il resto non dico

Sirene che cantano—il resto non dico, &c.—

giving, opportunity for a corresponding musical treatment of the

words. At last Mozart makes the horns strike in unexpectedly and
finish the phrase for him in a manner full of musical fun. As the
consciousness grows upon Figaro that he is himself the injured party,
his signs of grief and pain grow stronger and more animated. The
blending of warm feeling with the involuntarily comic expression of
intellectual reaction is psychologically true, and in such a character
as Figaro's inevitable; it is embodied in the music in a form very
different to that of an ordinary buffo aria. Not less true to nature is
Figaro's resigned expression of disappointed love further on, when,
having the evidence of his own senses that Susanna has been
unfaithful to him, he ejaculates: "Tutto è tranquillo." But such a
mood as this could not be a lasting one with Figaro, and changes at
once upon Susanna's entrance. Benucci, for whom Mozart wrote
Figaro, possessed an "extremely round, full, fine bass voice." He was
considered a first-rate actor as well as singer, and had the rare merit
of never exaggerating. 13 The individual characterisation is still more
sharply defined when several personages appear together in similar
situations. Immediately upon the air where Figaro declares war upon
the Count (Act I., 3) follows Bartolo's air (Act I., 5) 14 in which the
latter announces his approaching victory over Figaro. He also is
altogether in earnest; Figaro has cruelly deceived him, and the long-
BARTOLO. looked-for opportunity of vengeance is close at
hand: "Tutta Sevilla conosce Bartolo, il birbo Figaro vinto sarà." He is
full of pride and self-consciousness—

La vendetta è un piacer serbato ai saggi,

L' obliar l' onte, gl' oltraggi
E bassezza, è ognor viltà—

and the air begins with the forcible and impulsive expression of
this self-consciousness enhanced by rapid instrumentation; Bartolo
feels the injury done to him, and his obligation in honour to avenge
himself, and the sincerity of this feeling invests him with a certain
amount of dignity. But—his character has none of the elements of
true greatness; as soon as he begins to descant on the way in which
he is to outwit Figaro, his grovelling spirit betrays itself; he excites
himself with his own chatter, and complacently announces his own
triumph beforehand. Bartolo's dignity is not, however, a parody on
his true self; the comic element consists in the contrast of the pride
which lays claim to dignity and the small-mindedness which
unwittingly forfeits the claim. The German translations lose the chief
point of the characterisation. Capitally expressed is the original: "coll'
astuzia, coll' arguzia, col giudizio, col criterio, si potrebbe——" here
the orchestra takes up the motif of the words "è basezza," as if to
edge him on, but soon subsides, as he recollects himself: "si
potrebbe, si potrebbe"—suddenly interrupted by "il fatto è serio," to
which the whole orchestra responds with a startling chord;
thereupon he resumes with calm self-confidence: "ma, credete, si
farà," and then launches into the flood of trivialities with which he
seeks to bolster up his courage.
Steffano Mandini, the original Count Almaviva, was considered by
Kelly as one of the first buffos of the day, 15 and Choron used to
hold him up to his scholars as his ideal of a singer. 16 At the
moment when Susanna has hearkened to; his suit, he infers from a
LE NOZZE DI word let fall by her that she has deceived him.
FIGARO.
Injured pride, disappointed hope, and jealousy of
his happier rival, excite him to a pitch of passion which breaks out in
true cavalier fashion with the words (Act III., 2).: "vedrò, mentr' io
sospiro, felice un servo mio!" What a world of expression Mozart has
thrown into these words! While disappointed but unvanquished
passion presses its sting deep into his heart, injured pride flares up
prepared to give place to no other feeling than that of revenge. In
the wonderful passage which follows with renewed force upon the
immediately preceding tones of sharp complaint—[See Page Image]
the change from major to minor brouight about by the chromatic
passage in the middle parts is of inimitable effect. 17 We have
before us the nobleman, feeling his honour affronted because he is
not allowed to injure that of his servant, and there is in the
expression of his revengeful desires and his certainty of victory no
tinge of Figaro's cunning or Bartolo's meanness; the stream of
passion flows full and unmingled, and the noble position of the
Count gives it a certain amount of composure; his weakness excites
regret rather than contempt or even ridicule. The expression of this
air corresponds to the musical conception of the Count throughout
the opera, in making his feelings of injured pride outweigh those of
disappointed desire. Pride, jealousy, or anger, unjustifiable as they
may be in their outbreaks, are always more dignified and nobler
motives than a love-making whose only foundation is licentiousness,
and its only excuse frivolity. He gives free play to this feeling in the
THE COUNT. enchanting duet with Susanna (Act III., 1); but
the situation is rendered endurable to the audience by the
knowledge that Susanna is playing a part to please the Countess.
Mozart has given this little duet a title to be placed in the first rank
of musical works of art by the delicacy with which he has rendered
the mixture of encouragement and coyness in Susanna's demeanour,
her true motives being as clear to the audience as is the
misunderstanding of the Count. The harmonic turns of her evasive
answer to his passionate request, "Signor, la donna ognora tempo ha
di dir si," are masterpieces of musical diplomacy. Even the piquant
conceit by which she answers his urgent questions, "Verrai? non
mancherai?" with "si" instead of "no," and vice versa, to his great
perplexity, has something more than a merely comic signification. 18
It characterises most strikingly the security with which she plays
with his passion as expressed in these eager, flattering requests.
Even here, delight at his hard-won victory predominates over his
sensual impulses.
The sensual element of love plays far too great a part in "Figaro,"
however, to be altogether disregarded in its musical rendering. It
would be a difficult matter to determine how far and in what way
music is capable of giving artistic expression to this side of the
tender passion; but it cannot be disputed that Mozart has in this
respect competed successfully with the sister arts of painting and
poetry. In Susanna's so-called garden air (Act IV., 5) her longing for
her betrothed is expressed with all the tender intensity of purest
beauty; but the simple notes, cradled as it were in blissful calm, that
seem to be breathed forth "soft as the balmy breath of eve," glow
with a mild warmth that stirs the heart to its depth, entrancing the
mind, and intoxicating the senses like the song of the nightingale.
The pizzicato accompaniment of the air fitly suggests a serenade. It
gives the voice free scope, and the sparely introduced wind
instruments, as well as the tender passage for the first violin
towards the close, only serve to give a finer emphasis to the full
LE NOZZE DI body of the voice. The impression of longing
FIGARO.
delight is intensified by the simplicity of the
harmonies, as if from fear of disturbing by any sudden change the
calm bliss of the passing moment. But what analysis can penetrate
these mysteries of creative genius 19 Mozart was right to let the
feelings of the loving maiden shine forth in all their depth and purity,
for Susanna has none but her Figaro in her mind, and the
sentiments she expresses are her true ones. Figaro in his hiding-
place, listening and suspecting her of waiting the Count's arrival,
throws, a cross light on the situation, which, however, only receives
its full dramatic signification by reason of the truth of Susanna's
expression of feeling. Susanna, without her sensual charm is
inconceivable, and a tinge of sensuality is an essential element of
her nature; but Mozart has transfigured it into a noble purity which
may fitly be compared with the grandest achievements of Greek
sculpture.
Nancy Storace (1761-1814), "who possessed in a degree unique at
that time, and rare at any time, all the gifts, the cultivation, and the
skill which could be desired for Italian comic opera," 20 seems to
have been a singer to whom Mozart was able to intrust the
rendering of this mixture of sentiment and sensuality. When "Figaro"
was reproduced in July, 1789, he wrote for Adriana Ferrarese del
Bene, 21 a less refined and finished singer, the air "Al desio di chi
RONDO FOR t'adora" (577 K.), retaining the accompanied
SUSANNA.
recitative. 22 The words of this song—

Al desio di chi t' adora

Vieni, vola, o mia speranza,
Morirö, se indarno ancora
Tu mi lasci sospirar.
 Le promesse, i giuramenti
Deh! ramenta, o mio tesoro!
E i momenti di ristoro
Che mi fece amor aperar.
Ah! che omai più non resisto
All' ardor, che il sen m' accende.
Chi d' amor gli affetti intende,
Compatisca il mio penar.

with the reference to vows and hopes unfulfilled seem better

suited to the Countess than to Susanna, though the air is clearly
indicated for the latter. Apparently the song was intended to
strengthen Figaro in the delusion that it was the Countess he saw
before him. The device might intensify the situation, but it was a loss
to the musical characterisation, for the air was not altogether
appropriate either to Susanna or the Countess. The singer had
evidently wished for a grand, brilliant air, and Mozart humoured her
by composing the air in two broadly designed and elaborately
executed movements, allied in style to the great airs in "Cosi fan
Tutte," and in "Titus." The bravura of the voice and orchestra is as
entirely foreign to "Figaro" as is the greater display of sensual vigour
with which the longing for the beloved one is expressed. Apart from
its individual characterisation, the air has wonderful effects of sound
and expression, greatly heightened by the orchestra. Basset-horns,
bassoons, and horns are employed, occasionally concertante, giving
a singularly full and soft tone-colouring to the whole. A draft score,
unfortunately incomplete, in Mozart's handwriting, testifies to a later
abandoned attempt for a similar song. The superscription is "Scena
con Rondo" 23 the person indicated, Susanna. The beginning of the
recitative, both in words and music, is like that of the better-known
LE NOZZE DI song, and it expresses the same idea somewhat
FIGARO.
more diffusely as it proceeds, closing in B flat
major. The solitary leaf preserved breaks off at the eighth bar of the
rondo; only the voice-part and the bass are given—[See Page
Image]
 but even this fragment of text and melody suffices to show a
complete contrast to the air just mentioned. A little ariette preserved
in Mozart's original score and marked "Susanna" (579 K.), has still
less of the delicate characterisation which we admire so much in the
opera. 24 The words—

Un moto di gioja
Mi sento nel petto,
Che annunzia diletto
In mezzo il timor.
Speriamo che in contento
Finisca l' affanno,
Non sempre è tiranno fato ed amor—

are trifling, and so commonplace that they suggest no particular

situation. Even the music, hastily thrown together and light in every
respect, expresses only a superficially excited mood. If, as is
probable, the air was intended for the dressing scene, 25 the want
SUSANNA. of individual characterisation becomes all the
more observable. It would be a great mistake to consider the
character of Susanna as a mere expression of amorous sensuality.
This side of it is judiciously displayed first without any reserve, in
order to throw into relief her not less real qualities of devoted
affection, faithful service, and refined and playful humour. The very
scene, not in itself altogether unobjectionable, in which the ladies
disguise the page, is turned into an amusing joke by Susanna's
innocent and charming merriment. Susanna's air in this scene (Act
II., 3) is, technically speaking, a cabinet piece. The orchestra
executes an independent piece of music, carefully worked-out and
rounded in most delicate detail, which admirably renders the
situation, and yet only serves as a foil to the independent voice-part.
A tone of playful humour runs through the whole long piece from
beginning to end; it is the merriment of youth, finding an outlet in
jest and teasing, expressed with all possible freshness and grace.
But the high spirit of youth does not exclude deeper feelings where
more serious matters are concerned; in the terzet (Act II., 4) where
Susanna in her hiding-place listens to the dialogue between the
Count and Countess, she displays deep emotion, and expresses her
sympathy with truth and gravity. Mozart has indeed grasped this
painful situation with a depth of feeling which raises the terzet far
above ordinary opera buffa. 26 In her relations to Figaro, Susanna
displays now one, now the other side of her nature. It is judiciously
arranged that immediately succeeding her first heartfelt, though not
sentimental expression of love (Act I., 1), the second duet (Act I., 2),
should display her merry humour. Her consciousness of superiority
over Figaro, who learns the Count's designs first through her,
combined with the ease of her relations towards them both,
resulting from the honesty of her love, enable her to carry off the
LE NOZZE DI difficult situation with a spirit and youthful gaiety
FIGARO.
which contrast with Figaro's deeper emotions. He
begins indeed with unrestrained merriment, but the same motif,
mockingly repeated by Susanna, becomes a warning which has so
serious an effect upon him that not even her endearments can quite
succeed in chasing the cloud from his brow. 27 The ground-tone of
the duet, the intercourse of affianced lovers, is expressed with the
utmost warmth and animation, and places us at once in the
possession of the true state of affairs. Before the end comes,
however, we see the couple testing each other's fidelity and
measuring their intellectual strength against each other, as when in
the last finale Susanna, in the Countess's clothes, puts Figaro to the
proof, and he, recognising her, takes his clue accordingly. This duet
sparkles with life and joviality, rising, after the explanation, to the
most winning expression of tender love.
The characters of the Countess and Cherubino are much less
complicated than that of Susanna. The Countess is represented as a
loving wife, injured by a jealous and faithless husband. The musical
characterisation gives no suggestion of any response, however faint
and soon stifled, to the page's advances, but is the most charming
expression of ideal purity of sentiment. She suffers, but not yet
hopelessly, and the unimpaired consciousness of her own love
forbids her to despair of the Count's. Thus she is presented to us in
her two lovely songs. The calm peace of a noble mind upon which
sorrow and disappointment have cast the first light shadow—too
light seriously to trouble its serenity—is expressed with intensest
feeling in the first air (Act II., 1). The second (Act III., 4),
when she is on the point of taking a venturous step to recall the
Count to her side, is more agitated, and, in spite of the melancholy
forebodings which she cannot quite repress, gives expression to a
joyful hope of returning happiness. There is no strong passion even
CHERUBINO. here; the Count's affronts excite her anger, and
the dilemma in which she is, placed awakens her youthful pleasure
in teasing. This reminiscence of Rosina in earlier years, combined
with the consciousness of her true feeling, so finely expressed by the
music, may in some measure supply the motive for the deceit which
she thinks herself justified in using towards the Count. Signora
Laschi, who took the part of the Countess, was highly esteemed in
Italy, but was not a great favourite in Vienna. 28 Signora Bussani, on
the other hand, who appeared for the first time as the page,
although not a singer of the first rank, was much admired by the
public for her beautiful figure and unreserved acting, 29 or as Da
Ponte says, for her smorfie and pagliacciate. 30 "Cherubino is
undoubtedly one of the most original of musical-dramatic creations,
Beaumarchais depicts a youth, budding into manhood, feeling the
first stirrings of love, and unceasingly occupied in endeavouring to
solve the riddle which he is to himself. Count Almaviva's castle is not
a dwelling favourable to virtue, and the handsome youth, who
pleases all the women he meets, is not devoid of wanton sauciness:
"Tu sais trop bien," he says to Susanna, "que je n'ose pas oser." To
Susanna, with whom he can be unreserved, he expresses the
commotion of his whole nature in the celebrated air (Act I., 6) which
so graphically renders his feverish unrest, and his deep longing after
something indefinable and unattainable. The vibration of sentiment,
never amounting to actual passion, the mingled anguish and delight
of the longing which can never be satisfied, are expressed with a
power of beauty raising them out of the domain of mere sensuality,
Very remarkable is the simplicity of the means by which this
extraordinary effect is attained. A violin accompaniment passage, not
unusual in itself, keeps up the restless movement; the harmonies
make no striking progressions, strong emphasis and accents are
LE NOZZE DI sparingly used, and yet the soft flow of the music
FIGARO.
is made suggestive of the consuming glow of
passion. The instrumentation is here of very peculiar effect and of
quite novel colouring; the stringed instruments are muted, and
clarinets occur for the first time and very prominently, both alone
and in combination with the horns and bassoons. 31 The romanze in
the second act (2) is notably different in its shading. Cherubino is
not here directly expressing his feelings; he is depicting them in a
romanze, and he is in the presence of the Countess, towards whom
he glances with all the bashfulness of boyish passion. The song is in
ballad form, to suit the situation, the voice executing the clear, lovely
melody, while the stringed instruments carry on a simple
accompaniment pizzicato, to imitate the guitar; this delicate outline
is, however, shaded and animated in a wonderful degree by solo
wind instruments. Without being absolutely necessary for the
progress of the melodies and the completeness of the harmonies,
they supply the delicate touches of detail reading between the lines
of the romanze, as it were, what is passing in the heart of the singer.
We know not whether to admire most the gracefulness of the
melodies, the delicacy of the disposition of the parts, the charm of
the tone-colouring, or tenederness of the expression—the whole is
of entrancing beauty.
Unhappily we have lost a third air written for Cherubino. After the
sixth scene of the second act, in which Barberina requests the page
to accompany her, the original draft score contains the remark:
"Segue Arietta di Cherubino; dopo l'Arietta di Cherubino viene scena
7, ma ch' è un Recitativo istromentato con Aria della Confessa," This
arietta is not in existence, and probably never was, a change in the
arrangement of the scenes having rendered it superfluous. This is to
be regretted; Cherubino's intercourse with Barberina would have
supplied an essential feature which is now wanting in the opera. But
 DANCE—MARCH. even as it is, the image of Cherubino is so
attractive, so original, that it must unquestionably be reckoned
among the most wonderful of Mozart's creations.
Thus we see all the dramatis personæ live and move as human
beings, and we unconsciously refer their actions and demeanour to
their individual natures, which lie before us clear and well-defined.
So great a master of psychological characterisation was under no
necessity of calling accessories of costume or scenery to his aid, and
declined even to remind us by the use of peculiar musical forms that
the action was laid in Spain. This device is only once resorted to.
The dance which is performed during the wedding festivities in the
third act (Act III., 8, p. 377) reminds us so forcibly of the customary
melody for the fandango, 32 that there can be no doubt this dance
was known in Vienna at the time. Gluck has employed the same
melody in his ballet of "Don Juan," produced at Vienna in 1761. If
Mozart's adaptation be compared with the other two, it will be
perceived that he has formed a free and independent piece of music
out of some of the characteristic elements of the original, combining
dignity and grace in a singular degree; the treatment of the bass
and middle pans, and the varied combinations u of the wind
instruments heighten the effect of the unusual colouring. At the
exclamation of the Gotmt, who has pricked himself with a pin the
bassoon strikes up in plaintif tones:—[See Page Image]
which are comically appropriate. But they are not primarily
introduced to express pain; they belong to the dance music, and
recur at the same point later on in the dance; the point of the joke is
the apparently chance coincidence of the dance music with the
situation of the moment. The fine march preceding the ballet, the
gradual approach of which produces a very effective climax (Vol. II.,
LE NOZZE DI p. 154, note), takes its peculiar colouring from the
FIGARO.
constant transition to the minor in the wind
instruments—[See Page Images]—without having any very decided
national character. Neither are the choruses sung on the same
occasion by female voices, or male and female together, particularly
Spanish in tone, any more than the chorus in the first act (Act I., 8);
they are gay, fresh, very graceful, and exactly fitted to the situation.
Hitherto we have attempted an exposition only of the musical-
dramatic characteristics of the opera, the psychological conception
which makes the actions of the characters correspond with their
individual nature... Not less important are the events and
circumstances which give rise to the combined action of the different
characters; in the opera this is displayed in ensemble movements.
The prevailing principle is here again truth in the expression of
feeling; but the juxtaposition of the different characters necessitates
a greater stress to be laid on individual peculiarities;
and again, these characteristics of detail must be subordinated to
the main idea of producing a well-formed whole. A due balance of
parts can only be produced by compliance with the conditions of a
musical work of art. The substance and form of these ensemble
movements are of course subject to many modifications; many of
them are nothing more than a detailed and fuller exposition of some
definite situation or mood; and their whole design is therefore
simple. Such are the duets between Figaro and Susanna (Act I., i,
2), between Susanna and Marcellina (Act I., 5), the writing duet (Act
III., 5), and the duet between the Count and Susanna (Act III., 1);
they are distinguished from airs more by their form than their
nature. If during the dressing scene Cherubino were to chime in with
Susanna's remarks, the Countess were also directly to interpose,
such a duet or terzet would represent the situation in greater variety
of detail, the form would become richer by means of contrasting
ENSEMBLES. elements, but the musical matter would not differ
essentially from that to which we are accustomed in solo airs. The
terzet in the second act is of this character; a situation or a mood is
maintained, and only variously mirrored in the various personages.
Here, then, is the point of departure for unity in the grouping of the
whole; and the ordinary resources of musical construction, such as
the repetition of a motif in different places, the elaboration and
combination of the motifs, for the most part lend themselves to the
situation.
 The difficulty of the task increases in proportion as the music
forms part-of the plot. We have an instance of this in the duet
between Susanna and Cherubino (Act II., 5); when the latter tries to
escape, and finally jumps out of the window. The simple situation
gives rise to an expression of fear and disquiet in short, interrupted
motifs, and the prevailing characteristic is an agitation almost
amounting to action__in progress. The agitation, however, is so
characteristically rendered by the music, that, while appearing to
flow from an irresistible impulse, it is in reality only an effect of a
definite musical formula fitly working out a given motif. The
orchestral part forms a separate piece of music of very varied
character. 33
The terzet of the first act comes in the very middle of the action
(Act I., 7). Here we have not merely three persons of dissimilar
natures thrown together, but at the particular point in the plot their
interests and sentiments are altogether opposed, and each of them
is influenced by different suppositions. The plot proceeds, however,
and the discovery of the page in the arm-chair gives a turn to affairs
which changes the position of each person present. We are struck in
the first place with the striking, delicately toned musical expression,
especially when the voices go together, as at the beginning, when
LE NOZZE DI the Count's anger: "Tosto andate e scacciate il
FIGARO.
seduttor!" Basilio's lame excuse: "In mal punto
son qui giunto," and Susanna's distress: "Che ruina, me meschina!"
are all blended into a whole, while preserving throughout their
individual characters. The same is the case at the end also, when
the Count, taken by surprise, turns his displeasure against Susanna
in ironical expressions: "Onestissima signora, or capisco come và";
while she is anxious on her own account: "Accader non puo di
peggio!" and Basilio gives free expression to his malice: "Cosi fan
tutte le belle!" But while the music appears only to follow the plot,
we cannot fail on closer examination to perceive that I we have
before us a work constructed and carried out I according to the
strictest laws of musical form. It is all so naturally and easily put
together that what is really owing to deep artistic insight might be
considered by the uninitiated as the result of a fortuitous coincidence
of dramatic and musical effects. The intensely comic effect produced
by Basilio's repetition of his previous sentence, a fifth higher is
brought about of necessity by the musical form. A similar effect is
produced when, at the point where a return to the original key leads
us to expect a recurrence of the principal subject, the Count, with
the same notes in which he had exclaimed, full of resentment at
Susanna's intercession; "Parta, parta il damerino!" now turns to
Susanna herself with the words: "Onestissima signora, or capisco
come và," the point being brought out by the change from forte to
pianissimo. Traits like this of delicate dramatic characterisation
proceed immediately from the musical construction, and are to be
ascribed solely to the composer; the text does not by any means
directly suggest them.
The dramatic interest reaches a far higher level in the two great
finales. The finale to the second act is judiciously constructed, as far
as is compatible with musical exigences, out of the elements already
existing in Beaumarchais. The dramatic interest rises with the
increasing number of persons taking part in the action, and grows to
a climax, while new developments proceeding from the unravelling
of each complication bring the actors into ever-varying relations with
each other. The different situations afford the most animated variety,
FINALES. moving onwards in close connection, but each
one keeping its ground long enough to give ample scope for musical
elaboration. 34 The situations thus give rise to the eight movements,
distinct in design and character, which form the finale. The masterly
combination of the different movements is more effective than would
be any amount of emphasis laid on particular points of
characterisation. The finale opens with a manifestation of intensest
passion—the Count glowing with rage and jealousy, the Countess,
wounded to the heart, trembling at the consequences of her
imprudence.
In no other part of the opera is the pathetic element express so
prominent, the conflict being so strongly expressed that a serious
catastrophe appears inevitable. But Susanna's unexpected
appearance brings about an explanation, which could not be more
aptly expressed than by the rhythmical motif of the second
movement. 35 Susanna's mocking merriment, which for a moment
rules the situation, is in some degree moderated by the uncertainty
of the two others. The want of repose of the following movement
alters the character again, while the chief characters have to adapt
themselves to their change of relative position. The Count has to
propitiate his wife, without being altogether convinced himself; the
Countess's anger and forgiveness both come from the heart, but she
feels that she is not now quite in the right. Susanna is exerting
herself to bring about explanation and reconciliation, and in so doing
takes involuntarily, as it were, the upper hand of the Countess. It is
a mimic war, carried on in the most courteous manner; every
emotion is broken and disturbed.
Now let us turn to the music. A succession of short motifs, each of
which characterises a particular element of the situation, are loosely
put together, none of them independently worked out, one driving
LE NOZZE DI out the other. But the motifs occur in every case
FIGARO.
just where dramatic expression demands, and
each repetition throws a new light upon the situation, turning the
apparent confusion into a well-formed musical whole. Figaro brings
an element of unrestrained gaiety into the midst of this troubled
atmosphere; the G major following immediately on the E flat major
breaks away from all that has gone before. His merriment is truly
refreshing, but even he feels some constraint knowing that his secret
is betrayed, without being aware of what has led to it. The
eagerness with which the Count interrupts him, the anxiety with
which the women seek to put him in the right way, his alternate
holding back and yielding, give the scene a diplomatic sort of tone,
wonderfully well-rendered by a tinge of dignity in the music, which
only here and there betrays, involuntarily as it were, more
animation. The closing ensemble gives to each of the four voices a
mysterious character which is quite inimitable. A complete contrast
to this delicate play is afforded by the half-drunken gardener with his
denunciation; this opponent requires quite a different treatment. The
musical characterisation becomes more lively and broader, the
different features more strongly marked. As soon as the Count
begins his examination of Figaro, the tone alters again. The
remarkable andante 6-8 in which the beating motif—[See Page
Image] is hurried through the most varied harmonic transitions
expresses an impatience which is scarcely to be kept from violent
explosion, quite in accordance with the suspense with which the
progress of the explanation is followed by all present without
arriving at any satisfactory solution. Finally Marcellina enters with
her confederates. The firm, bold pace which is at once adopted by
the music marks the commencement of a new struggle; the peril
becomes serious, and the change of situation brings about a new
FINALES. disposition of the characters. Marcellina, Basilio
and Bartolo range themselves on one side, the Countess, Susanna
and Figaro on the other, both parties aggressive and prepared for
the fight, the Count between them turning first to the one side and
then to the other. When the crisis is over, and Marcellina's claim
acknowledged, the previous positions are reversed; Marcellina's
party has the advantage, Figaro's is defeated. The vanquished party
now lose self-command and become violently agitated, while the
victors express their triumph with mocking composure. The finale
ends in doubled tempos with a diffuse but decided expression of
those discordant moods on both sides, bringing the long strife and
confusion to an end. 36 The plan of the second finale is quite
different; we plunge at once into the midst of an animated intrigue,
one misapprehension and surprise following close upon another. The
Countess, disguised as Susanna, awaits the Count; Figaro, and
Susanna listen concealed; first the page enters, then the Count, and
the play proceeds, every one getting into the wrong place, receiving
what is not meant for him, and addressing himself to the wrong
person. Mozart has only grasped the amusing side of the
complication, and the music maintains a cheerful, lively character,
without leaving room for any expression of deeper feeling. By this
means whatever is objectionable in the situation seems to spring
unavoidably as it were from the facts of the case, on which the play
is founded and developed. It is sufficiently astonishing that the
music should succeed in following this development step by step in
all its turns; the higher art of the master is displayed in his power of
representing dramatic life and reality in all its perfection within the
limits of a musical movement of scientific conception and form.
Nowhere perhaps is the style of intrigue which Zelter praises as the
LE NOZZE DI special quality of the opera 37 brought so
FIGARO.
prominently forward as in this ensemble. It
consists in the art of making each character express himself
naturally and appropriately, at the same time rendering the due
meaning of the situation and throwing the right light on every
separate utterance, while giving the whole a brighter colouring. As
soon as Figaro and Susanna are opposed to each other, the tone and
style are altered. Serious genuine feeling breaks through the mask of
deception, and asserts its sway. Not until the Count enters does the
trickery begin again, leading to a succession of surprises which find
their climax in the appearance of the Countess. The music renders
so bewitchingly the impression of her pardoning gentleness and
amiability that we are forced to believe in the sincerity of the
reconciliation, and to share in the rejoicings which follow on so many
troublous events. 38
Next to these two finales a prominent position is assigned to the
sestet (Act III., 3) which according to Kelly was Mozart's favourite
piece in the whole opera. 39 This partiality is characteristic, for his
amiable nature finds fuller expression in this piece than in any other.
The trial scene is omitted in the opera, but the recognition of Figaro
by Marcellina and Bartolo is brought into the foreground. The cool
sarcastic tone of Beaumarchais gives this scene something
unpleasant; but the musical version even here allows human
sentiment to assert itself; if it were not for the extraordinary
circumstances on which the scene is founded it would be quite
pathetic. Both the parents and the son are in the act of expressing
the tenderest affection and delight when Susanna hastens in to
redeem Figaro. The violence with which she manifests her anger at
Figaro's apparent want of constancy is meant quite seriously, and is
necessary in order to show how deeply her heart is affected. Amid
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebookname.com