纯JavaScript打造前端应用深度教程：零框架实践

电脑语言

需积分: 10 72 浏览量更新于2024-07-16 收藏 1.1MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

A Quick Tour of the

Foundations of Web Apps

An XML document is called valid against a particular grammar (such as a DTD or an XML Schema), if

it is well-formed,

and it respects the grammar.

The evolution of HTML

The World-Wide Web Committee (W3C) has developed the following important versions of HTML:

• HTML4 as an SGML-based language (in 1997),

• XHTML 1 as an XML-based version of HTML4 (in 2000),

•

(X)HTML5 in cooperation (and competition) with the WHAT working group [http://

en.wikipedia.org/wiki/WHATWG] led by Ian Hickson [http://en.wikipedia.org/wiki/Ian_Hickson]

and supported by browser vendors (in 2014).

HTML was originally designed as a structure description language, and not as a presentation

description language. But HTML4 has a lot of purely presentational elements such as font. XHTML

has been taking HTML back to its roots, dropping presentational elements and defining a simple and

clear syntax, in support of the goals of

• device independence,

• accessibility, and

• usability.

We adopt the symbolic equation

HTML = HTML5 = XHTML5

stating that when we say "HTM"L or "HTML"5, we actually mean XHTML5

because we prefer the clear syntax of XML documents over the liberal and confusing HTML4-style

syntax that is also allowed by HTML5.

The following simple example shows the basic code template to be used for any HTML document:

<!DOCTYPE html>

<head>

<title>XHTML5 Template Example</title>

</head>

<body>

<h1>XHTML5 Template Example</h1>

<section><h1>First Section Title</h1>

...

</section>

</body>

</html>

HTML forms

For user-interactive web applications, the web browser needs to render a user interface. The traditional

metaphor for a software application's user interface is that of a form. The special elements for data

A Quick Tour of the

Foundations of Web Apps

input, data output and form actions are called form controls. An HTML form is a section of a document

consisting of block elements that contain controls and labels on those controls.

Users complete a form by entering text into input fields and by selecting items from choice controls.

A completed form is submitted with the help of a submit button. When a user submits a form, it

is sent to a web server either with the HTTP GET method or with the HTTP POST method. The

standard encoding for the submission is called URL-encoded. It is represented by the Internet media

type application/x-www-form-urlencoded. In this encoding, spaces become plus signs,

and any other reserved characters become encoded as a percent sign and hexadecimal digits, as defined

in RFC 1738.

Each control has both an initial value and a current value, both of which are strings. The initial value

is specified with the control element's value attribute, except for the initial value of a textarea

element, which is given by its initial contents. The control's current value is first set to the initial value.

Thereafter, the control's current value may be modified through user interaction or scripts. When a

form is submitted for processing, some controls have their name paired with their current value and

these pairs are submitted with the form.

Labels are associated with a control by including the control as a subelement of a label element

("implicit labels"), or by giving the control an id value and referencing this id in the for attribute of

the label element ("explicit labels"). Notice that implicit labels are, in 2014, still not well supported

by CSS libraries and assistive technologies. Therefore, explicit labels seem preferable, despite the fact

that they imply quite some overhead and repetitive code.

In the simple user interfaces of our "Getting Started" applications, we only need three types of form

controls:

single line input fields created with an <input name="..." /> element,

push buttons created with a <button type="button">...</button> element, and

dropdown selection lists created with a select element of the following form:

<option value="value1"> option1 </option>

<option value="value2"> option2 </option>

...

</select>

An example of an HTML form with implicit labels for creating such a user interface is

<p><label>Title: <input name="title" /></label></p>

</form>

In an HTML-form-based user interface (UI), we have a correspondence between the different kinds of

properties defined in the model classes of an app and the form controls used for the input and output

of their values. We have to distinguish between various kinds of model class attributes, which are

typically mapped to various kinds of input fields. This mapping is also called data binding.

In general, an attribute of a model class can always be represented in the UI by a plain input control

(with the default setting type="text"), no matter which datatype has been defined as the range

of the attribute in the model class. However, in special cases, other types of input controls (for

instance, type="date"), or other controls, may be used. For instance, if the attribute's range is an

enumeration, a select control or, if the number of possible choices is small enough (say, less than

8), a radio button group can be used.

A Quick Tour of the

Foundations of Web Apps

JavaScript

This section provides a brief overview of JavaScript, assuming that the reader is already familiar with

basic programming concepts and has some experience with programming, for instance, in PHP, Java

or C#.

JavaScript is an object-oriented programming language that can be used for

1. Enriching a web page by

• generating browser-specific HTML content or CSS styling,

• inserting dynamic HTML content,

• producing special audio-visual effects (animations).

2. Enriching a web user interface by

• implementing advanced user interface components,

• validating user input on the client side,

• automatically pre-filling certain form fields.

3. Implementing a frontend web application with local data storage.

4. Implementing a frontend component for a distributed web application with remote data storage

managed by a backend component (server-side program).

Types and data literals in JavaScript

JavaScript has three primitive data types: string, number and boolean. There are three reference

types: object, array and function. Arrays and functions are just special kinds of objects. Types

are not declared and not checked since a JavaScript program is not compiled. Type conversion (casting)

is performed automatically.

The value of a variable may be

•

a data value: either a string, a number, or a boolean,

•

an object reference: either referencing an ordinary object, or an array, or a function,

• one of the following two special data values: undefined or null.

All numeric data values are represented in 64-bit floating point format with an optional exponent (like

in the numeric data literal 3.1e10). There is no explicit type distinction between integers and floating

point numbers. For making sure that a numeric value is an integer, or that a string representing a

number is converted to an integer, one has to apply the predefined function parseInt. If a numeric

expression cannot be evaluated to a number, its value is set to NaN ("not a number").

Like in Java, there are two pre-defined Boolean data literals, true and false, and the Boolean

operator symbols are the exclamation mark ! for NOT, the double ampersand && for AND, and the

double bar || for OR. When a non-Boolean value is used in a condition, or as an operand of a Boolean

expression, it is converted into a Boolean value according to the following rules. The empty string,

the (numerical) data literal 0, as well as undefined and null, are mapped to false, and all other

values are mapped to true.

For equality and inequality testing, always use the triple equality symbol === and !== instead of the

double equality symbol == and !=. Otherwise, for instance, the number 2 would be the same as the

string "2", since the condition (2 == "2") evaluates to true in JavaScript.

A Quick Tour of the

Foundations of Web Apps

Variable scope

In the current version of JavaScript, ECMAScript 5, there are only two kinds of scope for variables:

the global scope (with window as the context object) and function scope, but no block scope.

Consequently, declaring a variable within a block is confusing and should be avoided. For instance,

although this is a freqently used pattern, even by experienced JavaScript programmers, it is a pitfall

to declare the counter variable of a for loop in the loop, as in

function foo() {

for (var i=0; i < 10; i++) {

... // do something with i

}

Instead, and this is exactly how JavaScript is interpreting this code, we should write:

function foo() {

var i=0;

for (i=0; i < 10; i++) {

... // do something with i

}

All variables should be declared at the beginning of a function. Only in the next version of JavaScript,

ECMAScript 6, block scope will be supported by means of a new form of variable declaration with

the keyowrd let.

Strict Mode

Starting from ECMAScript 5, we can use strict mode [http://speakingjs.com/es5/

ch07.html#strict_mode] for getting more runtime error checking. For instance, in strict mode, all

variables must be declared. An assignment to an undeclared variable throws an exception.

We can turn strict mode on by typing the following statement as the first line in a JavaScript file or

inside a <script> element:

'use strict';

It is generallly recommended that you use strict mode, except your code depends on libraries that are

incompatible with strict mode.

Different kinds of objects

JavaScript objects are different from classical OO/UML objects. In particular, they need not

instantiate a class. And they can have their own (instance-level) methods in the form of method slots,

so they do not only have (ordinary) property slots, but also method slots. In addition they may also

have key-value slots. So, they may have three different kinds of slots, while classical objects (called

"instance specifications" in UML) only have property slots.

A JavaScript object is essentially a set of name-value-pairs, also called slots, where names can be

property names, function names or keys of a map. Objects can be created in an ad-hoc manner, using

JavaScript's object literal notation (JSON), without instantiating a class:

var person1 = { lastName:"Smith", firstName:"Tom"};

var o1 = {}; // an empty object with no slots

Whenever the name in a slot is an admissible JavaScript identifier [http://mothereff.in/js-variables],

the slot may be either a property slot, a method slot or a key-value slot. Otherwise, if the name is some

A Quick Tour of the

Foundations of Web Apps

other type of string (in particular when it contains any blank space), then the slot represents a key-

value slot, which is a map element, as explained below.

The name in a property slot may denote either

a data-valued property, in which case the value is a data value or, more generally, a data-valued

expression;

an object-valued property, in which case the value is an object reference or, more generally, an

object expression.

The name in a method slot denotes a JavaScript function (better called method), and its value is a

function definition text.

Object properties can be accessed in two ways:

1. Using the dot notation (like in C++/Java):

person1.lastName = "Smith"

2. Using a map notation:

person1["lastName"] = "Smith"

JavaScript objects can be used in many different ways for different purposes. Here are five different

use cases for, or possible meanings of, JavaScript objects:

1. A record is a set of property slots like, for instance,

var myRecord = {firstName:"Tom", lastName:"Smith", age:26}

A map (or 'associative array') supports look-ups of values based on keys like, for instance,

var numeral2number = {"one":"1", "two":"2", "three":"3"}

which associates the value "1" with the key "one", "2" with "two", etc. A key need not be a valid

JavaScript identifier, but can be any kind of string (e.g. it may contain blank spaces).

3. An untyped object does not instantiate a class. It may have property slots and function slots like,

for instance,

var person1 = {

lastName: "Smith",

firstName: "Tom",

getInitials: function () {

return this.firstName.charAt(0) + this.lastName.charAt(0);

}

};

4. A namespace may be defined in the form of an untyped object referenced by a global object

variable, the name of which represents a namespace prefix. For instance, the following object

variable provides the main namespace of an application based on the Model-View-Controller

(MVC) architecture paradigm where we have three subnamespaces corresponding to the three parts

of an MVC application:

var myApp = { model:{}, view:{}, ctrl:{} };

5. A typed object o instantiates a class that is defined either by a JavaScript constructor function C

or by a factory object F. See ???

剩余148页未读，继续阅读

weixin_38743481

粉丝: 695
资源: 4万+

纯JavaScript打造前端应用深度教程：零框架实践

利用Java开发Web应用

开发Web应用程序

简单的web应用开发

GERD的主要症状是什么？

你尝试去学习他们的证明BSD路线，然后根据他们的研究思路去找到BSD猜想的一个证明，并把最后的证明结果发给我

基于WEB应用程序的开发

基于Springboot的甘肃非物质文化网站的+源代码+演示视频.zip

技术资料分享cadence技术资料（003）.zip

Av1an-1.7.0-py3-none-any.whl.zip

gergel_isopropyl_bromide.pdf

Av1an-1.12.2-py3-none-any.whl.zip

电力及公用事业行业周报：2023年上半年储能装机规模快速增长，辅助服务市场规模扩容.pdf

大数据处理框架：Spark：Scala编程基础.docx

2024科目四速记口诀.pdf

大数据处理框架：Spark：Spark基础架构与原理.docx

小北使用Python和pyecharts对我校通信学院2024大数据专业就业情况进行中国地图可视化

数据集成工具：Talend：Talend数据集成中的安全与合规性.docx

Vue第六天.xmind

消息队列：Kafka：Kafka安装与配置.docx

基于Springboot的校园周边美食探索及分享平台+源代码+PPT+演示视频.zip

最新资源