Professional JavaScript for Web Developers - Matt Frisbie - ebook

Professional JavaScript for Web Developers ebook

Matt Frisbie

0,0
124,99 zł

Opis

Update your skill set for ES 6 and 7 with the ultimate JavaScript guide for pros Professional JavaScript for Web Developers is the essential guide to next-level JavaScript development. Written for intermediate-to-advanced programmers, this book jumps right into the technical details to help you clean up your code and become a more sophisticated JavaScript developer. From JavaScript-specific object-oriented programming and inheritance, to combining JavaScript with HTML and other markup languages, expert instruction walks you through the fundamentals and beyond. This new fourth edition has been updated to cover ECMAScript 6 and 7 (also known as ES2015 and ES2016) and the major re-imagination and departure from ES 5.1; new frameworks and libraries, new techniques, new testing tools, and more are explained in detail for the professional developer, with a practical focus that helps you put your new skills to work on real-world projects. The latest--and most dramatic--ES release is already being incorporated into JavaScript engines in major browsers; this, coupled with the rise in mobile web traffic increasing demand for responsive, dynamic web design, means that all web developers need to update their skills--and this book is your ideal resource for quick, relevant guidance. * Get up to date with ECMAScript 6 and 7, new frameworks, and new libraries * Delve into web animation, emerging APIs, and build systems * Test more effectively with mocks, unit tests, functional tests, and other tools * Plan your builds for future ES releases Even if you think you know JavaScript, new ES releases bring big changes that will affect the way you work. For a professional-level update that doesn't waste time on coding fundamentals, Professional JavaScript for Web Developers is the ultimate resource to bring you up to speed.

Ebooka przeczytasz w aplikacjach Legimi na:

Androidzie
iOS
czytnikach certyfikowanych
przez Legimi
Windows
10
Windows
Phone

Liczba stron: 1843




Table of Contents

COVER

FOREWORD

INTRODUCTION

WHO THIS BOOK IS FOR

WHAT THIS BOOK COVERS

HOW THIS BOOK IS STRUCTURED

WHAT YOU NEED TO USE THIS BOOK

1 What Is JavaScript?

A SHORT HISTORY

JAVASCRIPT IMPLEMENTATIONS

JAVASCRIPT VERSIONS

SUMMARY

2 JavaScript in HTML

THE <SCRIPT> ELEMENT

INLINE CODE VERSUS EXTERNAL FILES

DOCUMENT MODES

THE <NOSCRIPT> ELEMENT

SUMMARY

3 Language Basics

SYNTAX

KEYWORDS AND RESERVED WORDS

VARIABLES

DATA TYPES

OPERATORS

STATEMENTS

FUNCTIONS

SUMMARY

4 Variables, Scope, and Memory

PRIMITIVE AND REFERENCE VALUES

EXECUTION CONTEXT AND SCOPE

GARBAGE COLLECTION

SUMMARY

5 Basic Reference Types

THE DATE TYPE

THE REGEXP TYPE

PRIMITIVE WRAPPER TYPES

SINGLETON BUILT-IN OBJECTS

SUMMARY

6 Collection Reference Types

THE OBJECT TYPE

THE ARRAY TYPE

TYPED ARRAYS

THE MAP TYPE

THE WEAKMAP TYPE

THE SET TYPE

THE WEAKSET TYPE

ITERATION AND SPREAD OPERATORS

SUMMARY

7 Iterators and Generators

INTRODUCTION TO ITERATION

THE ITERATOR PATTERN

GENERATORS

SUMMARY

8 Objects, Classes, and Object-Oriented Programming

UNDERSTANDING OBJECTS

OBJECT CREATION

INHERITANCE

CLASSES

SUMMARY

9 Proxies and Reflect

PROXY FUNDAMENTALS

PROXY TRAPS AND REFLECT METHODS

PROXY PATTERNS

SUMMARY

10 Functions

ARROW FUNCTIONS

FUNCTION NAMES

UNDERSTANDING ARGUMENTS

NO OVERLOADING

DEFAULT PARAMETER VALUES

SPREAD ARGUMENTS AND REST PARAMETERS

FUNCTION DECLARATIONS VERSUS FUNCTION EXPRESSIONS

FUNCTIONS AS VALUES

FUNCTION INTERNALS

FUNCTION PROPERTIES AND METHODS

FUNCTION EXPRESSIONS

RECURSION

TAIL CALL OPTIMIZATION

CLOSURES

IMMEDIATELY INVOKED FUNCTION EXPRESSIONS

PRIVATE VARIABLES

SUMMARY

11 Promises and Async Functions

INTRODUCTION TO ASYNCHRONOUS PROGRAMMING

PROMISES

ASYNC FUNCTIONS

SUMMARY

12 The Browser Object Model

THE WINDOW OBJECT

THE LOCATION OBJECT

THE NAVIGATOR OBJECT

THE SCREEN OBJECT

THE HISTORY OBJECT

SUMMARY

13 Client Detection

CAPABILITY DETECTION

USER-AGENT DETECTION

SOFTWARE AND HARDWARE DETECTION

SUMMARY

14 The Document Object Model

HIERARCHY OF NODES

WORKING WITH THE DOM

MUTATION OBSERVERS

SUMMARY

15 DOM Extensions

SELECTORS API

ELEMENT TRAVERSAL

HTML5

PROPRIETARY EXTENSIONS

SUMMARY

16 DOM Levels 2 and 3

DOM CHANGES

STYLES

TRAVERSALS

RANGES

SUMMARY

17 Events

EVENT FLOW

EVENT HANDLERS

THE EVENT OBJECT

EVENT TYPES

MEMORY AND PERFORMANCE

SIMULATING EVENTS

SUMMARY

18 Animation and Graphics with Canvas

USING requestAnimationFrame

BASIC CANVAS USAGE

THE 2D CONTEXT

WEBGL

SUMMARY

19 Scripting Forms

FORM BASICS

SCRIPTING TEXT BOXES

SCRIPTING SELECT BOXES

FORM SERIALIZATION

RICH TEXT EDITING

SUMMARY

20 JavaScript APIs

ATOMICS AND SharedArrayBuffer

CROSS-CONTEXT MESSAGING

ENCODING API

BLOB AND FILE APIs

MEDIA ELEMENTS

NATIVE DRAG AND DROP

