（1）认识javascript
认识javascript
在本篇学习资料中，讲解javascript的基本概念、编写工具、在html中的使用：
JavaScript 是脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
Javascript作为一种可以给网页增加交互性的脚本语言。
JavaScript 的代码是一种文本字符格式，可以直接插入 HTML 页面的文档中，插入 HTML 页面后，并且可动态装载，由所有的现代浏览器执行。
Javascript是基于对象的，是一种基于对象和事件的驱动的编程语言，因而它本身提供了非常丰富的内部对象设计人员使用。（几乎所有的浏览器都支持javascript，如：Internet Explorer浏览器、 firefox火狐浏览器、Opera浏览器等等）
Html语言是静态的，一旦编写，内容是无法改变的。Javascript可以弥补这种不足，可以将内容动态地显示在网页中。
javascript的普遍作用是增强页面动态效果如：下拉菜单、图片轮播、信息滚动；JavaScript 能及时响应用户的操作（鼠标单击、按键盘），对提交表单做即时的检查，无需浪费时间交由 CGI 验证。
一、Javascript的特点：
1、是一种解释性脚本语言：
（非脚本语言编写的通常是需要经过编写---编译---链接---运行这四个步骤，而脚本语言javascript只需经过编写--运行着两个步骤）。
2、跨平台特性：
由于javascript程序的运行依赖于浏览器，只要操作系统中安装有支持javascript的浏览器即可，因此javascript和平台（操作系统）无关，可以在多种平台下运行（如Windows操作系统、Linux操作系统、Mac操作系统、Android操作系统、iOS操作系统等）。
3、基于对象和事件驱动：
Javascript把html页面中的每个元素都当作一个对象来处理，并且这些对象都具有层次关系，像一棵倒立的树，这种关系被称为“文档对象模型DOM”。在编写javascript代码是会接触到大量对象及对象的方法和属性。可以说学习javascript的过程，就是了解javascript对象及其方法和属性的过程。因为基于事件驱动，所以javascript可以捕捉到用户在浏览器中操作，可以将原来静态的html页面变成和用户交互的动态页面。
4、尽管javascript分为服务器端和客户端，但目前应用最多的还是客户端。
二、Javascript的编辑器 ：
通常使用javascript编辑器的有“记事本”、“dreamweaver”、“EditPlus”“activate-power-mode atom package”等等，除了以上的编辑器外，网上还有很多种编辑器供大家使用，工欲善其事，必先利其器。选择一款适合自己的javascript编辑器，可以让你的编程工程事半功倍。
其实关键的是要选个好的调试器，因为，javascript调试是一件麻烦的事情，你可以通过下载火狐，去它提供的插件里找个firebug下载，或者IE较高版本的开发者工具，可以方便你调试，我用的比较习惯的是火狐，它很多时候可以很清晰的告诉你的js代码哪里有问题，更好的是它还提供断点调试。
三、Javascript在HTML中的使用有三种：
javascript引入的基本语法格式：
<script language="javascript">
javascript代码写在这里
</script>
解释：<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。
1、在html网页头head重嵌入javascript代码 ：
最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Javascript在HTML中的使用 </title>
<!--网页头“head”中嵌入javascript代码-->
<script language="javascript">
document.write("你好，帅哥！欢迎来到javascript动态时空！")
</script>
</head>
<body>
<p>刚开始学习javascript，我高兴，我自豪，我膨胀！！</p>
</body>
</html>
效果图：
2、在html网页中嵌入javascript代码:
JavaScript代码在网页读取到该语句的时候就会执行.
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> 网页中嵌入javascript代码 </title>
</head>
<body>
<p>刚开始学习javascript，我高兴，我自豪，我膨胀！！</p>
<!--网页中嵌入javascript代码-->
<script language="javascript">
document.write("你好，帅哥！欢迎来到javascript动态世界！")
</script>
</html>
效果图：
3、在html网页的元素事件中嵌入javascript代码
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> 在html网页的元素事件中嵌入javascript代码 </title>
<!--如果不是通过javascript脚本生成html网页的内容，javascript脚本一般放在html的网页头部分的<head>与</head>标签之间。-->
<script language="javascript">
function validate()
{
var _txtNameObj = document.all.txtName; //获取文档框对象
var _txtNameValue = _txtNameObj.value; //文本框的值
if((_txtNameValue == null)||(_txtNameValue.length<1)) // 判断文本框的值是否为空
{
window.alert("文本框内容为空，请输入内容");
_txtNameObj.focus();//文本框获取焦点
return;
}
}
</script>
<script src="hello.js"></script> <!--可以在同一个html网页中多次嵌入javascript代码-->
</head>
<body>
<div>
<p>一般是设置某html元素的属性来引用一个脚本，例如：可以是一个简单的动作，该属性一般以on开头，如按下鼠标事件.</p>
<p>此案例是language=“javascript”的，效果展示是"文本框是否为空进行判断，如果为空则弹出提示信息"。</p>
</div> <form method=post action="#">
<input type="text" name="txtName">
<input type="button"value="确定" onclick="validate()">
</form> </body>
</html>
效果图：
4、在html中调用已经存在的javascript文件
提前做一个js文件作引用用：hi.js部分：在javascript文件中，不需要<script type="text/javascript"></script>标签,
直接编写JavaScript代码就可以了，如下：
//页面加载时执行的函数
function showEnter(){
alert("hello,javascript");
}
//页面加载事件触发时调用函数
window.onload=showEnter;
案例：
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="Keywords" content="在HTML中使用Javascript，javascript入门，html"/>
<meta name="Description" content="老罗江湖"/>
<title> 在html中调用 外部javascript文件 </title>
<script src="hi.js"></script> <!--提前做一个js文件作引用用-->
</head>
<body>
<p>这里引用了一个javascript文件</p>
</body>
</html>
效果图：
通过外部脚本，可以轻易实现多个页面完成同一功能的脚本文件，可以方便地通过更新一个脚本内容实现批量更新。
四、下面来一个简单的javascript实例：
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="Keywords" content="在HTML中使用Javascript，javascript入门，html">
<meta name="Description" content="老罗江湖">
<title> 第一个javascript程序 </title>
<script>
//页面加载时执行的函数
function showEnter(){
alert("亲爱的帅哥，欢迎来到么么哒网站");
}
//页面关闭时执行的函数
function showLeave(){
alert("bye bye 后会有期!");
}
//页面加载事件触发时调用函数
window.onload=showEnter;
//页面关闭载事件触发时调用函数
window.onbeforeunload=showLeave;
</script>
</head>
<body> <center>
<p>本案列实现的功能：当页面打开时，显示"亲爱的帅哥，欢迎来到么么哒网站"窗口。关闭页面时弹出窗口"bye bye 后会有期!!"</p>
</center>
</body> </html>
效果图：
javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。
对javascript有扎实的理解才能用它来撰写比较复杂的程序。
以上的内容部分来自“javascript从零开始学”和个人学习笔记，转载请注明出处！谢谢合作！
（1）认识javascript的更多相关文章
- JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
- 探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
- JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
- JavaScript进阶之路（一）初学者的开始
一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- LNMP源码编译安装
思路:根据Linux系统以及公司网站系统的信息,选择合适的安装包进行安装 一.查看系统信息 # uname -a # 查看内核/操作系统/CPU信息 # ...
- System.load 与 System.loadLibrary 的使用
相同点 它们都可以用来装载库文件,不论是JNI库文件还是非JNI库文件. 在任何本地方法被调用之前必须先用这个两个方法之一把相应的JNI库文件装载. System.load System.load 参 ...
- spring boot入门（一）自己动手搭建spring boot
spring boot官方文档 http://docs.spring.io/spring-boot/docs/1.2.3.RELEASE/reference/html/index.html 此篇文章 ...
- Springmvc+mybatis+restful+bootstrap框架整合
框架整合: Springmvc + Mybatis + Shiro(权限) + REST(服务) + WebService(服务) + JMS(消息) + Lucene(搜搜引擎) + Quartz( ...
- 关于Cookie安全性设置的那些事
一.标题:关于Cookie安全性设置的那些事 副标:httponly属性和secure属性解析 二.引言 经常有看到XSS跨站脚本攻击窃取cookie案例,修复方案是有httponly.今天写出来倒腾 ...
- javaWeb学习总结（4）- HTML 关于head中的<meta>标签
关于<meta> 标签 <meta>标签出现在网页的标题部分,这些信息并不会出现在浏览器页面的显示之中,只会显示在源代码中.也就是在...当中. 主要用途是设置网页语言的编码方 ...
- 【shell脚本实例】一个恶作剧—— kill掉占用CPU较高的matlab进程
我们实验室有台服务器,博士们在服务器上跑MATLAB,基本都是4核都是超过95%的CPU占用,想了个恶作剧的shell 定时kill掉MATLAB程序,是不是很邪恶啊,哈哈~~~ 不过我只是干过一次 ...
- 【2017-05-25】WebForm母版页
母版页:可以把界面的部分代码进行重用 添加新项-母版页 在母版页中界面代码不要写在 <asp:ContentPlaceHolder ID="head" runat=" ...
- 详解Linux进程(作业)的查看和杀死
目录: 引入进程 进程 线程 PS命令 TOP命令 其他查看进程命令 进程的优先级 作业控制机制 kill命令 一.引入进程 1.内存划分为:用户空间和内核空间 1.在用户空间里运行的进程,就是用户进 ...
- 地理位置 API
js获取地理位置的接口navigator.geolocation geolocation对象有三个方法 1.getCurrentPosition 2.watchPosition 3.clearWatc ...