(1)认识javascript

认识javascript

在本篇学习资料中,讲解javascript的基本概念、编写工具、在html中的使用:

JavaScript 是脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

Javascript作为一种可以给网页增加交互性的脚本语言。

JavaScript 的代码是一种文本字符格式,可以直接插入 HTML 页面的文档中,插入 HTML 页面后,并且可动态装载,由所有的现代浏览器执行。

Javascript是基于对象的,是一种基于对象和事件的驱动的编程语言,因而它本身提供了非常丰富的内部对象设计人员使用。(几乎所有的浏览器都支持javascript,如:Internet Explorer浏览器、 firefox火狐浏览器、Opera浏览器等等)

Html语言是静态的,一旦编写,内容是无法改变的。Javascript可以弥补这种不足,可以将内容动态地显示在网页中。

一、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中的使用有三种:

1、在html网页头head重嵌入javascript代码 :

<!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代码

<!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> Javascript在HTML中的使用 </title>
<!--在html网页的元素事件中嵌入javascript代码-->
   <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>
</head>
<body>
<form method=post action="#">
  <input type="text" name="txtName">
  <input type="button"value="确定" onclick="validate()">
  </form>
 </body>
</html> 

    效果图:

4、在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> 在html中调用 外部javascript文件 </title>
<script src="hi.js"></script> <!--提前做一个js文件作引用用-->
</head>
<body>
<p>这里引用了一个javascript文件</p>
</body>
</html>
效果图:

hi.js部分:
//页面加载时执行的函数
 function showEnter(){
 alert("hello,javascript");
 }
 //页面加载事件触发时调用函数
 window.onload=showEnter;

通过外部脚本,可以轻易实现多个页面完成同一功能的脚本文件,可以方便地通过更新一个脚本内容实现批量更新。

四、下面来一个简单的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有扎实的理解才能用它来撰写比较复杂的程序。

以上的内容部分来自“javascript从零开始学”和个人学习笔记,此文最终解释权归本人所有!

时间: 2024-12-23 13:17:14

(1)认识javascript的相关文章

Javascript中call的使用

call 方法应用于:Function 对象调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[,   [,.argN]]]]])参数:thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明:call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.如果没有提供 thisObj 参数,那么 G

你不知道的javascript 之 &gt;&gt;

?远大于符号 在数学公式中,">>"代表远大于符号,表示一个数远大于另一个数,如76>>3,-2>>-99等.庞加莱与波莱尔1901年首先使用了它,很快被数学界所接受,沿用至今. 折叠编辑本段右移运算符 在许多计算机编程语言(例如:C语言.C++语言.Java语言.JavaScript语言.Pascal语言等)中,">>"代表右移运算符,就相当于"shr".该运算符为双目运算符,结合方向为从左到右,

初识JavaScript

JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能.因为JavaScript兼容于ECMA标准,因此也称为ECMAScript. ECMAScript,描述了该语javascript组成言的语法和基本对象. 文档对象模型(DOM),描述处理网页内容的方法

最全解析如何正确学习JavaScript指南,必看!

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处

JavaScript数据类型检测

一.JavaScript 数据类型 1.基本数据类型(6种) Undefined Null Boolean Number String Symbol (ES6新增) 2.引用数据类型: Object 二.数据类型检测 1. typeof 可以检测除null 外的基本类型.null 和所有对象的typeof都是"object", 不能用于检测用户自定义类型. 比如Date, RegExp, Array, DOM Element的类型都是"object". var s

JavaScript的进阶之路(二)函数简介,变量、作用域和内存问题

<h3>ECMAScript中函数不存在函数签名的概念,没有重载</h3><h3>无需指定返回值,可以在任何时候返回任何值.未指定返回值的函数,返回的是一个特殊的undefined值</h3> <script type="text/javascript"> function sayHi(){ console.log("Hi"); }; sayHi(); function sayName(name,age){

JavaScript 二进制的 AST

本文和大家分享的主要是javascript中二进制的 AST相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 背景介绍 多年来,JavaScript 已经从最慢的脚本语言之一,从老爷车发展为兰博基尼,不管是通过 Web 浏览器还是其他环境.它都能够快到可以运行桌面.服务器.移动甚至嵌入式应用程序. 随着 JavaScript 的增长,应用程序的复杂程度和规模都越来越复杂.然而,二十年前,少数使用过 JavaScript 的网站也就加载几千字节的 JavaScript,许多网站

JavaScript 对象

JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 此外,JavaScript 允许自定义对象. JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 建 JavaScript 对象 通过 JavaScript,您能够定义并创建自己的对象. 创建新对象有两种不同的方法: 定义并创建对象的实例 使用函数来定义对象,然后创建新的对象实例

实现一个函数clone,使JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制. 1 /** 对象克隆 2 * 支持基本数据类型及对象 3 * 递归方法 */ 4 function clone(obj) { 5 var o; 6 switch (typeof obj) { 7 case "undefined": 8 break; 9 case "string": o = obj + &q

javascript的优美与鸡肋

--总结来自:<javascript语言精粹> 任何语言都有其优美的地方和其鸡肋的地方.避归一些语言的糟粕,能相应的降低bug出现的几率. 优美处: 函数是头等对象 基于原型继承的动态对象 对象字面量和数组字面量 糟粕: 1. 全局变量 全局变量有三种表达方式: var声明:var foo = value; 添加属性到全局对象上,即添加到window上:window.foo = value; 未经声明的变量:foo = value; 虽然变量可以未经声明就使用,但是这会导致后期的很多的bug出