NOTIFICATIONS API

PAGE VISIBILITY API

STREAMS API

TIMING APIs

WEB COMPONENTS

THE WEB CRYPTOGRAPHY API

SUMMARY

21 Error Handling and Debugging

BROWSER ERROR REPORTING

ERROR HANDLING

DEBUGGING TECHNIQUES

COMMON LEGACY INTERNET EXPLORER ERRORS

SUMMARY

22 XML in JavaScript

XML DOM SUPPORT IN BROWSERS

XPATH SUPPORT IN BROWSERS

XSLT SUPPORT IN BROWSERS

SUMMARY

23 JSON

SYNTAX

PARSING AND SERIALIZATION

SUMMARY

24 Network Requests and Remote Resources

THE XMLHttpRequest OBJECT

XMLHttpRequest LEVEL 2

PROGRESS EVENTS

CROSS-ORIGIN RESOURCE SHARING

ALTERNATE CROSS-DOMAIN TECHNIQUES

THE FETCH API

THE BEACON API

WEB SOCKETS

SECURITY

SUMMARY

25 Client-Side Storage

COOKIES

WEB STORAGE

INDEXEDDB

SUMMARY

26 Modules

UNDERSTANDING THE MODULE PATTERN

IMPROVISING MODULE SYSTEMS

WORKING WITH PRE-ES6 MODULE LOADERS

WORKING WITH ES6 MODULES

SUMMARY

27 Workers

INTRODUCTION TO WORKERS

DEDICATED WORKERS

SHARED WORKERS

SERVICE WORKERS

SUMMARY

28 Best Practices

MAINTAINABILITY

PERFORMANCE

DEPLOYMENT

SUMMARY

A ES2018 and ES2019

ASYNCHRONOUS ITERATION

REST AND SPREAD OPERATORS FOR OBJECT LITERALS

PROMISE FINALLY() DEFINITION

REGULAR EXPRESSION ENHANCEMENTS

ARRAY FLATTENING METHODS

OBJECT.FROMENTRIES()

STRING TRIMMING METHODS

SYMBOL.PROTOTYPE.DESCRIPTION

OPTIONAL CATCH BINDING

MISCELLANEOUS ENHANCEMENTS

B Strict Mode

OPTING-IN

VARIABLES

OBJECTS

FUNCTIONS

eval()

eval AND ARGUMENTS

COERCION OF THIS

CLASSES AND MODULES

OTHER CHANGES

C JavaScript Libraries and Frameworks

FRAMEWORKS

GENERAL LIBRARIES

ANIMATION AND EFFECTS

D JavaScript Tools

PACKAGE MANAGERS

MODULE LOADERS

MODULE BUNDLERS

COMPILATION/TRANSPILATION TOOLS AND STATIC TYPE SYSTEMS

HIGH-PERFORMANCE SCRIPT TOOLS

EDITORS

BUILD TOOLS, AUTOMATION SYSTEMS, AND TASK RUNNERS

LINTERS AND FORMATTERS

MINIFIERS

UNIT TESTING

DOCUMENTATION GENERATORS

INDEX

END USER LICENSE AGREEMENT

List of Illustrations

Chapter 1

FIGURE 1-1

FIGURE 1-2

Chapter 3

FIGURE 3-1

FIGURE 3-2

FIGURE 3-3

Chapter 4

FIGURE 4-1

FIGURE 4-2

FIGURE 4-3

Chapter 8

FIGURE 8-1

FIGURE 8-2

FIGURE 8-3

FIGURE 8-4

FIGURE 8-5

FIGURE 8-6

Chapter 10

FIGURE 10-1

FIGURE 10-2

Chapter 12

FIGURE 12-1

FIGURE 12-2

FIGURE 12-3

Chapter 14

FIGURE 14-1

FIGURE 14-2

Chapter 16

FIGURE 16-1

FIGURE 16-2

FIGURE 16-3

FIGURE 16-4

FIGURE 16-5

FIGURE 16-6

FIGURE 16-7

FIGURE 16-8

FIGURE 16-9

FIGURE 16-10

Chapter 17

FIGURE 17-1

FIGURE 17-2

FIGURE 17-3

FIGURE 17-4

FIGURE 17-5

FIGURE 17-6

FIGURE 17-7

FIGURE 17-8

FIGURE 17-9

FIGURE 17-10

FIGURE 17-11

Chapter 18

FIGURE 18-1

FIGURE 18-2

FIGURE 18-3

FIGURE 18-4

FIGURE 18-5

FIGURE 18-6

FIGURE 18-7

FIGURE 18-8

FIGURE 18-9

FIGURE 18-10

FIGURE 18-11

FIGURE 18-12

FIGURE 18-13

FIGURE 18-14

FIGURE 18-15

FIGURE 18-16

FIGURE 18-17

Chapter 26

FIGURE 26-1

FIGURE 26-2

FIGURE 26-3

Guide

Cover

Table of Contents

Begin Reading

Pages

v

xlvii

xlviii

xlix

l

li

lii

liii

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

792

793

794

795

796

797

798

799

800

801

802

803

804

805

806

807

808

809

810

811

812

813

814

815

816

817

818

819

820

821

822

823

824

825

826

827

828

829

830

831

832

833

834

835

836

837

838

839

840

841

842

843

844

845

846

847

849

850

851

852

853

854

855

856

857

858

859

861

862

863

864

865

866

867

868

869

870

871

872

873

874

875

876

877

878

879

880

881

882

883

884

885

886

887

888

889

890

891

892

893

894

895

896

897

898

899

900

901

902

903

904

905

906

907

908

909

910

911

912

913

914

915

916

917

918

919

920

921

922

923

924

925

926

927

928

929

930

931

932

933

934

935

936

937

938

939

940

941

942

943

944

945

946

947

948

949

950

951

952

953

954

955

956

957

958

959

960

961

962

963

964

965

966

967

969

970

971

972

973

974

975

976

977

978

979

980

981

982

983

984

985

986

987

988

989

990

991

992

993

994

995

996

997

998

999

1000

1001

1002

1003

1004

1005

1006

1007

1008

1009

1010

1011

1012

1013

1014

1015

1016

1017

1018

1019

1020

1021

1022

1023

1024

1025

1026

1027

1028

1029

1030

1031

1032

1033

1035

1036

1037

1038

1039

1040

1041

