Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

д/з 1 - Белоусов Алексей #6

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions JavaScript_Enlightenment.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>JavaScript_Enlightenment.pdf</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="pdf">
<div class="page">
<div class="body">
<h1>Preface</h1>

<p>Before you begin, it is important to understand various styles employed in this book. Please do not
skip
this section, because it contains important information that will aid you as you read the book.</p>

<h2>More code, less words</h2>

<p>Please examine the code examples in detail. The text should be viewed as secondary to the code
itself.
It is my opinion that a code example is worth a thousand words. Do not worry if youʼre initially
confused
by explanations. Examine the code. Tinker with it. Reread the code comments. Repeat this process
until the concept being explained becomes clear.
I hope you achieve a level of expertise such that welldocumented code is all you need to grok
a programming concept.</p>

<h2>Exhaustive code and repetition</h2>

<p>You will probably curse me for repeating myself and for being so comprehensive with my code
examples. And while I might deserve it, I prefer to err on the side of being exact, verbose, and
repetitive, rather than make false assumptions authors often make about their reader. Yes, both can
be
annoying, depending upon what knowledge you bring to the subject, but they can also serve a useful
purpose for those who want to learn a subject in detail.</p>

<h2>Color-coding Conventions</h2>

<p>In the JavaScript code examples (example shown below), orange is used to highlight code directly
relevant to the concept being discussed. Any additional code used to support the orange colored code
will be green. The color gray in the code examples is reserved for JavaScript comments (example
shown below).</p>

<pre class="code"><code>&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;body&gt;&lt;script&gt;
<span class="comment">// this is a comment about a specific part of the code</span>
var foo = <span class="string">'calling out this part of the code'</span>;
&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</code></pre>

<p>In addition to code examples being color-coded, the text in this book is colored so as to denote
JavaScript words/keywords v.s. JavaScript code v.s. regular text. Below, I take an excerpt from the
book to demonstrate this coloring semantic.</p>

<p>"Consider that the <code><span class="string">cody</span></code> object created from the
<code><span class="string">Object()</span></code> constructor function (i.e <code><span class="string">var cody = new
Object()</span></code>) is not really different from a string object created via
the <code><span class="string">String()</span></code> constructor function. To
drive this fact home, examine the code below:"</p>

<p>Notice the use of gray italic text for code references, orange text for JavaScript words/keywords, and
regular black text for everything in-between.</p>

<h2>jsFiddle, JS Bin, and Firebug lite-dev</h2>

<p>The majority of code examples in this book are linked to a corresponding <a href="http://jsfiddle.net/">jsFiddle</a> page, where the code
can be tweaked and executed online. The jsFiddle examples have been configured to use the
<a href="http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/firebug-lite-dev.js">Firebug
lite-dev</a> plugin so that the log function (i.e. console.log) will work in most any modern browser
regardless of if the browser has its own console. Before reading this book make sure you are
comfortable with the
<a href="http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it">usage and
purpose</a> of console.log.</p>

<p>In situations where jsFiddle & Firebug lite-dev caused complications with the JavaScript code
<a href="http://jsbin.tumblr.com/about">JS Bin</a> & Firebug Lite-dev will be used.
I've tried to avoid a dependency on a browser console by using Firebug
lite-dev but with certain code examples the solution itself gets in the way of code execution. In these
situations the console built into your web browser will have to be leveraged to output logs. If you are not
using a browser with a built in JavaScript console I would suggest
<a href="http://browsehappy.com/">upgrading or switching</a> browsers.</p>

<p>When JS Bin is used, keep in mind that the code has to be executed manually (clicking 'Render') which
differs from the page load execution done by jsFiddle.</p>
</div>
</div>
</div>
</body>
</html>

95 changes: 95 additions & 0 deletions css/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
html {
background: #ccc;
font: 14px/1.5 "Tahoma", sans-serif;
}
h1 {
color: #444;
font: normal 36px "Helvetica", sans-serif;
text-align: right;
border-bottom: 3px solid #EAEBEB;
padding-bottom: 15px;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

padding: 0 0 15px будет чуток короче :)

margin: 0 0 106px;
}
h2 {
font-size: 18px;
margin: 60px 0 21px;
padding-bottom: 11px;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

padding: 0 0 11px будет короче

color: #444;
border-bottom: 2px solid #EBECEC;
}
p {
margin: 0 0 34px 0;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

margin: 0 0 34px;

}
pre {
margin: 0;
}
@media screen {
.code:before {
content: ' ';
height: 15px;
margin-bottom: 15px;
background: #FDECAD;
display: block;
}
.code:after {
content: ' ';
height: 4px;
margin: 11px 0 34px;
background: #FDD95D;
display: block;
}
}
code {
color: #37571e;
font-family: Courier, "Courier New", monospace;
}
code .comment {
color: #7a7;
}
code .string {
color: #b45e09;
}
.pdf {}
.pdf .page {
width: 788px;
background: #FFF;
margin: 5px auto 30px;
position: relative;
padding: 56px 75px;
box-sizing: border-box;
}
.pdf .body {}
.pdf .footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 38px;
}
.pdf .footer .page-num {
text-align: center;
}

@media print {
.pdf .page {
width: auto;
height: auto;
background: #FFF;
margin: 0;
position: static;
padding: 0;
box-sizing: content-box;
}
.visible-screen {
display: none;
}
.code {
border-top: 15px solid #FDECAD;
border-bottom: 4px solid #FDD95D;
margin: 10px 0 15px 0;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

margin: 10px 0 15px

}
a:after {
content: " (" attr(href) ") ";
font: normal 0.8em;
}
}