├── .gitignore
├── Ch03
    ├── AddExample01.htm
    ├── AddExample02.htm
    ├── AddExample03.htm
    ├── AssignmentOperatorsExample01.htm
    ├── BitwiseAndExample01.htm
    ├── BitwiseNotExample01.htm
    ├── BitwiseOrExample01.htm
    ├── BitwiseXorExample01.htm
    ├── BooleanExample01.htm
    ├── BooleanExample02.htm
    ├── BreakStatementExample01.htm
    ├── BreakStatementExample02.htm
    ├── ConditionalOperatorExample01.htm
    ├── ContinueStatementExample01.htm
    ├── ContinueStatementExample02.htm
    ├── DivideExample01.htm
    ├── DoWhileStatementExample01.htm
    ├── EqualityOperatorsExample01.htm
    ├── EqualityOperatorsExample02.htm
    ├── EqualityOperatorsExample03.htm
    ├── ForInStatementExample01.htm
    ├── ForStatementExample01.htm
    ├── ForStatementExample02.htm
    ├── ForStatementExample03.htm
    ├── ForStatementExample04.htm
    ├── FunctionExample01.htm
    ├── FunctionExample02.htm
    ├── FunctionExample03.htm
    ├── FunctionExample04.htm
    ├── FunctionExample05.htm
    ├── FunctionExample06.htm
    ├── FunctionExample07.htm
    ├── FunctionExample08.htm
    ├── FunctionExample09.htm
    ├── FunctionExample10.htm
    ├── IfStatementExample01.htm
    ├── IfStatementExample02.htm
    ├── IncrementDecrementExample01.htm
    ├── IncrementDecrementExample02.htm
    ├── IncrementDecrementExample03.htm
    ├── IncrementDecrementExample04.htm
    ├── LeftShiftExample01.htm
    ├── LogicalAndExample01.htm
    ├── LogicalAndExample02.htm
    ├── LogicalNotExample01.htm
    ├── LogicalNotExample02.htm
    ├── LogicalOrExample01.htm
    ├── LogicalOrExample02.htm
    ├── ModulusExample01.htm
    ├── MultiplyExample01.htm
    ├── NullExample01.htm
    ├── NullExample02.htm
    ├── NumberExample01.htm
    ├── NumberExample02.htm
    ├── NumberExample03.htm
    ├── NumberExample04.htm
    ├── NumberExample05.htm
    ├── NumberExample06.htm
    ├── NumberExample07.htm
    ├── NumberExample08.htm
    ├── RelationalOperatorsExample01.htm
    ├── SignedRightShiftExample01.htm
    ├── SignedRightShiftExample02.htm
    ├── StringExample01.htm
    ├── StringExample02.htm
    ├── StringExample03.htm
    ├── SubtractExample01.htm
    ├── SwitchStatementExample01.htm
    ├── SwitchStatementExample02.htm
    ├── SwitchStatementExample03.htm
    ├── SwitchStatementExample04.htm
    ├── TypeofExample01.htm
    ├── UnaryPlusMinusExample01.htm
    ├── UnaryPlusMinusExample02.htm
    ├── UndefinedExample01.htm
    ├── UndefinedExample02.htm
    ├── UndefinedExample03.htm
    ├── UndefinedExample04.htm
    ├── UnsignedRightShiftExample01.htm
    ├── UnsignedRightShiftExample02.htm
    ├── WhileStatementExample01.htm
    └── WithStatementExample01.htm
├── Ch04
    ├── DeterminingTypeExample01.htm
    ├── DynamicPropertiesExample01.htm
    ├── DynamicPropertiesExample02.htm
    ├── ExecutionContextExample01.htm
    ├── ExecutionContextExample02.htm
    ├── ExecutionContextExample03.htm
    ├── ExecutionContextExample04.htm
    ├── ExecutionContextExample05.htm
    ├── ExecutionContextExample06.htm
    ├── ExecutionContextExample07.htm
    ├── FunctionArgumentsExample01.htm
    └── FunctionArgumentsExample02.htm
├── Ch05
    ├── ArrayEveryAndSomeExample01.htm
    ├── ArrayFilterExample01.htm
    ├── ArrayIndexOfExample01.htm
    ├── ArrayMapExample01.htm
    ├── ArrayReductionExample01.htm
    ├── ArrayTypeConcatExample01.htm
    ├── ArrayTypeExample01.htm
    ├── ArrayTypeExample02.htm
    ├── ArrayTypeExample03.htm
    ├── ArrayTypeExample04.htm
    ├── ArrayTypeExample05.htm
    ├── ArrayTypeExample06.htm
    ├── ArrayTypeExample07.htm
    ├── ArrayTypeExample08.htm
    ├── ArrayTypeExample09.htm
    ├── ArrayTypeExample10.htm
    ├── ArrayTypeExample11.htm
    ├── ArrayTypeExample12.htm
    ├── ArrayTypeExample13.htm
    ├── ArrayTypeExample14.htm
    ├── ArrayTypeExample15.htm
    ├── ArrayTypeExample16.htm
    ├── ArrayTypeJoinExample01.htm
    ├── ArrayTypeSliceExample01.htm
    ├── ArrayTypeSpliceExample01.htm
    ├── BooleanTypeExample01.htm
    ├── DateNowExample01.htm
    ├── DateTypeConstructorExample01.htm
    ├── DateTypeExample01.htm
    ├── DateTypeUTCExample01.htm
    ├── DateTypeValueOfExample01.htm
    ├── DetectingArraysExample01.htm
    ├── FunctionAsAnArgumentExample01.htm
    ├── FunctionDeclarationExample01.htm
    ├── FunctionInitializationExample01.htm
    ├── FunctionReturningFunctionExample01.htm
    ├── FunctionTypeApplyMethodExample01.htm
    ├── FunctionTypeArgumentsCallerExample01.htm
    ├── FunctionTypeArgumentsCallerExample02.htm
    ├── FunctionTypeArgumentsExample01.htm
    ├── FunctionTypeBindMethodExample01.htm
    ├── FunctionTypeCallExample01.htm
    ├── FunctionTypeCallMethodExample01.htm
    ├── FunctionTypeExample01.htm
    ├── FunctionTypeLengthPropertyExample01.htm
    ├── FunctionTypeThisExample01.htm
    ├── GlobalObjectURIDecodingExample01.htm
    ├── GlobalObjectURIEncodingExample01.htm
    ├── GlobalObjectWindowExample01.htm
    ├── MathObjectMinMaxExample01.htm
    ├── MathObjectRandomExample01.htm
    ├── MathObjectRandomExample02.htm
    ├── MathObjectRandomExample03.htm
    ├── MathObjectRoundingExample01.htm
    ├── NumberTypeExample01.htm
    ├── ObjectTypeExample01.htm
    ├── ObjectTypeExample02.htm
    ├── ObjectTypeExample03.htm
    ├── ObjectTypeExample04.htm
    ├── RegExpConstructorPropertiesExample01.htm
    ├── RegExpConstructorPropertiesExample02.htm
    ├── RegExpConstructorPropertiesExample03.htm
    ├── RegExpExecExample01.htm
    ├── RegExpExecExample02.htm
    ├── RegExpInstancePropertiesExample01.htm
    ├── RegExpTestExample01.htm
    ├── RegExpToStringExample01.htm
    ├── StringTypeCaseMethodExample01.htm
    ├── StringTypeExample01.htm
    ├── StringTypeFromCharCodeExample01.htm
    ├── StringTypeLocaleCompareExample01.htm
    ├── StringTypeLocationMethodsExample01.htm
    ├── StringTypeLocationMethodsExample02.htm
    ├── StringTypeManipulationMethodsExample01.htm
    └── StringTypePatternMatchingExample01.htm
├── Ch06
    ├── AccessorPropertiesExample01.htm
    ├── AccessorPropertiesExample02.htm
    ├── CombinationInheritanceExample01.htm
    ├── ConstructorPatternExample01.htm
    ├── ConstructorPatternExample02.htm
    ├── ConstructorPatternExample03.htm
    ├── ConstructorStealingExample01.htm
    ├── ConstructorStealingExample02.htm
    ├── CreatingObjectsExample01.htm
    ├── DataPropertiesExample01.htm
    ├── DataPropertiesExample02.htm
    ├── DataPropertiesExample03.htm
    ├── DynamicPrototypeExample01.htm
    ├── FactoryPatternExample01.htm
    ├── GetPropertyDescriptorExample01.htm
    ├── HybridFactoryPatternExample01.htm
    ├── HybridFactoryPatternExample02.htm
    ├── HybridPatternExample01.htm
    ├── MultiplePropertiesExample01.htm
    ├── ObjectKeysExample01.htm
    ├── ObjectPropertyNamesExample01.htm
    ├── ParasiticCombinationInheritanceExample01.htm
    ├── PrototypalInheritanceExample01.htm
    ├── PrototypalInheritanceExample02.htm
    ├── PrototypalInheritanceExample03.htm
    ├── PrototypeChainingExample01.htm
    ├── PrototypeChainingExample02.htm
    ├── PrototypeChainingExample03.htm
    ├── PrototypeChainingExample04.htm
    ├── PrototypePatternExample01.htm
    ├── PrototypePatternExample02.htm
    ├── PrototypePatternExample03.htm
    ├── PrototypePatternExample04.htm
    ├── PrototypePatternExample05.htm
    ├── PrototypePatternExample06.htm
    ├── PrototypePatternExample07.htm
    ├── PrototypePatternExample08.htm
    ├── PrototypePatternExample09.htm
    ├── PrototypePatternExample10.htm
    ├── PrototypePatternExample11.htm
    └── PrototypePatternExample12.htm
├── Ch07
    ├── BlockScopeExample01.htm
    ├── BlockScopeExample02.htm
    ├── BlockScopeExample03.htm
    ├── ClosureExample01.htm
    ├── ClosureExample02.htm
    ├── FunctionDeclarationHoisting01.htm
    ├── FunctionDeclarationsErrorExample01.htm
    ├── FunctionNameExample01.htm
    ├── ModuleAugmentationPatternExample01.htm
    ├── ModulePatternExample01.htm
    ├── PrivilegedMethodExample01.htm
    ├── PrivilegedMethodExample02.htm
    ├── RecursionExample01.htm
    ├── RecursionExample02.htm
    ├── ThisObjectExample01.htm
    ├── ThisObjectExample02.htm
    └── ThisObjectExample03.htm
├── Ch08
    ├── DeleteOperatorExample01.htm
    ├── FramesetExample01.htm
    ├── IntervalExample01.htm
    ├── IntervalExample02.htm
    ├── LocationExample01.htm
    ├── LocationReplaceExample01.htm
    ├── PluginDetectionExample01.htm
    ├── PluginDetectionExample02.htm
    ├── PluginDetectionExample03.htm
    ├── PopupBlockerExample01.htm
    ├── SystemDialogExample01.htm
    ├── SystemDialogExample02.htm
    ├── SystemDialogExample03.htm
    ├── TimeoutExample01.htm
    ├── TimeoutExample02.htm
    ├── TimeoutExample03.htm
    ├── WindowOpenExample01.htm
    ├── WindowOpenExample02.htm
    ├── WindowPositionExample01.htm
    ├── WindowPositionExample02.htm
    ├── WindowSizeExample01.htm
    ├── WindowSizeExample02.htm
    ├── anotherframe.htm
    ├── anotherframeset.htm
    ├── blue.htm
    ├── frame.htm
    ├── frameset1.htm
    ├── red.htm
    └── yetanotherframe.htm
├── Ch09
    ├── CapabilitiesDetectionExample01.htm
    ├── QuirksDetectionExample01.htm
    ├── UserAgentDetectionExample01.htm
    └── client.js
├── Ch10
    ├── AttrExample01.htm
    ├── CDataSectionNodeExample01.htm
    ├── CommentNodeExample01.htm
    ├── CreateElementExample01.htm
    ├── DocumentFragmentExample01.htm
    ├── DocumentWriteExample01.htm
    ├── DocumentWriteExample02.htm
    ├── DocumentWriteExample03.htm
    ├── DocumentWriteExample04.htm
    ├── DynamicScriptExample01.htm
    ├── DynamicScriptExample02.htm
    ├── DynamicStyleExample01.htm
    ├── DynamicStyleExample2.htm
    ├── ElementAttributesExample01.htm
    ├── ElementAttributesExample02.htm
    ├── ElementAttributesExample03.htm
    ├── ElementAttributesExample04.htm
    ├── ElementChildrenExample01.htm
    ├── ElementChildrenExample02.htm
    ├── GetElementByIdExample01.htm
    ├── GetElementByIdExample02.htm
    ├── GetElementByIdExample03.htm
    ├── GetElementByIdExample04.htm
    ├── GetElementsByNameExample01.htm
    ├── GetElementsByTagNameExample01.htm
    ├── HTMLElementsExample01.htm
    ├── TextNodeExample01.htm
    ├── TextNodeExample02.htm
    ├── TextNodeExample03.htm
    ├── TextNodeExample04.htm
    ├── TextNodeExample05.htm
    ├── TextNodeExample06.htm
    └── client.js
├── Ch11
    ├── ClassListExample01.htm
    ├── CompareDocumentPositionExample01.htm
    ├── ContainsExample01.htm
    ├── ContainsExample02.htm
    ├── ElementChildrenExample01.htm
    ├── ElementTraversalExample01.htm
    ├── GetElementsByClassNameExample01.htm
    ├── InnerHtmlExample01.htm
    ├── InnerHtmlExample02.htm
    ├── InnerHtmlExample03.htm
    ├── InnerHtmlExample04.htm
    ├── InnerTextExample01.htm
    ├── InnerTextExample02.htm
    ├── InnerTextExample03.htm
    ├── InnerTextExample04.htm
    ├── InnerTextExample05.htm
    ├── InsertAdjacentHtmlExample01.htm
    ├── OuterHTMLExample01.htm
    ├── OuterTextExample01.htm
    ├── OuterTextExample02.htm
    ├── SelectorsAPIExample01.htm
    ├── SelectorsAPIExample02.htm
    ├── SelectorsAPIExample03.htm
    ├── TextContentExample01.htm
    ├── TextContentExample02.htm
    ├── TextContentExample03.htm
    ├── TextContentExample04.htm
    └── client.js
├── Ch12
    ├── CSSRulesExample.htm
    ├── CSSRulesExample2.htm
    ├── ComputedStylesExample.htm
    ├── CreateDocumentExample.htm
    ├── CreateHTMLDocumentExample.htm
    ├── DOMRangeExample.htm
    ├── DOMRangeExample2.htm
    ├── DOMRangeExample3.htm
    ├── DOMRangeExample4.htm
    ├── DOMRangeExample5.htm
    ├── DOMRangeExample6.htm
    ├── DOMRangeExample7.htm
    ├── DOMRangeExample8.htm
    ├── DOMRangeExample9.htm
    ├── DOMStyleObjectExample.htm
    ├── DocumentTypeExample.htm
    ├── GetBoundingClientRectExample.htm
    ├── IEComputedStylesExample.htm
    ├── IERangeExample.htm
    ├── IERangeExample1.htm
    ├── IERangeExample2.htm
    ├── IERangeExample3.htm
    ├── IERangeExample4.htm
    ├── IERangeExample5.htm
    ├── IERangeExample6.htm
    ├── IFrameElementExample.htm
    ├── IFrameElementExample2.htm
    ├── IFrameElementExample3.htm
    ├── NamespaceExample.xml
    ├── NodeIteratorExample1.htm
    ├── NodeIteratorExample2.htm
    ├── OffsetDimensionsExample.htm
    ├── ScrollDimensionsExample.htm
    ├── StyleObjectExample.htm
    ├── StyleSheetsExample.htm
    ├── StyleSheetsExample2.htm
    ├── TreeWalkerExample1.htm
    ├── TreeWalkerExample2.htm
    ├── UserDataExample.htm
    ├── stylesheet1.css
    └── stylesheet2.css
├── Ch13
    ├── BeforeUnloadEventExample01.htm
    ├── ButtonExample01.htm
    ├── ClientCoordinatesExample01.htm
    ├── CompositionEventsExample01.htm
    ├── ContextMenuEventExample01.htm
    ├── CrossBrowserEventHandlerExample01.htm
    ├── CrossBrowserEventObjectExample01.htm
    ├── CrossBrowserEventObjectExample02.htm
    ├── CrossBrowserEventObjectExample03.htm
    ├── CrossBrowserMouseWheelEventExample01.htm
    ├── DOMContentLoadedEventExample01.htm
    ├── DOMEventFlowExample01.htm
    ├── DOMEventObjectExample01.htm
    ├── DOMEventObjectExample02.htm
    ├── DOMEventObjectExample03.htm
    ├── DOMEventObjectExample04.htm
    ├── DOMEventObjectExample05.htm
    ├── DOMEventObjectExample06.htm
    ├── DOMLevel0EventHandlerExample01.htm
    ├── DOMLevel2EventHandlerExample01.htm
    ├── DOMLevel2EventHandlerExample02.htm
    ├── DOMLevel3KeyPropertyExample01.htm
    ├── DOMLevel3LocationGetModifierStateExample01.htm
    ├── DOMLevel3LocationPropertyExample01.htm
    ├── DOMMouseScrollEventExample01.htm
    ├── DOMSubtreeModifiedEventExample01.htm
    ├── DeviceMotionEventExample01.htm
    ├── DeviceOrientationEventExample01.htm
    ├── DoubleClickExample01.htm
    ├── EventBubblingExample01.htm
    ├── EventCapturingExample01.htm
    ├── EventDelegationExample01.htm
    ├── EventUtil.js
    ├── GestureEventsExample01.htm
    ├── HTMLEventHandlerExample01.htm
    ├── HTMLEventHandlerExample02.htm
    ├── HTMLEventHandlerExample03.htm
    ├── HTMLEventHandlerExample04.htm
    ├── HashChangeEventExample01.htm
    ├── IEEventHandlerExample01.htm
    ├── IEEventHandlerExample02.htm
    ├── IEEventObjectExample01.htm
    ├── IEEventObjectExample02.htm
    ├── IEEventObjectExample03.htm
    ├── KeyDownEventExample01.htm
    ├── KeyPressEventExample01.htm
    ├── KeyUpEventExample01.htm
    ├── KeyboardEventsExample01.htm
    ├── LoadEventExample01.htm
    ├── LoadEventExample02.htm
    ├── LoadEventExample03.htm
    ├── LoadEventExample04.htm
    ├── LoadEventExample05.htm
    ├── LoadEventExample06.htm
    ├── LoadEventExample07.htm
    ├── ModifierKeysExample01.htm
    ├── MouseWheelEventExample01.htm
    ├── MozAfterPaintExample01.htm
    ├── MozOrientationEventExample01.htm
    ├── NodeInsertionEventsExample01.htm
    ├── NodeRemovalEventsExample01.htm
    ├── OrientationChangeEventExample01.htm
    ├── PageCoordinatesExample01.htm
    ├── PageShowEventExample01.htm
    ├── ReadyStateChangeEventExample01.htm
    ├── ReadyStateChangeEventExample02.htm
    ├── RelatedElementsExample01.htm
    ├── ResizeEventExample01.htm
    ├── ScreenCoordinatesExample01.htm
    ├── ScrollEventExample01.htm
    ├── SimulateDOMClickExample01.htm
    ├── SimulateDOMCustomEventExample01.htm
    ├── SimulateDOMKeyEventExample01.htm
    ├── SimulateFFKeyEventExample01.htm
    ├── SimulateIEClickExample01.htm
    ├── SimulateIEKeyEventExample01.htm
    ├── TextChangeEventExample01.htm
    ├── TextInputEventExample01.htm
    ├── TouchEventsExample01.htm
    ├── UIEventsExample01.htm
    ├── UnloadEventExample01.htm
    ├── client.js
    ├── example.css
    ├── example.js
    └── smile.gif
├── Ch14
    ├── ContentEditableExample01.htm
    ├── EventUtil.js
    ├── FocusExample01.htm
    ├── FormFieldEventsExample01.htm
    ├── FormFieldsExample01.htm
    ├── FormFieldsExample02.htm
    ├── FormResetExample01.htm
    ├── FormSerializationExample01.htm
    ├── FormSubmissionExample01.htm
    ├── InputFieldEmailValidationExample01.htm
    ├── InputFieldPatternValidationExample01.htm
    ├── RequiredFieldExample01.htm
    ├── RichTextEditingExample01.htm
    ├── SelectEventExample01.htm
    ├── SelectboxExample01.htm
    ├── SelectboxExample02.htm
    ├── SelectboxExample03.htm
    ├── SelectboxExample04.htm
    ├── SelectboxExample05.htm
    ├── SelectboxExample06.htm
    ├── TextboxClipboardExample01.htm
    ├── TextboxGetSelectedTextExample01.htm
    ├── TextboxInputFilteringExample01.htm
    ├── TextboxPartialSelectionExample01.htm
    ├── TextboxSelectExample01.htm
    ├── TextboxTabForwardExample01.htm
    ├── blank.htm
    └── client.js