1042

1043

1044

1045

1046

1047

1048

1049

1050

1051

1052

1053

1054

1055

1056

1057

1058

1059

1060

1061

1062

1063

1064

1065

1067

1068

1069

1070

1071

1072

1073

1074

1075

1076

1077

1078

1079

1080

1081

1082

1083

1084

1085

1086

1087

1088

1089

1090

1091

1092

1093

1095

1096

1097

1098

1099

1101

1102

1103

1104

1105

1106

1107

1108

1109

1110

1111

1112

1113

1114

1115

1116

1117

1118

1119

1120

1121

1122

1123

1124

1125

1126

1127

1128

1129

1130

1131

1132

1133

1134

1135

1136

1137

1138

1139

1140

1141

1142

1143

1144

1145

vi

vii

ix

xi

xiii

1146

PROFESSIONALJavaScript® for Web Developers

 

Matt Frisbie

 

 

 

 

 

 

 

 

FOREWORD

The industrial revolution was built with steel, and the Internet revolution has been built with JavaScript. Forged and strengthened through constant iteration over the past 25 years, JavaScript's dominance in application development is now hard to question, but that wasn't always the case.

It took only ten days for Brendan Eich to make the first version of JavaScript. It felt fragile, but as history would have it, first impressions aren't everything. Today, every aspect of JavaScript—every detail you'll learn in this book—is the product of hours of debate. Not every decision is ideal and no programming language is perfect, but if you judge one by its ubiquity alone, JavaScript perhaps comes close. It is the only language you can deploy everywhere: servers, desktop browsers, mobile web browsers, and even native mobile applications.

JavaScript is now used by software engineers of all experience levels and backgrounds. It's used by those who care about well-designed, elegant software as well as those who simply want to hack things together to achieve business goals.

How you'll use it is entirely up to you. That power is yours.

Over my last 15 years of developing software, JavaScript tools and best practices have changed dramatically. My experience with the language began in 2004—back when Geocities, Yahoo Groups, and Macromedia Flash player dominated the scene. JavaScript felt like a toy, and I played with some of the popular sandboxes at the time: RSS and MySpace Profile Pages. Helping others modify and customize their personal sites felt like the Wild West and got me hooked.

When I started my first company, configuring a host for your database took days and JavaScript was embedded into your HTML. There were no frontend “applications”—it was all mostly just piecemeal functions. As Ajax became more popular, spearheaded by jQuery, a new world unfolded and applications grew far more robust. That movement accelerated to a breakneck speed and then, suddenly, powerful frameworks were released. Front-end models! Data binding! Route management! Reactive views! It was during this front-end revolution that I moved to Silicon Valley to help start a company founded by Lady Gaga, and quickly, millions of users began using my code. Having now been in Silicon Valley for quite some time, I've led open-source contributions, mentored more software engineers than I can count, and hit a bit of luck, too. My last company was acquired by Stripe in 2018, where I now work to build economic infrastructure for the Internet.

I had the pleasure of meeting Matt the day he first flew out to Palo Alto to lead engineering at a small startup. It was called Claco, and I had recently joined on as an advisor. His energy and passion for great software was apparent, and the fledgling company quickly produced a beautiful product. As has been the Silicon Valley standard since the days of HP, this startup was founded out of a house. But this was no normal home. It was a “hacker house,” where ten or so brilliant software engineers lived at any given moment. Although this was not high-class living—discarded bunk beds and chairs found on the street were commonplace—the quantity and quality of code written there, on a daily basis, was staggering. After work hours, most would simply shift their focus and instead build their side projects for another couple of hours. Those who didn't know how to code were frequently inspired, would get the itch to learn, and become capable within just weeks.

Matt was a driving force at the center of this productivity. He was the most experienced software engineer in the house, and also happened to be the cleanest and most professional, too. Having a formal degree in computer engineering wasn't the norm, so when you saw algorithms, performance calculations, and code written on the windows or whiteboard, you knew Matt was building his next big project. As I got to know him, we became close friends. His intellect, fondness for mentorship, and ability to turn most anything into an A- joke were all qualities I admired.

Even though Matt is an incredibly talented software engineer and engineering leader, it is truly his unique set of experiences and knowledge that make him one of the most qualified people in the world to write this book.

He hasn't just spent his time teaching others—he's done the work.

At Claco, he built out multiple entire products, end-to-end, to help teachers provide a better learning experience in their classrooms. At DoorDash, where he was the first engineer, he built out a robust logistics and delivery network that achieved hyper-growth and is now worth upwards of twelve billion dollars. Finally, at Google, Matt's software has been used by billions of people across the planet.

Massive ownership, massive growth, and massive scale. Most software engineers can go their entire career and experience only one of these, if they're lucky. Matt has not only done all three but has also become a best-selling author in his “spare time,” having written two other books on JavaScript and Angular. Honestly, I just hope his next book unveils the time machine schematics he's clearly hiding from us.

This book is a robust tool filled to the brim with JavaScript knowledge and real-world perspectives. I'm excited for you to continue learning and build whatever you can dream up. Pick it apart, take notes, and don't forget to open up that code editor—after all, the internet revolution is still in the early days!

—Zach Tratar

Software engineer at Stripe

Former co-founder and CEO of Jobstart

INTRODUCTION

A tech lead at Google once shared with me a compelling perspective on JavaScript: It's not really a cohesive programming language—at least not in the formal sense. The ECMA-262 specification defines JavaScript, but there is no single true implementation of it. What's more, the language is far from hermetic. It swims in a veritable ocean of adjacent specifications that govern APIs for everything that JavaScript touches: the DOM, network requests, system hardware, storage, events, files, cryptography, and hundreds of others. Web browsers and their various JavaScript engines all implement these specifications as they see fit. Chrome has Blink/V8, Firefox has Gecko/SpiderMoney, and Safari has WebKit/JavaScriptCore. Browsers will run nearly all JavaScript in a way that conforms to the specifications, but the web is littered with examples of each browser's idiosyncrasies. Therefore, JavaScript is more accurately characterized as a constellation of browser implementations.

