zoukankan      html  css  js  c++  java
  • 生命不息学习不止,前端js学习笔记(一)

    引言

    从毕业到年已经整整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中了

  • 相关阅读:
    专有宿主机如何实现“资源池”管理——集群管理能力升级
    像Google一样构建机器学习系统3
    利用阿里云容器服务打通TensorFlow持续训练链路
    阿里云积极落实等级保护制度,政务云全国首个通过等保2.0合规评测
    Facebook F8|闲鱼高级技术专家参会分享
    UI2CODE智能生成代码——组件识别篇
    基于TableStore的海量气象格点数据解决方案实战
    药品监管系统架构揭秘:海量溯源数据存储与查询
    对比MySQL,一文看透HBase的能力及使用场景
    bzoj1003 [ZJOI2006]物流运输
  • 原文地址:https://www.cnblogs.com/aoldman/p/3514868.html
Copyright © 2011-2022 走看看