宁波网站建设优化服务公司,网站硬件费用,外贸网站推广机构,win10优化软件JavaScript 教程
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
JavaScript 非常容易学#xff0c;本教程将教你打开 JavaScript 的大门
浏览器中的 JavaScript 能做什么#xff1f;
现代的 JavaScript 是一种“安全”语言。
它不提供对内存…JavaScript 教程
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
JavaScript 非常容易学本教程将教你打开 JavaScript 的大门
浏览器中的 JavaScript 能做什么
现代的 JavaScript 是一种“安全”语言。
它不提供对内存或 CPU 的底层访问因为它最初是为浏览器创建的不需要这些功能。
JavaScript 的能力很大程度上依赖于它执行的环境。
例如Node.js 允许 JavaScript 读写任意文件、执行网络请求等。
浏览器中的 JavaScript 可以做与网页操作、用户交互和 Web 服务器相关的所有事情。
例如浏览器中的 JavaScript 可以完成下面这些事
在网页中插入新的 HTML修改现有的网页内容和网页的样式。响应用户的行为响应鼠标的点击或移动、键盘的敲击。向远程服务器发送网络请求下载或上传文件所谓 AJAX 和 COMET 技术。获取或修改 cookie向访问者提出问题、发送消息。记住客户端的数据本地存储。
浏览器中的 JavaScript 不能做什么
为了用户的信息安全在浏览器中的 JavaScript 的能力是有限的。
这样主要是为了阻止邪恶的网站获得或修改用户的私人数据。
这些限制的例子有
网页中的 JavaScript 不能读、写、复制及执行用户磁盘上的文件或程序。它没有直接访问操作系统的功能。 现代浏览器允许 JavaScript 做一些文件相关的操作但是这个操作是受到限制的。仅当用户使用某个特定的动作JavaScript 才能操作这个文件。例如把文件“拖”到浏览器中或者通过 input 标签选择文件。JavaScript 有很多方式和照相机 / 麦克风或者其他设备进行交互但是这些都需要提前获得用户的授权许可。所以启用了 JavaScript 的网页应该不会偷偷地启动网络摄像头观察你并把你的信息发送到美国国家安全局。不同的浏览器标签页之间基本彼此不相关。有时候也会有一些关系。例如一个标签页通过 JavaScript 打开另外一个新的标签页。但即使在这种情况下如果两个标签页打开的不是同一个网站域名、协议或者端口任一不相同的网站他们都不能够相互通信。 这就是“同源策略”。为了解决“同源策略”问题两个标签页必须都包含一些处理这个问题的特殊的 JavaScript 代码并均允许数据交换这样才能够实现两个同源标签页的数据交换。本教程会讲到这部分相关的知识。这个限制也是为了用户的信息安全。例如用户打开的 http://anysite.com 网页的 JavaScript 肯定不能访问 http://gmail.com另外一个标签页打开的网页也不能从那里窃取信息。JavaScript 通过互联网可以轻松地和当前网页域名的服务器进行通讯。但是从其他网站 / 域名的服务器中获取数据的能力是受限的。尽管这可以实现但是需要来自远程服务器的明确协议在 HTTP 头中。这也是为了用户的数据安全。 浏览器环境外的 JavaScript 一般没有这些限制。例如服务端的 JavaScript 就没有这些限制。现代浏览器还允许安装可能会要求扩展权限的插件或扩展。
第一个 JavaScript 例子
本教程包含了大量的 JavaScript 实例 您可以自己手动跟着敲来执行。
请一定要自己动手敲
下面是一个例子
!DOCTYPE html
html langEn
headmeta charsetUTF-8title孙叫兽的博客/title/head
body
span这个是我第一个javascript案例/span
p iddemo点击显示日期会发生改变/p
button typebutton onclickdisplayDate();显示日期/button
scriptfunction displayDate(){document.getElementById(demo).innerHTMlDate();}/script/body
/html显示效果 为什么学习 JavaScript?
JavaScript web 开发人员必须学习的 3 门语言中的一门
HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 网页的行为
本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。
谁适合阅读本教程
如果您想学习 JavaScript您可以学习本教程 了解 JavaScript 是如何与 HTML 和 CSS 一起工作的。如果在此之前您已经使用过 JavaScript您也可以阅读本教程 JavaScript 一直在升级所以我们需要时刻了解 JavaScript 的新技术。
比 JavaScript “更好”的语言
不同的人喜欢不同的功能JavaScript 的语法也不能够满足所有人的需求。
这是正常的因为每个人的项目和需求都不一样。
所以最近出现了很多不同的语言这些语言在浏览器中执行之前都会被编译转化成 JavaScript。
现代化的工具使得编译速度非常快速且透明实际上允许开发人员使用另一种语言编写代码并将其自动转换为 JavaScript。
这些编程语言的例子有
CoffeeScript 是 JavaScript 的语法糖它语法简短明确简洁。通常使用 Ruby 的人喜欢用。TypeScript 将注意力集中在增加严格的数据类型。这样就能简化开发也能用于开发复杂的系统。TypeScript 是微软开发的。Flow 也添加了数据类型但是以一种不同的方式。由 Facebook 开发。Dart 是一门独立的语言。它拥有自己的引擎用于在非浏览器环境中运行如手机应用它也能被编译成 JavaScript 。由 Google 开发。
还有很多其他的语言。当然即使我们在使用这些语言我们也需要知道 JavaScript。因为学习 JavaScript 可以让我们真正明白我们自己在做什么。 JavaScript 简介
JavaScript 是互联网上最流行的脚本语言这门语言可用于 HTML 和 web更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后可由所有的现代浏览器执行。
JavaScript 很容易学习。 您将学到什么
下面是您将在本教程中学到的主要内容。
!DOCTYPE html
html langEn
headmeta charsetUTF-8title孙叫兽的博客/title/head
bodypJavaScript 能够直接写入 HTML 输出流中
/p
scriptdocument.write(h1这是一个标题/h1);document.write(p这是一个段落。/p);
/script
p您只能在 HTML 输出流中使用 strongdocument.write/strong。如果您在文档已加载后使用它比如在函数中会覆盖整个文档。
/p
/body
/html
演示效果 JavaScript对事件的反应
!DOCTYPE html
html langEn
headmeta charsetUTF-8title孙叫兽的博客/title/head
bodybutton typebutton onclickalert(欢迎点我);点我点我/button
/body
/html alert() 函数在 JavaScript 中并不常用但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。 JavaScript改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
!DOCTYPE html
html langEn
headmeta charsetUTF-8title孙叫兽的博客/title/head
bodyp iddemo孙叫兽欢迎你/p
scriptvar x;xdocument.getElementById(Demo);//查找元素x.innerHTML你好javascript;//改变内容/script
/body
/html
您会经常看到 document.getElementById(”some id”)。这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)文档对象模型是用于访问 HTML 元素的正式 W3C 标准。
您将在本教程的多个章节中学到有关 HTML DOM 的知识。 JavaScript改变 HTML 图像
本例会动态地改变 HTML 的来源src
!DOCTYPE html
html langEn
headmeta charsetUTF-8title孙叫兽的博客/title/head
body
img idmyimage onclickchangeimage(); srccenter.png width100px; height100px;
scriptfunction changeimage(){elementdocument.getElementById(myimage);if(element.src.match(center)){element.srccenter.png;}else {element.srccenter.png;}}
/script/body
/html以上实例中代码 element.src.match(“center”) 的作用意思是检索 img idmyimage onclickchangeImage() srccenter.png width100 height180 里面 src 属性的值有没有包含 center这个字符串如果存在字符串center图片 src 更新为center.ong若匹配不到center 字符串src 则更新为 center.png
JavaScript 能够改变任意 HTML 元素的大多数属性而不仅仅是图片。 JavaScript改变 HTML 样式
改变 HTML 元素的样式属于改变 HTML 属性的变种。 xdocument.getElementById(demo) //找到元素x.style.color#ff0000; //改变样式
JavaScript验证输入
JavaScript 常用于验证用户的输入。 if isNaN(x) {alert(不是数字);}
以上实例只是普通的验证如果要在生产环境中使用需要严格判断如果输入的空格或者连续空格 isNaN 是判别不出来的。可以添加正则来判断 if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,)){alert(不是数字);}
ECMAScript 版本
JavaScript 已经由 ECMA欧洲电脑制造商协会通过 ECMAScript 实现语言的标准化。 JavaScript 用法
HTML 中的脚本必须位于 与 标签之间。
脚本可被放置在 HTML 页面的 和 部分中。