Although web purists might insist that JavaScript should not be an integral component of web pages, they must concede that the modern web is severely diminished without it. It is not hyperbolic to say that JavaScript is virtually inescapable: Phones, computers, tablets, televisions, game consoles, smart watches, refrigerators, and even cars now feature web browsers that run JavaScript. Nearly three billion people now use a smartphone that includes a web browser. The language's vibrant community churns out a deluge of high-quality open source projects. Browsers now feature first-class support for APIs that emulate native mobile apps. In Stack Overflow's 2019 Developer Survey, JavaScript was voted the most popular programming language for the seventh consecutive year.

The JavaScript renaissance is upon us.

In this book, JavaScript is covered from its very beginning in the earliest Netscape browsers to the present-day incarnations flush with support for a dizzying spectrum of browser technologies. The book covers a large number of advanced topics in meticulous detail, yet it ensures the reader understands how to use these topics and where they are appropriate. In short, you learn how to apply JavaScript solutions to business problems faced by web developers everywhere.

WHO THIS BOOK IS FOR

This book is aimed at three groups of readers:

Experienced developers familiar with object-oriented programming who are looking to learn JavaScript as it relates to traditional OO languages such as Java and C++

Web application developers attempting to enhance the usability of their web sites and web applications

Novice JavaScript developers aiming to better understand the language

In addition, familiarity with the following related technologies is a strong indicator that this book is for you:

Java

PHP

Python

Ruby

Golang

HTML

CSS

This book is not aimed at beginners lacking a basic computer science background or those looking to add some simple user interactions to websites. These readers should instead refer to Wrox's Beginning JavaScript, 5th Edition (Wiley, 2015).

WHAT THIS BOOK COVERS

Professional JavaScript for Web Developers, 4th Edition, provides a developer-level introduction, along with the more advanced and useful features of JavaScript.

The book begins with an exploration of how JavaScript originated and evolved into what it is today. A detailed discussion of the components that make up a JavaScript implementation follows, with specific focus on standards such as ECMAScript and the Document Object Model (DOM).

Building on that base, the book moves on to cover basic concepts of JavaScript, including classes, promises, iterators, and proxies. This is followed by an in-depth examination of client detection, events, animations, forms, errors, and JSON.

The last part of the book is focused on the newest and most important specifications that have emerged in the past few years. This includes fetch, modules, web workers, service workers, and a collection of emerging APIs.

HOW THIS BOOK IS STRUCTURED

This book comprises the following chapters:

What Is JavaScript?—

Explains the origins of JavaScript: where it came from, how it evolved, and what it is today. Concepts introduced include the relationship between JavaScript and ECMAScript, the Document Object Model (DOM), and the Browser Object Model (BOM). A discussion of the relevant standards from the European Computer Manufacturer's Association (ECMA) and the World Wide Web Consortium (W3C) is also included.

JavaScript in HTML—

Examines how JavaScript is used in conjunction with HTML to create dynamic web pages. Introduces the various ways of embedding JavaScript into a page and includes a discussion surrounding the JavaScript content-type and its relationship to the

<script>

element.

Language Basics—

Introduces basic language concepts, including syntax and flow control statements. Explains the syntactic similarities of JavaScript and other C-based languages and points out the differences. Type coercion is introduced as it relates to built-in operators. Covers all language primitives, including the

Symbol

type.

Variables, Scope, and Memory—

Explores how variables are handled in JavaScript given their loosely typed nature. A discussion of the differences between primitive and reference values is included, as is information about execution context as it relates to variables. Also, a discussion about garbage collection in JavaScript covers how memory is reclaimed when variables go out of scope.

Basic Reference Types—

Covers all of the details regarding JavaScript's built-in reference types, such as

Date

,

Regexp

, primitives, and primitive wrappers. Each reference type is discussed both in theory and in how they relate to browser implementations.

Collection Reference Types—

Continues the book's coverage of built-in reference types with

Object

,

Array

,

Map

,

WeakMap

,

Set

, and

WeakSet

.

Iterators and Generators—

Introduces two new fundamental concepts in recent versions of ECMAScript: iterators and generators. Each is discussed both in terms of its most fundamental behavior as well as how it is used in relation to existing language constructs.

Objects, Classes, and Object-Oriented Programming—

Explains how to use classes and object-oriented programming in JavaScript. Begins with an in-depth discussion of the JavaScript

Object

type and continues into coverage of prototypal inheritance. Following this is a complete discussion of ES6 classes and how they are a close sibling of prototypal inheritance.

Proxies and Reflect—

Introduces two closely related concepts:

Proxy

and the

Reflect

API. These can be used to intercept and shim additional behavior into fundamental operations within the language.

Functions—

Explores one of the most powerful aspects of JavaScript: function expressions. Topics include closures, the

this

object, the module pattern, the creation of private object members, arrow functions, default parameters, and spread operators.

Promises and Async Programming—

Introduces two new closely related asynchronous programming constructs: the

Promise

type and

async

/

await

. The chapter begins with a discussion of the asynchronous JavaScript paradigm and continues into coverage of how promises are used and their relationship to async functions.

The Browser Object Model—

Introduces the Browser Object Model (BOM), which is responsible for objects allowing interaction with the browser itself. Each of the BOM objects is covered, including

window

,

document

,

location

,

navigator

, and

screen

.

Client Detection—

Explains various approaches to detecting the client machine and its capabilities. Different techniques include capability detection and user-agent string detection. The chapter covers the pros and cons of each approach, as well as situational appropriateness.

The Document Object Model—

Introduces the Document Object Model (DOM) objects available in JavaScript as defined in DOM Level 1. A brief introduction to XML and its relationship to the DOM gives way to an in-depth exploration of the entire DOM and how it allows developers to manipulate a page.

DOM Extensions—

Explains how other APIs, as well as the browsers themselves, extend the DOM with more functionality. Topics include the Selectors API, the Element Traversal API, and HTML5 extensions.

DOM Levels 2 and 3—

Builds on the previous two chapters, explaining how DOM Levels 2 and 3 augmented the DOM with additional properties, methods, and objects. Includes coverage of DOM4 additions, such as mutation observers.

Events—

Explains the nature of events in JavaScript, where they originated, and how the DOM redefined how events should work.

Animation and Graphics with Canvas—

Discusses the

<canvas>

tag and how to use it to create on-the-fly graphics. Both the 2D context and the WebGL (3D) context are covered, providing you with a good starting point for creating animations and games. Includes coverage of both WebGL1 and WebGL2.

Scripting Forms—