├── Ch15
    ├── 2DClearRectExample01.htm
    ├── 2DDataUrlExample01.htm
    ├── 2DDrawImageExample01.htm
    ├── 2DFillRectExample01.htm
    ├── 2DFillRectGradientExample01.htm
    ├── 2DFillRectGradientExample02.htm
    ├── 2DFillRectGradientExample03.htm
    ├── 2DFillRectGradientExample04.htm
    ├── 2DFillRectPatternExample01.htm
    ├── 2DFillRectShadowExample01.htm
    ├── 2DGlobalAlphaExample01.htm
    ├── 2DGlobalCompositeOperationExample01.htm
    ├── 2DImageDataExample01.htm
    ├── 2DPathExample01.htm
    ├── 2DSaveRestoreExample01.htm
    ├── 2DStrokeRectExample01.htm
    ├── 2DStrokeRectShadowExample01.htm
    ├── 2DTextExample01.htm
    ├── 2DTextExample02.htm
    ├── 2DTextExample03.htm
    ├── 2DTextExample04.htm
    ├── 2DTransformExample01.htm
    ├── DataViewExample01.htm
    ├── DataViewExample02.htm
    ├── TypedViewByteLimitExample01.htm
    ├── WebGLExample01.htm
    ├── WebGLExample02.htm
    ├── smile.gif
    └── smile2.gif
├── Ch16
    ├── AudioPlayerExample01.htm
    ├── CrossDocumentMessagingExample01.htm
    ├── CrossDocumentMessagingExample01Inner.htm
    ├── CustomDraggableExample01.htm
    ├── DataTransferExample01.htm
    ├── DragAndDropExample01.htm
    ├── DragAndDropExample02.htm
    ├── DragAndDropExample03.htm
    ├── DragAndDropExample04.htm
    ├── DropEffectAndEffectAllowedExample01.htm
    ├── EventUtil.js
    ├── HistoryStateManagementExample01.htm
    ├── SetDragImageExample01.htm
    ├── VideoPlayerExample01.htm
    ├── billyBrowsers.ogg
    └── smile.gif
├── Ch17
    ├── AssertExample01.htm
    ├── CommunicationErrorExample01.htm
    ├── ConsoleLoggingExample01.htm
    ├── EventUtil.js
    ├── InvalidCharacterExample01.htm
    ├── InvalidCharacterExample02.htm
    ├── LongURLErrorExample01.htm
    ├── OnErrorExample01.htm
    ├── OnErrorExample02.htm
    ├── OperationAbortedExample01.htm
    ├── OperationAbortedExample02.htm
    ├── OperationAbortedExample03.htm
    ├── PageLoggingExample01.htm
    ├── ThrowingErrorsExample01.htm
    ├── ThrowingErrorsExample02.htm
    ├── TryCatchExample01.htm
    ├── TryCatchExample02.htm
    ├── nonscript.js
    └── smile.gif
├── Ch18
    ├── CrossBrowserXPathExample01.htm
    ├── CrossBrowserXPathExample02.htm
    ├── CrossBrowserXmlExample01.htm
    ├── CrossBrowserXmlExample02.htm
    ├── CrossBrowserXsltExample01.htm
    ├── DOMLevel2CoreExample01.htm
    ├── DOMLevel3LoadSaveExample01.htm
    ├── DOMLevel3LoadSaveExample02.htm
    ├── DOMLevel3LoadSaveExample03.htm
    ├── DOMLevel3LoadSaveExample04.htm
    ├── DOMLevel3LoadSaveExample05.htm
    ├── DOMLevel3LoadSaveExample06.htm
    ├── DOMLevel3LoadSaveExample07.htm
    ├── DOMLevel3LoadSaveExample08.htm
    ├── DOMParserExample01.htm
    ├── DOMParserExample02.htm
    ├── DomXPathExample01.htm
    ├── DomXPathExample02.htm
    ├── DomXPathExample03.htm
    ├── DomXPathExample04.htm
    ├── DomXPathExample05.htm
    ├── DomXPathExample06.htm
    ├── DomXPathExample07.htm
    ├── DomXPathExample08.htm
    ├── IEXPathExample01.htm
    ├── IEXPathExample02.htm
    ├── IEXPathExample03.htm
    ├── IEXmlDomExample.htm
    ├── IEXmlDomExample01.htm
    ├── IEXmlDomExample02.htm
    ├── IEXmlDomExample03.htm
    ├── IEXmlDomExample04.htm
    ├── IEXmlDomExample2.htm
    ├── IEXmlDomExample3.htm
    ├── IEXsltExample01.htm
    ├── IEXsltExample02.htm
    ├── IEXsltExample03.htm
    ├── IEXsltExample04.htm
    ├── IEXsltExample05.htm
    ├── XMLSerializerExample01.htm
    ├── XsltProcessorExample01.htm
    ├── XsltProcessorExample02.htm
    ├── XsltProcessorExample03.htm
    ├── XsltProcessorExample04.htm
    ├── employees.xml
    ├── employees.xslt
    ├── employees2.xslt
    ├── employees3.xslt
    ├── employees4.xslt
    └── example.xml
├── Ch19
    ├── AttributesExample01.htm
    ├── ForEachInExample01.htm
    ├── NamespaceExample01.htm
    ├── NamespaceTypeExample01.htm
    ├── NamespaceTypeExample02.htm
    ├── NodeKindExample01.htm
    ├── ParsingAndSerializationExample01.htm
    ├── QNameTypeExample01.htm
    ├── QNameTypeExample02.htm
    ├── QueryingExample01.htm
    ├── UsageExample01.htm
    ├── UsageExample02.htm
    ├── XMLConstructionExample01.htm
    ├── XMLConstructionExample02.htm
    ├── XMLConstructionExample03.htm
    ├── XMLListTypeExample01.htm
    ├── XMLListTypeExample02.htm
    └── XMLTypeExample01.htm
├── Ch20
    ├── JSONObjectExample01.htm
    ├── JSONParseExample01.htm
    ├── JSONParseExample02.htm
    ├── JSONStringifyExample01.htm
    ├── JSONStringifyExample02.htm
    ├── JSONStringifyExample03.htm
    ├── JSONStringifyExample04.htm
    └── JSONStringifyExample05.htm
├── Ch21
    ├── 026694 Ch21code.zip
    ├── CrossBrowserCORSRequestExample01.htm
    ├── HTTPStreamingExample01.htm
    ├── ImagePingExample01.htm
    ├── JSONPExample01.htm
    ├── XDomainRequestExample01.htm
    ├── XHRAlternateEventsExample01.htm
    ├── XHRAsyncExample01.htm
    ├── XHRErrorEventExample01.htm
    ├── XHRExample01.htm
    ├── XHRFormDataExample01.htm
    ├── XHRLoadEventExample01.htm
    ├── XHRPostExample01.htm
    ├── XHRProgressEventExample01.htm
    ├── XHRRequestHeadersExample01.htm
    ├── XHRResponseHeadersExample01.htm
    ├── XHRTimeoutExample01.htm
    ├── addcontact.php
    ├── addressbook.php
    ├── altevents.php
    ├── example.php
    ├── example.txt
    ├── postexample.php
    ├── timeout.php
    └── xdr.php
├── Ch22
    ├── ArrayChunkingExample.htm
    ├── DragAndDropExample01.htm
    ├── DragAndDropExample02.htm
    ├── DragAndDropExample03.htm
    ├── DragAndDropExample04.htm
    ├── EventTarget.js
    ├── EventTargetExample01.htm
    ├── EventTargetExample02.htm
    ├── EventUtil.js
    ├── FrozenObjectsExample01.htm
    ├── FrozenObjectsExample02.htm
    ├── FunctionBindingExample01.htm
    ├── FunctionBindingExample02.htm
    ├── FunctionCurryingExample01.htm
    ├── FunctionCurryingExample02.htm
    ├── FunctionCurryingExample03.htm
    ├── LazyLoadingExample01.htm
    ├── LazyLoadingExample02.htm
    ├── NonExtensibleObjectsExample01.htm
    ├── NonExtensibleObjectsExample02.htm
    ├── RepeatingTimersExample.htm
    ├── ScopeSafeConstructorsExample01.htm
    ├── ScopeSafeConstructorsExample02.htm
    ├── ScopeSafeConstructorsExample03.htm
    ├── ScopeSafeConstructorsExample04.htm
    ├── SealedObjectsExample01.htm
    ├── SealedObjectsExample02.htm
    ├── ThrottlingExample.htm
    └── client.js
├── Ch23
    ├── CookieUtil.js
    ├── CookiesExample01.htm
    ├── EventUtil.js
    ├── GlobalAndLocalStorageExample01.htm
    ├── GlobalStorageExample01.htm
    ├── IndexedDBExample01.htm
    ├── IndexedDBExample02.htm
    ├── IndexedDBExample03.htm
    ├── IndexedDBExample04.htm
    ├── IndexedDBExample05.htm
    ├── LocalStorageExample01.htm
    ├── OnLineExample01.htm
    ├── OnlineEventsExample01.htm
    ├── SessionStorageExample01.htm
    ├── StorageEventExample01.htm
    ├── SubCookieUtil.js
    ├── SubCookiesExample01.htm
    ├── UserDataExample01.htm
    └── client.js
├── Ch24
    └── SampleAntDir
    │   ├── build.xml
    │   ├── dev
    │       └── src
    │       │   └── js
    │       │       ├── a.js
    │       │       ├── aa.js
    │       │       ├── ab.js
    │       │       ├── b.js
    │       │       └── c.js
    │   ├── js
    │       ├── output-min.js
    │       └── output.js
    │   └── readme.txt
├── Ch25
    ├── EventUtil.js
    ├── FileAPIExample01.htm
    ├── FileAPIExample02.htm
    ├── FileAPIExample03.htm
    ├── FileAPIExample04.htm
    ├── FileAPIExample05.htm
    ├── FileAPIExample06.htm
    ├── FileAPIExample06Upload.php
    ├── GeolocationExample01.htm
    ├── PageVisibilityAPIExample01.htm
    ├── WebWorkerExample01.htm
    ├── WebWorkerExample01.js
    └── smile.gif
├── README.md
└── readme.txt


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/Ch03/AddExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Add Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var result1 = 5 + 5;     //two numbers
 8 |         alert(result1);           //10
 9 |         var result2 = 5 + "5";   //a number and a string
10 |         alert(result2);           //"55"
11 | 
12 |        
13 |     </script>
14 | 
15 | </head>
16 | <body>
17 |   
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch03/AddExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Add Example 2</title>
 5 |     <script type="text/javascript">
 6 |             
 7 |         var num1 = 5;
 8 |         var num2 = 10;
 9 |         var message = "The sum of 5 and 10 is " + num1 + num2;
10 |         alert(message);    //"The sum of 5 and 10 is 510"
11 |         
12 |         
13 |        
14 |     </script>
15 | 
16 | </head>
17 | <body>
18 |   
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch03/AddExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Add Example 3</title>
 5 |     <script type="text/javascript">
 6 |             
 7 |         var num1 = 5;
 8 |         var num2 = 10;
 9 |         var message = "The sum of 5 and 10 is " + (num1 + num2);
10 |         alert(message);    //"The sum of 5 and 10 is 15"
11 | 
12 |         
13 |         
14 |        
15 |     </script>
16 | 
17 | </head>
18 | <body>
19 |   
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch03/AssignmentOperatorsExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Assignment Operators Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var num = 5;
 8 |         alert(num);     //5
 9 |         
10 |         num += 5;
11 |         alert(num);     //10
12 |         
13 |         num *= 2;
14 |         alert(num);     //20
15 | 
16 |         num /= 10;
17 |         alert(num);     //2
18 |         
19 |         num -= 2;   
20 |         alert(num);     //0
21 |         
22 |         
23 |     </script>
24 | 
25 | </head>
26 | <body>
27 |   
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/Ch03/BitwiseAndExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Bitwise AND Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var result = 25 & 3;
 8 |         alert(result);    //outputs 1
 9 | 
10 | 
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/BitwiseNotExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Bitwise NOT Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var num1 = 25;             //binary 00000000000000000000000000011001
 8 |         var num2 = ~num1;          //binary 11111111111111111111111111100110
 9 |         alert(num2);               //-26
10 | 
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/BitwiseOrExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Bitwise OR Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var result = 25 | 3;
 8 |         alert(result);       //27
 9 | 
10 | 
11 |     </script>
12 | 
13 | </head>
14 | <body>
15 |   
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch03/BitwiseXorExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Bitwise XOR Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var result = 25 ^ 3;
 8 |         alert(result);    //26
 9 | 
10 | 
11 |     </script>
12 | 
13 | </head>
14 | <body>
15 |   
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch03/BooleanExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Boolean Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var message = "Hello world!";
 8 |         var messageAsBoolean = Boolean(message);
 9 |         
10 |         alert(messageAsBoolean); //true
11 |  
12 |               
13 |     </script>
14 | 
15 | </head>
16 | <body>
17 |   
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch03/BooleanExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Boolean Example 2</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var message = "Hello world!";
 8 |         if (message){
 9 |             alert("Value is true");
10 |         }
11 | 
12 |  
13 |               
14 |     </script>
15 | 
16 | </head>
17 | <body>
18 |   
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch03/BreakStatementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Break Statement Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var num = 0;
 7 |         
 8 |         for (var i=1; i < 10; i++) {
 9 |             if (i % 5 == 0) {
10 |                 break;
11 |             }
12 |             num++;
13 |         }
14 |         
15 |         alert(num);    //4
16 | 
17 | 
18 | 
19 |     </script>
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Ch03/BreakStatementExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Break Statement Example 2</title>
 5 |     <script type="text/javascript">
 6 |         var num = 0;
 7 |         
 8 |         outermost:
 9 |         for (var i=0; i < 10; i++) {
10 |              for (var j=0; j < 10; j++) {
11 |                 if (i == 5 && j == 5) {
12 |                     break outermost;
13 |                 }
14 |                 num++;
15 |             }
16 |         }
17 |         
18 |         alert(num);    //55
19 | 
20 | 
21 | 
22 | 
23 |     </script>
24 | </head>
25 | <body>
26 | 
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/Ch03/ConditionalOperatorExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Conditional Operator Example 1</title>
 5 |     <script type="text/javascript">
 6 |             
 7 |         var num1 = 10;
 8 |         var num2 = 25;
 9 |         var num3 = (num2 > num1) ? num2 : num1;
10 |         alert(num3);   //25
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/ContinueStatementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Continue Statement Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var num = 0;
 7 |         
 8 |         for (var i=1; i < 10; i++) {
 9 |             if (i % 5 == 0) {
10 |                 continue;
11 |             }
12 |             num++;
13 |         }
14 |         
15 |         alert(num);    //8
16 | 
17 | 
18 | 
19 |     </script>
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Ch03/ContinueStatementExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Continue Statement Example 2</title>
 5 |     <script type="text/javascript">
 6 |         var num = 0;
 7 |         
 8 |         outermost:
 9 |         for (var i=0; i < 10; i++) {
10 |              for (var j=0; j < 10; j++) {
11 |                 if (i == 5 && j == 5) {
12 |                     continue outermost;
13 |                 }
14 |                 num++;
15 |             }
16 |         }
17 |         
18 |         alert(num);    //95
19 | 
20 | 
21 | 
22 | 
23 |     </script>
24 | </head>
25 | <body>
26 | 
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/Ch03/DivideExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Divide Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         alert(5 / 5);           //1
 8 |         alert(5 / NaN);         //NaN
 9 |         alert(Infinity / Infinity);    //NaN
10 |         alert(Infinity / 2);    //Infinity
11 |         alert(5 / 0);           //Infinity
12 |         alert(10 / true);       //10
13 |         alert(10 / false);      //Infinity
14 |        
15 |     </script>
16 | 
17 | </head>
18 | <body>
19 |   
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch03/DoWhileStatementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Do While Statement Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var i = 0;
 7 |         do {
 8 |            i += 2;
 9 |         } while (i < 10);
10 | 
11 |         alert(i);
12 |         
13 |     </script>
14 | 
15 | </head>
16 | <body>
17 |   
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch03/EqualityOperatorsExample02.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch03/EqualityOperatorsExample02.htm


--------------------------------------------------------------------------------
/Ch03/EqualityOperatorsExample03.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch03/EqualityOperatorsExample03.htm


--------------------------------------------------------------------------------
/Ch03/ForInStatementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>For-In Statement Example 1</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |         for (var propName in window) {
 9 |              document.write(propName);
10 |              document.write("<br />");
11 |         }
12 | 
13 | 
14 |     </script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Ch03/ForStatementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>For Statement Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var count = 10;
 7 |         for (var i=0; i < count; i++){
 8 |             alert(i);
 9 |         }
10 | 
11 |         /* The preceding is the same as:
12 |         
13 |         var count = 10;
14 |         var i = 0;
15 |         while (i < count){
16 |             alert(i);
17 |             i++;
18 |         }
19 |         
20 |         */
21 |     </script>
22 | 
23 | </head>
24 | <body>
25 |   
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Ch03/ForStatementExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>For Statement Example 2</title>
 5 |     <script type="text/javascript">
 6 |         var count = 10;
 7 |         var i;
 8 |         for (i=0; i < count; i++){
 9 |             alert(i);
10 |         }
11 |         
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/ForStatementExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>For Statement Example 3</title>
 5 |     <script type="text/javascript">
 6 |         var count = 10;
 7 |         for (var i=0; i < count; i++){
 8 |             alert(i);
 9 |         }
10 |         alert(i);    //10
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/ForStatementExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>For Statement Example 4</title>
 5 |     <script type="text/javascript">
 6 |         var count = 10;
 7 |         var i = 0;
 8 |         for (; i < count; ){
 9 |             alert(i);
10 |             i++;
11 |         }
12 | 
13 |     </script>
14 | 
15 | </head>
16 | <body>
17 |   
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch03/FunctionExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Example 1</title>
 5 |     <script type="text/javascript">
 6 |         function sayHi(name, message) {
 7 |             alert("Hello " + name + ", " + message);
 8 |         }
 9 | 
10 |         sayHi("Nicholas", "how are you today?");
11 |         
12 |     </script>
13 | </head>
14 | <body>
15 | 
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch03/FunctionExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Example 2</title>
 5 |     <script type="text/javascript">
 6 |         function sum(num1, num2) {
 7 |             return num1 + num2;
 8 |         }
 9 | 
10 |         var result = sum(5, 10);
11 |         alert(result);
12 |     </script>
13 | </head>
14 | <body>
15 | 
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch03/FunctionExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Example 3</title>
 5 |     <script type="text/javascript">
 6 |         function diff(num1, num2) {
 7 |             if (num1 < num2) {
 8 |                 return num2 - num1;
 9 |             } else {
10 |                 return num1 - num2;
11 |             }
12 |         }
13 | 
14 |         var result = diff(7, 10);
15 |         alert(result);
16 |     </script>
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch03/FunctionExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Example 4</title>
 5 |     <script type="text/javascript">
 6 |         function sayHi(name, message) {
 7 |             return;
 8 |             alert("Hello " + name + ", " + message);    //never called
 9 |         }
10 | 
11 |         sayHi("Nicholas", "how are you today?");
12 |     </script>
13 | </head>
14 | <body>
15 | 
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch03/FunctionExample05.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Example 5</title>
 5 |     <script type="text/javascript">
 6 |         function sayHi() {
 7 |             alert("Hello " + arguments[0] + ", " + arguments[1]);
 8 |         }
 9 | 
10 |         sayHi("Nicholas", "how are you today?");
11 |     </script>
12 | </head>
13 | <body>
14 | 
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Ch03/FunctionExample06.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Example 6</title>
 5 |     <script type="text/javascript">
 6 |         function howManyArgs() {
 7 |             alert(arguments.length);
 8 |         }
 9 |         
10 |         howManyArgs("string", 45);    //2
11 |         howManyArgs();                //0
12 |         howManyArgs(12);              //1
13 | 
14 |     </script>
15 | </head>
16 | <body>
17 | 
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch03/FunctionExample07.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Example 7</title>
 5 |     <script type="text/javascript">
 6 |         function doAdd() {
 7 |             if(arguments.length == 1) {
 8 |                 alert(arguments[0] + 10);
 9 |             } else if (arguments.length == 2) {
10 |                 alert(arguments[0] + arguments[1]);
11 |             }
12 |         }
13 |         
14 |         doAdd(10);        //20
15 |         doAdd(30, 20);    //50
16 | 
17 |     </script>
18 | </head>
19 | <body>
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch03/FunctionExample08.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Example 8</title>
 5 |     <script type="text/javascript">
 6 |         function doAdd(num1, num2) {
 7 |             if(arguments.length == 1) {
 8 |                 alert(num1 + 10);
 9 |             } else if (arguments.length == 2) {
10 |                 alert(arguments[0] + num2);
11 |             }
12 |         }
13 | 
14 |         
15 |         doAdd(10);        //20
16 |         doAdd(30, 20);    //50
17 | 
18 |     </script>
19 | </head>
20 | <body>
21 | 
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch03/FunctionExample09.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Example 9</title>
 5 |     <script type="text/javascript">
 6 |         function doAdd(num1, num2) {
 7 |             //if(arguments.length == 1) {
 8 |                 arguments[1] = 10;
 9 |             //}
10 |             alert(arguments[0] + num2);
11 |         }
12 | 
13 |         doAdd(10, 20);        //20
14 |         doAdd(30, 20);    //50
15 | 
16 |     </script>
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch03/FunctionExample10.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Example 10</title>
 5 |     <script type="text/javascript">
 6 |         function addSomeNumber(num){
 7 |             return num + 100;
 8 |         }
 9 |         
10 |         function addSomeNumber(num) {
11 |             return num + 200;
12 |         }
13 |         
14 |         var result = addSomeNumber(100);    //300
15 |         alert(result);
16 | 
17 |     </script>
18 | </head>
19 | <body>
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch03/IfStatementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>If Statement Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var i = 24;
 7 |         
 8 |         if (i > 25)
 9 |             alert("Greater than 25.");    //one-line statement
