javaScript入门1--组成,基本使用
javaScript:脚本语言,最初是为了实现在客户端进行的表单验证以减少服务器的数据交互次数,如今可用在页面交互,计算,拥有了闭包,匿名(拉姆达)函数,甚至元编程等特性。
javaScript实现的组成:
1.核心(ECMAScript)--TC39负责完成的新脚本的语言标准。
2.文档对象模型(DOM)--针对XML但经过扩展用于HTML的API,DOM把整个页面为一个多层节点结构。
3.浏览器对象模型(BOM)--控制浏览器显示页面以外的部分。BOM无标准遵循。
javaScript的基本使用:
向html页面插入javaScript的方法即使用<script>标签,<script>标签的6大属型如下
async | 可选,表示应该立即下载该脚本,但不妨碍页面的其他操作。只对外部脚本有效 |
charset | 可选,通过src指定字符集,由于大多数用户代理会忽略这个值,所以基本不用这个属性 |
defer | 可选,表示脚本需要等到文档完全被解析和显示之后再执行,只对外部脚本有效 |
language | 已废弃 |
src | 可选,指定外部文件的路径 |
type | 可选,类似language,表示编写代码使用的脚本语言的内容类型(MIME),默认为text/javascript |
一个简单的示例
- <script type="text/javascript">
- function re(){
- alert("hello javascript");
- }
- </script>
script标签内的js代码会被自上向下的解释,如上,解释器会解释一个函数的定义,然后将该定义保存在自己的环境中,在解释器对<script>标签内的所有代码求值完毕以前,页面中的其余部分不会被浏览器加载或者显示。
*script标签在结束前不能出现</sciprt>,但是可以使用转义字符<\/script>来实现。
外部js,对使用src属性的script标签,不允许在其中嵌入js代码,如果这样,则嵌入的代码会被忽略,只运行src加载的外部js。
对于外部js,只要没有async,defer属性,则js在按照页面中出现的先后顺序顺序解析,就是第一个js解析完成后,再解析第二个。
标签的位置
传统做法:放在html的head元素中,这样的做法意味着浏览器必须等到所有的js代码下载,解析,执行后才能呈现页面的内容(浏览器遇到body标签才开始呈现内容),这将会导致页面在js为准备完毕前处于空白状态,没有良好的用户体验。
为了避免上述问题,现在一般将script放在</body>之前,页面内容之后。
再回到上面讲的defer属性,当defer的值为defer时,即为一个延迟脚本,顾名思义,该脚本会立即被下载,但延迟到浏览器遇到</html>时才被解析和执行,当存在多个延迟脚本时,文档中的延迟脚本按照出现的先后顺序解析与执行,但这些脚本会先与DOMContentLoaded事件执行。
现在来说异步脚本,async="async",异步,即在下载该脚本的同时,不用影响其他操作,如下载其他脚本,但是对于多个异步脚本,并非像defet一样按照顺序执行,另外对于异步脚本,最好不要加载其间修改DOM,异步一定会在页面的load事件之前执行,但可能会在DOMContentLoaded事件触发之前或者之后执行。
混杂模式:也叫怪异模式,即在WEB发展的早期,各浏览器厂商比较封闭,使用自己的体系,毫无兼容性可言,此时的网站多为混杂模式,当标准推行之后,便出现了标准模式。
<noscript>标签,实现不支持javascript的浏览器的平稳退化,其出现位置是作为body的相邻兄弟元素,在<script>标签之前闭合。
javaScript入门1--组成,基本使用的更多相关文章
- JavaScript入门篇 编程练习
编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...
- JavaScript入门
本篇内容是学习慕课网相关课程后,总结出可能未来会忘记的内容 (一)JavaScript入门操作 1.js代码插入位置,以及执行顺序 <head> <script type=" ...
- 慕课网JavaScript入门篇课程笔记
1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...
- JavaScript入门基础
JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...
- JavaScript入门介绍(二)
JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...
- JavaScript入门介绍(一)
JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器 开发调试工具]按F121.代码后台输出调试:console.log("t ...
- 开心菜鸟系列----函数作用域(javascript入门篇)
1 <!DOCTYPE html> 2 <html> 3 <script src="./jquery-1.7.2.js"></ ...
- 开心菜鸟系列----变量的解读(javascript入门篇)
console.info( console.info(window['weiwu']) console.info(window. ...
- javascript入门视频第一天 小案例制作 零基础开始学习javascript
JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...
- ArcGIS API for JavaScript 入门教程[0] 目录
随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...
随机推荐
- <Chapter 2>2-2-2.开发Python应用(Developing a Python App)
对App Engine来讲最简单的Python应用是一个有两个文件的简单目录:一个称为app.yaml的配置文件,一个用于请求处理器的Python代码文件.包含app.yaml文件的这个目录就是这个应 ...
- PhoneGap搭建运行环境(3.2版本)
一. 1.准备环境nodejs(http://nodejs.org/download/) 2.ant(http://ant.apache.org/bindownload.cgi) 3.Android ...
- HTML5每日一练之input新增加的六种时间类型应用
今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...
- C++问题-无法打开包括文件:“GLES2/gl2.h”
资料来源:http://blog.csdn.net/weizehua/article/details/12623719http://tieba.baidu.com/p/2747715029 问题经过: ...
- 扩展KMP--求字符串S的所有后缀和字符串T的最长公共前缀
在解上面这个问题前我们要先解决一个类似的问题:求字符串s的所有后缀和s本身的最长公共前缀: 我们用next[]数组保存这些值: 现在我们假设要求next[ x ],并且next[ i ] 0<i ...
- 在JS和.NET中使用JSON (以及使用Linq to JSON定制JSON数据)
转载原地址: http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如 ...
- Codeforces Round #245 (Div. 1) B. Working out (简单DP)
题目链接:http://codeforces.com/problemset/problem/429/B 给你一个矩阵,一个人从(1, 1) ->(n, m),只能向下或者向右: 一个人从(n, ...
- lib 和 dll 的区别、生成以及使用详解
首先介绍一下静态库(静态链接库).动态库(动态链接库)的概念,首先两者都是代码共享的方式. 静态库:在链接步骤中,连接器将从库文件取得所需的代码,复制到生成的可执行文件中,这种库称为静态库,其特点是可 ...
- poj3687
Labeling Balls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9028 Accepted: 2444 De ...
- c# 递归算法
c# 递归算法 2009-03-13 09:44 6950人阅读 评论(8) 收藏 举报 算法c#funn2c 1)1.1.2.3.5.8.......用递归算法求第30位数的值? 首先我们可以发现从 ...