Explores using JavaScript to enhance form interactions and work around browser limitations. Discussion focuses on individual form elements such as text boxes and select boxes and on data validation and manipulation.

JavaScript APIs—

Covers an assortment of JavaScript APIs, including Atomics, Encoding, File, Blob, Notifications, Streams, Timing, Web Components, and Web Cryptography.

Error Handling and Debugging—

Discusses how browsers handle errors in JavaScript code and presents several ways to handle errors. Debugging tools and techniques are also discussed for each browser, including recommendations for simplifying the debugging process.

XML in JavaScript—

Presents the features of JavaScript used to read and manipulate eXtensible Markup Language (XML) data. Explains the differences in support and objects in various web browsers and offers suggestions for easier cross-browser coding. This chapter also covers the use of eXtensible Stylesheet Language Transformations (XSLT) to transform XML data on the client.

JSON—

Introduces the JSON data format as an alternative to XML. Discusses browser-native JSON parsing and serialization as well as security considerations when using JSON.

Network Requests and Remote Resources

—Explores all of the most common ways that data and assets are requested by the browser. Includes coverage of the legacy

XMLHttpRequest

as well as the modern Fetch API.

Client-Side Storage

—Discusses how to detect when an application is offline and provides various techniques for storing data on the client machine. Begins with a discussion of the most commonly supported feature, cookies, and then discusses newer functionality such as Web Storage and IndexedDB.

Modules

—Discusses the module pattern and its implications on codebases. Following this, the chapter covers pre-ES6 module loaders such as CommonJS, AMD, and UMD. Ends with detailed coverage on the new ES6 module pattern and how to use it properly.

Workers

—Covers dedicated workers, shared workers, and service workers in-depth. Includes a discussion of how workers behave both at the operating system and browser level, as well as strategies for how best to use the various types of workers.

Best Practices

—Explores approaches to working with JavaScript in an enterprise environment. Techniques for better maintainability are discussed, including coding techniques, formatting, and general programming practices. The chapter also covers execution performance and introduces several techniques for speed optimization. Last, the chapter covers deployment issues, including how to create a build process.

WHAT YOU NEED TO USE THIS BOOK

To run the samples in the book, you need the following:

Any modern operating system, such as Windows, Linux, Mac OS, Android, or iOS

Any modern browser, such as IE11+, Edge 12+, Firefox 26+, Chrome 39+, Safari 10+, Opera 26+, or iOS Safari 10+

The complete source code is available for download from https://www.wiley.com/en-us/Professional+JavaScript+for+Web+Developers%2C+4th+Edition-p-9781119366447.

1What Is JavaScript?

WHAT'S IN THIS CHAPTER?

Review of JavaScript history

What JavaScript is

How JavaScript and ECMAScript are related

The different versions of JavaScript

WROX.COM DOWNLOADS FOR THIS CHAPTER

Please note that all the code examples for this chapter are available as a part of this chapter's code download on the book's website at www.wrox.com/go/projavascript4e on the Download Code tab.

When JavaScript first appeared in 1995, its main purpose was to handle some of the input validation that had previously been left to server-side languages such as Perl. Prior to that time, a round-trip to the server was needed to determine if a required field had been left blank or an entered value was invalid. Netscape Navigator sought to change that with the introduction of JavaScript. The capability to handle some basic validation on the client was an exciting new feature at a time when use of telephone modems was widespread. The associated slow speeds turned every trip to the server into an exercise in patience.

Since that time, JavaScript has grown into an important feature of every major web browser on the market. No longer bound to simple data validation, JavaScript now interacts with nearly all aspects of the browser window and its contents. JavaScript is recognized as a full programming language, capable of complex calculations and interactions, including closures, anonymous (lambda) functions, and even metaprogramming. JavaScript has become such an important part of the web that even alternative browsers, including those on mobile phones and those designed for users with disabilities, support it. Even Microsoft, with its own client-side scripting language called VBScript, ended up including its own JavaScript implementation in Internet Explorer from its earliest version.

The rise of JavaScript from a simple input validator to a powerful programming language could not have been predicted. JavaScript is at once a very simple and very complicated language that takes minutes to learn but years to master. To begin down the path to using JavaScript's full potential, it is important to understand its nature, history, and limitations.

A SHORT HISTORY

As the web gained popularity, a gradual demand for client-side scripting languages developed. At the time, most Internet users were connecting over a 28.8 kbps modem even though web pages were growing in size and complexity. Adding to users' pain was the large number of round-trips to the server required for simple form validation. Imagine filling out a form, clicking the Submit button, waiting 30 seconds for processing, and then being met with a message indicating that you forgot to complete a required field. Netscape, at that time on the cutting edge of technological innovation, began seriously considering the development of a client-side scripting language to handle simple processing.

In 1995, a Netscape developer named Brendan Eich began developing a scripting language called Mocha (later renamed as LiveScript) for the release of Netscape Navigator 2. The intention was to use it both in the browser and on the server, where it was to be called LiveWire.

Netscape entered into a development alliance with Sun Microsystems to complete the implementation of LiveScript in time for release. Just before Netscape Navigator 2 was officially released, Netscape changed LiveScript's name to JavaScript to capitalize on the buzz that Java was receiving from the press.

Because JavaScript 1.0 was such a hit, Netscape released version 1.1 in Netscape Navigator 3. The popularity of the fledgling web was reaching new heights, and Netscape had positioned itself to be the leading company in the market. At this time, Microsoft decided to put more resources into a competing browser named Internet Explorer. Shortly after Netscape Navigator 3 was released, Microsoft introduced Internet Explorer 3 with a JavaScript implementation called JScript (so called to avoid any possible licensing issues with Netscape). This major step for Microsoft into the realm of web browsers in August 1996 is now a date that lives in infamy for Netscape, but it also represented a major step forward in the development of JavaScript as a language.

Microsoft's implementation of JavaScript meant that there were two different JavaScript versions floating around: JavaScript in Netscape Navigator and JScript in Internet Explorer. Unlike C and many other programming languages, JavaScript had no standards governing its syntax or features, and the three different versions only highlighted this problem. With industry fears mounting, it was decided that the language must be standardized.

