引言

从毕业到年已经整整7年，期间一直从事.net开发做c/s从 c# 转到 wpf 而后又开始做b/s 用silverlight，从最开始的arcgis engine 到后来的silverlight api ，去年开始一直在涉及开源的GIS方面应用开发openlayers geoserver dotspatial等。c/s方面还可以用.net的一些开源库来搞，bs原本想凑合用sl混混，但是不会js实在是让我工作起来很难受。这次正好有个项目用涉及到的系统都是提供js接口，本屌丝连html页面标签都认不全，无比蛋疼之下只好下定决心。

javaScript 介绍

通用跨平台的脚本语言。

js主要由以下三部分组成

ECMAScript 核心

DOM 文档对象模型

BOM 浏览器对象模型

ECMAScript:

1997年 制定的 ECMA-262标准 中定义了ECMAScript

最新一版的标准时2009年的ECMA-262第5版 简称ECMAScript 5

从第一版到第五版 如果用C#的角度来解释就可以理解为C#1.0-5.0这种概念。

ECMAScript与web浏览器没有关系，Web浏览器只是ECMAScript实现可能的宿主环境之一，其他宿主比如Adobe Flash。

ECMAScript 主要规定了如下内容：语法、类型、语句、关键字、保留字、操作符、对象。

javaScript实现了ECMAScript,Adobe ActionScript也同样实现了ECMAScript。

到了2008年，五大主流web浏览器(IE,Firefox,Safari,Chrome,Opera)全部做到了与ECMA-262兼容。对于ecmascript5的兼容如下：

Opera 11.60+、
Internet Explorer 9+、Firefox 4+、Safari 5.1+、Chrome 13

文档对象模型(DOM)

文档对象模型是针对XML的，但经过扩展用于HTML的应用程序API。DOM把整个页面映射为一个多层节点结构。HTML或者XML页面中的每个组成部分都是这种类型的节点，这些节点又包含着不同类型的数据。

DOM并不是针对js的，很多语言都实现了DOM.

DOM Level1 于1998年10月成为W3C的推荐标准。

DOM1由两个模块组成：

DOM core

DOM HTML

其中DOM核心规定了如何映射基于XML的文档结构。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

DOM2在DOM1的基础上增加了鼠标和用户界面事件、范围、遍历等。DOM3又进一步扩展了DOM。

浏览器对象模型(BOM)

BOM可以控制浏览器显示的页面以为的部分。但是BOM没有相关的标准这也导致了各种问题。HTML5致力于把很多BOM功能写入正式规范。人们习惯把所有针对浏览器的js扩展算作BOM的一部分，如：弹出新的浏览器窗口，移动、缩放关闭浏览器窗口，cookies支持，提供浏览器信息的navigator对象，提供浏览器加载页面信息的location对象，提供用户显示器分辨率的screen对象xmlhttprequest和activexobject这也的自定义对象。

由于没有BOM的标准，因此每个浏览器都有自己的实现。

JavaScript的版本

当前最新版本应该是2010年7月的1.82 对应的IE版本是9

在HTML中使用JavaScript

<script>元素

向HTML页面中插入js的主要方法就是使用<script>元素，相关属性:

async:可选。立即下载脚本，但不反感页面中的其他操作。只对外部脚本文件有效。

charset:可选。标识通过src属性制定的代码的字符集。

src：可选。表示包含要执行代码的外部文件。

type:可选默认值为text/javascript。为了兼容性一般使用text/javascript。

示例：

<script type=“text/javascript”>

function sayhi(){alert(“hi”);}

</script>

包含在<script>元素内部的js代码将被从上至下依次解释。然后将该定义保存在自己的环境当中。在解释器对<script>元素内部的所有代码解释完毕前，页面中的其余内容都不会被浏览器加载或显示。

在使用<script>嵌入js代码时要注意不能出现”</script>”字符串如下：

<script type=”text/javascript”>

function sayhi()

{

alert(“</script>”);这样就会报错

alert(“<\/scriot>”);这样才正确

}</script>

如果要通过<script>元素来包含外部js文件则需要指定src属性。src属性接收一个url。如果指定了src属性则<srcript>标签中不在解析包含的代码。只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后属性对他们一次进行解析。

标签的位置

按照惯例，所有的<script>元素都应该放在页面的<head>元素中。但是这种做法导致要全部的js代码都下载解析完后，才会开始呈现页面内容(浏览器遇到<body>标签时才开始呈现内容)。这样对于很多js代码的页面来说，用户体验很不好，为了避免这个问题现代web英语程序一版会把全部jsavascript引用放在<body>元素中页面的内容后面。如：

<!DOCTYPE html>

