fullstackpython.com/javascript.html at gh-pages · ianmiell/fullstackpython.com · GitHub

History

251 lines (250 loc) · 26.3 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

<!DOCTYPE html>

<head>

<title>JavaScript - Full Stack Python</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<span class="logo-title"><a href="https://www.fullstackpython.com/">Full Stack Python</a></span>

</div>

<!--<a href="/blog.html" class="submenu-item-first">Blog</a> |

<a href="/books.html" class="submenu-item">Books</a> | -->

<a href="/table-of-contents.html" class="submenu-item-first">All topics</a> |

<a href="/blog.html" class="submenu-item">Blog</a> |

<a href="/email.html" class="submenu-item">Newsletter</a> |

<a href="https://twitter.com/fullstackpython" class="submenu-item">@fullstackpython</a> |

<a href="https://www.facebook.com/fullstackpython" class="submenu-item">Facebook</a> |

<a href="https://github.com/makaimc/fullstackpython.com/tree/gh-pages/source" class="submenu-item">Source</a>

</div> </div>

</div><div class="row">

<h1>JavaScript</h1>

<p>JavaScript is a small scripting programming language embedded in web browsers

to enable dynamic content and interaction. </p>

<h2>Why is JavaScript necessary?</h2>

<p>JavaScript executes in the client and enables dynamic content and interaction

that is not possible with HTML and CSS alone. Every modern Python web

application uses JavaScript on the front end. </p>

<h2>Front end frameworks</h2>

<p>Front end JavaScript frameworks move the rendering for most of a web

application to the client side. Often these applications are informally

referred to as "one page apps" because the webpage is not reloaded upon every

click to a new URL. Instead, partial HTML pages are loaded into the

document object model or data is retrieved through an API call then displayed

on the existing page.</p>

<p>Examples of these front end frameworks include:</p>

<ul>

<li>

<p><a href="https://angularjs.org/">Angular.js</a></p>

</li>

<li>

<p><a href="http://backbonejs.org/">Backbone.js</a></p>

</li>

<li>

<p><a href="http://emberjs.com/">Ember.js</a></p>

</li>

</ul>

<p>Front end frameworks are rapidly evolving. Over the next several years

consensus about good practices for using the frameworks will emerge.</p>

<h2>How did JavaScript originate?</h2>

<p>JavaScript is an implementation of

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview">the ECMAScript specification</a>

which is defined by the

<a href="http://www.ecma-international.org/default.htm">Ecma International Standards Body</a>.</p>

<h2>JavaScript resources</h2>

<ul>

<li>

<p><a href="http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results">Frontend tooling in 2015</a>

shows the results of a survey for what frontend developers are using for

CSS pre- and post-processing and other build steps.</p>

</li>

<li>

<p><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a>

is a great overview of both JavaScript and CSS as well as how pages are

rendered in a browser.</p>

</li>

<li>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a>

by Mozilla walks through the basic syntax and operators.</p>

</li>

<li>

<p><a href="http://www.smashingmagazine.com/2011/10/28/useful-coding-workflow-tools-for-web-designers-developers/">Coding tools and JavaScript libraries</a>

is a huge list by Smashing Magazine with explanations for each tool and

library for working with JavaScript.</p>

</li>

<li>

<p><a href="http://superherojs.com/">Superhero.js</a> is an incredibly well designed list

of resources for how to test, organize, understand and generally work with

JavaScript.</p>

</li>

<li>

<p><a href="http://www.unheap.com/">Unheap</a> is an amazing collection of reusable JQuery

plugins for everything from navigation to displaying media.</p>

</li>

<li>

<p><a href="http://www.breck-mckye.com/blog/2014/12/the-state-of-javascript-in-2015/">The State of JavaScript in 2015</a>

is an opinion piece about favoring small, single-purpose JavaScript libraries

over larger frameworks due to churn in the ecosystem.</p>

</li>

<li>

<p><a href="http://www.infoq.com/articles/modern-javascript-toolbox">The Modern JavaScript Developer’s Toolbox </a>

provides a high-level overview of tools frequently used on the client and