In 1997, JavaScript 1.1 was submitted to the European Computer Manufacturers Association (Ecma) as a proposal. Technical Committee #39 (TC39) was assigned to "standardize the syntax and semantics of a general purpose, cross-platform, vendor-neutral scripting language” (www.ecma-international.org/memento/TC39.htm). Made up of programmers from Netscape, Sun, Microsoft, Borland, NOMBAS, and other companies with interest in the future of scripting, TC39 met for months to hammer out ECMA-262, a standard defining a new scripting language named ECMAScript (often pronounced as “ek-ma-script”).

The following year, the International Organization for Standardization and International Electrotechnical Commission (ISO/IEC) also adopted ECMAScript as a standard (ISO/IEC-16262). Since that time, browsers have tried, with varying degrees of success, to use ECMAScript as a basis for their JavaScript implementations.

JAVASCRIPT IMPLEMENTATIONS

Though JavaScript and ECMAScript are often used synonymously, JavaScript is much more than just what is defined in ECMA-262. Indeed, a complete JavaScript implementation is made up of the following three distinct parts (see Figure 1-1):

FIGURE 1-1

The Core (ECMAScript)

The Document Object Model (DOM)

The Browser Object Model (BOM)

ECMAScript

ECMAScript, the language defined in ECMA-262, isn't tied to web browsers. In fact, the language has no methods for input or output whatsoever. ECMA-262 defines this language as a base upon which more-robust scripting languages may be built. Web browsers are just one host environment in which an ECMAScript implementation may exist. A host environment provides the base implementation of ECMAScript and implementation extensions designed to interface with the environment itself. Extensions, such as the Document Object Model (DOM), use ECMAScript's core types and syntax to provide additional functionality that's more specific to the environment. Other host environments include NodeJS, a server-side JavaScript platform, and the increasingly obsolete Adobe Flash.

What exactly does ECMA-262 specify if it doesn't reference web browsers? On a very basic level, it describes the following parts of the language:

Syntax

Types

Statements

Keywords

Reserved words

Operators

Global objects

ECMAScript is simply a description of a language implementing all of the facets described in the specification. JavaScript implements ECMAScript, but so does Adobe ActionScript.

ECMAScript Editions

The different versions of ECMAScript are defined as editions (referring to the edition of ECMA-262 in which that particular implementation is described). The most recent edition of ECMA-262 is edition 7, released in 2016. The first edition of ECMA-262 was essentially the same as Netscape's JavaScript 1.1 but with all references to browser-specific code removed and a few minor changes: ECMA-262 required support for the Unicode standard (to support multiple languages) and that objects be platform-independent (Netscape JavaScript 1.1 actually had different implementations of objects, such as the Date object, depending on the platform). This was a major reason why JavaScript 1.1 and 1.2 did not conform to the first edition of ECMA-262.

The second edition of ECMA-262 was largely editorial. The standard was updated to get into strict agreement with ISO/IEC-16262 and didn't feature any additions, changes, or omissions. ECMAScript implementations typically don't use the second edition as a measure of conformance.

The third edition of ECMA-262 was the first real update to the standard. It provided updates to string handling, the definition of errors, and numeric outputs. It also added support for regular expressions, new control statements, try-catch exception handling, and small changes to better prepare the standard for internationalization. To many, this marked the arrival of ECMAScript as a true programming language.

The fourth edition of ECMA-262 was a complete overhaul of the language. In response to the popularity of JavaScript on the web, developers began revising ECMAScript to meet the growing demands of web development around the world. In response, Ecma TC39 reconvened to decide the future of the language. The resulting specification defined an almost completely new language based on the third edition. The fourth edition includes strongly typed variables, new statements and data structures, true classes and classical inheritance, and new ways to interact with data.

As an alternate proposal, a specification called “ECMAScript 3.1,” was developed as a smaller evolution of the language by a subcommittee of TC39, who believed that the fourth edition was too big of a jump for the language. The result was a smaller proposal with incremental changes to ECMAScript that could be implemented on top of existing JavaScript engines. Ultimately, the ES3.1 subcommittee won over support from TC39, and the fourth edition of ECMA-262 was abandoned before officially being published.

ECMAScript 3.1 became ECMA-262, fifth edition, and was officially published on December 3, 2009. The fifth edition sought to clarify perceived ambiguities of the third edition and introduce additional functionality. The new functionality includes a native JSON object for parsing and serializing JSON data, methods for inheritance and advanced property definition, and the inclusion of a new strict mode that slightly augments how ECMAScript engines interpret and execute code. The fifth edition saw a maintenance revision in June 2011; this was merely for corrections in the specification and introduced no new language or library features.

The sixth edition of ECMA-262—colloquially referred to as ES6, ES2015, or ES Harmony—was published in June 2015, and contains arguably the most important collection of enhancements to the specification since its inception. ES6 adds formal support for classes, modules, iterators, generators, arrow functions, promises, reflection, proxies, and a host of new data types.

The seventh edition of ECMA-262, dubbed ES7 or ES2016, was published in June of 2016. This revision included only a handful of syntactical additions such as Array.prototype.includes and the exponentiation operator.

The eighth edition of ECMA-262, called ES8 or ES2017, was finalized in January of 2017. This revision included asynchronous iteration, rest and spread properties, a collection of new regular expression features, a Promise finally() catchall handler, and template literal revisions.

The ninth edition of ECMA-262 is still being finalized, but it already has a large number of features in stage 3. Its most significant addition will likely be dynamic importing of ES6 modules.

What Does ECMAScript Conformance Mean?

ECMA-262 lays out the definition of ECMAScript conformance. To be considered an implementation of ECMAScript, an implementation must do the following:

Support all "types, values, objects, properties, functions, and program syntax and semantics” as they are described in ECMA-262.

Support the Unicode character standard.

Additionally, a conforming implementation may do the following:

Add “additional types, values, objects, properties, and functions” that are not specified in ECMA-262. ECMA-262 describes these additions as primarily new objects or new properties of objects not given in the specification.

Support “program and regular expression syntax” that is not defined in ECMA-262 (meaning that the built-in regular-expression support is allowed to be altered and extended).

These criteria give implementation developers a great amount of power and flexibility for developing new languages based on ECMAScript, which partly accounts for its popularity.

ECMAScript Support in Web Browsers

Netscape Navigator 3 shipped with JavaScript 1.1 in 1996. That same JavaScript 1.1 specification was then submitted to Ecma as a proposal for the new standard, ECMA-262. With JavaScript's explosive popularity, Netscape was very happy to start developing version 1.2. There was, however, one problem: Ecma hadn't yet accepted Netscape's proposal.

