了解 JavaScript (2)- 需要了解的一些概念

Ajax 是什么

Ajax 是一种创建交互式 Web 应用程序的方式。

AjaxAsynchronous JavaScript and XML 缩写(异步的 JavaScript 和 XML),这只是 JavaScript 的一小部分。

Ajax 一般指以下技术的组合:

  • XHTML 或 HTML
  • CSS(Cascading Style Sheet,层叠样式表)
  • 使用 JavaScript 访问 DOM(Document Object Model,文档对象模型)
  • XML 或 JSON,这是服务器和客户端之间传输的格式
  • XMLHttpRequest,用来从服务器获取数据。

Ajax 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。(传统的网页如果需要更新内容,必须重载整个页面)

Ajax 成功案例,新浪微博、Google 地图等。


组合式(snap-together)语言

JavaScript 是一种面向对象(object-oriented)的语言。有些挑剔的程序员认为是基于对象(object-based)的语言。

  • 对象(object),JavaScript 处理的对象都在 Web 浏览器中,如窗口、表单、按钮、复选框等等。
  • 属性(property),JavaScript 中,文档具有标题,表单可以有复选框,改变了对象的属性,就修改了这个对象。
  • 方法(method),如按钮的 click(), 窗口的 open(),文本的 selected(),圆括号表示它们是方法,而不是属性。

将对象、方法和属性组合,由点号分隔,点号语法(dot syntax)。例如:document.write()、forms.elements.radio.click()等


DOM 简介

DOM(Document Object Model) 以树结构表达 HTML 文档。

Firefox 中我们下 DOM Inspector  附加组件,就可以看到网页的树形结构图,如下图:

页面的顶级包含在 <html> 标签中,在其中能找到 <body> 和 <head> 标签,而其他标签又会包含在这两个标签之中。

JavaScript 将文档树中的每一项都当做对象,可以使用 JavaScript 来操纵这些对象。用来表示文档中对象的标准模型就称为 DOM。

数中的每个对象也称为数的节点(node)。可以使用 JavaScript 修改树的任何方面,包括添加、访问、修改和删除树上的节点。

如果节点包含 HTML 标签,那么它称为元素节点(element node),否则就是文本节点(text node),当然元素节点可以包含文本节点。


处理事件

事件(event)是用户在访问页面时执行的操作。提交表单和在图像上移动鼠标就是两种事件。

JavaScript 使用事件处理程序(event handler)的命令来处理事件。用户在页面上的操作会触发脚本中的事件处理程序。

下面的表中为最常用的 12 种 JavaScript 事件处理程序。

事件 它处理了什么
onabort 用户终止了页面的加载
onblur 用户离开了对象
onchange 用户修改了对象
onclick 用户单击了对象
onerror 脚本遇到一个错误
onfocus 用户激活了对象
onload 对象完成加载
onmouseover 鼠标移动到对象上
onmouseout 鼠标离开了对象
onselect 用户选择了对象的内容
onsubmit 用户提交了表单
onunload 用户离开了页面

值和变量

JavaScript 中区分大小写。

类型 描述 示例
数字 任何数字值 3.141592654
字符串 引号中的字符 ‘hello world’
布尔值(Boolean) true 或者 false true
空值(null) 空且无含义  
对象 与对象相关联的任何值  
函数 函数返回的值  

操作符

操作符(operator)是用来操作变量的符号。

操作符 作用
x + y(数字) 将 x 和 y 相加
x + y(字符串) 将 x 和 y 拼接在一起
x - y 从 x 中减去 y
x * y 将 x 和 y 相乘
x / y 将 x 除以 y
x % y x 和 y 的模
x++,++x 给 x 加 1
x--,--x 给 x 减 1
-x x 的相反数

赋值和比较

在将一个值放进变量中时,就是将这个值赋给变量,使用等号进行赋值,例如:

hisName = ‘Tom‘;

赋值 操作符

