39,59 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
A one-stop guide to the essentials of web development including popular frameworks such as jQuery, Bootstrap, AngularJS, and Node.js
About This Book
- Understand the essential elements of HTML, CSS, and JavaScript, including how and when to use them
- Walk through three of the best and most popular web development frameworks – jQuery, Bootstrap, and AngularJS
- References for any function you will need in your day-to-day web development
Who This Book Is For
This book is perfect for beginners but more advanced web developers will also benefit. Laid out so you can refer to as much or as little as you need to, with this book you can exhaustively explore essential concepts for modern web developers.
What You Will Learn
- Explore detailed explanations of all the major HTML elements and attributes, illustrated with examples
- Take a deep dive into CSS properties and functions and master their usage
- Find clear, concise descriptions of JavaScript syntax and expressions
- Recognize various JavaScript design patterns and learn the basics of JavaScript object-orientated programming
- Implement the latest ECMAScript 6 for client-side scripting in your web applications
- Discover new ways to develop your website's front end quickly and easily using Bootstrap
- Write JavaScript extensibly using jQuery-JavaScript's feature-rich library
- Delve into the key Node.js modules used in JavaScript server-side programming
- Access AngularJS 's important modules, controllers, directives, and services quickly
In Detail
This comprehensive reference guide takes you through each topic in web development and highlights the most popular and important elements of each area.
Starting with HTML, you will learn key elements and attributes and how they relate to each other. Next, you will explore CSS pseudo-classes and pseudo-elements, followed by CSS properties and functions. This will introduce you to many powerful and new selectors. You will then move on to JavaScript. This section will not just introduce functions, but will provide you with an entire reference for the language and paradigms. You will discover more about three of the most popular frameworks today—Bootstrap, which builds on CSS, jQuery which builds on JavaScript, and AngularJS, which also builds on JavaScript. Finally, you will take a walk-through Node.js, which is a server-side framework that allows you to write programs in JavaScript.
Style and approach
This book is an easy-to-follow, comprehensive reference guide. Each topic, function, or element is listed methodically along with parameters, return values, and descriptions. Examples are also included to help you put the concepts to use quickly in the real world.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 865
Veröffentlichungsjahr: 2016
Ähnliche
Web Developer's Reference Guide
Web Developer's Reference Guide
Copyright © 2016 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: March 2016
Production reference: 1180316
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78355-213-9
www.packtpub.com
Credits
Authors
Joshua Johanan
Talha Khan
Ricardo Zea
Reviewers
Chetankumar Akarte
Gergo Bogdan
Rahul Devaskar
David Ellenwood
Philippe Reneiver Gonin
Robert Mion
Natalie Olivo
Mateus Ortiz
Commissioning Editor
Edward Gordon
Acquisition Editor
Meeta Rajani
Content Development Editor
Samantha Gonsalves
Technical Editor
Abhishek R. Kotian
Copy Editor
Pranjali Chury
Project Coordinator
Kinjal Bari
Proofreader
Safis Editing
Indexer
Monica Ajmera Mehta
Graphics
Disha Haria
Production Coordinator
Conidon Miranda
Cover Work
Conidon Miranda
About the Authors
Joshua Johanan is a web developer who currently lives in South Bend, Indiana. He has been a web developer for five years. He has built sites using many different languages, including PHP, Python, JavaScript, and C#; although if asked, he would prefer using Python and JavaScript. These languages have led him to use different MVC frameworks, such as Zend Framework, Django, and .Net's MVC.
As you can see from this book, Joshua has also used JavaScript on both the backend with Node.js and frontend using many different libraries. These include Backbone, React, jQuery, and plain old JavaScript.
He currently works for a healthcare organization, writing websites in C#. This does not allow him to utilize the latest flashy browser technologies, but it does enforce good development skills, such as maintainability and scalability.
This is his first book, but he does post somewhat regularly on his blog at http://ejosh.co/de/.
I would like to thank my wife, Liz, for her support through the writing of this book. I would also like to thank Dexter and Gizmo, who hung out by my feet as I wrote most of this book.
Talha Khan is a passionate web developer, JavaScript enthusiast, software consultant, and coffee freak from Pakistan who is currently residing in UAE. He has more than five years of experience in this field. Despite graduating in mathematics and statistics, his love for web technologies pushed him toward the field of web technologies. He is experienced in developing interactive websites and web applications using PHP, MYSQL, and Dot Net Suite along with HTML, CSS, and JavaScript libraries. He has been teaching web development as well and is an active contributor on programming forums such as StackOverflow. Occasionally, he tweets at @alphaprofile.
Talha has worked and consulted on various projects for several major brands and companies. Tossdown.com, a leading restaurants and food search engine of Pakistan, is among one of his major achievements. He is also running his own start-up while educating newbies on technology. He is currently working as a software architect for UAE's biggest swimming academy, Hamilton Aquatics.
I want to thank my parents for keeping me motivated and my friends who supported me in writing, as I could count on them anytime if I had to use their laptop. I am also grateful to Tahir Ali Khan, who helped me at every step throughout my career and was like a guiding light.
I would like to take this opportunity to thank all the teachers and mentors who helped me shape my career and helped me whenever I needed it. These people were my source of inspiration. A special thanks to Omair Bangash, who took the risk of employing someone from a non-IT background and taught me to a level where I am now teaching others. His confidence in me was enough to push me to reach to my goals. I worked under many projects of various scales and technologies under his supervision. He helped me at every step to hone my skills. I don't think I would be have been able to write this book had it not been for his constant support and motivation. Without learning from these teachers, there is not a chance I could be doing what I do today, and it is because of them and others who I may not have listed here that I feel compelled to pass my knowledge on to those willing to learn.
Ricardo Zea hails originally from Medellín, Colombia. He is a passionate and seasoned full-stack designer who is now located in Dayton, Ohio, USA. He is always looking for ways to level up his skills and those around him. Constantly wondering how things are made on the Web, how they work, and why, have made Ricardo a very technical designer, allowing him to explain to others the intricacies of design and the technicalities of the Web in ways that are very easy to understand and assimilate.
Ricardo has a master's degree in publicity and advertising and has deep passion for understanding human behavior. He also has a fiercely competitive PC gaming hunger. Together, all this has allowed him to switch from the creative side of the brain to the rational side very easily, allowing him to visualize and create technically sound web and mobile designs that are responsive, perform well, and convey the proper message through design.
Ricardo is the author of Mastering Responsive Web Design, Packt Publishing. He's also the organizer of the CodePen Dayton meetup group. He's a member of the Dayton web developers and UX Dayton meetup groups. He's also one of the first members of SitePoint's Ambassadors program. He's also the author of the monthly web design and development newletter Level Up!. He was also a technical reviewer for Sass and Compass, Designers Cookbook, and Sass Essentials, all by Packt Publishing. For several years, he was also a Flash and CorelDRAW professor at different universities in his home country, Colombia.
Ricardo has 15 years of experience in web design and 20 years of experience in visual and graphic design.
A huge and infinite thanks to my wife, Heather, and my beautiful son, Ricardo. They are my inspiration to be a better professional, a better person, a better husband, and a better dad.
To my mom, Socorro, who showed me the values that made me the man I am today. To my dad, Ricardo "Pinta" Zea, for teaching me to be determined to not only be good at what I do but to be the best I can be.
To God, for allowing me to share with everyone my knowledge of CSS.
And to you, the readers, for giving me the chance to help you be better web professionals.
About the Reviewers
Chetankumar Akarte is the CEO of Renuka Technologies Private Limited, Nagpur, located in central India. He is an engineer (electronics) from Nagpur University with more than 10 years of experience in the design, development, and deployment of web-based, Windows-based, and mobile-based applications with expertise in PHP, .NET, JavaScript, Java, Android, and more.
Chetankumar likes to contribute to newsgroups and forums. He has written articles for Electronics For You, DeveloperIQ, and Flash and Flex Developer's Magazine. In his spare time, he likes to maintain his technical blog (http://www.tipsntracks.com) to get in touch with the developer community. He has been the technical reviewer for four books published by Packt Publishing. He has released more than 96 applications on the Android market! One of his applications, an English to Hindi Dictionary, is like a pocket dictionary for students, which has more than a hundred thousand downloads. You can find it at https://play.google.com/store/apps/details?id=com.sachi.hindi.dictionary.
Chetankumar lives in Nagpur with wife, Shraddha, and his two children, Kaiwalya and Hrutvij. You can visit his websites, http://www.sahityachintan.com and http://www.tipsntracks.com, or get in touch with him at <[email protected]>.
I'd like to thank my wife, Shraddha, and my parents for their consistent support and encouragement. I'd also like to thank my lovely children, Kaiwalya and Hrutvij, who allowed me to dedicate all of their playtime with me to this book. I'd also like to thank Packt Publishing for this opportunity to do something useful, especially the project coordinator, Kinjal Bari, for all the valuable support.
Gergo Bogdan is a software engineer with over eight years of experience in the IT industry. During this time, he worked at small companies as well as multinational organizations. He has vast expertise in multiple technologies, starting from .NET and Python to JavaScript and Java. He loves to create technical articles and tutorials for fellow developers, and he is a passionate blogger (http://grelution.com). He is the author of the Web API Development with Flask video course, Packt Publishing.
Rahul Devaskar is a software engineer with experience of building real-time event-driven applications, context-aware applications, and web applications. His expertise includes web apps development, mobile apps development, API server development, and real-time analytics. He has built apps using AngularJS, Node.js, MongoDB, and Ionic.
I'd like to thank my wife, Niyati, for her constant support and encouragement.
David Ellenwood is a frontend developer and WordPress expert with more than 15 years of experience on the Web. As the owner and solo developer at DPE Websmithing and Design, LLC, he enjoys providing consulting services to midsize customers looking to update or extend their existing websites beyond traditional brochureware. He lives with his beautiful wife and two amazing boys at the westernmost tip of Lake Superior in Superior, Wisconsin.
Philippe Renevier Gonin has been an assistant professor at the University Nice Sophia Antipolis (UNS), France, since 2005. He teaches web technologies, software engineering (architecture and development), and HCI (Human Computer Interaction). On the research front, Philippe works on connections between user-centered design (for example, user and tasks models) and software engineering (for example, component architecture and UI development).
Robert Mion takes every effort to design experiences that continually delight, empower, and inspire people, often by repeatedly triggering that magical moment when your brain makes your mouth go A ha! or Of course!. This passion was ignited when watching Pixar's Toy Story at the age of eight. The fire has only grown since then.
Robert continues to use his amassed knowledge of storytelling, color, typography, layout, design, human psychology, and web technologies as an excuse to have fun every day by crafting experiences designed to go beyond solving problems—to emotionally connect with users and to help them become more awesome.
Robert and his wife, Laura, currently live in Fort Mill, SC—minutes south of the Queen City—with their two pugs (one, a pug-boxer mix).
Natalie Olivo has worked with web-based technologies for almost a decade and began her career in coding when the majority of HTML pages were tabular and inflexible. She remembers the excitement and satisfaction in the creative process of building her first prototype for a messaging application while she was employed at one of the first popular social networks in the age before Facebook. Natalie's wide ranging experience include key development roles in companies such as Godiva, Barnes and Noble, and The Daily Beast. She has spent the last year building out the mobile web experience at The Daily Beast, and enjoys the challenges of building applications that are performant for mobile web. She is currently a senior frontend engineer at Business Insider.
Mateus Ortiz is the creator of some cool open source projects such as Web Components Weekly (webcomponentsweekly.me), the first weekly World of Web Components, and web components the right way, and other projects. He is only 17 years old and spends his days helping and creating new open source projects. Mateus lives in Brazil where he makes several talks on the frontend. You can find him on Twitter at twitter.com/mteusortiz.
First of all, I'd like to thank God. I'd like to thank my mother, who always supports me and helps me in everything, my father, and all my family and friends. I'd also like to thank Packt Publishing for the opportunity to assist in the review of this book.
www.PacktPub.com
eBooks, discount offers, and more
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Preface
This book covers many concepts that any web developer may need to know. These concepts may be new or known, but forgotten. The first two chapters in this book will cover the basic elements and attributes of HTML. The next four chapters will cover the concepts and syntax of CSS. JavaScript will be the focus of the next five chapters. Finally, we will cover external libraries. These include Bootstrap, jQuery, and Angular. Because this is a reference guide, it is not set up as a read-through tutorial. Each section and concept is written to stand on its own so that you can find the piece of information that you need quickly.
What this book covers
Chapter 1, HTML Elements, covers all the elements that you will need when building a web page. This is focused on HTML5.
Chapter 2, HTML Attributes, focuses on any the attributes that can be used with HTML elements.
Chapter 3, CSS Concepts and Applications, focuses on selectors. Selectors are core to determining which elements the CSS attributes apply to.
Chapter 4, CSS Properties – Part I, covers properties for animation, background, the box model, CSS units, columns, and the mighty Flexbox.
Chapter 5, CSS Properties – Part II, covers properties for fonts, transforms, transitions, positions, text, tables, words and paragraphs, and paging.
Chapter 6, CSS Properties – Part III, covers properties for the page box, lists, counters, drop shadows, display and visibility, clipping and masking, user interface, and 3D.
Chapter 7, CSS Functions, covers functions for filters, transforms, colors, gradients, and values. It covers a few extra concepts like at-rules, global keyword values, and miscellaneous.
Chapter 8, JavaScript Implementations, Syntax Basics, and Variable Types, talks about JavaScript implementations and language basics, including syntax and variables and their types. This chapter will enable us to understand and get started with basic scripting.
Chapter 9, JavaScript Expressions, Operators, Statements, and Arrays, enables us to advance with our basic JavaScript language understanding and introduces JavaScript expressions, basic operators, statements, loops, conditions, and arrays. This also covers examples for better understanding.
Chapter 10, JavaScript Object-Orientated Programming, explains the basic concepts of object-oriented programming, that is, inheritance, polymorphism, abstraction, and encapsulation. You will also learn the usage of objects, classes, and related methods. We will cover examples for better understanding.
Chapter 11, Extending JavaScript and ECMA Script 6, covers all the newly introduced features of ECMAScript 6, which was released in 2015, such as new objects, patterns, syntax changes, and new methods on existing objects. This chapter covers all these features in detail.
Chapter 12, Server-side JavaScript – NodeJS, continues to focus on JavaScript. The difference is that we will now write JavaScript on the server side instead of the client side. We can use the concepts covered in the other JavaScript chapters in addition to learning specific NodeJS objects and paradigms.
Chapter 13, Bootstrap – The Stylish CSS Frontend Framework, talks about Bootstrap, which is an intuitive framework for creating responsive websites. It uses JavaScript, HTML, and CSS. This chapter will give you a detailed look at the Bootstrap framework and will enable you to create responsive layouts and web pages. Each topic in this chapter has a relevant example.
Chapter 14, jQuery – The Popular JavaScript Library, focuses on jQuery, which is a JavaScript library that simplifies dealing with various aspects of an HTML document. In this chapter, you will learn to traverse elements of an HTML document, methods, event handling, animations, and AJAX for rapid development.
Chapter 15, AngularJS – Google's In-Demand Framework, is where we conclude this book by finishing the external library section. Angular has been one of the most popular frameworks since it was introduced by Google. We will look at all the main concepts that you will need to begin writing applications with Angular.
What you need for this book
Most likely, for this book, you will need nothing that you are not already using! You will need a computer, a browser, and a text editor. Each chapter will cover different concepts and languages, so there may be differences between each chapter.
Here is a summary of the various things you will need throughout the chapters:
Although you can just use a notepad and a browser to do any sort of development, an IDE is always preferred and suggested for development in any specific language. I would suggest using Adobe Dreamweaver for beginners. The intellisense of IDE makes it a lot easier to code as it auto-suggests various methods, names, and variables, so you don't have to remember everything. As we will be dealing with the elements and document nodes in the JQuery section, you should have extensions enabled in your browser. ECMA Script 6 is very recent and not fully supported by all browsers. In some examples, you might have to load ES6 compilers to enable that feature in your browser. However, I would highly recommend that you use the latest version of Google Chrome as a client, as it covers most of the sections in ES6.
Who this book is for
This book is intended for beginners as well as advanced web developers. This book will be a valuable resource for anyone who is a web developer. You can look up any concept that deals with HTML, CSS, JavaScript, NodeJS, Bootstrap, jQuery, or Angular in this book.
Conventions
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "HTML5 has a simple document type declaration, <!DOCTYPE html>."
A block of code is set as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
Any command-line input or output is written as follows:
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Clicking the Next button moves you to the next screen."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.
Chapter 1. HTML Elements
HyperText Markup Language (HTML) is a language that annotates text. Annotation of text is done using elements. Using the following p element, as an example, we will see how to use HTML:
HTML elements also have attributes that will modify how they are rendered or interpreted. Attributes are added inside of the starting tag. Here is the class attribute in a div element:
There have been multiple specifications of HTML so far, but we will just look at the most commonly used and important elements of HTML5. HTML5 is the latest official specification, so we will be as future-proof as possible at the time of writing this book. You will want to follow the specifications of HTML as closely as possible. Most browsers are very forgiving and will render your HTML, but when you go beyond the specifications, you can and will run into strange rendering issues.
Note
All HTML elements will have global attributes. The attributes listed for each element in the sections that follow are the attributes beyond the global attributes.
DOCTYPE
The DOCTYPE element defines the document type of the file, as follows:
Attributes
The documentTypeattribute that you can see in the preceding code lets the browser know the type of document you will use.
Description
HTML5 has a simple document type declaration, <!DOCTYPE html>. This lets the browser know that the document is HTML5. The previous versions of HTML needed a formal definition of the version being used, but HTML5 has removed this for simplicity.
Most browsers will enforce strict adherence to the document type declared and try and figure out what it is based on looking at the document. This can lead to rendering issues, so it is recommended that you do follow the standards.
Here is an HTML5 declaration:
html
The html element is the root element of the HTML document:
Attributes
The manifestattribute links to a resource manifest that lists which files should be cached.
Description
The html element must directly follow the DOCTYPE element. This is the root element that all other elements must be descendants of.
The html element must have one head element and one body element as its children. All other elements will be inside these tags.
Here is what a simple HTML page looks like:
Semantic content sections
The next elements are the main elements to use when adding content to the document. For example, using the article element instead of an arbitrary div element allows the browser to infer that this is the main content of the page. These elements should be used to give structure to a document and not be used for styling purposes. Semantic elements make our HTML document more accessible using an ever-increasing amount of different devices.
body
The bodyelement is the main content section of the document. There must be only one main element, its syntax is as follows:
Attributes
The attributes of the body element include the inline event attributes.
Description
The bodyelement is the main content section of most documents. It must be the second child element of html, and there should only be one body element in a document.
Here is an example of the body element:
section
The sectionelement describes the content section of a document. For example, this can be a chapter of a book:
Description
The sectionelement is a new element that was introduced in HTML5. A section element should group the content together. While not a requirement, using a heading element as the first element in the code is a best practice. The section should be viewed as another part of the outline of the document. It groups related items into an easily targeted area. You can use this element multiple times in a document.
Here is an example of the section element:
nav
The navelement is the navigation element:
Description
The nav element is another semantic element introduced with HTML5. This lets the browser know that the content of this element is the parent and is for navigation. The nav element enhances accessibility by giving screen readers a landmark for navigation. This element should wrap any site navigation or other links that are grouped together for ease of navigation. You can use this multiple times.
Here is an example of using the nav element:
article
The article element is