Shortly after Netscape Navigator 3 was released, Microsoft introduced Internet Explorer 3. This version of IE shipped with JScript 1.0, which was supposed to be equivalent to JavaScript 1.1. However, because of undocumented and improperly replicated features, JScript 1.0 fell far short of JavaScript 1.1.

Netscape Navigator 4 was shipped in 1997 with JavaScript 1.2 before the first edition of ECMA-262 was accepted and standardized later that year. As a result, JavaScript 1.2 is not compliant with the first edition of ECMAScript even though ECMAScript was supposed to be based on JavaScript 1.1.

The next update to JScript occurred in Internet Explorer 4 with JScript version 3.0 (version 2.0 was released in Microsoft Internet Information Server version 3.0 but was never included in a browser). Microsoft put out a press release touting JScript 3.0 as the first truly Ecma-compliant scripting language in the world. At that time, ECMA-262 hadn't yet been finalized, so JScript 3.0 suffered the same fate as JavaScript 1.2: it did not comply with the final ECMAScript standard.

Netscape opted to update its JavaScript implementation in Netscape Navigator 4.06 to JavaScript 1.3, which brought Netscape into full compliance with the first edition of ECMA-262. Netscape added support for the Unicode standard and made all objects platform-independent while keeping the features that were introduced in JavaScript 1.2.

When Netscape released its source code to the public as the Mozilla project, it was anticipated that JavaScript 1.4 would be shipped with Netscape Navigator 5. However, a radical decision to completely redesign the Netscape code from the bottom up derailed that effort. JavaScript 1.4 was released only as a server-side language for Netscape Enterprise Server and never made it into a web browser.

By 2008, the five major web browsers (Internet Explorer, Firefox, Safari, Chrome, and Opera) all complied with the third edition of ECMA-262. Internet Explorer 8 was the first to start implementing the fifth edition of ECMA-262 specification and delivered complete support in Internet Explorer 9. Firefox 4 soon followed suit. The following table lists ECMAScript support in the most popular web browsers.

BROWSER

ECMASCRIPT COMPLIANCE

Netscape Navigator 2

Netscape Navigator 3

Netscape Navigator 4–4.05

Netscape Navigator 4.06–4.79

Edition 1

Netscape 6+ (Mozilla 0.6.0+)

Edition 3

Internet Explorer 3

Internet Explorer 4

Internet Explorer 5

Edition 1

Internet Explorer 5.5–8

Edition 3

Internet Explorer 9

Edition 5

*

Internet Explorer 10–11

Edition 5

Edge 12+

Edition 6

Opera 6–7.1

Edition 2

Opera 7.2+

Edition 3

Opera 15–28

Edition 5

Opera 29–35

Edition 6

*

Opera 36+

Edition 6

Safari 1–2.0.

x

Edition 3

*

Safari 3.1–5.1

Edition 5

*

Safari 6–8

Edition 5

Safari 9+

Edition 6

iOS Safari 3.2–5.1

Edition 5

*

iOS Safari 6–8.4

Edition 5

iOS Safari 9.2+

Edition 6

Chrome 1–3

Edition 3

Chrome 4–22

Edition 5

*

Chrome 23+

Edition 5

Chrome 42–48

Edition 6

*

Chrome 49+

Edition 6

Firefox 1–2

Edition 3

Firefox 3.0.

x

–20

Edition 5

*

Firefox 21–44

Edition 5

Firefox 45+

Edition 6

*Incomplete implementations

The Document Object Model

The Document Object Model (DOM) is an application programming interface (API) for XML that was extended for use in HTML. The DOM maps out an entire page as a hierarchy of nodes. Each part of an HTML or XML page is a type of node containing different kinds of data. Consider the following HTML page:

<html> <head> <title>Sample Page</title> </head> <body> <p> Hello World!</p> </body></html>

This code can be diagrammed into a hierarchy of nodes using the DOM (see Figure 1-2).

FIGURE 1-2

By creating a tree to represent a document, the DOM allows developers an unprecedented level of control over its content and structure. Nodes can be removed, added, replaced, and modified easily by using the DOM API.

Why the DOM Is Necessary

With Internet Explorer 4 and Netscape Navigator 4 each supporting different forms of Dynamic HTML (DHTML), developers for the first time could alter the appearance and content of a web page without reloading it. This represented a tremendous step forward in web technology but also a huge problem. Netscape and Microsoft went separate ways in developing DHTML, thus ending the period when developers could write a single HTML page that could be accessed by any web browser.

It was decided that something had to be done to preserve the cross-platform nature of the web. The fear was that if someone didn't rein in Netscape and Microsoft, the web would develop into two distinct factions that were exclusive to targeted browsers. It was then that the World Wide Web Consortium (W3C), the body charged with creating standards for web communication, began working on the DOM.

DOM Levels

DOM Level 1 became a W3C recommendation in October 1998. It consisted of two modules: the DOM Core, which provided a way to map the structure of an XML-based document to allow for easy access to and manipulation of any part of a document, and the DOM HTML, which extended the DOM Core by adding HTML-specific objects and methods.

NOTE   Note that the DOM is not JavaScript-specific and indeed has been implemented in numerous other languages. For web browsers, however, the DOM has been implemented using ECMAScript and now makes up a large part of the JavaScript language.

Whereas the goal of DOM Level 1 was to map out the structure of a document, the aims of DOM Level 2 were much broader. This extension of the original DOM added support for mouse and user-interface events (long supported by DHTML), ranges, and traversals (methods to iterate over a DOM document), and support for Cascading Style Sheets (CSS) through object interfaces. The original DOM Core introduced in Level 1 was also extended to include support for XML namespaces.

DOM Level 2 introduced the following new modules of the DOM to deal with new types of interfaces:

DOM views

—Describes interfaces to keep track of the various views of a document (the document before and after CSS styling, for example)

DOM events

—Describes interfaces for events and event handling

DOM style

—Describes interfaces to deal with CSS-based styling of elements

DOM traversal and range

—Describes interfaces to traverse and manipulate a document tree

DOM Level 3 further extends the DOM with the introduction of methods to load and save documents in a uniform way (contained in a new module called DOM Load and Save) and methods to validate a document (DOM Validation). In Level 3, the DOM Core is extended to support all of XML 1.0, including XML Infoset, XPath, and XML Base.

