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 才能操作这个文件。例如,把文件“拖”到浏览器中,或者通过
- 不同的浏览器标签页之间基本彼此不相关。有时候,也会有一些关系。例如,一个标签页通过 JavaScript 打开另外一个新的标签页。但即使在这种情况下,如果两个标签页打开的不是同一个网站(域名、协议或者端口任一不相同的网站),他们都不能够相互通信。
- 这就是“同源策略”。为了解决“同源策略”问题,两个标签页必须都包含一些处理这个问题的特殊的 JavaScript 代码,并均允许数据交换,这样才能够实现两个同源标签页的数据交换。本教程会讲到这部分相关的知识。
- 这个限制也是为了用户的信息安全。例如,用户打开的
http://anysite.com
网页的 JavaScript 肯定不能访问http://gmail.com
(另外一个标签页打开的网页)也不能从那里窃取信息。
- JavaScript 通过互联网可以轻松地和当前网页域名的服务器进行通讯。但是从其他网站 / 域名的服务器中获取数据的能力是受限的。尽管这可以实现,但是需要来自远程服务器的明确协议(在 HTTP 头中)。这也是为了用户的数据安全。
- 浏览器环境外的 JavaScript 一般没有这些限制。例如服务端的 JavaScript 就没有这些限制。现代浏览器还允许安装可能会要求扩展权限的插件或扩展。
第一个 JavaScript 例子
本教程包含了大量的 JavaScript 实例, 您可以自己手动跟着敲来执行。
请一定要自己动手敲!!!
下面是一个例子
<!DOCTYPE html>
<html lang="En">
<head><meta charset="UTF-8"><title>孙叫兽的博客</title></head>
<body>
<span>这个是我第一个javascript案例</span>
<p id="demo">点击显示日期会发生改变</p>
<button type="button" onclick="displayDate();">显示日期</button>
<script>function displayDate(){document.getElementById('demo').innerHTMl=Date();}</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 lang="En">
<head><meta charset="UTF-8"><title>孙叫兽的博客</title></head>
<body><p>JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>document.write("<h1>这是一个标题</h1>");document.write("<p>这是一个段落。</p>");
</script>
<p>您只能在 HTML 输出流中使用 <strong>document.write</strong>。如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
</body>
</html>
演示效果:
JavaScript:对事件的反应
<!DOCTYPE html>
<html lang="En">
<head><meta charset="UTF-8"><title>孙叫兽的博客</title></head>
<body><button type="button" onclick="alert('欢迎点我');">点我点我</button>
</body>
</html>
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。
JavaScript:改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
<!DOCTYPE html>
<html lang="En">
<head><meta charset="UTF-8"><title>孙叫兽的博客</title></head>
<body><p id="demo">孙叫兽欢迎你</p>
<script>var x;x=document.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 lang="En">
<head><meta charset="UTF-8"><title>孙叫兽的博客</title></head>
<body>
<img id="myimage" onclick="changeimage();" src="center.png" width="100px;" height="100px;">
<script>function changeimage(){element=document.getElementById("myimage");if(element.src.match("center")){element.src="center.png";}else {element.src="center.png";}}
</script></body>
</html>
以上实例中代码 element.src.match(“center”) 的作用意思是:检索 <img id="myimage" onclick="changeImage()" src="center.png" width="100" height="180">
里面 src 属性的值有没有包含 center这个字符串,如果存在字符串center,图片 src 更新为center.ong,若匹配不到center 字符串,src 则更新为 center.png
JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。
JavaScript:改变 HTML 样式
改变 HTML 元素的样式,属于改变 HTML 属性的变种。
x=document.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 页面的 和 部分中。
javaScript入门基础说明相关推荐
- JavaScript入门基础知识
JavaScript入门基础学习 1.三种引用JavaScript的方式 1.1行内式 <input type = "button" value="点我试试&quo ...
- JavaScript 入门基础 (八)
目录 1.JavaScript概述 2.HTML世界 3.JavaScript基本语法 4.JavaScript语句 5.JavaScript内置对象 6.Document对象 7.window和fr ...
- JavaScript入门基础学习总结
一 JavaScript 简介 1 JavaScript基本介绍 1 JavaScript 简称JS,是一种动态的弱类型脚本解释型语言,和HTML,CSS并成为三大WEB核心技术,得到了几乎所有主流浏 ...
- javascript入门基础篇重点 第二节2.
<!doctype html> <html lang="en"> <head> <!--声明当前页面的编码集:charset=gbk,g ...
- 捕获鼠标事件-JavaScript入门基础(005)
为页面增加与用户的交互是JavaScript的基本功能之一.那么我们如何能知道用户什么时候单击了鼠标,什么时候按下了键盘呢? 以上特定动作发生之后,会触发事件.通过事件处理器,我们就可以处理相应的事件 ...
- 超详细JavaScript入门基础+练手小案例
目录 一.什么是JavaScript 二.使用方法 1.元素绑定事件 2.文档内嵌 3.外部链接 三.JavaScript输出语句 四.语法规则 4.1 输入语句 4.2 变量的定义 4.3 命名规范 ...
- Javascript——入门基础
目录 变量类型 显示方式: 获取元素 if条件语句 变量类型 名称 类型 number 数字类型 string 字符串类型 boolean 布尔类型 undefined 未声明/定义类型 null 空 ...
- JavaScript入门基础2
1.运算符的优先级 就和数学中一样,在JS中运算符也有优先級, 比如:先乘除 后加减 在JS中有一个运算符优先级的表, 在表中越常上优先级越高,优先级越高越优先计算, 如果优先级一样,则从左往右计算. ...
- JavaScript 入门(上)
目录 一.JavaScript简介 二.JavaScript的特点 1.动态改变页面内容 2.动态改变网页的外观 3.验证表单数据 4.响应事件 三.内容 1.JavaScript简介 一.JavaS ...
最新文章
- SqlServer当前月份时间
- 四. python的time和datetime 模块
- POJ 1047 Round and Round We Go
- Android向本地写入一个XML文件和解析XML文件
- 多图 | 操作系统中,进程与线程怎么设计的?
- Android官方开发文档Training系列课程中文版:管理音频播放之音频输出硬件的处理
- HTML5 API详解(8):worker多线程教你如何避免页面卡死
- 官方版.NET SDK连线更新(2011/01/19)
- HMM一文搞懂HMM(隐马尔可夫模型)
- java 快速回收_快速了解JAVA垃圾回收机制
- VC++编程实现镜像劫持
- 算法设计与分析——背包问题(Java)
- 联想全系列 Lenovo ThinkPad ThinkBook Thinkcenter ThinkStation 原厂恢复系统
- Windows系统重装系统和激活
- 如何让网页界面变暗色
- 接入高德开放平台实现地址转换为经纬度坐标
- MFC中简单图形的平移与简单旋转
- quartus ii引脚分配再学习下
- 虚幻引擎5 C++编程学习
- 公式宝典之颜色混合模式公式
热门文章
- 【渝粤教育】广东开放大学 云计算技术与应用 形成性考核
- 源码包编译安装python_Python3.7源码包编译安装-Go语言中文社区
- 恐鬼症不显示服务器区域,恐鬼症 steam版【简体中文】【4.34GB】
- 2016年计算机网考,2016年电大:计算机网考(全)练习题.doc
- 怎么安装红旗Linux5,如何用硬盘安装红旗LINUX5_0.doc
- gilab无法解析php文件,gitlab重新设置域名后就无法访问了。
- 初学JavaWeb,前端css要不要了解一下啊?一文学会JavaWeb中css的简单应用
- 打开服务器文件提示内存不够,打开服务器文件提示内存不够
- python开源流程图软件_Dia
- python实例讲解wxpythonhyh123_Python实例讲解 -- wxpython 基本的控件 (按钮)