10 |         else {
11 |             alert("Less than or equal to 25.");  //block statement
12 |         }
13 | 
14 |         
15 |         
16 |     </script>
17 | 
18 | </head>
19 | <body>
20 |   
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch03/IfStatementExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>If Statement Example 2</title>
 5 |     <script type="text/javascript">
 6 |         var i = 24;
 7 |         
 8 |         if (i > 25) {
 9 |             alert("Greater than 25.")
10 |         } else if (i < 0) {
11 |             alert("Less than 0.");
12 |         } else {
13 |             alert("Between 0 and 25, inclusive.");
14 |         }
15 | 
16 | 
17 |         
18 |         
19 |     </script>
20 | 
21 | </head>
22 | <body>
23 |   
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Ch03/IncrementDecrementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Increment/Decrement Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var age = 29;
 8 |         var anotherAge = --age + 2;
 9 |         
10 |         alert(age);         //outputs 28
11 |         alert(anotherAge);  //outputs 30
12 | 
13 |     </script>
14 | 
15 | </head>
16 | <body>
17 |   
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch03/IncrementDecrementExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Increment/Decrement Example 2</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var num1 = 2;
 8 |         var num2 = 20;
 9 |         var num3 = --num1 + num2;    //equals 21
10 |         var num4 = num1 + num2;      //equals 21
11 | 
12 |         alert(num3);
13 |         alert(num4);
14 |     </script>
15 | 
16 | </head>
17 | <body>
18 |   
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch03/IncrementDecrementExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Increment/Decrement Example 3</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var num1 = 2;
 8 |         var num2 = 20;
 9 |         var num3 = num1-- + num2;    //equals 22
10 |         var num4 = num1 + num2;      //equals 21
11 | 
12 |         alert(num3);
13 |         alert(num4);
14 |     </script>
15 | 
16 | </head>
17 | <body>
18 |   
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch03/IncrementDecrementExample04.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch03/IncrementDecrementExample04.htm


--------------------------------------------------------------------------------
/Ch03/LeftShiftExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Left Shift Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var oldValue = 2;             //equal to binary 10
 8 |         var newValue = oldValue << 5; //equal to binary 1000000 which is decimal 64
 9 |         alert(newValue);              //64
10 | 
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/LogicalAndExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Logical AND Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var found = true;
 8 |         var result = (found && someUndeclaredVariable);    //error occurs here
 9 |         alert(result);    //this line never executes
10 | 
11 | 
12 | 
13 |     </script>
14 | 
15 | </head>
16 | <body>
17 |   
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch03/LogicalAndExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Logical AND Example 2</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var found = false;
 8 |         var result = (found && someUndeclaredVariable);    //no error
 9 |         alert(result);    //works
10 | 
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/LogicalNotExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Logical Not Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         alert(!false);      //true
 8 |         alert(!"blue");     //false
 9 |         alert(!0);          //true
10 |         alert(!NaN);        //true
11 |         alert(!"");         //true
12 |         alert(!12345);      //false
13 | 
14 |     </script>
15 | 
16 | </head>
17 | <body>
18 |   
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch03/LogicalNotExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Logical Not Example 2</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         alert(!!"blue");     //true
 8 |         alert(!!0);          //false
 9 |         alert(!!NaN);        //false
10 |         alert(!!"");         //false
11 |         alert(!!12345);      //true
12 | 
13 | 
14 |     </script>
15 | 
16 | </head>
17 | <body>
18 |   
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch03/LogicalOrExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Logical OR Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var found = true;
 8 |         var result = (found || someUndeclaredVariable);    //no error
 9 |         alert(result);    //works
10 | 
11 |     </script>
12 | 
13 | </head>
14 | <body>
15 |   
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch03/LogicalOrExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Logical OR Example 2</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var found = false;
 8 |         var result = (found || someUndeclaredVariable);    //error occurs here
 9 |         alert(result);    //this line never executes
10 | 
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/ModulusExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Modulus Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         alert(26 % 5);          //1
 8 |         alert(Infinity % 3);    //NaN
 9 |         alert(3 % 0);           //NaN
10 |         alert(5 % Infinity);    //5
11 |         alert(0 % 10);          //0
12 |         alert(true % 25);       //1
13 |         alert(3 % false);       //NaN
14 |        
15 |     </script>
16 | 
17 | </head>
18 | <body>
19 |   
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch03/MultiplyExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Multiply Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         alert(5 * 6);           //30
 8 |         alert(5 * NaN);         //NaN
 9 |         alert(Infinity * 0);    //NaN
10 |         alert(Infinity * 2);    //Infinity
11 |         alert("5" * 5);         //25
12 |         alert(true * 10);       //10
13 |         alert(false * 10);      //0
14 |        
15 |     </script>
16 | 
17 | </head>
18 | <body>
19 |   
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch03/NullExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Null Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var car = null;
 8 |         alert(typeof car);   //"object"
 9 |               
10 |     </script>
11 | 
12 | </head>
13 | <body>
14 |   
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Ch03/NullExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Null Example 2</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         alert(null == undefined);   
 8 |               
 9 |     </script>
10 | 
11 | </head>
12 | <body>
13 |   
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Ch03/NumberExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Number Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         alert(0.1 + 0.2);
 8 | 
 9 |  
10 |               
11 |     </script>
12 | 
13 | </head>
14 | <body>
15 |   
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch03/NumberExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Number Example 2</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var result = Number.MAX_VALUE + 1;
 8 |         alert(isFinite(result));    // false
 9 | 
10 |     </script>
11 | 
12 | </head>
13 | <body>
14 |   
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Ch03/NumberExample03.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch03/NumberExample03.htm


--------------------------------------------------------------------------------
/Ch03/NumberExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Number Example 4</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var num1 = Number("Hello world!");  //NaN
 8 |         var num2 = Number("");              //0
 9 |         var num3 = Number("000011");        //11
10 |         var num4 = Number(true);            //1
11 | 
12 |         alert(num1);
13 |         alert(num2);
14 |         alert(num3);
15 |         alert(num4);
16 | 
17 |     </script>
18 | 
19 | </head>
20 | <body>
21 |   
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch03/NumberExample05.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch03/NumberExample05.htm


--------------------------------------------------------------------------------
/Ch03/NumberExample06.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Number Example 6</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var num1 = parseInt("AF", 16);        //175
 8 |         var num2 = parseInt("AF");            //NaN
 9 | 
10 |         alert(num1);
11 |         alert(num2);
12 | 
13 | 
14 |     </script>
15 | 
16 | </head>
17 | <body>
18 |   
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch03/NumberExample07.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch03/NumberExample07.htm


--------------------------------------------------------------------------------
/Ch03/NumberExample08.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Number Example 9</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var num1 = parseFloat("1234blue");    //1234 - integer
 8 |         var num2 = parseFloat("0xA");         //0
 9 |         var num3 = parseFloat("22.5");        //22.5
10 |         var num4 = parseFloat("22.34.5");     //22.34
11 |         var num5 = parseFloat("0908.5");      //908.5
12 |         var num6 = parseFloat("3.125e7");     //31250000
13 | 
14 |         alert(num1);
15 |         alert(num2);
16 |         alert(num3);
17 |         alert(num4);
18 |         alert(num5);
19 |         alert(num6);
20 | 
21 |     </script>
22 | 
23 | </head>
24 | <body>
25 |   
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Ch03/SignedRightShiftExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Signed Right Shift Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var oldValue = 64;               //equal to binary 1000000
 8 |         var newValue = oldValue >> 5;    //equal to binary 10 which is decimal 2
 9 |         alert(newValue);                 //2
10 | 
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/SignedRightShiftExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Signed Right Shift Example 2</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var oldValue = -64;              //equal to binary -1000000
 8 |         var newValue = oldValue >> 5;    //equal to binary -10 which is decimal -2
 9 |         alert(newValue);                 //-2
10 | 
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/StringExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>String Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var age = 11;
 8 |         var ageAsString = age.toString();    //the string "11"
 9 |         var found = true;
10 |         var foundAsString = found.toString(); //the string "true"
11 | 
12 |         alert(ageAsString);
13 |         alert(typeof ageAsString);
14 |         alert(foundAsString);
15 |         alert(typeof foundAsString);
16 | 
17 |     </script>
18 | 
19 | </head>
20 | <body>
21 |   
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch03/StringExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>String Example 2</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var num = 10;
 8 |         alert(num.toString());       //"10"
 9 |         alert(num.toString(2));      //"1010"
10 |         alert(num.toString(8));      //"12"
11 |         alert(num.toString(10));     //"10"
12 |         alert(num.toString(16));     //"a"
13 | 
14 | 
15 |     </script>
16 | 
17 | </head>
18 | <body>
19 |   
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch03/StringExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>String Example 3</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var value1 = 10;
 8 |         var value2 = true;
 9 |         var value3 = null;
10 |         var value4;
11 |         
12 |         alert(String(value1));     //"10"
13 |         alert(String(value2));     //"true"
14 |         alert(String(value3));     //"null"
15 |         alert(String(value4));     //"undefined"
16 | 
17 | 
18 | 
19 |     </script>
20 | 
21 | </head>
22 | <body>
23 |   
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Ch03/SwitchStatementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Switch Statement Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var i = 25;
 7 |         
 8 |         switch (i) {
 9 |             case 25: 
10 |                 alert("25");
11 |                 break;
12 |             case 35: 
13 |                 alert("35");
14 |                 break;
15 |             case 45: 
16 |                 alert("45");
17 |                 break;
18 |             default: 
19 |                 alert("Other");
20 |         }
21 | 
22 |     </script>
23 | </head>
24 | <body>
25 | 
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Ch03/SwitchStatementExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Switch Statement Example 2</title>
 5 |     <script type="text/javascript">
 6 |         var i = 25;
 7 |         
 8 |         switch (i) {
 9 |             case 25: 
10 |                 /* falls through */
11 |             case 35: 
12 |                 alert("25 or 35");
13 |                 break;
14 |             case 45: 
15 |                 alert("45");
16 |                 break;
17 |             default: 
18 |                 alert("Other");
19 |         }
20 | 
21 | 
22 |     </script>
23 | </head>
24 | <body>
25 | 
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Ch03/SwitchStatementExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Switch Statement Example 3</title>
 5 |     <script type="text/javascript">
 6 |         switch ("hello world") {
 7 |             case "hello" + " world": 
 8 |                 alert("Greeting was found.");
 9 |                 break;
10 |             case "goodbye": 
11 |                 alert("Closing was found.");
12 |                 break;
13 |             default: 
14 |                 alert("Unexpected message was found.");
15 |         }
16 | 
17 |     </script>
18 | </head>
19 | <body>
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch03/SwitchStatementExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Switch Statement Example 4</title>
 5 |     <script type="text/javascript">
 6 |         var num = 25;
 7 |         switch (true) {
 8 |             case num < 0: 
 9 |                 alert("Less than 0.");
10 |                 break;
11 |             case num >= 0 && num <= 10: 
12 |                 alert("Between 0 and 10.");
13 |                 break;
14 |             case num > 10 && num <= 20: 
15 |                 alert("Between 10 and 20.");
16 |                 break;
17 |             default: 
18 |                 alert("More than 20.");
19 |         }
20 | 
21 |     </script>
22 | </head>
23 | <body>
24 | 
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Ch03/TypeofExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>typeof Example</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var message = "some string";
 8 |         alert(typeof message);    //"string"
 9 |         alert(typeof 95);         //"number"
10 | 
11 |       
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/UnaryPlusMinusExample01.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch03/UnaryPlusMinusExample01.htm


--------------------------------------------------------------------------------
/Ch03/UnaryPlusMinusExample02.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch03/UnaryPlusMinusExample02.htm


--------------------------------------------------------------------------------
/Ch03/UndefinedExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Undefined Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var message;
 8 |         alert(message == undefined);    //true
 9 | 
10 | 
11 |       
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/UndefinedExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Undefined Example 2</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var message = undefined;
 8 |         alert(message == undefined);    //true
 9 | 
10 | 
11 |       
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/UndefinedExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Undefined Example 3</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var message;     //this variable is declared but has a value of undefined
 8 |         
 9 |         //make sure this variable isn't declared
10 |         //var age
11 |         
12 |         alert(message);  //"undefined"
13 |         alert(age);      //causes an error
14 | 
15 | 
16 |       
17 |     </script>
18 | 
19 | </head>
20 | <body>
21 |   
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch03/UndefinedExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Undefined Example 4</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var message;     //this variable is declared but has a value of undefined
 8 |         
 9 |         //make sure this variable isn't declared
10 |         //var age
11 |         
12 |         alert(typeof message);  //"undefined"
13 |         alert(typeof age);      //"undefined"
14 | 
15 | 
16 | 
17 |       
18 |     </script>
19 | 
20 | </head>
21 | <body>
22 |   
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Ch03/UnsignedRightShiftExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Unsigned Right Shift Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var oldValue = 64;               //equal to binary 1000000
 8 |         var newValue = oldValue >>> 5;   //equal to binary 10 which is decimal 2
 9 |         alert(newValue);                 //2
10 | 
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/UnsignedRightShiftExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Unsigned Right Shift Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var oldValue = -64;              //equal to binary 11111111111111111111111111000000
 8 |         var newValue = oldValue >>> 5;   //equal to decimal 134217726
 9 |         alert(newValue);                 //134217726
10 | 
11 | 
12 |     </script>
13 | 
14 | </head>
15 | <body>
16 |   
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch03/WhileStatementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>While Statement Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var i = 0;
 7 |         while (i < 10) {
 8 |            i += 2;
 9 |         }
10 | 
11 |         alert(i);
12 |         
13 |     </script>
14 | 
15 | </head>
16 | <body>
17 |   
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch03/WithStatementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>With Statement Example 1</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         with(location){
 8 |             var qs = search.substring(1);
 9 |             var hostName = hostname;      //unavailable when viewing from a local file
10 |             var url = href;
11 |         }
12 | 
13 |         alert(qs);
14 |         alert(hostName);
15 |         alert(url);
16 | 
17 | 
18 | 
19 |     </script>
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Ch04/DeterminingTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Determining Type Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var s = "Nicholas";
 7 |         var b = true;
 8 |         var i = 22;
 9 |         var u;
10 |         var n = null;
11 |         var o = new Object();
12 |         
13 |         alert(typeof s);   //string
14 |         alert(typeof i);   //number
15 |         alert(typeof b);   //Boolean
16 |         alert(typeof u);   //undefined
17 |         alert(typeof n);   //object
18 |         alert(typeof o);   //object
19 | 
20 |     </script>
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Ch04/DynamicPropertiesExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Dynamic Properties Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var person = new Object();
 7 |         person.name = "Nicholas";
 8 |         alert(person.name);    //"Nicholas"
 9 | 
10 |     </script>
11 | </head>
12 | <body>
13 | 
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Ch04/DynamicPropertiesExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Dynamic Properties Example 2</title>
 5 |     <script type="text/javascript">
 6 |         var name = "Nicholas";
 7 |         name.age = 27;
 8 |         alert(name.age);    //undefined
 9 |     </script>
10 | </head>
11 | <body>
12 | 
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch04/ExecutionContextExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Execution Context Example 1</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         var color = "blue";
 8 |         
 9 |         function changeColor(){
10 |             if (color === "blue"){
11 |                 color = "red";
12 |             } else {
13 |                 color = "blue";
14 |             }
15 |         }
16 |         
17 |         changeColor();
18 | 
19 |         alert("Color is now " + color);
20 |       
21 |     </script>
22 | 
23 | </head>
24 | <body>
25 |   
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Ch04/ExecutionContextExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Execution Context Example 3</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         function buildUrl() {
 8 |             var qs = "?debug=true";
 9 |         
10 |             with(location){
11 |                 var url = href + qs;        
12 |             }
13 |         
14 |             return url;
15 |         }
16 | 
17 |         var result = buildUrl();
18 |         alert(result);
19 |       
20 |     </script>
21 | 
22 | </head>
23 | <body>
24 |   
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Ch04/ExecutionContextExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Execution Context Example 4</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         function add(num1, num2) {
 8 |             var sum = num1 + num2;
 9 |             return sum;
10 |         }
11 |         
12 |         var result = add(10, 20);  //30
13 |         alert(sum);                //causes an error since sum is not a valid variable
14 | 
15 |       
16 |     </script>
17 | 
18 | </head>
19 | <body>
20 |   
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch04/ExecutionContextExample05.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Execution Context Example 5</title>
 5 |     <script type="text/javascript">
 6 |           
 7 |         function add(num1, num2) {
 8 |             sum = num1 + num2;
 9 |             return sum;
10 |         }
11 |         
12 |         var result = add(10, 20);  //30
13 |         alert(sum);                //30
14 | 
15 |       
16 |     </script>
17 | 
18 | </head>
19 | <body>
20 |   
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch04/ExecutionContextExample06.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Execution Context Example 6</title>
 5 |     <script type="text/javascript">
 6 |         var color = "blue";
 7 |         
 8 |         function getColor(){
 9 |             return color;
10 |         }
11 |         
12 |         alert(getColor());  //"blue"
13 | 
14 | 
15 |       
16 |     </script>
17 | 
18 | </head>
19 | <body>
20 |   
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch04/ExecutionContextExample07.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Execution Context Example 7</title>
 5 |     <script type="text/javascript">
 6 |         var color = "blue";
 7 |         
 8 |         function getColor(){
 9 |             var color = "red";
10 |             return color;
11 |         }
12 |         
13 |         alert(getColor());  //"red"
14 | 
15 | 
16 |       
17 |     </script>
18 | 
19 | </head>
20 | <body>
21 |   
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch04/FunctionArgumentsExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Arguments Example 1</title>
 5 |     <script type="text/javascript">
 6 |         function addTen(num) {
 7 |             num += 10;
 8 |             return num;
 9 |         }
10 |         
11 |         var count = 20
12 |         var result = addTen(count);
13 |         alert(count);    //20
14 |         alert(result);   //10
15 | 
16 |     </script>
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch04/FunctionArgumentsExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Arguments Example 2</title>
 5 |     <script type="text/javascript">
 6 |         function setName(obj) {
 7 |             obj.name = "Nicholas";
 8 |         }
 9 |         
10 |         var person = new Object();
11 |         setName(person);
12 |         alert(person.name);    //"Nicholas"
13 | 
14 |     </script>
15 | </head>
16 | <body>
17 | 
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayEveryAndSomeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array every() and some() Example</title>
 5 | </head>
 6 | <body>
 7 |     <script>
 8 |         var numbers = [1,2,3,4,5,4,3,2,1];
 9 |         
10 |         var everyResult = numbers.every(function(item, index, array){
11 |             return (item > 2);
12 |         });
13 |         
14 |         alert(everyResult);       //false
15 |         
16 |         var someResult = numbers.some(function(item, index, array){
17 |             return (item > 2);
18 |         });
19 |         
20 |         alert(someResult);       //true
21 | 
22 | 
23 |     </script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Ch05/ArrayFilterExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array indexOf() Example</title>
 5 | </head>
 6 | <body>
 7 |     <script>
 8 |         var numbers = [1,2,3,4,5,4,3,2,1];
 9 |         
10 |         var filterResult = numbers.filter(function(item, index, array){
11 |             return (item > 2);
12 |         });
13 |         
14 |         alert(filterResult);   //[3,4,5,4,3]
15 | 
16 |     </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch05/ArrayIndexOfExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array indexOf() Example</title>
 5 | </head>
 6 | <body>
 7 |     <script>
 8 |         var numbers = [1,2,3,4,5,4,3,2,1];
 9 |         
10 |         alert(numbers.indexOf(4));        //3
11 |         alert(numbers.lastIndexOf(4));    //5
12 |         
13 |         alert(numbers.indexOf(4, 4));     //5
14 |         alert(numbers.lastIndexOf(4, 4)); //3       
15 | 
16 |         var person = { name: "Nicholas" };
17 |         var people = [{ name: "Nicholas" }];
18 |         var morePeople = [person];
19 |         
20 |         alert(people.indexOf(person));     //-1
21 |         alert(morePeople.indexOf(person)); //0
22 | 
23 |     </script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Ch05/ArrayMapExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array map() Example</title>
 5 | </head>
 6 | <body>
 7 |     <script>
 8 |         var numbers = [1,2,3,4,5,4,3,2,1];
 9 |         
10 |         var mapResult = numbers.map(function(item, index, array){
11 |             return item * 2;
12 |         });
13 |         
14 |         alert(mapResult);   //[2,4,6,8,10,8,6,4,2]
15 | 
16 |     </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch05/ArrayReductionExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Reduction Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="application/javascript;version=1.8">
 8 |         
 9 |         var values = [1,2,3,4,5];
10 |         var sum = values.reduce(function(prev, cur, index, array){
11 |             return prev + cur;
12 |         });
13 |         alert(sum);
14 | 
15 | 
16 |     </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch05/ArrayTypeConcatExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Concat Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var colors = ["red", "green", "blue"];
 8 |         var colors2 = colors.concat("yellow", ["black", "brown"]);
 9 |         
10 |         alert(colors);     //red,green,blue        
11 |         alert(colors2);    //red,green,blue,yellow,black,brown
12 | 
13 |     </script>
14 | </head>
15 | <body>
16 | 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         var colors = new Array(3);      //create an array with three items
 8 |         var names = new Array("Greg");  //create an array with one item, the string "Greg"
 9 | 
10 |         alert(colors.length);
11 |         alert(names.length);
12 | 
13 |     </script>
14 | </head>
15 | <body>
16 | 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 3</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         var colors = ["red", "blue", "green"];    //creates an array with three strings
 8 |         colors.length = 2;
 9 |         alert(colors[2]);        //undefined