Presently, the W3C no longer maintains the DOM as a set of levels, but rather as the DOM Living Standard, snapshots of which are termed DOM4. Among its introductions is the addition of Mutation Observers to replace Mutation Events.

NOTE   When reading about the DOM, you may come across references to DOM Level 0. Note that there is no standard called DOM Level 0; it is simply a reference point in the history of the DOM. DOM Level 0 is considered to be the original DHTML supported in Internet Explorer 4.0 and Netscape Navigator 4.0.

Other DOMs

Aside from the DOM Core and DOM HTML interfaces, several other languages have had their own DOM standards published. The languages in the following list are XML-based, and each DOM adds methods and interfaces unique to a particular language:

Scalable Vector Graphics (SVG) 1.0

Mathematical Markup Language (MathML) 1.0

Synchronized Multimedia Integration Language (SMIL)

Additionally, other languages have developed their own DOM implementations, such as Mozilla's XML User Interface Language (XUL). However, only the languages in the preceding list are standard recommendations from W3C.

DOM Support in Web Browsers

The DOM had been a standard for some time before web browsers started implementing it. Internet Explorer made its first attempt with version 5, but it didn't have any realistic DOM support until version 5.5, when it implemented most of DOM Level 1. Internet Explorer didn't introduce new DOM functionality in versions 6 and 7, though version 8 introduced some bug fixes.

For Netscape, no DOM support existed until Netscape 6 (Mozilla 0.6.0) was introduced. After Netscape 7, Mozilla switched its development efforts to the Firefox browser. Firefox 3+ supports all of Level 1, nearly all of Level 2, and some parts of Level 3. (The goal of the Mozilla development team was to build a 100 percent standards-compliant browser, and their work paid off.)

DOM support became a huge priority for most browser vendors, and efforts have been ongoing to improve support with each release. The following table shows DOM support for popular browsers.

BROWSER

DOM COMPLIANCE

Netscape Navigator 1.–4.x

Netscape 6+ (Mozilla 0.6.0+)

Level 1, Level 2 (almost all), Level 3 (partial)

Internet Explorer 2–4.x

Internet Explorer 5

Level 1 (minimal)

Internet Explorer 5.5–8

Level 1 (almost all)

Internet Explorer 9+

Level 1, Level 2, Level 3

Edge

Level 1, Level 2, Level 3

Opera 1–6

Opera 7–8.x

Level 1 (almost all), Level 2 (partial)

Opera 9–9.9

Level 1, Level 2 (almost all), Level 3 (partial)

Opera 10+

Level 1, Level 2, Level 3 (partial)

Safari 1.0.x

Level 1

Safari 2+

Level 1, Level 2 (partial), Level 3 (partial)

iOS Safari 3.2+

Level 1, Level 2 (partial), Level 3 (partial)

Chrome 1+

Level 1, Level 2 (partial), Level 3 (partial)

Firefox 1+

Level 1, Level 2 (almost all), Level 3 (partial)

NOTE   The content of this compatibility table is changing all the time and should only be used as a historical reference.

The Browser Object Model

The Internet Explorer 3 and Netscape Navigator 3 browsers featured a Browser Object Model (BOM) that allowed access and manipulation of the browser window. Using the BOM, developers can interact with the browser outside of the context of its displayed page. What made the BOM truly unique, and often problematic, was that it was the only part of a JavaScript implementation that had no related standard. This changed with the introduction of HTML5, which sought to codify much of the BOM as part of a formal specification. Thanks to HTML5, a lot of the confusion surrounding the BOM has dissipated.

Primarily, the BOM deals with the browser window and frames, but generally any browser-specific extension to JavaScript is considered to be a part of the BOM. The following are some such extensions:

The capability to pop up new browser windows

The capability to move, resize, and close browser windows

The

navigator

object, which provides detailed information about the browser

The

location

object, which gives detailed information about the page loaded in the browser

The

screen

object, which gives detailed information about the user's screen resolution

The

performance

object, which gives detailed information about the browser's memory consumption, navigational behavior, and timing statistics

Support for cookies

Custom objects such as

XMLHttpRequest

and Internet Explorer's

ActiveXObject

Because no standards existed for the BOM for a long time, each browser has its own implementation. There are some de facto standards, such as having a window object and a navigator object, but each browser defines its own properties and methods for these and other objects. With HTML5 now available, the implementation details of the BOM are expected to grow in a much more compatible way. A detailed discussion of the BOM is included in the chapter “Browser Object Model.”

JAVASCRIPT VERSIONS

Mozilla, as a descendant from the original Netscape, is the only browser vendor that has continued the original JavaScript version-numbering sequence. When the Netscape source code was spun off into an open-source project (named the Mozilla Project), the last browser version of JavaScript was 1.3. (As mentioned previously, version 1.4 was implemented on the server exclusively.) As the Mozilla Foundation continued work on JavaScript, adding new features, keywords, and syntaxes, the JavaScript version number was incremented. The following table shows the JavaScript version progression in Netscape/Mozilla browsers.

BROWSER

JAVASCRIPT VERSION

Netscape Navigator 2

1.0

Netscape Navigator 3

1.1

Netscape Navigator 4

1.2

Netscape Navigator 4.06

1.3

Netscape 6+ (Mozilla 0.6.0+)

1.5

Firefox 1

1.5

Firefox 1.5

1.6

Firefox 2

1.7

Firefox 3

1.8

Firefox 3.5

1.8.1

Firefox 3.6

1.8.2

Firefox 4

1.8.5

The numbering scheme was based on the idea that Firefox 4 would feature JavaScript 2.0, and each increment in the version number prior to that point indicates how close the JavaScript implementation is to the 2.0 proposal. Though this was the original plan, the evolution of JavaScript happened in such a way that this was no longer possible. There is currently no target implementation for JavaScript 2.0, and this style of versioning ceased past the Firefox 4 release.

NOTE   It's important to note that only the Netscape/Mozilla browsers followed this versioning scheme. Internet Explorer, for example, has different version numbers for JScript. These JScript versions don't correspond whatsoever to the JavaScript versions mentioned in the preceding table. Furthermore, most browsers talk about JavaScript support in relation to their level of ECMAScript compliance and DOM support.

SUMMARY