认识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的更多相关文章

  1. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  2. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  3. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  4. 探究javascript对象和数组的异同，及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  5. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  7. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  8. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  9. JavaScript进阶之路（一）初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. 建立自己的Web service（SOAP篇）

    1.简介 这篇文章主要介绍采用SOAP来建立以及访问Web service接口. Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用 ...

  2. vue视频学习笔记01

    video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...

  3. Maven学习-优化和重构POM

    在一个复杂的项目中,项目的各个模块存在各种相互依赖关系.优化一个多模块项目的POM最好通过几步来做.总的来说,我们总是寻找一个POM中的重复或者多个兄弟POM中的重复.在多模块项目中依赖重复的模式主要 ...

  4. SpringMVC中的@Controller和@RequestMapping到底什么鬼？

    1.1 @Controller是什么 首先看个例子: @Controller @RequestMapping("/blog") public class BlogControlle ...

  5. 基于python的爬虫（一）

    抓取网页 python核心库 urllib2 实现对静态网页的抓取,不得不说,"人生苦短,我用python"这句话还是有道理的,要是用java来写,这估计得20行代码 (对不住了博 ...

  6. Gitlab使用Webhook实现Push代码自动部署

    1.Jenkins 安装完成以后,首先我们在Jenkins中需要安装一下,Gitlab Hook Plugin 插件: 2.插件安装完成我们创建任务,在任务重构建触发器下获取回调URL: 注意: 注意 ...

  7. SG函数学（hua）习（shui）记录

    ---恢复内容开始--- 听说有一个东西叫SG函数 觉得自己好像原来是懂一些粗浅的应用但现在感觉要再深♂入一点呢 让我们先来介绍一下SG函数吧 这是某类满足下列条件的玄学博弈问题解法 双人.回合制: ...

  8. linux下安装一款笔记软件(为知笔记)

    今天突然想在ubuntu上安装一款跨平台(windows.linux.android)的笔记软件来做日常记录.文章记录以及网页收藏.原先并没有使用过类似的软件,只是见身边的很多人在使用印象笔记来做记录 ...

  9. 自定义控件pickView

    package com.example.healthembed.util; import java.util.ArrayList; import java.util.List; import java ...

  10. 根据wsdl文件用soapUi快速创建webService服务(有图有真相)

    最近公司业务上使用webservice 频繁.由于之前都是自己搭建webservice 自己定义提供给别人服务,现在则相反需求都是根据人家提供的wsdl 文件来生成 我们平台需要提供的接口.刚开始不知 ...