10 | 
11 |     </script>
12 | </head>
13 | <body>
14 | 
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 4</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         var colors = ["red", "blue", "green"];    //creates an array with three strings
 8 |         colors.length = 4;
 9 |         alert(colors[3]);        //undefined
10 | 
11 | 
12 |     </script>
13 | </head>
14 | <body>
15 | 
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample05.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 5</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         var colors = ["red", "blue", "green"];    //creates an array with three strings
 8 |         colors[colors.length] = "black";          //add a color
 9 |         colors[colors.length] = "brown";          //add another color
10 | 
11 |         alert(colors.length);    //5
12 |         alert(colors[3]);        //black
13 |         alert(colors[4]);        //brown
14 | 
15 |     </script>
16 | </head>
17 | <body>
18 | 
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample06.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 6</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         var colors = ["red", "blue", "green"];    //creates an array with three strings
 8 |         colors[99] = "black";                     //add a color (position 99)
 9 |         alert(colors.length);  //100
10 | 
11 | 
12 |     </script>
13 | </head>
14 | <body>
15 | 
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample07.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 7</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         var colors = ["red", "blue", "green"];    //creates an array with three strings
 8 |         alert(colors.toString());    //red,blue,green
 9 |         alert(colors.valueOf());     //red,blue,green
10 |         alert(colors);               //red,blue,green
11 | 
12 |     </script>
13 | </head>
14 | <body>
15 | 
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample09.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 9</title>
 5 |     <script type="text/javascript">
 6 |         var colors = new Array();                      //create an array
 7 |         var count = colors.push("red", "green");       //push two items
 8 |         alert(count);  //2
 9 |         
10 |         count = colors.push("black");                  //push another item on
11 |         alert(count);  //3
12 |         
13 |         var item = colors.pop();                       //get the last item
14 |         alert(item);   //"black"
15 |         alert(colors.length);  //2
16 |     </script>
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample10.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 10</title>
 5 |     <script type="text/javascript">
 6 |         var colors = ["red", "blue"];
 7 |         colors.push("brown");              //add another item
 8 |         colors[3] = "black";               //add an item
 9 |         alert(colors.length);  //4
10 |         
11 |         var item = colors.pop();           //get the last item
12 |         alert(item);  //"black"
13 | 
14 |     </script>
15 | </head>
16 | <body>
17 | 
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample11.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 11</title>
 5 |     <script type="text/javascript">
 6 |         var colors = new Array();                      //create an array
 7 |         var count = colors.push("red", "green");       //push two items
 8 |         alert(count);  //2
 9 |         
10 |         count = colors.push("black");                  //push another item on
11 |         alert(count);  //3
12 |         
13 |         var item = colors.shift();                     //get the first item
14 |         alert(item);   //"red"
15 |         alert(colors.length);  //2
16 | 
17 | 
18 |     </script>
19 | </head>
20 | <body>
21 | 
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample12.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 12</title>
 5 |     <script type="text/javascript">
 6 |         var colors = new Array();                      //create an array
 7 |         var count = colors.unshift("red", "green");    //push two items
 8 |         alert(count);  //2
 9 |         
10 |         count = colors.unshift("black");               //push another item on
11 |         alert(count);  //3
12 |         
13 |         var item = colors.pop();                     //get the first item
14 |         alert(item);   //"green"
15 |         alert(colors.length);  //2
16 | 
17 | 
18 | 
19 |     </script>
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample13.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 13</title>
 5 |     <script type="text/javascript">
 6 |         var values = [1, 2, 3, 4, 5];
 7 |         values.reverse();
 8 |         alert(values);       //5,4,3,2,1
 9 |     </script>
10 | </head>
11 | <body>
12 | 
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample14.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 14</title>
 5 |     <script type="text/javascript">
 6 |         var values = [0, 1, 5, 10, 15];
 7 |         values.sort();
 8 |         alert(values);    //0,1,10,15,5
 9 | 
10 |     </script>
11 | </head>
12 | <body>
13 | 
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample15.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 15</title>
 5 |     <script type="text/javascript">
 6 |         function compare(value1, value2) {
 7 |             if (value1 < value2) {
 8 |                 return -1;
 9 |             } else if (value1 > value2) {
10 |                 return 1;
11 |             } else {
12 |                 return 0;
13 |             }
14 |         }
15 |         
16 |         var values = [0, 1, 5, 10, 15];
17 |         values.sort(compare);
18 |         alert(values);    //0,1,5,10,15
19 | 
20 |     </script>
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeExample16.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Example 16</title>
 5 |     <script type="text/javascript">
 6 |         function compare(value1, value2) {
 7 |             if (value1 < value2) {
 8 |                 return 1;
 9 |             } else if (value1 > value2) {
10 |                 return -1;
11 |             } else {
12 |                 return 0;
13 |             }
14 |         }
15 |         
16 |         var values = [0, 1, 5, 10, 15];
17 |         values.sort(compare);
18 |         alert(values);    //15,10,5,1,0
19 | 
20 |     </script>
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeJoinExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Join Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var colors = ["red", "green", "blue"];
 8 |         alert(colors.join(","));      //red,green,blue
 9 |         alert(colors.join("||"));     //red||green||blue
10 | 
11 |     </script>
12 | </head>
13 | <body>
14 | 
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Ch05/ArrayTypeSliceExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Array Type Slice Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var colors = ["red", "green", "blue", "yellow", "purple"];
 8 |         var colors2 = colors.slice(1);
 9 |         var colors3 = colors.slice(1,4);
10 |         
11 |         alert(colors2);   //green,blue,yellow,purple
12 |         alert(colors3);   //green,blue,yellow
13 | 
14 |     </script>
15 | </head>
16 | <body>
17 | 
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch05/BooleanTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Boolean Type Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var falseObject = new Boolean(false);
 8 |         var result = falseObject && true;
 9 |         alert(result);  //true
10 | 
11 |         var falseValue = false;
12 |         result = falseValue && true;
13 |         alert(result);  //false
14 |         
15 |         alert(typeof falseObject);   //object
16 |         alert(typeof falseValue);    //boolean
17 |         alert(falseObject instanceof Boolean);  //true
18 |         alert(falseValue instanceof Boolean);   //false
19 |         
20 |     </script>
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Ch05/DateNowExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Date Now Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         //Date.now() is in ECMAScript 5
 8 |         //Prior to that, use +new Date()
 9 |     
10 |         var now = (typeof Date.now == "function" ? Date.now() : +new Date());
11 |         alert("Right now: " + now);
12 | 
13 |     </script>
14 | </head>
15 | <body>
16 | 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch05/DateTypeConstructorExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Date Type Constructor Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         //January 1, 2000 at midnight in local time
 8 |         var y2k = new Date(2000, 0);
 9 |         alert(y2k.toLocaleString());
10 |         
11 |         //May 5, 2005 at 5:55:55 PM in local time
12 |         var allFives = new Date(2005, 4, 5, 17, 55, 55);
13 |         alert(allFives.toLocaleString());
14 | 
15 | 
16 |     </script>
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch05/DateTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Date Type Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var now = new Date();
 8 |         alert(now);
 9 |         
10 |         var someDate = new Date(Date.parse("May 25, 2004"));
11 |         alert(someDate);
12 | 
13 |     </script>
14 | </head>
15 | <body>
16 | 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch05/DateTypeUTCExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Date Type Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         //January 1, 2000 at midnight
 8 |         var y2k = new Date(Date.UTC(2000, 0));
 9 |         alert(y2k.toUTCString());
10 |         
11 |         //May 5, 2005 at 5:55:55 PM GMT
12 |         var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));
13 |         alert(allFives.toUTCString());
14 | 
15 | 
16 |     </script>
17 | </head>
18 | <body>
19 | 
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch05/DateTypeValueOfExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Date Type ValueOf() Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var date1 = new Date(2007, 0, 1);          //January 1, 2007
 8 |         var date2 = new Date(2007, 1, 1);          //February 1, 2007
 9 |         
10 |         alert(date1 < date2);  //true
11 |         alert(date1 > date2);  //false
12 | 
13 |     </script>
14 | </head>
15 | <body>
16 | 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch05/DetectingArraysExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Detecting Arrays Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         alert(Array.isArray([]));   //true
 8 |         alert(Array.isArray({}));   //false
 9 | 
10 |     </script>
11 | </head>
12 | <body>
13 | <p>This example is known to work in Internet Explorer 9, Firefox 4, Chrome 4, and Opera 10.5.</p>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionDeclarationExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Declaration Example</title>
 5 |     <script type="text/javascript">
 6 |         alert(sum(10,10));    //20
 7 |     
 8 |         function sum(num1, num2){
 9 |             return num1 + num2;
10 |         }        
11 | 
12 |     </script>
13 | </head>
14 | <body>
15 | 
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionInitializationExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Declaration Example</title>
 5 |     <script type="text/javascript">
 6 |         alert(sum(10,10));    //causes an error
 7 |     
 8 |         var sum = function(num1, num2){
 9 |             return num1 + num2;
10 |         }; 
11 | 
12 |     </script>
13 | </head>
14 | <body>
15 | 
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionTypeApplyMethodExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Type apply() Method Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         function sum(num1, num2){
 8 |             return num1 + num2;
 9 |         }
10 |         
11 |         function callSum1(num1, num2){
12 |             return sum.apply(this, arguments);
13 |         }
14 |         
15 |         function callSum2(num1, num2){
16 |             return sum.apply(this, [num1, num2]);
17 |         }
18 |         
19 |         alert(callSum1(10,10));   //20
20 |         alert(callSum2(10,10));   //20
21 | 
22 |     </script>
23 | </head>
24 | <body>
25 | 
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionTypeArgumentsCallerExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Type Arguments Caller Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         function outer(){
 8 |             inner();
 9 |         }
10 |         
11 |         function inner(){
12 |             alert(inner.caller);
13 |         }
14 |         
15 |         outer();
16 | 
17 | 
18 |     </script>
19 | </head>
20 | <body>
21 | 
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionTypeArgumentsCallerExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Type Arguments Caller Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         function outer(){
 8 |             inner();
 9 |         }
10 |         
11 |         function inner(){
12 |             alert(arguments.callee.caller);
13 |         }
14 |         
15 |         outer();
16 | 
17 | 
18 |     </script>
19 | </head>
20 | <body>
21 | 
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionTypeArgumentsExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Type Arguments Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         function factorial(num){
 8 |             if (num <= 1) {
 9 |                 return 1;
10 |             } else {
11 |                 return num * arguments.callee(num-1)
12 |             }
13 |         }
14 | 
15 |         var trueFactorial = factorial;
16 |         
17 |         factorial = function(){
18 |             return 0;
19 |         };
20 |         
21 |         alert(trueFactorial(5));   //120
22 |         alert(factorial(5));       //0
23 | 
24 | 
25 |     </script>
26 | </head>
27 | <body>
28 | 
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionTypeBindMethodExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Type bind() Method Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         window.color = "red";
 8 |         var o = { color: "blue" };
 9 |                            
10 |         function sayColor(){
11 |             alert(this.color);
12 |         }
13 |         var objectSayColor = sayColor.bind(o);
14 |         objectSayColor();   //blue
15 | 
16 | 
17 |     </script>
18 | </head>
19 | <body>
20 |     <p>This example is known to work in Internet Explorer 9, Firefox 4, and Chrome 6.</p>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionTypeCallExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Type call() Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         window.color = "red";
 8 |         var o = { color: "blue" };
 9 |         
10 |         function sayColor(){
11 |             alert(this.color);
12 |         }
13 |         
14 |         sayColor();            //red
15 |         
16 |         sayColor.call(this);   //red
17 |         sayColor.call(window); //red
18 |         sayColor.call(o);      //blue
19 | 
20 |     </script>
21 | </head>
22 | <body>
23 | 
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionTypeCallMethodExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Type call() Method Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         function sum(num1, num2){
 8 |             return num1 + num2;
 9 |         }
10 |         
11 |         function callSum(num1, num2){
12 |             return sum.call(this, num1, num2);
13 |         }
14 |         
15 |         alert(callSum(10,10));   //20
16 | 
17 |     </script>
18 | </head>
19 | <body>
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Type Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         function sum(num1, num2){
 8 |             return num1 + num2;
 9 |         }        
10 |         alert(sum(10,10));    //20
11 |         
12 |         var anotherSum = sum;        
13 |         alert(anotherSum(10,10));  //20
14 |         
15 |         sum = null;        
16 |         alert(anotherSum(10,10));  //20
17 |         
18 |     </script>
19 | </head>
20 | <body>
21 | 
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionTypeLengthPropertyExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Type Length Property Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         function sayName(name){
 8 |             alert(name);
 9 |         }      
10 |         
11 |         function sum(num1, num2){
12 |             return num1 + num2;
13 |         }
14 |         
15 |         function sayHi(){
16 |             alert("hi");
17 |         }
18 |         
19 |         alert(sayName.length);  //1
20 |         alert(sum.length);      //2
21 |         alert(sayHi.length);    //0
22 | 
23 |     </script>
24 | </head>
25 | <body>
26 | 
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/Ch05/FunctionTypeThisExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Type this Example</title>
 5 |     <script type="text/javascript">
 6 |         
 7 |         window.color = "red";
 8 |         var o = { color: "blue" };
 9 |         
10 |         function sayColor(){
11 |             alert(this.color);
12 |         }
13 |         
14 |         sayColor();     //red
15 |         
16 |         o.sayColor = sayColor;
17 |         o.sayColor();   //blue
18 | 
19 | 
20 | 
21 |     </script>
22 | </head>
23 | <body>
24 | 
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Ch05/GlobalObjectURIDecodingExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Global Object URI Decoding Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var uri = "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start";
 8 |         
 9 |         //http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start
10 |         alert(decodeURI(uri));
11 |         
12 |         //http://www.wrox.com/illegal value.htm#start
13 |         alert(decodeURIComponent(uri));
14 |         
15 |     </script>
16 | </head>
17 | <body>
18 | 
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch05/GlobalObjectURIEncodingExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Global Object URI Encoding Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var uri = "http://www.wrox.com/illegal value.htm#start";
 8 |         
 9 |         //"http://www.wrox.com/illegal%20value.htm#start"
10 |         alert(encodeURI(uri));
11 |         
12 |         //"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"
13 |         alert(encodeURIComponent(uri));
14 | 
15 | 
16 |         
17 |     </script>
18 | </head>
19 | <body>
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch05/GlobalObjectWindowExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Global Object Window Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var color = "red";
 8 |         
 9 |         function sayColor(){
10 |             alert(window.color);
11 |         }
12 |         
13 |         window.sayColor();  //"red"
14 |         
15 |     </script>
16 | </head>
17 | <body>
18 | 
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch05/MathObjectMinMaxExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Math Object Min/Max Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var max = Math.max(3, 54, 32, 16);
 8 |         alert(max);    //54
 9 |         
10 |         var min = Math.min(3, 54, 32, 16);
11 |         alert(min);    //3
12 | 
13 |         
14 |     </script>
15 | </head>
16 | <body>
17 | 
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch05/MathObjectRandomExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Math Object Random Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var num = Math.floor(Math.random() * 10 + 1);
 7 |         alert(num);    //a number between 1 and 10
 8 |         
 9 |     </script>
10 | </head>
11 | <body>
12 | 
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch05/MathObjectRandomExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Math Object Random Example 2</title>
 5 |     <script type="text/javascript">
 6 |         var num = Math.floor(Math.random() * 9 + 2);
 7 |         alert(num);    //a number between 2 and 10
 8 |         
 9 |     </script>
10 | </head>
11 | <body>
12 | 
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch05/MathObjectRoundingExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Math Object Rounding Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         alert(Math.ceil(25.9));     //26
 8 |         alert(Math.ceil(25.5));     //26
 9 |         alert(Math.ceil(25.1));     //26
10 |         
11 |         alert(Math.round(25.9));    //26
12 |         alert(Math.round(25.5));    //26
13 |         alert(Math.round(25.1));    //25
14 |                 
15 |         alert(Math.floor(25.9));    //25
16 |         alert(Math.floor(25.5));    //25
17 |         alert(Math.floor(25.1));    //25
18 |         
19 |     </script>
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Ch05/ObjectTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Object Type Example 1</title>
 5 |     <script type="text/javascript">
 6 |         var person = new Object();
 7 |         person.name = "Nicholas";
 8 |         person.age = 29;
 9 | 
10 |         alert(person.name);
11 |         alert(person.age);
12 | 
13 |     </script>
14 | </head>
15 | <body>
16 | 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch05/ObjectTypeExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Object Type Example 2</title>
 5 |     <script type="text/javascript">
 6 |         var person = {
 7 |             name : "Nicholas",
 8 |             age : 29
 9 |         };
10 | 
11 |         alert(person.name);
12 |         alert(person.age);
13 | 
14 |     </script>
15 | </head>
16 | <body>
17 | 
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch05/ObjectTypeExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Object Type Example 3</title>
 5 |     <script type="text/javascript">
 6 |         var person = {
 7 |             "name" : "Nicholas",
 8 |             "age" : 29
 9 |         };
10 | 
11 |         alert(person.name);
12 |         alert(person.age);
13 | 
14 |     </script>
15 | </head>
16 | <body>
17 | 
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch05/RegExpConstructorPropertiesExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>RegExp Constructor Properties Example 2</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var text = "this has been a short summer";
 8 |         var pattern = /(..)or(.)/g;
 9 |               
10 |         if (pattern.test(text)){
11 |             alert(RegExp.$1);       //sh
12 |             alert(RegExp.$2);       //t
13 |         }
14 | 
15 |     </script>
16 | </head>
17 | <body>
18 | 
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch05/RegExpExecExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>RegExp exec() Example</title>
 5 |     <script type="text/javascript">
 6 |         var text = "mom and dad and baby";
 7 |         
 8 |         var pattern = /mom( and dad( and baby)?)?/gi;
 9 |         var matches = pattern.exec(text);
10 |         
11 |         alert(matches.index);    //0
12 |         alert(matches.input);    //"mom and dad and baby"
13 |         alert(matches[0]);       //"mom and dad and baby"
14 |         alert(matches[1]);       //" and dad and baby"
15 |         alert(matches[2]);       //" and baby"
16 | 
17 |     </script>
18 | </head>
19 | <body>
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch05/RegExpTestExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>RegExp test() Example</title>
 5 |     <script type="text/javascript">
 6 |         var text = "cat, bat, sat, fat";        
 7 |         var pattern = /.at/;
 8 |         
 9 |         if (pattern.test(text)){
10 |             alert("The pattern was matched.");
11 |         }
12 | 
13 |     </script>
14 | </head>
15 | <body>
16 | 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch05/RegExpToStringExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>RegExp toString() Example</title>
 5 |     <script type="text/javascript">
 6 |       
 7 |         var pattern = new RegExp("\\[bc\\]at", "gi");
 8 |         alert(pattern.toString());    // /\[bc\]at/gi
 9 |         alert(pattern.toLocaleString());    // /\[bc\]at/gi
10 | 
11 |     </script>
12 | </head>
13 | <body>
14 | 
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Ch05/StringTypeCaseMethodExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>String Type Case Methods Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var stringValue = "hello world";
 8 |         alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"
 9 |         alert(stringValue.toUpperCase());        //"HELLO WORLD"
10 |         alert(stringValue.toLocaleLowerCase());  //"hello world"
11 |         alert(stringValue.toLowerCase());        //"hello world"
12 | 
13 |     </script>
14 | </head>
15 | <body>
16 | 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch05/StringTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>String Type Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var stringObject = new String("hello world");
 8 |         var stringValue = "hello world";
 9 |         
10 |         alert(typeof stringObject);   //"object"
11 |         alert(typeof stringValue);    //"string"
12 |         alert(stringObject instanceof String);  //true
13 |         alert(stringValue instanceof String);   //false
14 |         
15 |     </script>
16 | </head>
17 | <body>
18 | 
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch05/StringTypeFromCharCodeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>String Type fromCharCode() Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"
 8 |         
 9 |     </script>
10 | </head>
11 | <body>
12 | 
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch05/StringTypeLocationMethodsExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>String Type Location Methods Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var stringValue = "hello world";
 8 |         alert(stringValue.indexOf("o"));         //4
 9 |         alert(stringValue.lastIndexOf("o"));     //7
10 |         alert(stringValue.indexOf("o", 6));         //7
11 |         alert(stringValue.lastIndexOf("o", 6));     //4                
12 |         
13 |     </script>
14 | </head>
15 | <body>
16 | 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch05/StringTypeLocationMethodsExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>String Type Location Methods Example 2</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit";
 8 |         var positions = new Array();
 9 |         var pos = stringValue.indexOf("e");
10 |         
11 |         while(pos > -1){
12 |             positions.push(pos);
13 |             pos = stringValue.indexOf("e", pos + 1);
14 |         }
15 |             
16 |         alert(positions);    //"3,24,32,35,52"
17 |     </script>
18 | </head>
19 | <body>
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch06/CreatingObjectsExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Creating Objects Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var person = new Object();
 8 |         person.name = "Nicholas";
 9 |         person.age = 29;