server side for developers using JavaScript in their web applications.</p>

</li>

</ul>

<h2>JavaScript learning checklist</h2>

<ol>

<li>

<p>Create a simple HTML file with basic elements in it. Use the

<code>python -m SimpleHTTPServer</code> command to serve it up. Create a

element at the end of the <code><body></code> section in the HTML page. Play

with JavaScript within that element to learn the basic syntax.</p>

</li>

<li>

<p>Download <a href="http://jquery.com/">JQuery</a> and add it to the page above your

JavaScript element. Start working with JQuery and learning how it makes

basic JavaScript easier.</p>

</li>

<li>

<p>Work with JavaScript on the page. Incorporate examples from open source

projects listed below as well as JQuery plugins. Check out

<a href="http://www.unheap.com/">Unheap</a> to find a large collection of categorized

JQuery plugins.</p>

</li>

<li>

<p>Check out the JavaScript resources below to learn more about advanced

concepts and open source libraries.</p>

</li>

<li>

<p>Integrate JavaScript into your web application and check the

<a href="/static-content.html">static content</a> section for how to host the

JavaScript files.</p>

</li>

</ol>

<h3>Do you need to style your app or deploy it?</h3>

<p class="under-btn">My app runs but looks awful. How do I style the user interface?</p> </div>

</div>

<p class="under-btn">I've built a Python web app, now how do I deploy it?</p> </div>

</div>

<p class="under-btn">How should I host and service static content files?</p> </div>

</div>

</div><div id="mc_embed_signup">

<h4>Sign up here to receive a monthly email with major updates to this site, tutorials and discount codes for Python books.</h4>

</div>

</div>

</form>

</div>

<p style="font-size: .8em; margin-top: 10px;">Searching for a complete, step-by-step deployment walkthrough? Learn more about <a href="http://www.deploypython.com/">The Full Stack Python Guide to Deployments book</a>.

</p>

</div>

</div><div class="panel panel-success">

<h3 class="panel-head">Email Updates</h3>

</div>

<h5>Sign up to get a monthly email with Python tutorials and major updates to this site.</h5>

</div>

</form>

</div>

</div><div class="panel panel-success" id="full-toc">

<h3 class="panel-head"><a href="/table-of-contents.html" style="color: #fff;">Table of Contents</a></h3>

</div>