<html>

<head>

<title>123<title>

</head>

<body>

<!--这里放内容—》

<script type=”text/javascript”src=”example1.js”></script>

</body>

</html>

</html>

在html4.01开始为<script>定义了defer属性

<srcipt type=”text/javascript” defer=”defer”src=”example1.js”></script>

这样就可以把js代码放到head中了

生命不息学习不止，前端js学习笔记（一）的更多相关文章

  1. [前端JS学习笔记]JavaScript function

    一.函数的声明 1.1 function 命令 function methodName(params) { // code } 如下声明: function test_function(params) ...

  2. [前端JS学习笔记]JavaScript CallBack

    一.概念介绍 CallBack : "回调" . 在spring优秀框架回调无处不在, 回调的运用场景很多, 如 swt事件监听.netty等.它的主要作用是提高程序执行效率, 一 ...

  3. [前端JS学习笔记]JavaScript prototype 对象

    一.概念介绍 prototype 对象 : 原型对象.在JavaScript中, 每一个对象都继承了另一个对象,后者称为"原型对象". 只有 null 除外,它没有自己的原型对象. ...

  4. [前端JS学习笔记]JavaScript 数组

    一.JavaScript数组的奇葩 大多数语言会要求数组的元素是同个类型, 但是JavaScript允许数组元素为多种类型. var arr = ["羽毛球", 666, {&qu ...

  5. 学习web前端技术的笔记，仅供自己查阅备忘，图片上传预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  6. 【学习】原生js学习笔记1：添加class和使input为不可用

    <input type="checkbox" id="new_check" onChange="noUse()" checked> ...

  7. 学习web前端技术的笔记，仅供自己查阅备忘，移动对font-size的控制（并非原创）

    假设根字体font-size的值是40px, 640/40=16,16就是px换算rem的值 function initHtmlFontSize(){ //获取可可视屏幕的宽度 var _width= ...

  8. 前端开发学习笔记 - 1. Node.JS安装笔记

    Node.JS安装笔记 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an ...

  9. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

随机推荐

  1. 求两个数a、b的最大公约数

    //求两个数a.b的最大公约数 function gcd(a,b){ return b===0?a:gcd(b,a%b) }

  2. Postman学习（压力测试）

    Postman下载安装后 下面是在网上随便抓了一个请求地址来做演示,把请求地址填入地址栏,此请求为GET请求.点击Send发送请求,请求结果将会在下方显示出来.每次的请求历史数据,会被记录下来,但是经 ...

  3. 文献综述二十：基于UML技术的客户关系管理系统实现

    一.基本信息 标题:基于UML技术的客户关系管理系统实现 时间:2015 出版源:电子设计工程 文件分类:uml技术的研究 二.研究背景 设计出可应用与银行和储户之间沟通的客户关系管理系统,从而实现对 ...

  4. es xxx_by_query

    xxx_by_query包括_delete_by_query和_update_by_query,下面分开讲 _delete_by_query 相当于sql中的delete from a where . ...

  5. Pitfalls of using opencv GpuMat data in CUDA kernel code

    Please note that cv::cuda::GpuMat and cv::Mat using different memory allocation method. cv::cuda::Gp ...

  6. FastDFS安装、配置、部署（一）－安装和部署 (转)

    FastDFS是一个开源的,高性能的的分布式文件系统,他主要的功能包括:文件存储,同步和访问,设计基于高可用和负载均衡,FastDFS非常适用于基于文件服务的站点,例如图片分享和视频分享网站 Fast ...

  7. Oracle PL/SQL编程之函数

    注: 以下测试案例所用的表均来自与scott方案,使用前,请确保该用户解锁. 代码的执行环境是在sqlplus中 1.简介 函数用于返回特定的数据,当建立函数时,函数头部必须包含return子句,而在 ...

  8. Centos 7网卡设置

    #yum install net-tools.x86_64 #cd /etc/sysconfig/network-scripts/ #mv ifcfg-eno16780032 ifcfg-eth0 手 ...

  9. GITHUB一个新的项目发布

    经过一段时间的积累,写了一些代码,发现好多功能有好几个系统都在用,但是公司的开发过程中,并没有一个对通用功能提取整合普遍化的一个流程,所以就自己将在项目开发过程中遇到的一些功能提取出来,并尽量做到普适 ...

  10. java.security.MessageDigest的使用之生成安全令牌!

    时候,我们需要产生一个数据,这个数据保存了用户的信息,但加密后仍然有可能被人使用,即便他人不确切的了解详细信息... 好比,我们在上网的时候,很多网页都会有一个信息,是否保存登录信息,以便下次可以直接 ...