10 |         person.job = "Software Engineer";
11 |         person.sayName = function(){
12 |             alert(this.name);
13 |         };
14 |         
15 |         person.sayName();
16 | 
17 |     </script>
18 | </head>
19 | <body>
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch06/DataPropertiesExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Data Properties Example</title>
 5 |     <script type="text/javascript">
 6 | 
 7 |         var person = {};
 8 |         Object.defineProperty(person, "name", {
 9 |             writable: false,
10 |             value: "Nicholas"
11 |         });
12 |         
13 |         alert(person.name);
14 |         person.name = "Michael";
15 |         alert(person.name);
16 | 
17 | 
18 |     </script>
19 | </head>
20 | <body>
21 |     <p>Note: this example only works in browsers that have implemented the ECMAScript 5 <code>Object.defineProperty()</code> method (IE9 and Firefox 4).</p>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch06/DataPropertiesExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Data Properties Example</title>
 5 |     <script type="text/javascript">
 6 | 
 7 |         var person = {};
 8 |         Object.defineProperty(person, "name", {
 9 |             configurable: false,
10 |             value: "Nicholas"
11 |         });
12 |         
13 |         alert(person.name);
14 |         delete person.name;
15 |         alert(person.name);
16 | 
17 |     </script>
18 | </head>
19 | <body>
20 |     <p>Note: this example only works in browsers that have implemented the ECMAScript 5 <code>Object.defineProperty()</code> method (IE9 and Firefox 4).</p>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch06/DataPropertiesExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Data Properties Example</title>
 5 |     <script type="text/javascript">
 6 | 
 7 |         var person = {};
 8 |         Object.defineProperty(person, "name", {
 9 |             configurable: false,
10 |             value: "Nicholas"
11 |         });
12 |         
13 |         //throws error
14 |         Object.defineProperty(person, "name", {
15 |             configurable: true,
16 |             value: "Nicholas"
17 |         });
18 | 
19 |     </script>
20 | </head>
21 | <body>
22 |     <p>Note: this example only works in browsers that have implemented the ECMAScript 5 <code>Object.defineProperty()</code> method (IE9 and Firefox 4).</p>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Ch06/HybridFactoryPatternExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Hybrid Factory Pattern Example</title>
 5 |     <script type="text/javascript">
 6 |                     
 7 |         function Person(name, age, job){
 8 |             var o = new Object();
 9 |             o.name = name;
10 |             o.age = age;
11 |             o.job = job;
12 |             o.sayName = function(){
13 |                 alert(this.name);
14 |             };    
15 |             return o;
16 |         }
17 |         
18 |         var friend = new Person("Nicholas", 29, "Software Engineer");
19 |         friend.sayName();  //"Nicholas"
20 | 
21 | 
22 |         
23 |     </script>
24 | </head>
25 | <body>
26 | 
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/Ch06/PrototypeChainingExample03.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch06/PrototypeChainingExample03.htm


--------------------------------------------------------------------------------
/Ch06/PrototypePatternExample02.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch06/PrototypePatternExample02.htm


--------------------------------------------------------------------------------
/Ch06/PrototypePatternExample03.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch06/PrototypePatternExample03.htm


--------------------------------------------------------------------------------
/Ch06/PrototypePatternExample04.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch06/PrototypePatternExample04.htm


--------------------------------------------------------------------------------
/Ch06/PrototypePatternExample06.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Prototype Pattern Example</title>
 5 |     <script type="text/javascript">
 6 |     
 7 |         var o = {
 8 |             toString : function(){
 9 |                 return "My Object";
10 |             }
11 |         }
12 | 
13 |         for (var prop in o){
14 |             if (prop == "toString"){
15 |                 alert("Found toString");
16 |             }
17 |         }
18 | 
19 |     </script>
20 | </head>
21 | <body>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Ch06/PrototypePatternExample09.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch06/PrototypePatternExample09.htm


--------------------------------------------------------------------------------
/Ch06/PrototypePatternExample10.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Prototype Pattern Example</title>
 5 |     <script type="text/javascript">
 6 |                     
 7 |         function Person(){
 8 |         }
 9 |         
10 |         var friend = new Person();
11 |                 
12 |         Person.prototype = {
13 |             constructor: Person,
14 |             name : "Nicholas",
15 |             age : 29,
16 |             job : "Software Engineer",
17 |             sayName : function () {
18 |                 alert(this.name);
19 |             }
20 |         };
21 |         
22 |         friend.sayName();   //error
23 | 
24 | 
25 |         
26 |     </script>
27 | </head>
28 | <body>
29 | 
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/Ch06/PrototypePatternExample11.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Prototype Pattern Example</title>
 5 |     <script type="text/javascript">
 6 |                     
 7 |                     
 8 |         alert(typeof Array.prototype.sort);         //"function"
 9 |         alert(typeof String.prototype.substring);   //"function"
10 | 
11 |         String.prototype.startsWith = function (text) {
12 |             return this.indexOf(text) == 0;
13 |         };
14 |         
15 |         var msg = "Hello world!";
16 |         alert(msg.startsWith("Hello"));   //true
17 |         
18 |     </script>
19 | </head>
20 | <body>
21 | 
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch07/BlockScopeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Block Scope Example</title>
 5 |     </head>
 6 |     <body>
 7 |         <script type="text/javascript">
 8 |         
 9 |             function outputNumbers(count){
10 |                 for (var i=0; i < count; i++){
11 |                     alert(i);
12 |                 }
13 |             
14 |                 alert(i);   //count
15 |             }
16 | 
17 |             outputNumbers(5);
18 |         </script>
19 |      
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Ch07/BlockScopeExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Block Scope Example</title>
 5 |     </head>
 6 |     <body>
 7 |         <script type="text/javascript">
 8 |         
 9 |             function outputNumbers(count){
10 |                 for (var i=0; i < count; i++){
11 |                     alert(i);
12 |                 }
13 |             
14 |                 var i;    //variable re-declared
15 |                 alert(i);   //count
16 |             }
17 | 
18 |             outputNumbers(5);
19 |         </script>
20 |      
21 |     </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Ch07/BlockScopeExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Block Scope Example</title>
 5 |     </head>
 6 |     <body>
 7 |         <script type="text/javascript">
 8 |         
 9 |             function outputNumbers(count){
10 |             
11 |                 (function () {
12 |                     for (var i=0; i < count; i++){
13 |                         alert(i);
14 |                     }
15 |                 })();
16 |                 
17 |                 alert(i);   //causes an error
18 |             }
19 | 
20 |             outputNumbers(5);
21 |         </script>
22 |      
23 |     </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Ch07/FunctionDeclarationHoisting01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Function Declaration Hoisting Example</title>
 5 |     </head>
 6 |     <body>
 7 |         <script type="text/javascript">
 8 |         
 9 |             sayHi();
10 |             function sayHi(){
11 |                 alert("Hi!");
12 |             }
13 |         
14 |         </script>
15 |      
16 |     </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch07/FunctionDeclarationsErrorExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Function Declaration Error Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |     
 9 |     var condition = true;
10 |     
11 |     //never do this!
12 |     if(condition){
13 |         function sayHi(){
14 |             alert("Hi!");
15 |         }
16 |     } else {
17 |         function sayHi(){
18 |             alert("Yo!");
19 |         }
20 |     }
21 | 
22 |     sayHi();
23 |     </script>
24 |  
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Ch07/FunctionNameExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Function Name Example</title>
 5 |     </head>
 6 |     <body>
 7 |         <script type="text/javascript">
 8 |         
 9 |             function functionName(){
10 |                 //noop
11 |             }
12 |             
13 |             //works only in Firefox, Safari, Chrome, and Opera
14 |             alert(functionName.name); //"functionName"
15 | 
16 |         </script>
17 |      
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch07/RecursionExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Recursion Example</title>
 5 |     </head>
 6 |     <body>
 7 |         <script type="text/javascript">
 8 |         
 9 |             function factorial(num){
10 |                 if (num <= 1){
11 |                     return 1;
12 |                 } else {
13 |                     return num * factorial(num-1);
14 |                 }
15 |             }
16 | 
17 |             var anotherFactorial = factorial;
18 |             factorial = null;
19 |             alert(anotherFactorial(4));  //error!
20 | 
21 | 
22 |         </script>
23 |      
24 |     </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Ch07/RecursionExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Recursion Example</title>
 5 |     </head>
 6 |     <body>
 7 |         <script type="text/javascript">
 8 |         
 9 |             function factorial(num){
10 |                 if (num <= 1){
11 |                     return 1;
12 |                 } else {
13 |                     return num * arguments.callee(num-1);
14 |                 }
15 |             }
16 | 
17 |             var anotherFactorial = factorial;
18 |             factorial = null;
19 |             alert(anotherFactorial(4));  //24
20 | 
21 | 
22 |         </script>
23 |      
24 |     </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Ch07/ThisObjectExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>This Object Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |         var name = "The Window";
 9 |         
10 |         var object = {
11 |             name : "My Object",
12 |         
13 |             getNameFunc : function(){
14 |                 return function(){
15 |                     return this.name;
16 |                 };
17 |             }
18 |         };
19 |         
20 |         alert(object.getNameFunc()());  //"The Window"
21 | 
22 | 
23 |     </script>
24 |  
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Ch07/ThisObjectExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>This Object Example 2</title>
 5 |     </head>
 6 |     <body>
 7 |         <script type="text/javascript">
 8 |         
 9 |             var name = "The Window";
10 |             
11 |             var object = {
12 |                 name : "My Object",
13 |             
14 |                 getNameFunc : function(){
15 |                     var that = this;
16 |                     return function(){
17 |                         return that.name;
18 |                     };
19 |                 }
20 |             };
21 |             
22 |             alert(object.getNameFunc()());  //"MyObject"
23 | 
24 | 
25 |         </script>
26 |      
27 |     </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Ch08/DeleteOperatorExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Delete Operator Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>Hello world!</p>
 8 |     <script type="text/javascript">
 9 | 
10 |         var age = 29;
11 |         window.color = "red";
12 |         
13 |         //throws an error in IE < 9, returns false in all other browsers
14 |         delete window.age;
15 | 
16 |         //throws an error in IE < 9, returns true in all other browsers
17 |         delete window.color;    //returns true
18 |         
19 |         alert(window.age);      //29
20 |         alert(window.color);    //undefined
21 | 
22 |     </script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Ch08/FramesetExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 2 | "http://www.w3.org/TR/html4/frameset.dtd">
 3 | <html>
 4 | <head>
 5 |     <title>Frameset Example</title>
 6 | </head>
 7 | <frameset rows="160,*">
 8 |     <frame src="frame.htm" name="topFrame">
 9 |     <frameset cols="50%,50%">
10 |         <frame src="anotherframe.htm" name="leftFrame">
11 |         <frame src="yetanotherframe.htm" name="rightFrame">
12 |     </frameset>
13 | </frameset>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/Ch08/IntervalExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Interval Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 | 
 9 |         //avoid!
10 |         setInterval("alert('Hello world!') ", 10000);
11 |         
12 |         //preferred
13 |         setInterval(function() { 
14 |             alert("Hello world!"); 
15 |         }, 10000);            
16 | 
17 | 
18 |     </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch08/IntervalExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Interval Example 2</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 | 
 9 |         var num = 0;
10 |         var max = 10;
11 |         var intervalId = null;
12 |         
13 |         function incrementNumber() {
14 |             num++;
15 |         
16 |             //if the max has been reached, cancel all pending executions
17 |             if (num == max) {
18 |                 clearInterval(intervalId);
19 |                 alert("Done");
20 |             }
21 |         }
22 |         
23 |         intervalId = setInterval(incrementNumber, 500);
24 | 
25 | 
26 |     </script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Ch08/LocationReplaceExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>You won't be able to get back here</title>
 5 | </head>
 6 | <body>
 7 |     <p>Enjoy this page for a second, because you won't be coming back here.</p>
 8 |     <script type="text/javascript">
 9 |         setTimeout(function () {
10 |             location.replace("http://www.wrox.com/");
11 |         }, 1000);
12 |     </script>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/Ch08/PluginDetectionExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>IE Plugin Detection Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |     
 9 |         //plugin detection for IE
10 |         function hasIEPlugin(name){
11 |             try {
12 |                 new ActiveXObject(name);
13 |                 return true;
14 |             } catch (ex){
15 |                 return false;
16 |             }
17 |         }
18 |         
19 |         //detect flash
20 |         alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
21 |         
22 |         //detect quicktime
23 |         alert(hasIEPlugin("QuickTime.QuickTime"));
24 | 
25 |     </script>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Ch08/PopupBlockerExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Popup Blocker Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |     
 9 |         var blocked = false;
10 |         
11 |         try {
12 |             var wroxWin = window.open("http://www.wrox.com", "_blank");
13 |             if (wroxWin == null){
14 |                 blocked = true;
15 |             }
16 |         } catch (ex){
17 |             blocked = true;
18 |         }
19 |         
20 |         if (blocked){
21 |             alert("The popup was blocked!");
22 |         }
23 | 
24 |     </script>
25 |     <p>This page tries to open a window as the page is loading. It should be blocked.</p>
26 |  
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Ch08/SystemDialogExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>System Dialogs Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 | 
 9 |         alert("Hello world!");
10 |     </script>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/Ch08/SystemDialogExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>System Dialogs Example 2</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 | 
 9 |         if (confirm("Are you sure?")) {
10 |             alert("I'm so glad you're sure! ");
11 |         } else {
12 |              alert("I'm sorry to hear you're not sure. ");
13 |         }
14 | 
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch08/SystemDialogExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>System Dialogs Example 3</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 | 
 9 |         var result = prompt("What is your name? ", "");
10 |         if (result !== null) {
11 |          alert("Welcome, " + result);
12 |         }
13 | 
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Ch08/TimeoutExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Timeout Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 | 
 9 |         //avoid!
10 |         setTimeout("alert('Hello world!') ", 1000);
11 |         
12 |         //preferred
13 |         setTimeout(function() { 
14 |             alert("Hello world!"); 
15 |         }, 1000);
16 | 
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch08/TimeoutExample02.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch08/TimeoutExample02.htm


--------------------------------------------------------------------------------
/Ch08/TimeoutExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Timeout Example 3</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 | 
 9 |         var num = 0;
10 |         var max = 100;
11 |         
12 |         function incrementNumber() {
13 |             num++;
14 |         
15 |             //if the max has not been reached, set another timeout
16 |             if (num < max) {
17 |                 setTimeout(incrementNumber, 500);
18 |             } else {
19 |                 alert("Done");
20 |             }
21 |         }
22 |         
23 |         setTimeout(incrementNumber, 500);
24 | 
25 | 
26 | 
27 |     </script>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Ch08/WindowOpenExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Window Open Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This will open a new window/tab:
 8 |     <input type="button" value="Go to Wrox.com" onclick="window.open('http://www.wrox.com/')" /></p>
 9 |     <p>This will open in the current window/tab:
10 |     <input type="button" value="Go to Wrox.com" onclick="window.open('http://www.wrox.com/', '_self')" /></p>
11 |     
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/Ch08/WindowOpenExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Window Open Example 2</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |     
 9 |         function openNewWindow(){
10 |             var win = window.open('http://www.wrox.com/', 'wroxWindow', 'width=300,height=300,left=10,top=10');
11 |             win.resizeTo(500,500);
12 |             win.moveTo(100,100);
13 |         }
14 |         
15 |         window.open("http://www.wrox.com");
16 |     </script>
17 |     <p>This will open a new window/tab:
18 |     <input type="button" value="Go to Wrox.com" onclick="openNewWindow()" /></p>
19 |  
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Ch08/WindowPositionExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Window Position Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |         var leftPos = (typeof window.screenLeft == "number") ? 
 9 |                           window.screenLeft : window.screenX;
10 |         var topPos = (typeof window.screenTop == "number") ? 
11 |                           window.screenTop : window.screenY;
12 | 
13 |         alert("Left: " + leftPos);
14 |         alert("Top: " + topPos);
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch08/WindowPositionExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Window Position Example 2</title>
 5 | </head>
 6 | <body>
 7 |     <input type="button" value="Move to (0,0)" onclick="moveTo(0,0)" />
 8 |     <input type="button" value="Move by (50,50)" onclick="moveBy(50,50)" />
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/Ch08/WindowSizeExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Window Size Example 2</title>
 5 | </head>
 6 | <body>
 7 |     <input type="button" value="Resize to (800,600)" onclick="resizeTo(800,600)" />
 8 |     <input type="button" value="Resize by (50,50)" onclick="resizeBy(50,50)" />
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/Ch08/anotherframe.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <title>leftFrame</title>
 5 | </head>
 6 | <body>
 7 |     <h1>leftFrame</h1>
 8 |     <table border="1">
 9 |         <tr>
10 |             <td>window.name =</td><td><script>document.write(window.name)</script></td>
11 |         </tr>
12 |         <tr>
13 |             <td>top.name =</td><td><script>document.write(top.name)</script></td>
14 |         </tr>
15 |         <tr>
16 |             <td>parent.name =</td><td><script>document.write(parent.name)</script></td>
17 |         </tr>
18 |     </table>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch08/anotherframeset.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 2 | "http://www.w3.org/TR/html4/frameset.dtd">
 3 | <html>
 4 | <head>
 5 |     <title>Frameset Example</title>
 6 | </head>
 7 | <frameset cols="50%,50%">
 8 |     <frame src="red.htm" name="redFrame">
 9 |     <frame src="blue.htm" name="blueFrame">
10 | </frameset>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/Ch08/blue.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <title>blueFrame</title>
 5 | </head>
 6 | <body style="background-color: blue; color: white">
 7 |     <h1>blueFrame</h1>
 8 |     <table border="1">
 9 |         <tr>
10 |             <td>window.name =</td><td><script>document.write(window.name)</script></td>
11 |         </tr>
12 |         <tr>
13 |             <td>top.name =</td><td><script>document.write(top.name)</script></td>
14 |         </tr>
15 |         <tr>
16 |             <td>parent.name =</td><td><script>document.write(parent.name)</script></td>
17 |         </tr>
18 |     </table>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch08/frame.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <title>topFrame</title>
 5 | </head>
 6 | <body>
 7 |     <h1>topFrame</h1>
 8 |     <table border="1">
 9 |         <tr>
10 |             <td>window.name =</td><td><script>document.write(window.name)</script></td>
11 |         </tr>
12 |         <tr>
13 |             <td>top.name =</td><td><script>document.write(top.name)</script></td>
14 |         </tr>
15 |         <tr>
16 |             <td>parent.name =</td><td><script>document.write(parent.name)</script></td>
17 |         </tr>
18 |     </table>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch08/frameset1.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 2 | "http://www.w3.org/TR/html4/frameset.dtd">
 3 | <html>
 4 | <head>
 5 |     <title>Frameset Example</title>
 6 | </head>
 7 | <frameset rows="100,*">
 8 |     <frame src="frame.htm" name="topFrame">
 9 |     <frameset cols="50%,50%">
10 |         <frame src="anotherframe.htm" name="leftFrame">
11 |         <frame src="anotherframeset.htm" name="rightFrame">
12 |     </frameset>
13 | </frameset>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/Ch08/red.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <title>redFrame</title>
 5 | </head>
 6 | <body style="background-color: red; color: white">
 7 |     <h1>redFrame</h1>
 8 |     <table border="1">
 9 |         <tr>
10 |             <td>window.name =</td><td><script>document.write(window.name)</script></td>
11 |         </tr>
12 |         <tr>
13 |             <td>top.name =</td><td><script>document.write(top.name)</script></td>
14 |         </tr>
15 |         <tr>
16 |             <td>parent.name =</td><td><script>document.write(parent.name)</script></td>
17 |         </tr>
18 |     </table>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch08/yetanotherframe.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <title>rightFrame</title>
 5 | </head>
 6 | <body>
 7 |     <h1>rightFrame</h1>
 8 |     <table border="1">
 9 |         <tr>
10 |             <td>window.name =</td><td><script>document.write(window.name)</script></td>
11 |         </tr>
12 |         <tr>
13 |             <td>top.name =</td><td><script>document.write(top.name)</script></td>
14 |         </tr>
15 |         <tr>
16 |             <td>parent.name =</td><td><script>document.write(parent.name)</script></td>
17 |         </tr>
18 |     </table>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch10/CommentNodeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Comment Node Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="myDiv"><!-- A comment --></div>
 8 |     <input type="button" value="Get Comment" onclick="getComment()">
 9 | 
10 |     <script type="text/javascript">
11 |         function getComment(){
12 |         
13 |             var div = document.getElementById("myDiv");
14 |             var comment = div.firstChild;
15 |             alert(comment.data);
16 |             
17 |         }
18 | 
19 |     </script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch10/CreateElementExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Create Element Example</title>
 5 | </head>
 6 | <body>
 7 |     <style type="text/css">
 8 |         .box {
 9 |             width: 32px;
10 |             height: 32px;
11 |             background-color: red;
12 |         }
13 |     </style>
14 |     <input type="button" value="Create Element" onclick="createNewElement()">
15 | 
16 |     <script type="text/javascript">
17 |         function createNewElement(element){
18 |             var div = document.createElement("div");
19 |             div.id = "myNewDiv";
20 |             div.className = "box";
21 |             document.body.appendChild(div);
22 |             
23 |         }
24 | 
25 |     </script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Ch10/DocumentWriteExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>document.write() Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>The current date and time is:
 8 |     <script type="text/javascript">
 9 |         document.write("<strong>" + (new Date()).toString() + "</strong>");
10 |     </script>
11 |     </p>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/Ch10/DocumentWriteExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>document.write() Example 2</title>
 5 | </head>
 6 | <body>
 7 |     <p>Because the string &quot;</script>&quot; is included with <code>document.write()</code>,
 8 |     the script tag is closed before reaching its natural end. That means you'll see some extra
 9 |     text here:</p>