<a href="/introduction.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>1. Introduction</a><a href="/learning-programming.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Learning Programming</a><a href="/why-use-python.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Why Use Python?</a><a href="/python-2-or-3.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Python 2 or 3?</a><a href="/enterprise-python.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Enterprise Python</a><a href="/best-python-resources.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Best Python Resources</a><a href="/best-python-videos.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Best Python Videos</a><a href="/development-environments.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>2. Development Environments</a><a href="/vim.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Vim</a><a href="/emacs.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Emacs</a><a href="/python-programming-language.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>3. Core Language</a><a href="/generators.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Generators</a><a href="/comprehensions.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Comprehensions</a><a href="/web-development.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>4. Web Development</a><a href="/web-frameworks.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Web Frameworks</a><a href="/django.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Django</a><a href="/flask.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Flask</a><a href="/bottle.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Bottle</a><a href="/pyramid.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Pyramid</a><a href="/morepath.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Morepath</a><a href="/other-web-frameworks.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Other Web Frameworks</a><a href="/web-design.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Web Design</a><a href="/cascading-style-sheets.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Cascading Style Sheets (CSS)</a><a href="/javascript.html" class="list-group-item smaller-item active" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>JavaScript</a><a href="/websockets.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>WebSockets</a><a href="/template-engines.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Template Engines</a><a href="/web-application-security.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Web Application Security</a><a href="/static-site-generator.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Static Site Generators</a><a href="/jinja2.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Jinja2</a><a href="/data.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>5. Data</a><a href="/databases.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Relational Databases</a><a href="/no-sql-datastore.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>NoSQL Data Stores</a><a href="/object-relational-mappers-orms.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Object-relational Mappers</a><a href="/postgresql.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>PostgreSQL</a><a href="/mysql.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>MySQL</a><a href="/sqlite.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>SQLite</a><a href="/application-programming-interfaces.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>6. Web APIs</a><a href="/api-integration.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>API Integration</a><a href="/api-creation.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>API Creation</a><a href="/deployment.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>7. Deployment</a><a href="/servers.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Servers</a><a href="/platform-as-a-service.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Platform-as-a-Service</a><a href="/operating-systems.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Operating Systems</a><a href="/web-servers.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Web Servers</a><a href="/wsgi-servers.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>WSGI Servers</a><a href="/source-control.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Source Control</a><a href="/application-dependencies.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Application Dependencies</a><a href="/static-content.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Static Content</a><a href="/task-queues.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Task Queues</a><a href="/configuration-management.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Configuration Management</a><a href="/continuous-integration.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Continuous Integration</a><a href="/logging.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Logging</a><a href="/monitoring.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Monitoring</a><a href="/web-analytics.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Web Analytics</a><a href="/docker.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Docker</a><a href="/caching.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Caching</a><a href="/microservices.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Microservices</a><a href="/devops.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>DevOps</a><a href="/nginx.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Nginx</a><a href="/apache-http-server.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Apache HTTP Server</a><a href="/caddy.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Caddy</a><a href="/green-unicorn-gunicorn.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Green Unicorn (Gunicorn)</a><a href="/testing.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>8. Testing</a><a href="/unit-testing.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Unit Testing</a><a href="/integration-testing.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Integration Testing</a><a href="/code-metrics.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Code Metrics</a><a href="/debugging.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Debugging</a><a href="/bots.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Bots</a><a href="/what-full-stack-means.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>9. Meta</a><a href="/change-log.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Change Log</a><a href="/future-directions.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>Future Directions</a><a href="/about-author.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left: 27px;'>About the Author</a> <a href="/table-of-contents.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",san-serif;background-color:#22B24C; color: #fff;'>...or <span style="border-bottom: 1px dotted;">view the full table of contents</span>.</a>

</div>

</div> <div class="panel panel-success">

<div class="panel-heading"><h3 class="panel-head">JavaScript</h3></div>

Major updates are tweeted via

<a href="https://twitter.com/fullstackpython">@fullstackpython</a>.

<hr/>

Need more detailed tutorials than you see here?

<a href="http://www.deploypython.com/">Learn more about The Full Stack Python Guide to Deployments book.</a>

</div>

<h3 class="panel-head"><a href="/table-of-contents.html" style="color: #fff;">Chapters</a></h3>

</div>

<a href="/introduction.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>1. Introduction</a><a href="/development-environments.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>2. Development Environments</a><a href="/python-programming-language.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>3. Core Language</a><a href="/web-development.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>4. Web Development</a> <a href="/javascript.html" class="list-group-item smaller-item active" style='font-family: "Helvetica Neue",sans-serif;'>» JavaScript</a>

<a href="/data.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>5. Data</a><a href="/application-programming-interfaces.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>6. Web APIs</a><a href="/deployment.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>7. Deployment</a><a href="/testing.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>8. Testing</a><a href="/what-full-stack-means.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>9. Meta</a> <a href="/table-of-contents.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",san-serif;background-color:#22B24C; color: #fff;'>...or <span style="border-bottom: 1px dotted;">view the full table of contents</span>.</a>

</div>

</div></div></div>

<hr/>

</div>

<p class="banner"><a href="https://www.gumroad.com/l/python-deployments" style="color: #fff">Learning web development? Check out The Full Stack Python Guide to Deployments book</a>!</p>

</div>

</div> <div class="container">

<a href="http://www.mattmakai.com/" class="underline">Matt Makai</a>

2016

</div>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-19910497-7', 'auto');

ga('send', 'pageview');

</script>

var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, {'hitCallback': function () { document.location = url; } }); }

</script>

</body>

</html>

fullstackpython.com/javascript.html at gh-pages · ianmiell/fullstackpython.com · GitHub

Expand file tree

Breadcrumbs

javascript.html

Latest commit

History

Breadcrumbs

javascript.html

File metadata and controls