[go: up one dir, main page]
Scribd
Upload
11 views20 pages

U01 FrontEndArquitecture

Uploaded by

eliasurenagarcia05
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views20 pages

U01 FrontEndArquitecture

Uploaded by

eliasurenagarcia05
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Frontend Web Architecture

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
What is JavaScript?
● General programming language, but designed with HTML in mind
● Provides interactivity to web pages
● Can modify HTML and CSS after a web page has been loaded
● Some web applications are written only in JavaScript
What is JavaScript?
● From Wikipedia:
... high-level, dynamic, untyped, and interpreted programming language
... is prototype-based with first-class functions, …
... supporting object-oriented, imperative, and functional programming
... has an API for working with text, arrays, dates and regular expressions
● Not particularly similar to Java
● Also known as ECMAScript
What is JavaScript?
● No relation to Java (maybe a little syntax, that’s all)
● ECMAScript -> International standard for the language
Reference materials
● Not any “official” documentation
● Most definitive source for
JavaScript, DOM, HTML, CSS:
Mozilla Development Network
(MDN)
● StackOverflow posts, blogs often
have good examples

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
We will be using JavaScript
● To build our website
● To power interactivity between the user and the website
● To communicate to external servers using APIs
● The better you know pure JavaScript, the more you'll be able to build rich web
applications
● Even to learn Angular, the better you know the JavaScript language, the better
you will understand Angular
How do you add JavaScript to your page?
Internal JavaScript External JavaScript
<html> <html>
<head> <head>
<title>Learning JavaScript</ title> <title>Learning JavaScript</ title>
</head> <script src="script.js" ></script>
<body> </head>
<body>
</body> </body>
<script> </html>
// JavaScript goes here…
</script>
</html>
Comments
● JavaScript supports two styles of comments.
● Any text between a // and the end of a line is treated as a comment and is
ignored by JavaScript.
● Any text between the characters /* and */ is also treated as a comment; these
comments may span multiple lines but may not be nested.
// This is a single-line comment.

/*
* This is a multi-line comment. The extra characters at the start of each line are
* not a required part of the syntax; they just look cool!
*/
What is JavaScript?
● No relation to Java (maybe a little syntax, that’s all)
● ECMAScript -> International standard for the language
Browser
+ Developer Tools
+ HTML + CSS
+ JavaScript
Features of a Browser
● Network Access
● Interpreting the fetched data
● Possibly fetching and interpreting dependencies like images
● Rendering HTML with CSS rules
● Running scripts in the context of the web page
Inspecting HTML Elements
● Click the inspector to highlight actual HTML elements in browser
● After highlighting an element in the browser, the “elements” section filters to
highlight the code that generates that element
Inspecting HTML Elements
● Works both ways: Highlight some HTML in the Elements panel, see the
corresponding part of the page be highlighted
Inspecting HTML Elements
● You can even change the HTML or CSS!
Using the JavaScript Console
● In most current browsers, the JavaScript Console has been integrated as a tab
within Developer Tools. The shortcut keys listed below will open Developer
Tools, it might be necessary to switch to the right tab after that.
Using the JavaScript Console
● The information displayed by a debugging/web console is made available
through the multiple methods of the console Javascript object that can be
consulted through console.dir (console).
Using the JavaScript Console
● Opening the Console
● In most current browsers, the JavaScript Console has been integrated as a tab
within Developer Tools. The shortcut keys listed below will open Developer
Tools, it might be necessary to switch to the right tab after that.
● The information displayed by a debugging/web console is made available
through the multiple methods of the console Javascript object that can be
consulted through console.dir(console).
● Measuring time - console.time()
Sources Panel
● View and edit CSS and JavaScript files
Network Panel
● View all resources loaded in a timeline
Code editor
● You will need an editor that can save files in plain text
● Better if you find something that can highlight code to make it much more
readable

You might also like