10 |     <script type="text/javascript">
11 |         document.write("<script type=\"text\javascript\" src=\"file.js\">" +   
12 |             "</script>");
13 |     </script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Ch10/DocumentWriteExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>document.write() Example 3</title>
 5 | </head>
 6 | <body>
 7 |     <p>No extra characters here:</p>
 8 |     <script type="text/javascript">
 9 |         document.write("<script type=\"text\javascript\" src=\"file.js\">" +   
10 |             "<\/script>");
11 |     </script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/Ch10/DocumentWriteExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>document.write() Example 4</title>
 5 | </head>
 6 | <body>
 7 |     <p>This is some content that you won't get to see because it will be overwritten.</p>
 8 |     <script type="text/javascript">
 9 |         window.onload = function(){
10 |             document.write("Hello world!");
11 |         };
12 |     </script>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/Ch10/DynamicScriptExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Dynamic Script Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>You should see an alert saying &quot;hi&quot; after clicking the button.</p>
 8 |     <input type="button" value="Add Script" onclick="addScript()">
 9 | 
10 |     <script type="text/javascript">
11 |         function addScript(){
12 |             var script = document.createElement("script");
13 |             script.type = "text/javascript";
14 |             script.text = "function sayHi(){alert('hi');}";
15 |             document.body.appendChild(script);
16 |             sayHi();
17 |         }
18 | 
19 |     </script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Ch10/DynamicStyleExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Dynamic Style Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>You should see the background color change after clicking the button.</p>
 8 |     <input type="button" value="Add Style" onclick="addStyle()">
 9 | 
10 |     <script type="text/javascript">
11 |     
12 |         function addStyle(){
13 |             var style = document.createElement("style");
14 |             style.type = "text/css";
15 |             style.appendChild(document.createTextNode("body{background-color:red}"));  //error in IE
16 |             var head = document.getElementsByTagName("head")[0];
17 |             head.appendChild(style);
18 |         }
19 | 
20 |     </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Ch10/ElementChildrenExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Create Element Example</title>
 5 | </head>
 6 | <body>
 7 |     <ul id="myList">
 8 |         <li>Item 1</li>
 9 |         <li>Item 2</li>
10 |         <li>Item 3</li>
11 |     </ul>
12 | 
13 |     <input type="button" value="Count Child Nodes" onclick="countChildren()">
14 | 
15 |     <script type="text/javascript">
16 |         function countChildren(){
17 |             var ul = document.getElementById("myList");
18 |             alert(ul.childNodes.length);   //3 in IE, 7 in others
19 |         }
20 | 
21 |     </script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch10/ElementChildrenExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Create Element Example</title>
 5 | </head>
 6 | <body>
 7 |     <ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
 8 | 
 9 |     <input type="button" value="Count Child Nodes" onclick="countChildren()">
10 | 
11 |     <script type="text/javascript">
12 |         function countChildren(){
13 |             var ul = document.getElementById("myList");
14 |             alert(ul.childNodes.length);   //3 in all browsers
15 |         }
16 | 
17 |     </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch10/GetElementByIdExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>getElementById() Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="myDiv">This <code>div</code> should be retrieved by clicking the button.</div>
 8 |     <input type="button" value="Get 'myDiv'" onclick="getDiv()">
 9 |     <script type="text/javascript">
10 |         function getDiv(){
11 |             alert(document.getElementById("myDiv"));
12 |         }
13 |     
14 |     </script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Ch10/GetElementByIdExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>getElementById() Example 2</title>
 5 | </head>
 6 | <body>
 7 |     <div id="myDiv">This <code>div</code> should <em>not</em> be retrieved by clicking the button.</div>
 8 |     <input type="button" value="Get 'myDiv'" onclick="getDiv()">
 9 |     <script type="text/javascript">
10 |         function getDiv(){
11 |             alert(document.getElementById("myDiV"));
12 |         }
13 |     
14 |     </script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/Ch10/GetElementByIdExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>getElementById() Example 3</title>
 5 | </head>
 6 | <body>
 7 |     <div id="myDiv">This <code>div</code> should be retrieved by clicking the button.</div>
 8 |     <div id="myDiv">This <code>div</code> should <em>not</em> be retrieved by clicking the button.</div>
 9 |     <input type="button" value="Get 'myDiv'" onclick="getDiv()">
10 |     <script type="text/javascript">
11 |         function getDiv(){
12 |             alert(document.getElementById("myDiv").innerHTML);
13 |         }
14 |     
15 |     </script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch10/GetElementByIdExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>getElementById() Example 4</title>
 5 | </head>
 6 | <body>
 7 |     <input type="text" value="Form field" name="myElement">
 8 |     <div id="myElement">This <code>div</code> should be retrieved by clicking the button.</div>
 9 |     <input type="button" value="Get 'myElement'" onclick="getElement()">
10 |     <script type="text/javascript">
11 |         function getDiv(){
12 |             alert(document.getElementById("myElement").tagName);   //"INPUT" in IE, "DIV" in other browsers
13 |         }
14 |     
15 |     </script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch10/TextNodeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Text Node Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="myDiv">Hello world!</div>
 8 | 
 9 |     <input type="button" value="Change Text" onclick="changeText()">
10 | 
11 |     <script type="text/javascript">
12 |         function changeText(){
13 |             var div = document.getElementById("myDiv");
14 |             div.firstChild.nodeValue = "Some other message";
15 |         }
16 | 
17 |     </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch10/TextNodeExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Text Node Example 2</title>
 5 | </head>
 6 | <body>
 7 |     <div id="myDiv">Hello world!</div>
 8 | 
 9 |     <input type="button" value="Change Text" onclick="changeText()">
10 | 
11 |     <script type="text/javascript">
12 |         function changeText(){
13 |             var div = document.getElementById("myDiv");
14 |             div.firstChild.nodeValue = "Some <strong>other</strong> message";
15 |         }
16 | 
17 |     </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch11/CompareDocumentPositionExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>CompareDocumentPosition Example</title>
 5 | </head>
 6 | <body>
 7 | 
 8 |     <input type="button" value="Does html contain body?" onclick="getContains()">
 9 | 
10 |     <script type="text/javascript">
11 |         function getContains(){
12 |             var result = document.documentElement.compareDocumentPosition(document.body);
13 |             alert(!!(result && 16));
14 |             
15 |         }
16 | 
17 |     </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch11/ContainsExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Contains Example</title>
 5 | </head>
 6 | <body>
 7 | 
 8 |     <input type="button" value="Does html contain body?" onclick="getContains()">
 9 | 
10 |     <script type="text/javascript">
11 |         function getContains(){
12 |             alert(document.documentElement.contains(document.body)); //true
13 |             
14 |         }
15 | 
16 |     </script>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Ch11/ElementChildrenExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Create Element Example</title>
 5 | </head>
 6 | <body>
 7 |     <ul id="myList">
 8 |         <li>Item 1</li>
 9 |         <li>Item 2</li>
10 |         <li>Item 3</li>
11 |     </ul>
12 | 
13 |     <input type="button" value="Count Child Nodes" onclick="countChildren()">
14 | 
15 |     <script type="text/javascript">
16 |         function countChildren(){
17 |             var ul = document.getElementById("myList");
18 |             alert(ul.children.length);   //3 in all browsers
19 |         }
20 | 
21 |     </script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch11/InnerHtmlExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>InnerHtml Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="content">
 8 |         <p>This is a <strong>paragraph</strong> with a list following it.</p>
 9 |         <ul>
10 |             <li>Item 1</li>
11 |             <li>Item 2</li>
12 |             <li>Item 3</li>
13 |         </ul>
14 |     </div>
15 | 
16 |     <input type="button" value="Get InnerHTML" onclick="getInnerHTML()">
17 | 
18 |     <script type="text/javascript">
19 |         function getInnerHTML(){
20 |             var div = document.getElementById("content");
21 |             alert(div.innerHTML);
22 |         }
23 | 
24 |     </script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Ch11/InnerHtmlExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>InnerHtml Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="content">
 8 |         <p>This is a <strong>paragraph</strong> with a list following it.</p>
 9 |         <ul>
10 |             <li>Item 1</li>
11 |             <li>Item 2</li>
12 |             <li>Item 3</li>
13 |         </ul>
14 |     </div>
15 | 
16 |     <input type="button" value="Set InnerHTML" onclick="setInnerHTML()">
17 | 
18 |     <script type="text/javascript">
19 |         function setInnerHTML(){
20 |             var div = document.getElementById("content");
21 |             div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";
22 |         }
23 | 
24 |     </script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Ch11/InnerHtmlExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>InnerHtml Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="content"></div>
 8 |     <p>This works in IE only.</p>
 9 |     <input type="button" value="Set InnerHTML" onclick="setInnerHTML()">
10 |     
11 |     <script type="text/javascript">
12 |         function setInnerHTML(){
13 |             var div = document.getElementById("content");
14 |             div.innerHTML = "<div>&nbsp;</div><script defer>alert('hi');</scr" + "ipt>";
15 |             div.removeChild(div.firstChild);
16 |         }
17 | 
18 |     </script>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Ch11/InnerTextExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>InnerText Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="content">
 8 |         <p>This is a <strong>paragraph</strong> with a list following it.</p>
 9 |         <ul>
10 |             <li>Item 1</li>
11 |             <li>Item 2</li>
12 |             <li>Item 3</li>
13 |         </ul>
14 |     </div>
15 | 
16 |     <input type="button" value="Get InnerText" onclick="getInnerText()">
17 | 
18 |     <script type="text/javascript">
19 |         function getInnerText(){
20 |             var div = document.getElementById("content");
21 |             alert(div.innerText);  //works in IE, Safari, and Opera
22 |         }
23 | 
24 |     </script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Ch11/InnerTextExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>InnerText Example 2</title>
 5 | </head>
 6 | <body>
 7 |     <div id="content">
 8 |         <p>This is a <strong>paragraph</strong> with a list following it.</p>
 9 |         <ul>
10 |             <li>Item 1</li>
11 |             <li>Item 2</li>
12 |             <li>Item 3</li>
13 |         </ul>
14 |     </div>
15 | 
16 |     <input type="button" value="Set InnerText" onclick="setInnerText()">
17 | 
18 |     <script type="text/javascript">
19 |         function setInnerText(){
20 |             var div = document.getElementById("content");
21 |             div.innerText = "Hello world!";   //works in IE, Safari, and Opera
22 |         }
23 | 
24 |     </script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Ch11/InnerTextExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>InnerText Example 4</title>
 5 | </head>
 6 | <body>
 7 |     <div id="content">
 8 |         <p>This is a <strong>paragraph</strong> with a list following it.</p>
 9 |         <ul>
10 |             <li>Item 1</li>
11 |             <li>Item 2</li>
12 |             <li>Item 3</li>
13 |         </ul>
14 |     </div>
15 | 
16 |     <input type="button" value="Replace InnerText" onclick="replaceText()">
17 | 
18 |     <script type="text/javascript">
19 | 
20 |         function replaceText(){
21 |             var div = document.getElementById("content");            
22 |             div.innerText = div.innerText;
23 |         }
24 | 
25 |     </script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Ch11/OuterHTMLExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>OuterHTML Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="content">
 8 |         <p>This is a <strong>paragraph</strong> with a list following it.</p>
 9 |         <ul>
10 |             <li>Item 1</li>
11 |             <li>Item 2</li>
12 |             <li>Item 3</li>
13 |         </ul>
14 |     </div>
15 | 
16 |     <input type="button" value="Get OuterHtml" onclick="getOuterHTML()">
17 | 
18 |     <script type="text/javascript">
19 |         function getOuterHTML(){
20 |             var div = document.getElementById("content");
21 |             alert(div.outerHTML);  //works in IE, Safari, and Opera
22 |         }
23 | 
24 |     </script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Ch11/OuterTextExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>OuterText Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="content">
 8 |         <p>This is a <strong>paragraph</strong> with a list following it.</p>
 9 |         <ul>
10 |             <li>Item 1</li>
11 |             <li>Item 2</li>
12 |             <li>Item 3</li>
13 |         </ul>
14 |     </div>
15 |     <input type="button" value="Get OuterText" onclick="getOuterText()">
16 |     
17 |     <script type="text/javascript">
18 |         function getOuterText(){
19 |             var div = document.getElementById("content");
20 |             alert(div.outerText);  //works in IE, Safari, and Opera
21 |         }
22 |     </script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Ch11/TextContentExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>TextContent Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="content">
 8 |         <p>This is a <strong>paragraph</strong> with a list following it.</p>
 9 |         <ul>
10 |             <li>Item 1</li>
11 |             <li>Item 2</li>
12 |             <li>Item 3</li>
13 |         </ul>
14 |     </div>
15 | 
16 |     <input type="button" value="Get InnerText" onclick="getInnerText()">
17 | 
18 |     <script type="text/javascript">
19 |         function getInnerText(){
20 |             var div = document.getElementById("content");
21 |             alert(div.textContent);  //works in Firefox, Safari, and Opera
22 |         }
23 | 
24 |     </script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Ch11/TextContentExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>InnerText Example 4</title>
 5 | </head>
 6 | <body>
 7 |     <div id="content">
 8 |         <p>This is a <strong>paragraph</strong> with a list following it.</p>
 9 |         <ul>
10 |             <li>Item 1</li>
11 |             <li>Item 2</li>
12 |             <li>Item 3</li>
13 |         </ul>
14 |     </div>
15 | 
16 |     <input type="button" value="Replace InnerText" onclick="replaceText()">
17 | 
18 |     <script type="text/javascript">
19 | 
20 |         function replaceText(){
21 |             var div = document.getElementById("content");            
22 |             div.textContent = div.textContent;
23 |         }
24 | 
25 |     </script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Ch12/CreateDocumentExample.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 2 CreateDocument Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |         var doctype = document.implementation.createDocumentType("html",
 9 |                           " -//W3C//DTD XHTML 1.0 Strict//EN",
10 |                           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd");
11 |         
12 |         var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml",
13 |                       "html", doctype);
14 |         alert(doc.documentElement.tagName);
15 |     </script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Ch12/CreateHTMLDocumentExample.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 2 CreateHTMLDocument Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |        
 9 |         var htmldoc = document.implementation.createHTMLDocument("New Doc");
10 |         alert(htmldoc.title);
11 |         alert(typeof htmldoc.body);
12 |     </script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch12/DocumentTypeExample.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 2 DocumentType Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |         alert(document.doctype.publicId);
 9 |         alert(document.doctype.systemId);
10 |     </script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/Ch12/IERangeExample.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>IE Range Example</title>
 5 |         <script type="text/javascript">
 6 |             function useRanges() {
 7 |                 var range = document.body.createTextRange();
 8 |                 var p1 = document.getElementById("p1");
 9 |                 range.moveToElementText(p1);
10 |                 alert(range.htmlText);
11 |             }
12 |         </script>
13 |     </head>
14 |     <body><p id="p1"><b>Hello</b> world!</p>
15 |         <input type="button" value="Use Ranges" onclick="useRanges()" />   
16 |         <p><strong>Note:</strong> This example uses Internet Explorer ranges and will only work on Internet Explorer.</p>
17 |      
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch12/IERangeExample3.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>IE Range Example</title>
 5 |         <script type="text/javascript">
 6 |             function useRanges() {
 7 |                 var range = document.body.createTextRange();
 8 |                 var p1 = document.getElementById("p1");
 9 |                 range.findText("Hello");
10 |                 range.pasteHTML("<em>Howdy</em>");
11 |             }
12 |         </script>
13 |     </head>
14 |     <body><p id="p1"><b>Hello</b> world!</p>
15 |         <input type="button" value="Use Ranges" onclick="useRanges()">  
16 |         <p><strong>Note:</strong> This example uses Internet Explorer ranges and will only work on Internet Explorer.</p>
17 |       
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch12/IFrameElementExample.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 2 IFrame Example</title>
 5 | </head>
 6 | <body>
 7 |     <iframe id="myIFrame" src="javascript:false"></iframe>
 8 |     <script type="text/javascript">
 9 |         var iframe = document.getElementById("myIFrame");
10 |         var iframeDoc = iframe.contentDocument;   //won't work in IE < 8
11 |         alert(iframeDoc);
12 |     </script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch12/IFrameElementExample2.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 2 IFrame Example</title>
 5 | </head>
 6 | <body>
 7 |     <iframe id="myIframe" src="javascript:false"></iframe>
 8 |     <script type="text/javascript">
 9 |         var iframe = document.getElementById("myIframe");
10 |         var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
11 |         alert(iframeDoc);
12 |     </script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch12/IFrameElementExample3.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 2 IFrame Example</title>
 5 | </head>
 6 | <body>
 7 |     <iframe id="myIFrame" src="javascript:false"></iframe>
 8 |     <script type="text/javascript">
 9 |         var iframe = document.getElementById("myIFrame");
10 |         var iframeDoc = iframe.contentWindow;   //works in IE
11 |         alert(iframeDoc);
12 |     </script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch12/UserDataExample.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>User Data Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |         var div = document.createElement("div");
 9 |         div.setUserData("name", "Nicholas", function(operation, key, value, src, dest){
10 |             if (operation == 1){
11 |                 dest.setUserData(key, value, function(){});
12 |             }
13 |         });
14 |         
15 |         var newDiv = div.cloneNode(true);
16 |         alert(newDiv.getUserData("name"));    //"Nicholas"
17 | 
18 |     </script>
19 | 
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Ch12/stylesheet1.css:
--------------------------------------------------------------------------------
1 | body {
2 |     background-color: silver;
3 | }


--------------------------------------------------------------------------------
/Ch12/stylesheet2.css:
--------------------------------------------------------------------------------
1 | a {
2 |     color: navy;
3 | }


--------------------------------------------------------------------------------
/Ch13/BeforeUnloadEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>BeforeUnload Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <div id="myDiv">Try to navigate away from this page.</div>
 9 |     <script type="text/javascript">
10 |         EventUtil.addHandler(window, "beforeunload", function(event){
11 |             event = EventUtil.getEvent(event);
12 |             var message = "I'm really going to miss you if you go.";
13 |             event.returnValue = message;
14 |             return message;
15 |         });
16 | 
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch13/ButtonExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Button Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <div id="myDiv" style="background-color:red;height:100px;width:100px">Click me</div>
 9 |     <script type="text/javascript">
10 |         var div = document.getElementById("myDiv");
11 |         EventUtil.addHandler(div, "mousedown", function(event){
12 |             event = EventUtil.getEvent(event);
13 |             alert(EventUtil.getButton(event));       
14 |         });
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch13/ClientCoordinatesExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Client coordinates Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <div id="myDiv" style="background-color:red;height:100px;width:100px">Click me</div>
 9 |     <script type="text/javascript">
10 |         var div = document.getElementById("myDiv");
11 |         EventUtil.addHandler(div, "click", function(event){
12 |             event = EventUtil.getEvent(event);
13 |             alert("Client coordinates: " + event.clientX + "," + event.clientY);        
14 |         });
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch13/CrossBrowserEventObjectExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Cross-Browser Event Object Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <a href="http://www.nczonline.net/" id="myLink">Click Me</a>
 9 |     <p>This link will not navigate when clicked.</p>
10 |     <script type="text/javascript">
11 |         var link = document.getElementById("myLink");
12 |         link.onclick = function(event){
13 |             event = EventUtil.getEvent(event);
14 |             EventUtil.preventDefault(event);
15 |         };    
16 |     </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch13/CrossBrowserEventObjectExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Cross-Browser Event Object Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <input type="button" value="Click Me" id="myBtn" />
 9 |     <script type="text/javascript">
10 |         var btn = document.getElementById("myBtn");
11 |         btn.onclick = function(event){
12 |             alert("Clicked");
13 |             event = EventUtil.getEvent(event);
14 |             EventUtil.stopPropagation(event);
15 |         };
16 |         
17 |         document.body.onclick = function(event){
18 |             alert("Body clicked");
19 |         };
20 |     </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Ch13/DOMContentLoadedEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOMContentLoaded Event Example</title>
 5 |     <script type="text/javascript" src="client.js"></script>
 6 |     <script type="text/javascript" src="EventUtil.js"></script>
 7 | </head>
 8 | <body>
 9 |     <div id="myDiv">DOMContentLoaded example - works only in Opera and Firefox</div>
10 |     <script type="text/javascript">
11 |     EventUtil.addHandler(window, "DOMContentLoaded", function(event){
12 |         alert("Content loaded.");
13 |     });
14 |     EventUtil.addHandler(window, "load", function(event){
15 |         alert("Window loaded.");
16 |     });
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch13/DOMEventObjectExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Event Object Example</title>
 5 | </head>
 6 | <body>
 7 |     <input type="button" id="myBtn" value="Click Me" />
 8 |     <script type="text/javascript">
 9 |         var btn = document.getElementById("myBtn");
10 |         btn.onclick = function(event){
11 |             alert(event.currentTarget === this);
12 |             alert(event.target === this);
13 |         };        
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Ch13/DOMEventObjectExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Event Object Example</title>
 5 | </head>
 6 | <body>
 7 |     <input type="button" id="myBtn" value="Click Me" />
 8 |     <script type="text/javascript">
 9 |         document.body.onclick = function(event){
10 |             alert(event.currentTarget === document.body);   //true
11 |             alert(this === document.body);                  //true
12 |             alert(event.target === document.getElementById("myBtn")); //true
13 |         };       
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Ch13/DOMEventObjectExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Event Object Example</title>
 5 | </head>
 6 | <body>
 7 |     <a href="http://www.nczonline.net/" id="myLink">Click Me</a>
 8 |     <p>This link will not navigate when clicked.</p>
 9 |     <script type="text/javascript">
