JavaScript is one of the most popular skills in today’s job market. It allows you to create both client- and server-side applications quickly and easily. Having a solid understanding of this powerful and versatile language is essential to anyone who uses it.
“Practical JavaScript Programming” does not only focus on best practices, but also introduces the fundamental concepts. This course will take you from JavaScript basics to advanced. You’ll learn about topics like Data Types, Functions, Events, AJAX and more.
3. 3
Wilson Su
Front-end Developer, HIE
● 6 years in web design
● Specialize in JavaScript /
CSS / HTML / OOP / Git
● Familiar with PHP / Design
Pattern
● Interested in UI & Ix Design
wilson_su@trend.com.tw
7. What’s Regular Expression?
7
A regular expression is, in theoretical computer science and formal
language theory, a sequence of characters that define a search pattern.
Usually this pattern is then used by string searching algorithms for "find" or
"find and replace" operations on strings. – Wiki
Regular Expression
/^(([^<>()[].,;:s@"]+(.[^<>()[
].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3
}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}]
)|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/
8. Example Scenarios
● Test for a pattern within a string
You can test an input string to see if a telephone number pattern or a credit
card number pattern occurs within the string.
● Replace text
You can use a regular expression to identify specific text in a document and
either remove it completely or replace it with other text.
● Extract a substring from a string based upon a pattern match
You can find specific text within a document or input value
8
What’s RegExp?
9. Working with Regular Expressions
9
What’s RegExp?
Method Description
regex.exec
Executes a search for a match in a string. It returns an array of
information or null on a mismatch.
regex.test Tests for a match in a string. It returns true or false.
string.match
Executes a search for a match in a string. It returns an array of
information or null on a mismatch.
string.search
Tests for a match in a string. It returns the index of the match, or -1 if
the search fails.
string.replace
Executes a search for a match in a string, and replaces the matched
substring with a replacement substring.
string.split
Uses a regular expression or a fixed string to break a string into an array
of substrings.
10. Creating a RegExp Object With Ordinary Characters
1. /* Using a regular expression literal */
2. var pattern1 = /earn/;
3.
4. /* Calling the RegExp constructor function */
5. var pattern2 = new RegExp('ear');
6.
7. pattern1.test('learn'); // true
8. pattern1.exec('learn'); // ['earn', index: 1, input: 'learn']
9. 'learn'.search(pattern2); // 1
10. 'learn'.match(pattern2); // ['ear', index: 1, input: 'learn']
11. 'learn'.split(pattern2); // (2) ['l', 'n']
12. 'learn'.replace(pattern2, 'io'); // 'lion'
10
14. Metacharacters
14
Special Characters
Metacharacter Meaning
d Matches a digit character. Equivalent to [0-9].
D Matches a non-digit character. Equivalent to [^0-9].
w
Matches any of the following characters: A-Z, a-z, 0-9, and underscore.
Equivalent to [A-Za-z0-9_].
W
Matches any character except A-Z, a-z, 0-9, and underscore.
Equivalent to [^A-Za-z0-9_].
s
Matches a single white space character, including space, tab, form feed,
line feed.
S Matches a single character other than white space.
. Matches any single character except the newline character n.
15. Quantifiers
15
Special Characters
Character Meaning
{n} Matches exactly n times. n must be a positive integer.
{n,} Matches at least n times. n must be a positive integer.
{n,m}
Matches at least n and at most m times.
n and m must be positive integers, where n <= m.
*
Matches the preceding character or subexpression zero or more times.
Equivalent to {0,}.
+
Matches the preceding character or subexpression one or more times.
Equivalent to {1,}.
?
Matches the preceding character or subexpression zero or one time.
Equivalent to {0,1}.
30. Specifies the Index at Which to Start the Next Match
30
1. var string = '#1 Doran#2 Alexn#3 Ray';
2. var pattern = /#d+sw+/g;
3. pattern.lastIndex = string.lastIndexOf('n');
4. pattern.exec(string);
5. // ['#3 Ray', index: 16, input: '#1 Dora↵#2 Alex↵#3 Ray']
40. What’s SPA?
40
Single-page Application
A single-page application, or SPA for short, is a web application that fits on
a single web page with the goal of providing a user experience similar to
that of a desktop application. In an SPA, either all necessary code – HTML,
JavaScript, and CSS – is retrieved with a single page load, or the
appropriate resources are dynamically loaded and added to the page as
necessary, usually in response to user actions. – Wiki
41. Why SPA?
41
What’s SPA?
✓ Speeds up the loading of
secondary pages
✓ Reduced number of resource
requests
✓ Better mobile device experience
✓ Oriented on the apps with a big
amount of interactive client-side
code
✓ Easier state tracking
✗ Speed of initial load can be slow
✗ Complexity of navigation
✗ Not as SEO-friendly as desired
✗ An SPA model breaks the
browser's design for page history
navigation
✗ An SPA will have to call a
function to update the analytics
package
Pros Cons
47. SPA URL Design
47
Build a Simple SPA
Todos Create Detail Edit
Title
Notes
Create
porro tepa
Title
laboriosam
mollitia et enim
quasi adipisci quia
Notes
Save
porro tepa
laboriosam mollitia et
enim quasi adipisci quia
provident illum
/todos/:id/edit/todos/:id/todos/create/todos
48. Project Structure
48
Build a Simple SPA
Project
components
todos
index.js
index.html
create.html
detail.html
edit.html
app.js
styles.css
index.html
Displays todo list
Displays a form for creating a new todo
Displays a todo detail
Displays a form for editing a todo
Todo list module
Entry point
Main page
58. What’s RESTful API?
58
Representational state transfer or RESTful web services is a way of
providing interoperability between computer systems on the Internet.
REST-compliant Web services allow requesting systems to access and
manipulate textual representations of Web resources using a uniform and
predefined set of stateless operations. – Wiki
RESTful Web Services
60. Relationship Between URL and HTTP Methods
60
What’s RESTful API?
Collection, such as
https://api.data.com/items/
Element, such as
https://api.data.com/items/1
GET
List the URIs and perhaps other details of
the collection's members.
Retrieve a representation of the addressed
member of the collection, expressed in an
appropriate Internet media type.
POST
Create a new entry in the collection. The
new entry's URI is assigned automatically
and is usually returned by the operation
Not generally used. Treat the addressed
member as a collection in its own right and
create a new entry within it.
PUT
Replace the entire collection with another
collection.
Replace the addressed member of the
collection, or if it does not exist, create it.
DELETE Delete the entire collection.
Delete the addressed member of the
collection.
65. RESTful API
65
Build RESTful APIs
GET https://api-wilson-su.c9users.io/api/todos/
POST https://api-wilson-su.c9users.io/api/todos/
GET https://api-wilson-su.c9users.io/api/todos/:id
PUT https://api-wilson-su.c9users.io/api/todos/:id
66. Creating a Project Folder
66
$ mkdir spa
$ cd spa
$ touch server.js
$ npm init
67. Creating a Server
67
1. var http = require('http');
2. http.createServer(function (request, response) {
3. response.writeHead(200, { 'Content-Type': 'text/plain' });
4. response.write('Hello Node.js!');
5. response.end();
6. })
7. .listen(8080, function () {
8. console.log('Listening on port 8080');
9. });