赋值 作用
x = y 将 x 设置成 y 的值
x += y 相当于 x = x + y
x –= y 相当于 x = x - y
x *= y 相当于 x = x * y
x /= y 相当于 x = x / y
x %= y 相当于 x = x % y

比较

常常需要对两个变量的值进行比较。比较操作符完整列表如下:

比较 作用
x == y 如果 x 和 y 相等,返回 true
x === y 如果 x 和 y 完全相等,返回 true
x != y 如果 x 和 y 不等,返回 true
x !== y 如果 x 和 y 完全不相同,返回 true
x > y 如果 x 大于 y,返回 true
x >= y 如果 x 大于等于 y, 返回 true
x < y 如果 x 小于 y,返回 true
x <= y 如果 x 小于等于 y, 返回 true
x && y 如果 x 和 y 都是 true,那么返回 true
x || y 如果 x 或 y 有一个是 true,那么返回 true
!x 如果 x 是 false,那么返回 true

编写对 JavaScript 友好的 HTML

因为将使用 JavaScript 操纵文档中的对象,所以希望以适当的方式编写 HTML,使脚本能够轻松地处理 HTML。

我们要编写现代符合标准的 HTML,并使用 CSS 将文档的结构与它的表现分隔开。JavaScript 也应该放置在外部文档中。按照这种方式,对站点的修改就会很容易,我们的站点将包含下面三种文件:

  • HTML:包含页面的内容和结构。
  • CSS:控制页面的外观和表现。
  • JavaScript:控制页面的行为。

1、<div> 和 <span>

在 HTML 中有两个非常重要的范围标签:<div><span>

它们用来将内容划分为语义性(semantic)的块。

<div> 是一个块级(block-level)元素,它与前后元素之间有物理换行。

<span> 是行内的(inline),所以可以将它应用于句子中的一个短语。

2、class 和 id

在 HTML 中,将内容分隔为这些有意义的块。仍然需要标识出那些需要修改其表现或行为的内容片断。为此主要使用两个属性:class 和 id。

CSS 和 JavaScript 都可以利用这些属性定义页面外观和行为。

类(class)标识出可能会多次使用的元素。例如,电影院标题的类,加粗深蓝色:

.movieTitle {
  font: bold 14px;
  color: #000099;
}

页面上每个电影标题都包围在一个 <span> 标签之间,如:

<p>We‘re currently showing <span class="movieTitle">The Aviator</span> and <span class="movieTitle">The Outlaw</span>.</p>

id 标识出的元素对于文档是唯一的。如果电影院在页面只出现一次,可以使用 id 创建一个样式表,如下:

#theaterName {
  font: bold 28px;
  color: #FF0000;
}

在页面中显示电影院名称时,如下使用:

<h1 id="theaterName">The Raven Theater Presents:</h1>
时间: 2024-10-12 23:38:23

了解 JavaScript (2)- 需要了解的一些概念的相关文章

JavaScript高级程序设计学习笔记--基本概念

1.语句 ECMAScript中的语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾,如下例所示: var sum=a+b //即使没有分号也是有效的语句--推荐 var diff=a-b; //有效的语句--推荐 虽然语句结尾的分号不是必需的,但我们建议任何时候都不要省略它.两个原因:1.加上分号可以避免很多错误 2.加上分号也会在某些情况下增进代码的性能,因为这样解析器就不必再花时间 推测应该在哪里插入分号了. 2.变量 var message="hi"; 像这样初始化变量

【javascript基础】1、基本概念

原文:[javascript基础]1.基本概念 前言 最近迷茫了一段时间,不知道应该从何处开始学习前端知识,好像这种状态已经持续了一年了,天天也在看前端的东西,但是记住的多少或者说在脑中一团糟,没有什么清晰的概念.最近加入了jQuery源码交流群( 239147101),虽然有时候在群里不说话,或者在里面扯扯淡,在里面学到了不少知识,群主Aaron是个好人,叶小钗是个牛人,告诉我要坚持写博客,谢谢群里的哥们们.感觉刚开始写无从下手,希望以后越来越好,大家尽量给我提意见哈. PS:23914710