10 |         var link = document.getElementById("myLink");
11 |         link.onclick = function(event){
12 |             event.preventDefault();
13 |         };    
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Ch13/DOMEventObjectExample05.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Event Object Example</title>
 5 | </head>
 6 | <body>
 7 |     <input type="button" value="Click Me" id="myBtn" />
 8 |     <script type="text/javascript">
 9 |         var btn = document.getElementById("myBtn");
10 |         btn.onclick = function(event){
11 |             alert("Clicked");
12 |             event.stopPropagation();
13 |         };
14 |         
15 |         document.body.onclick = function(event){
16 |             alert("Body clicked");
17 |         };
18 |     </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch13/DOMEventObjectExample06.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Event Object Example</title>
 5 | </head>
 6 | <body>
 7 |     <input type="button" value="Click Me" id="myBtn" />
 8 |     <script type="text/javascript">
 9 |         var btn = document.getElementById("myBtn");
10 |         btn.onclick = function(event){
11 |             alert(event.eventPhase);   //2
12 |         };
13 |         
14 |         document.body.addEventListener("click", function(event){
15 |             alert(event.eventPhase);   //1
16 |         }, true);
17 |         
18 |         document.body.onclick = function(event){
19 |             alert(event.eventPhase);   //3
20 |         };
21 | 
22 |     </script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Ch13/DOMLevel0EventHandlerExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 0 Event Handler Example</title>
 5 | </head>
 6 | <body>
 7 |     <input type="button" id="myBtn" value="Click Me" />
 8 |     <input type="button" id="myRemoveBtn" value="Remove Event Handler" />
 9 |     <script type="text/javascript">
10 |         var btn = document.getElementById("myBtn");
11 |         btn.onclick = function(){
12 |             alert(this.id);
13 |         };
14 |         
15 |         var removeBtn = document.getElementById("myRemoveBtn");
16 |         removeBtn.onclick = function(){
17 |             btn.onclick = null;
18 |         };
19 |     </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Ch13/DOMLevel2EventHandlerExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 2 Event Handler Example</title>
 5 | </head>
 6 | <body>
 7 |     <input type="button" id="myBtn" value="Click Me" />
 8 |     <p>This example won't work in Internet Explorer.</p>
 9 |     <script type="text/javascript">
10 |         var btn = document.getElementById("myBtn");
11 |         btn.addEventListener("click", function(){
12 |             alert(this.id);
13 |         }, false);
14 |         btn.addEventListener("click", function(){
15 |             alert("Hello world!");
16 |         }, false);
17 | 
18 |     </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch13/DOMLevel3KeyPropertyExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 3 Key Property Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <input type="text" id="myText" />
 9 |     <script type="text/javascript">
10 |         var textbox = document.getElementById("myText");
11 |         EventUtil.addHandler(textbox, "keyup", function(event){
12 |             event = EventUtil.getEvent(event);
13 | 
14 |             var identifier = event.key || event.keyIdentifier;
15 |             if (identifier){
16 |                 alert(identifier);    
17 |             }      
18 |         });
19 |     </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Ch13/DOMLevel3LocationGetModifierStateExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 3 getModifierState() Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <input type="text" id="myText" />
 9 |     <script type="text/javascript">
10 |         var textbox = document.getElementById("myText");
11 |         EventUtil.addHandler(textbox, "keyup", function(event){
12 |             event = EventUtil.getEvent(event);
13 | 
14 |             if (event.getModifierState){
15 |                 alert(event.getModifierState("Shift"));    
16 |             }    
17 |         });
18 |     </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch13/DOMLevel3LocationPropertyExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 3 Location Property Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <input type="text" id="myText" />
 9 |     <script type="text/javascript">
10 |         var textbox = document.getElementById("myText");
11 |         EventUtil.addHandler(textbox, "keyup", function(event){
12 |             event = EventUtil.getEvent(event);
13 | 
14 |             var loc = event.location || event.keyLocation;
15 |             if (loc){
16 |                 alert(loc);    
17 |             } 
18 |    
19 |         });
20 |     </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Ch13/DOMMouseScrollEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOMMouseScroll Event Example</title>
 5 |     <script type="text/javascript" src="client.js"></script>
 6 |     <script type="text/javascript" src="EventUtil.js"></script>
 7 | </head>
 8 | <body>
 9 |     <div id="myDiv">Try scrolling your mouse wheel (Firefox only).</div>
10 |     <script type="text/javascript">
11 |         EventUtil.addHandler(window, "DOMMouseScroll", function(event){
12 |             event = EventUtil.getEvent(event);
13 |             alert(event.detail);
14 |         });
15 | 
16 |     </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch13/DOMSubtreeModifiedEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!DOCTYPE html>
 3 | <html>
 4 | <head>
 5 |     <title>DOMSubtreeModified Event Example</title>
 6 |     <script type="text/javascript" src="EventUtil.js"></script>
 7 | </head>
 8 | <body>
 9 |     <p>Scroll event example - scroll the browser window.</p>
10 |     <script type="text/javascript">
11 |         EventUtil.addHandler(window, "load", function(event){
12 |             document.body.appendChild(document.createTextNode("Hello world!"));
13 |         });
14 |         EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
15 |             alert(event.type);
16 |         });
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch13/HTMLEventHandlerExample01.htm:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!DOCTYPE html>
 3 | <html>
 4 | <head>
 5 |     <title>HTML Event Handler Example</title>
 6 | </head>
 7 | <body>
 8 |     <input type="button" value="Click Me" onclick="alert('Clicked')" />
 9 |     <input type="button" value="Click Me" onclick="alert(&quot;Clicked&quot;)" />
10 |     <script type="text/javascript">
11 |         function showMessage(){
12 |             alert("Hello world!");
13 |         }
14 |     </script>
15 |     <input type="button" value="Click Me" onclick="showMessage()" />
16 |     <input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}" />
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch13/HTMLEventHandlerExample02.htm:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!DOCTYPE html>
 3 | <html>
 4 | <head>
 5 |     <title>HTML Event Handler Example</title>
 6 | </head>
 7 | <body>
 8 | <!-- outputs "click" -->
 9 | <input type="button" value="Click Me" onclick="alert(event.type)">
10 | 
11 | 
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/Ch13/HTMLEventHandlerExample03.htm:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!DOCTYPE html>
 3 | <html>
 4 | <head>
 5 |     <title>HTML Event Handler Example</title>
 6 | </head>
 7 | <body>
 8 | <!-- outputs "Click Me" -->
 9 | <input type="button" value="Click Me" onclick="alert(value)">
10 | 
11 | <!-- outputs "Click Me" -->
12 | <input type="button" value="Click Me" onclick="alert(this.value)">
13 | 
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Ch13/HTMLEventHandlerExample04.htm:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!DOCTYPE html>
 3 | <html>
 4 | <head>
 5 |     <title>HTML Event Handler Example</title>
 6 | </head>
 7 | <body>
 8 | <form method="post">
 9 |     <input type="text" name="username" value="enter username">
10 |     <input type="button" value="Echo Username" onclick="alert(username.value)">
11 | </form>
12 | 
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/Ch13/HashChangeEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Hash Change Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <p>Click each of these links to change the URL hash.</p>
 9 |     <ul>
10 |         <li><a href="#up">Up</a></li>
11 |         <li><a href="#down">Down</a></li>
12 |     </ul>
13 |     <p>This example only works in browsers that <code>onhashchange</code>.</p>
14 |     <script type="text/javascript">
15 |         EventUtil.addHandler(window, "hashchange", function(event){
16 |             alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
17 |         });
18 |     </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch13/IEEventHandlerExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Internet Explorer Event Handler Example</title>
 5 | </head>
 6 | <body>
 7 |     <input type="button" id="myBtn" value="Click Me" />
 8 |     <p>This example works only in Internet Explorer.</p>
 9 |     <script type="text/javascript">
10 |         var btn = document.getElementById("myBtn");
11 |         btn.attachEvent("onclick", function(){
12 |             alert("Clicked");
13 |         });
14 |         btn.attachEvent("onclick", function(){
15 |             alert("Hello world!");
16 |         });
17 | 
18 |     </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch13/IEEventObjectExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>IE Event Object Example</title>
 5 | </head>
 6 | <body>
 7 |     <input type="button" id="myBtn" value="Click Me" />
 8 |     <p>This example only works in Internet Explorer.</p>
 9 |     <script type="text/javascript">
10 |         var btn = document.getElementById("myBtn");
11 |         btn.onclick = function(){
12 |             alert(window.event.srcElement === this);      //true
13 |         };
14 |         
15 |         btn.attachEvent("onclick", function(event){
16 |             alert(event.srcElement === this);             //false
17 |         });
18 |       
19 |     </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Ch13/IEEventObjectExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>IE Event Object Example</title>
 5 | </head>
 6 | <body>
 7 |     <a href="http://www.nczonline.net/" id="myLink">Click Me</a>
 8 |     <p>This link will not navigate when clicked.</p>
 9 |     <p>This example only works in Internet Explorer.</p>
10 |     <script type="text/javascript">
11 |         var link = document.getElementById("myLink");
12 |         link.onclick = function(){
13 |             window.event.returnValue = false;
14 |         };    
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch13/IEEventObjectExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>IE Event Object Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <input type="button" value="Click Me" id="myBtn" />
 9 |     <p>This example works only in Internet Explorer.</p>
10 |     <script type="text/javascript">
11 |         var btn = document.getElementById("myBtn");
12 |         btn.onclick = function(){
13 |             alert("Clicked");
14 |             window.event.cancelBubble = true;
15 |         };
16 |         
17 |         document.body.onclick = function(event){
18 |             alert("Body clicked");
19 |         };
20 |     </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Ch13/KeyDownEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Keydown Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <input type="text" id="myText" />
 9 |     <script type="text/javascript">
10 |         var textbox = document.getElementById("myText");
11 |         EventUtil.addHandler(textbox, "keydown", function(event){
12 |             event = EventUtil.getEvent(event);
13 |             alert(event.keyCode);     
14 |         });
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch13/KeyPressEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Keypress Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <input type="text" id="myText" />
 9 |     <script type="text/javascript">
10 |         var textbox = document.getElementById("myText");
11 |         EventUtil.addHandler(textbox, "keypress", function(event){
12 |             event = EventUtil.getEvent(event);
13 |             alert(EventUtil.getCharCode(event));     
14 |         });
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch13/KeyUpEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Keyup Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <input type="text" id="myText" />
 9 |     <script type="text/javascript">
10 |         var textbox = document.getElementById("myText");
11 |         EventUtil.addHandler(textbox, "keyup", function(event){
12 |             event = EventUtil.getEvent(event);
13 |             alert(event.keyCode);     
14 |         });
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch13/KeyboardEventsExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Keyboard Events Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <input type="text" id="myText" />
 9 |     <script type="text/javascript">
10 |         var textbox = document.getElementById("myText");
11 |         EventUtil.addHandler(textbox, "keyup", function(event){
12 |             event = EventUtil.getEvent(event);
13 |             alert(event.keyCode);     
14 |         });
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch13/LoadEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Load Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <p>Load event example.</p>
 9 |     <script type="text/javascript">
10 |         EventUtil.addHandler(window, "load", function(event){
11 |             alert("Loaded!");
12 |         });
13 |     </script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Ch13/LoadEventExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Load Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body onload="alert('Loaded!')">
 8 |     <p>Load event example.</p>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/Ch13/LoadEventExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Load Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <img src="smile.gif" onload="alert('Image loaded.')" />
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/Ch13/LoadEventExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Load Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <img src="smile.gif" id="myImage" />
 9 |     <script type="text/javascript">
10 |         var image = document.getElementById("myImage");
11 |         EventUtil.addHandler(image, "load", function(event){
12 |             event = EventUtil.getEvent(event);
13 |             alert(EventUtil.getTarget(event).src);
14 |         });
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch13/LoadEventExample05.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Load Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <script type="text/javascript">
 9 |         EventUtil.addHandler(window, "load", function(){
10 |             var image = document.createElement("img");
11 |             EventUtil.addHandler(image, "load", function(event){
12 |                 event = EventUtil.getEvent(event);
13 |                 alert(EventUtil.getTarget(event).src);
14 |             });
15 |             document.body.appendChild(image);
16 |             image.src = "smile.gif";            
17 |         });
18 |     </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch13/LoadEventExample06.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Load Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <script type="text/javascript">
 9 |         EventUtil.addHandler(window, "load", function(){
10 |             var image = new Image();
11 |             EventUtil.addHandler(image, "load", function(event){
12 |                 alert("Image loaded!");
13 |             });
14 |             image.src = "smile.gif";            
15 |         });
16 |     </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch13/MouseWheelEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>MouseWheel Event Example</title>
 5 |     <script type="text/javascript" src="client.js"></script>
 6 |     <script type="text/javascript" src="EventUtil.js"></script>
 7 | </head>
 8 | <body>
 9 |     <div id="myDiv">Try scrolling your mouse wheel (IE, Safari, and Opera).</div>
10 |     <script type="text/javascript">
11 |         EventUtil.addHandler(document, "mousewheel", function(event){
12 |             event = EventUtil.getEvent(event);
13 |             var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
14 |             alert(delta);
15 |         });
16 | 
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch13/MozOrientationEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>MozOrientation Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <p>This example only works in Firefox 3.6+ in devices such as Macbooks, Thinkpads, Windows Mobile, or Android.</p>
 9 |     <div id="output"></div>
10 |     <script type="text/javascript">
11 |     EventUtil.addHandler(window, "MozOrientation", function(event){
12 |         var output = document.getElementById("output");
13 |         output.innerHTML = "X=" + event.x + ", Y=" + event.y + ", Z=" + event.z + "<br>";
14 |     });
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch13/ResizeEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Resize Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <p>Resize event example - resize the browser window.</p>
 9 |     <script type="text/javascript">
10 |         EventUtil.addHandler(window, "resize", function(event){
11 |             alert("Resized");
12 |         });
13 |     </script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Ch13/ScreenCoordinatesExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Screen Coordinates Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <div id="myDiv" style="background-color:red;height:100px;width:100px">Click me</div>
 9 |     <script type="text/javascript">
10 |         var div = document.getElementById("myDiv");
11 |         EventUtil.addHandler(div, "click", function(event){
12 |             event = EventUtil.getEvent(event);
13 |             alert("Screen coordinates: " + event.screenX + "," + event.screenY);        
14 |         });
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch13/ScrollEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 | <!DOCTYPE html>
 3 | <html>
 4 | <head>
 5 |     <title>Scroll Event Example</title>
 6 |     <script type="text/javascript" src="EventUtil.js"></script>
 7 | </head>
 8 | <body>
 9 |     <p style="height: 10000px">Scroll event example - scroll the browser window.</p>
10 |     <script type="text/javascript">
11 |         EventUtil.addHandler(window, "scroll", function(event){
12 |             if (document.compatMode == "CSS1Compat"){
13 |                 alert(document.documentElement.scrollTop);
14 |             } else {
15 |                 alert(document.body.scrollTop);
16 |             }
17 |         });
18 |     </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch13/TextInputEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>TextInput Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <input type="text" id="myText" />
 9 |     <p>This example only works in browsers that support the <code>textInput</code> event.</p>
10 |     <script type="text/javascript">
11 |         var textbox = document.getElementById("myText");
12 |         EventUtil.addHandler(textbox, "textInput", function(event){
13 |             event = EventUtil.getEvent(event);
14 |             alert(event.data);     
15 |         });
16 |     </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch13/UnloadEventExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Unload Event Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <p>Unload event example - navigate to another page or close this tab/window to fire the event.</p>
 9 |     <script type="text/javascript">
10 |         EventUtil.addHandler(window, "unload", function(event){
11 |             alert("Unloaded");
12 |         });
13 |     </script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Ch13/example.css:
--------------------------------------------------------------------------------
1 | body {
2 |     background-color: red;
3 | }


--------------------------------------------------------------------------------
/Ch13/example.js:
--------------------------------------------------------------------------------
1 | function sayHi(){
2 |     alert("hi!");
3 | }


--------------------------------------------------------------------------------
/Ch13/smile.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch13/smile.gif


--------------------------------------------------------------------------------
/Ch14/blank.htm:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <html>
3 |     <head>
4 |         <title>Blank Page for Rich Text Editing</title>
5 |     </head>
6 |     <body>
7 |     </body>
8 | </html>
9 | 


--------------------------------------------------------------------------------
/Ch15/DataViewExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |  <head>
 4 |     <title>Typed Arrays Example</title>
 5 |  </head>
 6 |  <body>
 7 |     <p>This only works in browsers that support typed arrays.</p>
 8 |     <script>document.write("Your browser " + (typeof ArrayBuffer != "undefined" ? "supports" : "doesn't support") + " typed arrays.");</script>
 9 |     <script>
10 |         window.onload = function(){
11 |             var buffer = new ArrayBuffer(20),
12 |                 view = new DataView(buffer),
13 |                 value;
14 | 
15 |             view.setUint16(0, 25);
16 |             value = view.getInt8(0);
17 |                        
18 |             alert(value);    //0
19 |         };
20 | 
21 |     </script>
22 |     </body>
23 | </html>


--------------------------------------------------------------------------------
/Ch15/TypedViewByteLimitExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |  <head>
 4 |     <title>Typed Arrays Example</title>
 5 |  </head>
 6 |  <body>
 7 |     <p>This only works in browsers that support typed arrays.</p>
 8 |     <script>document.write("Your browser " + (typeof ArrayBuffer != "undefined" ? "supports" : "doesn't support") + " typed arrays.");</script>
 9 |     <script>
10 |         window.onload = function(){
11 |             var uint16s = new Uint16Array(10);
12 |             uint16s[0] = 65537;
13 |             alert(uint16s[0]);  //1
14 | 
15 |         };
16 | 
17 |     </script>
18 |     </body>
19 | </html>


--------------------------------------------------------------------------------
/Ch15/smile.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch15/smile.gif


--------------------------------------------------------------------------------
/Ch15/smile2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch15/smile2.gif


--------------------------------------------------------------------------------
/Ch16/billyBrowsers.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch16/billyBrowsers.ogg


--------------------------------------------------------------------------------
/Ch16/smile.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch16/smile.gif


--------------------------------------------------------------------------------
/Ch17/InvalidCharacterExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Invalid Character Example</title>
 5 |     <script type="text/javascript" src="nonscript.js"></script>
 6 | </head>
 7 | <body>
 8 |     <p>This file will cause an invalid character error in Internet Explorer.</p>
 9 | </body>
10 | </html>


--------------------------------------------------------------------------------
/Ch17/InvalidCharacterExample02.htm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch17/InvalidCharacterExample02.htm


--------------------------------------------------------------------------------
/Ch17/LongURLErrorExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Long URL Error Example (IE-only)</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |         function createLongUrl(url){
 9 |             var s = "?";
10 |             for (var i=0, len=2500; i < len; i++){
11 |                 s += "a";
12 |             }
13 |             
14 |             return url + s;
15 |         }
16 |        
17 |         var x = new XMLHttpRequest();
18 |         x.open("get", createLongUrl("http://www.somedomain.com/"), true);
19 |         x.send(null);
20 |     </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Ch17/OnErrorExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>OnError Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |         window.onerror = function(message, url, line){
 9 |             alert(message);
10 |             return false;
11 |         };
12 |         throw new Error("Something bad happened.");
13 |     </script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Ch17/OnErrorExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>OnError Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <script type="text/javascript">
 9 |         EventUtil.addHandler(window, "load", function(){
10 |             var image = new Image();
11 |             EventUtil.addHandler(image, "load", function(event){
12 |                 alert("Image loaded!");
13 |             });
14 |             EventUtil.addHandler(image, "error", function(event){
15 |                 alert("Image not loaded!");
16 |             });
17 |             image.src = "smilex.gif";  //doesn't exist          
18 |         });
19 |     </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Ch17/OperationAbortedExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Operation Aborted Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>The following code should cause an Operation Aborted error in IE versions prior to 8.</p>
 8 |     <div>
 9 |         <script type="text/javascript">        
10 |             document.body.appendChild(document.createElement("div"));    
11 |         </script>
12 |     </div>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch17/OperationAbortedExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Operation Aborted Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>The following code should not cause an Operation Aborted error in IE versions prior to 8.</p>
 8 |     <div>
 9 |         <script type="text/javascript">        
10 |             document.body.insertBefore(document.createElement("div"), document.body.firstChild);    
11 | 
12 |         </script>
13 |     </div>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/Ch17/OperationAbortedExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Operation Aborted Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>The following code should not cause an Operation Aborted error in IE versions prior to 8.</p>
 8 |     <div>
 9 |     </div>
10 |     <script type="text/javascript">        
11 |         document.body.appendChild(document.createElement("div"));    
12 |     </script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/Ch17/ThrowingErrorsExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Throwing Errors Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |         function process(values){
 9 |         
10 |             if (!(values instanceof Array)){
11 |                 throw new Error("process(): Argument must be an array.");
12 |             }
13 |         
14 |             values.sort();
15 |         
16 |             for (var i=0, len=values.length; i < len; i++){
17 |                 if (values[i] > 100){
18 |                     return values[i];
19 |                 }
20 |             }
21 |         
22 |             return -1;
23 |         }
24 | 
25 |         process("string");
26 |     </script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Ch17/TryCatchExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Try-Catch Example</title>
 5 | </head>
 6 | <body>
 7 |     <script type="text/javascript">
 8 |         try {
 9 |             window.someNonexistentFunction();
10 |         } catch (error){
11 |             alert(error.name);
12 |             alert(error.message);
13 |         }
14 |         
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch17/nonscript.js:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 |     <body>
4 |     </body>
5 | </html>