javascript高级编程笔记02(基本概念)

ParseInt()函数: 由于Number函数在转换字符串时比较复杂而且不合理,我们常常转换字符串都用parseInt函数, Parseint函数规则: 忽略字符串前面的空格,直到找到第一个非空格字符串 如果第一个字符串不是数字字符或是负号,就返回NaN,所以””返回NaN 如果第一个字符是数字字符,它会继续解析第二个字符,直到解析完所有后续字符或者遇到了非数字字符,例如,”123blue”转换为123,”22.5”会转换为22 如果字符串中的第一个字符是数字字符,parseInt()也能够识

[ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式

[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一.Intro to PopupTemplate(关于popup模板) popups(弹出框)提供了一种简便的方式去查看layers(图层)或者graphics(图形)的属性信息.它也可以展示鼠标在view(视图)中的点击位置的坐标等其他相关信息.在ArcMap中,查看要素图层(shapefile)的属

javascript高级编程笔记01(基本概念)

1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选,通过src属性指定代码的字符集,大多浏览器会忽略这个值,所以很少人使用 language:已放弃 src:可选,外部脚本的地址 type:可选,现在不推荐用“text/javascript”,考虑到约定俗成和最大限度的浏览器兼容,目前type属性的值还是text/javascript,不过,这个属性并不是必需

理解javascript的caller,callee,call,apply概念

在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments Arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[n]参数function :选项.当前正在执行的 Function 对象的名字. n :选项.要传递给 Function 对象的从0开始的参数值索引.说明 Arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象.Arguments是一个类似数组但不是数组的对象,说它类似 数组

闭包——JavaScript 中功能最强大的抽象概念之一

下面我们将看到的是 JavaScript 中必须提到的功能最强大的抽象概念之一:闭包.但它可能也会带来一些潜在的困惑.那它究竟是做什么的呢? function makeAdder(a) { return function(b) { return a + b; } } var x = makeAdder(5); var y = makeAdder(20); x(6); // ? y(7); // ? makeAdder 这个名字本身应该能说明函数是用来做什么的:它创建了一个新的 adder 函数,

JavaScript中原型对象的基本概念

在之前我们学习对象的时候,讲到了创建对象的方式,一个是通过构造函数创建一个新的对象,一个是对象字面量的方式创建对象. 讲到对象就必须要认识原型对象的概念了. 1 原型对象的概念 构造函数有一个默认的属性prototype属性,这个属性指向了一个对象,这个对象就是这个构造函数的原型对象了. 同时这个原型对象种有一个constructor属性,这个属性指向的是构造函数本身. 2 原型对象中的功能 原型对象中的属性和方法,可以被实例对象所共享(不同实例对象调用的原型函数中的属性和方法为同一个). 3

JavaScript学习笔记四:基本概念(2)

1.对非数值应用一元加/减操作符时,该操作符会像Number()转型函数一样对这个值进行转换.例:var s = +"01"  //值变成数值1. 2.ECMAScript中的所有数值都以IEEE-754 64位格式存储,但操作符并不直接操作64位值,因此整个过程就像只存在32位的整数一样. 3.对于有符号的整数,32位中的前31位用于表示整数的值,第32位为符号位:0表示正数,1表示负数.其中,正数以纯二进制格式存储,负数以二进制格式的补码存储. 4.按位非(~):本质是操作数的负值

JavaScript学习笔记三:基本概念(1)

1. JS中的一切(变量.函数名.操作符等)都区分大小写.--true是boolean值,而True只是标识符. 2. JS语句以分号结尾,但不是必需的,原因: a. 结尾没有分号有时会导致压缩错误. b. 加上分号在某些情况下会为解析器提供方便,增进代码的性能. 3. 不同的ECMAScript版本对关键字和保留字的定义不同,但最好在JS代码中永远都不用任何关键字和保留字,以便与将来的ECMAScript版本兼容. 4. ECMAScript的变量是松散类型的,就是一个变量没有特定的类型限制,