--------------------------------------------------------------------------------
/Ch17/smile.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch17/smile.gif


--------------------------------------------------------------------------------
/Ch18/DOMLevel2CoreExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 2 Core Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example will not work in Internet Explorer.</p>
 8 |     <script type="text/javascript">
 9 |     
10 |         var xmldom = document.implementation.createDocument("", "root", null);
11 |         
12 |         alert(xmldom.documentElement.tagName);  //"root"
13 |        
14 |         var child = xmldom.createElement("child");
15 |         xmldom.documentElement.appendChild(child);
16 | 
17 | 
18 |     </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Ch18/DOMLevel3LoadSaveExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>DOM Level 3 Load Save Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example is known to work only in Opera.</p>
 8 |     <script type="text/javascript">
 9 |     
10 |         var implementation = document.implementation;
11 |         var parser = implementation.createLSParser(implementation.MODE_SYNCHRONOUS, null);
12 |         var input = implementation.createLSInput();
13 |         input.stringData = "<root>";
14 |         var xmldom = null;
15 |         
16 |         try {
17 |             xmldom = parser.parse(input);
18 |         } catch (ex){
19 |             alert("Parsing error!");
20 |         }
21 |         
22 |     </script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Ch18/XMLSerializerExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>XMLSerializer Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example will not work in Internet Explorer.</p>
 8 |     <script type="text/javascript">
 9 |     
10 |         var parser = new DOMParser();
11 |         var xmldom = parser.parseFromString("<root><child/></root>", "text/xml");
12 |         
13 |         //convert back into XML
14 |         var serializer = new XMLSerializer();
15 |         var xml = serializer.serializeToString(xmldom);
16 |         alert(xml);
17 | 
18 | 
19 |     </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Ch18/employees.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <employees>
 3 |     <employee title="Software Engineer">
 4 |         <name>Nicholas C. Zakas</name>
 5 |     </employee>
 6 |     <employee title="Salesperson">
 7 |         <name>Jim Smith</name>
 8 |     </employee>
 9 | </employees>
10 | 


--------------------------------------------------------------------------------
/Ch18/employees.xslt:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 3 | 
 4 |     <xsl:output method="html" />
 5 |     
 6 |     <xsl:template match="/">
 7 |        <ul>
 8 |            <xsl:apply-templates select="*" />
 9 |        </ul>
10 |     </xsl:template>
11 | 
12 |     <xsl:template match="employee">
13 |         <li><xsl:value-of select="name" />, <em><xsl:value-of select="@title" /></em></li>
14 |     </xsl:template>
15 | 
16 | </xsl:stylesheet>
17 | 


--------------------------------------------------------------------------------
/Ch18/employees2.xslt:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 3 | 
 4 |     <xsl:output method="html" />
 5 | 
 6 |     <xsl:param name="message" />
 7 |         
 8 |     <xsl:template match="/">
 9 |        <ul>
10 |            <xsl:apply-templates select="*" />
11 |        </ul>
12 |        <p>Message: <xsl:value-of select="$message" /></p>
13 |     </xsl:template>
14 | 
15 |     <xsl:template match="employee">
16 |         <li><xsl:value-of select="name" />, <em><xsl:value-of select="@title" /></em></li>
17 |     </xsl:template>
18 | 
19 | </xsl:stylesheet>
20 | 


--------------------------------------------------------------------------------
/Ch18/employees4.xslt:
--------------------------------------------------------------------------------
 1 | <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 2 | 
 3 |     <xsl:output method="text" />
 4 | 
 5 |     <xsl:template match="/">
 6 |        <xsl:apply-templates select="*" />
 7 |     </xsl:template>
 8 | 
 9 |     <xsl:template match="employee">
10 |         <xsl:value-of select="name" />, <xsl:value-of select="@title" />
11 |     </xsl:template>
12 | 
13 | </xsl:stylesheet>
14 | 


--------------------------------------------------------------------------------
/Ch18/example.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <root><child/></root>


--------------------------------------------------------------------------------
/Ch19/NamespaceExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Namespace Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example only works in Firefox 1.5+.</p>
 8 |     <script type="text/javascript;e4x=1">
 9 |     
10 |         var messages = <messages>
11 |             <message>Hello world!</message>
12 |         </messages>;
13 |         var wrox = new Namespace("wrox", "http://www.wrox.com/");
14 |         messages.setNamespace(wrox);
15 |         messages.message.setNamespace(wrox);
16 | 
17 |         alert(messages);
18 |         
19 |         alert(messages.wrox::message);
20 |     </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Ch19/NamespaceTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>Namespace Type Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example only works in Firefox 1.5+.</p>
 8 |     <script type="text/javascript;e4x=1">
 9 |     
10 |         var ns = new Namespace("http://www.wrox.com");    //default namespace
11 |         var wrox = new Namespace("wrox", "http://www.wrox.com");  //wrox namespace
12 |         
13 |         alert(ns.uri);
14 |         alert(ns.prefix);
15 |         alert(wrox.uri);
16 |         alert(wrox.prefix);
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch19/NamespaceTypeExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Namespace Type Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example only works in Firefox 1.5+.</p>
 8 |     <script type="text/javascript;e4x=1">
 9 |     
10 |         var xml = <wrox:root xmlns:wrox="http://www.wrox.com/">
11 |                     <wrox:message>Hello World!</wrox:message>
12 |                   </wrox:root>;
13 |         
14 |         var wrox = xml.namespace("wrox");
15 |         alert(wrox.uri);
16 |         alert(wrox.prefix);
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch19/QNameTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>QName Type Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example only works in Firefox 1.5+.</p>
 8 |     <script type="text/javascript;e4x=1">
 9 |     
10 |         var wrox = new Namespace("wrox", "http://www.wrox.com/");
11 |         var wroxMessage = new QName(wrox, "message");    //represents "wrox:message"
12 |         
13 |         alert(wroxMessage.uri);        //"http://www.wrox.com/"
14 |         alert(wroxMessage.localName);  //"message"
15 |         alert(wroxMessage);            //"http://www.wrox.com/::message"
16 | 
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch19/QNameTypeExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>QName Type Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example only works in Firefox 1.5+.</p>
 8 |     <script type="text/javascript;e4x=1">
 9 |     
10 |         var xml = <wrox:root xmlns:wrox="http://www.wrox.com/">
11 |                     <wrox:message>Hello World!</wrox:message>
12 |                   </wrox:root>;
13 |         
14 |         var wroxRoot = xml.name();
15 |         alert(wroxRoot.uri);
16 |         alert(wroxRoot.localName);
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch19/XMLConstructionExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>XML Construction Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example only works in Firefox 1.5+.</p>
 8 |     <script type="text/javascript;e4x=1">
 9 |         var tagName = "color";
10 |         var color = "red";
11 |         var xml = <{tagName}>{color}</{tagName}>;
12 |         
13 |         alert(xml.toXMLString());  //"<color>red</color>"
14 | 
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/Ch19/XMLConstructionExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>XML Construction Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example only works in Firefox 1.5+.</p>
 8 |     <script type="text/javascript;e4x=1">
 9 |     
10 |         var employees = <employees/>;
11 |         employees.employee.name = "Nicholas C. Zakas";
12 |         employees.employee.@position = "Software Engineer";
13 | 
14 |         employees.employee +=   <employee position="Salesperson">
15 |                                     <name>Jim Smith</name>
16 |                                 </employee>;
17 |         
18 |         alert(employees.toXMLString());
19 | 
20 |     </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Ch19/XMLListTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>XMLList Type Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example only works in Firefox 1.5+.</p>
 8 |     <script type="text/javascript;e4x=1">
 9 |     
10 |         var items =  new XMLList("<item/><item/>");                       
11 |         alert(items.length());
12 | 
13 | 
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Ch19/XMLTypeExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>XML Type Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example only works in Firefox 1.5+.</p>
 8 |     <script type="text/javascript;e4x=1">
 9 |     
10 |         var employee =  <employee position="Software Engineer">
11 |                             <name>Nicholas C. Zakas</name>
12 |                         </employee>;
13 |         alert(employee.@position);
14 |         alert(employee.name);
15 | 
16 |     </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch20/JSONStringifyExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>JSON Stringify Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example serializes an object and passes in a filter array.</p>
 8 |     <script type="text/javascript">
 9 |         var book = {
10 |                         title: "Professional JavaScript",
11 |                         authors: [
12 |                             "Nicholas C. Zakas"
13 |                         ],
14 |                         edition: 3,
15 |                         year: 2011
16 |                    };
17 | 
18 |         var jsonText = JSON.stringify(book, ["title", "edition"]);
19 |         alert(jsonText);
20 | 
21 |     </script>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Ch20/JSONStringifyExample03.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>JSON Stringify Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example serializes an object and passes in a filter function.</p>
 8 |     <script type="text/javascript">
 9 |         var book = {
10 |                         title: "Professional JavaScript",
11 |                         authors: [
12 |                             "Nicholas C. Zakas"
13 |                         ],
14 |                         edition: 3,
15 |                         year: 2011
16 |                    };
17 | 
18 |         var jsonText = JSON.stringify(book, null, 4);
19 |         alert(jsonText);
20 | 
21 |     </script>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Ch20/JSONStringifyExample04.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>JSON Stringify Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example serializes an object and passes in a filter function.</p>
 8 |     <script type="text/javascript">
 9 |         var book = {
10 |                        "title": "Professional JavaScript",
11 |                         "authors": [
12 |                             "Nicholas C. Zakas"
13 |                         ],
14 |                         edition: 3,
15 |                         year: 2011
16 |                    };
17 | 
18 |         var jsonText = JSON.stringify(book, null, "--");
19 |         alert(jsonText);
20 | 
21 |     </script>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Ch21/026694 Ch21code.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch21/026694 Ch21code.zip


--------------------------------------------------------------------------------
/Ch21/ImagePingExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Image Ping Example</title>
 5 | </head>
 6 | <body>
 7 |     <script>
 8 |         var img = new Image();
 9 |         img.onload = img.onerror = function(){
10 |             alert("Done!");
11 |         };
12 |         img.src = "http://www.example.com/test?name=Nicholas"; 
13 | 
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Ch21/JSONPExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>JSONP Example</title>
 5 | </head>
 6 | <body>
 7 |     <script>
 8 |     
 9 |         function handleResponse(response){
10 |             alert("You're at IP address " + response.ip + ", which is in " + response.city + ", " + response.region_name);
11 |         }
12 |     
13 |         var script = document.createElement("script");
14 |         script.src = "http://freegeoip.net/json/?callback=handleResponse";
15 |         document.body.insertBefore(script, document.body.firstChild);
16 |     </script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/Ch21/XDomainRequestExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>XDomainRequest Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This example must be run on a server to work properly and will only work in IE8 and higher.</p>
 8 |     <script>
 9 |     
10 |         var xdr = new XDomainRequest();
11 |         xdr.onload = function(){
12 |             alert(xdr.responseText);
13 |         };
14 |         xdr.onerror = function(){
15 |             alert("Error!");
16 |         };
17 |         
18 |         //you'll need to replace this URL with something that works
19 |         xdr.open("get", "http://www.somewhere-else.com/xdr.php");
20 |         xdr.send(null);    
21 | 
22 |     </script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Ch21/addcontact.php:
--------------------------------------------------------------------------------
1 | <?php
2 |     header("Content-Type: text/plain");
3 |     //you can download a PHP JSON parser from http://pecl.php.net/package/json
4 |     //PHP 5.2 has native JSON support
5 |     
6 |     $jsonData = $GLOBALS['HTTP_RAW_POST_DATA'];
7 |     
8 | ?>
9 | Contact Saved: <?php echo $jsonData ?>


--------------------------------------------------------------------------------
/Ch21/addressbook.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     header("Content-Type: text/plain");
 3 | ?>
 4 | [
 5 |     {
 6 |         "name": "Nicholas C. Zakas",
 7 |         "email": "nicholas@some-domain-name.com"
 8 |     },
 9 |     {
10 |         "name": "Jim Smith",
11 |         "email": "jimsmith@some-domain-name.com"
12 |     },    {
13 |         "name": "Michael Jones",
14 |         "email": "mj@some-domain-name.com"
15 |     }
16 | ]


--------------------------------------------------------------------------------
/Ch21/altevents.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     header("Content-Type: text/plain");
 3 |     header("Content-Length: 27");
 4 |     echo "Some data";
 5 |     flush();
 6 |     echo "Some data";
 7 |     flush();
 8 |     echo "Some data";
 9 |     flush();
10 | ?>


--------------------------------------------------------------------------------
/Ch21/example.php:
--------------------------------------------------------------------------------
1 | <?php
2 |     header("Content-Type: text/plain");
3 |     header("MyHeader: MyNewValue");
4 |     
5 |     echo <<<EOF
6 | Value of MyHeader: {$_SERVER['HTTP_MYHEADER']}
7 | User-agent: {$_SERVER['HTTP_USER_AGENT']}
8 | EOF;
9 | ?>


--------------------------------------------------------------------------------
/Ch21/example.txt:
--------------------------------------------------------------------------------
1 | Hello world!


--------------------------------------------------------------------------------
/Ch21/postexample.php:
--------------------------------------------------------------------------------
1 | <?php
2 |     header("Content-Type: text/plain");   
3 |     echo <<<EOF
4 | Name: {$_POST['user-name']}
5 | Email: {$_POST['user-email']}
6 | EOF;
7 | ?>


--------------------------------------------------------------------------------
/Ch21/timeout.php:
--------------------------------------------------------------------------------
1 | <?php
2 |     header("Content-Type: text/plain");   
3 |     sleep(2000);
4 | ?>


--------------------------------------------------------------------------------
/Ch21/xdr.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     header("Content-Type: text/plain");
 3 |     header("XDomainRequestAllowed: 1");
 4 |     header("Content-Length: 27");
 5 |     echo "Some data";
 6 |     flush();
 7 |     echo "Some data";
 8 |     flush();
 9 |     echo "Some data";
10 |     flush();    
11 | ?>


--------------------------------------------------------------------------------
/Ch22/DragAndDropExample01.htm:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>Drag and Drop Example</title>
 5 |     <script type="text/javascript" src="EventUtil.js"></script>
 6 | </head>
 7 | <body>
 8 |     <div id="myDiv" style="background:red;width:100px;height:100px;position:absolute"></div>
 9 |     <script type="text/javascript">
10 |     
11 |         EventUtil.addHandler(document, "mousemove", function(event){
12 |             var myDiv = document.getElementById("myDiv");
13 |             myDiv.style.left = event.clientX + "px";
14 |             myDiv.style.top = event.clientY + "px";
15 |         });
16 |         
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch22/FrozenObjectsExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Frozen Objects Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This only works in browsers that natively support ECMAScript 5.</p>
 8 |     <script>
 9 |         var person = { name: "Nicholas" };
10 |         Object.freeze(person);
11 |         
12 |         person.age = 29;
13 |         alert(person.age);      //undefined
14 |         
15 |         delete person.name;
16 |         alert(person.name);     //"Nicholas"
17 |         
18 |         person.name = "Greg";
19 |         alert(person.name);     //"Nicholas"
20 |     </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Ch22/NonExtensibleObjectsExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Non-Extensible Objects Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This only works in browsers that natively support ECMAScript 5.</p>
 8 |     <script>
 9 |         var person = { name: "Nicholas" };
10 |         Object.preventExtensions(person);
11 |         
12 |         person.age = 29;
13 |         alert(person.age);
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/Ch22/NonExtensibleObjectsExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Non-Extensible Objects Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This only works in browsers that natively support ECMAScript 5.</p>
 8 |     <script>
 9 |         var person = { name: "Nicholas" };
10 |         alert(Object.isExtensible(person));   //true
11 |         
12 |         Object.preventExtensions(person);
13 |         alert(Object.isExtensible(person));   //false
14 |         
15 |         person.age = 29;
16 |         alert(person.age);
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch22/RepeatingTimersExample.htm:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>Repeating Timers Example</title>
 5 | </head>
 6 | <body>
 7 |     <div id="myDiv" style="position:absolute;width:100px;height:100px;left:0px;top:10px;background:red;"></div>
 8 | 
 9 |     <script type="text/javascript">
10 |         setTimeout(function(){
11 |         
12 |            var div = document.getElementById("myDiv"),
13 |                left = parseInt(div.style.left) + 5;
14 |            div.style.left = left + "px";
15 |         
16 |            if (left < 200){
17 |                setTimeout(arguments.callee, 50);
18 |            }
19 |         
20 |         }, 50);
21 | 
22 | 
23 |     </script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Ch22/SealedObjectsExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Sealed Objects Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This only works in browsers that natively support ECMAScript 5.</p>
 8 |     <script>
 9 |         var person = { name: "Nicholas" };
10 |         Object.seal(person);
11 |         
12 |         person.age = 29;
13 |         alert(person.age);      //undefined
14 |         
15 |         delete person.name;
16 |         alert(person.name);     //"Nicholas"
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Ch22/SealedObjectsExample02.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Sealed Objects Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>This only works in browsers that natively support ECMAScript 5.</p>
 8 |     <script>
 9 |         var person = { name: "Nicholas" };
10 |         alert(Object.isExtensible(person));   //true
11 |         alert(Object.isSealed(person));       //false
12 |         
13 |         Object.seal(person);
14 |         alert(Object.isExtensible(person));   //false
15 |         alert(Object.isSealed(person));       //true
16 |         
17 |         person.age = 29;
18 |         alert(person.age);
19 |     </script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Ch23/OnLineExample01.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>OnLine Example</title>
 5 | </head>
 6 | <body>
 7 |     <p>You are currently: <script>document.write(navigator.onLine ? "Online" : "Offline");</script></p>
 8 |     <p>To change your status, click File -&gt; Work Offline and reload this page.</p>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/Ch24/SampleAntDir/dev/src/js/a.js:
--------------------------------------------------------------------------------
1 | function A(){
2 | 
3 | }


--------------------------------------------------------------------------------
/Ch24/SampleAntDir/dev/src/js/aa.js:
--------------------------------------------------------------------------------
1 | function AA(){
2 | 
3 | }


--------------------------------------------------------------------------------
/Ch24/SampleAntDir/dev/src/js/ab.js:
--------------------------------------------------------------------------------
1 | function AB(){
2 | 
3 | }


--------------------------------------------------------------------------------
/Ch24/SampleAntDir/dev/src/js/b.js:
--------------------------------------------------------------------------------
1 | function B(){
2 | 
3 | }


--------------------------------------------------------------------------------
/Ch24/SampleAntDir/dev/src/js/c.js:
--------------------------------------------------------------------------------
1 | function C(){
2 | 
3 | }


--------------------------------------------------------------------------------
/Ch24/SampleAntDir/js/output-min.js:
--------------------------------------------------------------------------------
1 | function A(){}function B(){}function AA(){}function AB(){}function C(){};


--------------------------------------------------------------------------------
/Ch24/SampleAntDir/js/output.js:
--------------------------------------------------------------------------------
 1 | function A(){
 2 | 
 3 | }function B(){
 4 | 
 5 | }function AA(){
 6 | 
 7 | }function AB(){
 8 | 
 9 | }function C(){
10 | 
11 | }


--------------------------------------------------------------------------------
/Ch24/SampleAntDir/readme.txt:
--------------------------------------------------------------------------------
 1 | In a command window, navigate to this directory, then run:
 2 | 
 3 |     ant js.concatenate
 4 | 
 5 | To create the output.js file in the /js directory.
 6 | 
 7 | Before running, you will need to download the JDK and Ant. The JDK can be downloaded from http://java.sun.com/javase/downloads/index.jsp. Ant can be downloaded from http://ant.apache.org. Follow the setup instructions for each.
 8 | 
 9 | To run the js.verify target, you'll need to download Rhino (http://www.mozilla.org/rhino/) and JSLint (http://www.jslint.com/rhino/).
10 | 
11 | To run the js.compress target, you'll need to download the YUI Compressor (http://developer.yahoo.com/yui/compressor/).
12 | 
13 | You can run all tasks by running:
14 | 
15 |     ant all


--------------------------------------------------------------------------------
/Ch25/FileAPIExample06Upload.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 |     print_r($_FILES);
4 | 
5 | ?>


--------------------------------------------------------------------------------
/Ch25/WebWorkerExample01.js:
--------------------------------------------------------------------------------
1 | self.onmessage = function(event){
2 |     var data = event.data;
3 |     data.sort(function(a, b){
4 |         return a - b;
5 |     });
6 |     
7 |     self.postMessage(data);
8 | };


--------------------------------------------------------------------------------
/Ch25/smile.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhanglongde/book-professional-javascript-for-web-developers/d5a8174f32ad7cab8f3dc17a8a9b95f00a716cdd/Ch25/smile.gif


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | example code from the book Professional JavaScript for Web Developers, 3rd Edition.
3 | 
4 | 《JavaScript高级程序设计》 随书源码


--------------------------------------------------------------------------------
/readme.txt:
--------------------------------------------------------------------------------
1 | This zip file contains the example code from the book Professional JavaScript for Web Developers, 3rd Edition. Please note that available here is the code from every chapter of the book with the exception of Chapters 1 and 2 and Appendixes A, B, C and D, all of which have no code samples for download. 
2 | 
3 | I hope you have fun with the sample code I have included and that you find it useful and informative. Enjoy.
4 | 


--------------------------------------------------------------------------------