JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

    (1)简述:

1.JavaScript 是脚本语言

2.JavaScript 是一种轻量级的编程语言。

3.JavaScript 是可插入 HTML 页面的编程代码。

4.JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

5.JavaScript 很容易学习。

    (2)js能实现的功能:

1)写入html输出流:

<!DOCTYPE html>

<html>

 <head>

  <title>示例8.1(1)</title>

 </head>

<body>

<!--测试JavaScript的功能-->

  <p><b>JavaScript 能够直接写入 HTML 输出流中：</b></p>

  <script>

    document.write("用js输出我的签名:");

    document.write("<pre><font size=5>是是非非终为假，<br/>云淡风轻总是真！</font></pre>");

  </script>

  <p>提醒:<br/>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

  </p>

</body>

</html>

<!DOCTYPE html>

<html>

 <head>

  <title>示例8.1(2)</title>

  <script>

  function myFunc(){

    document.write("用js输出我的签名:");

    document.write("<pre><font size=5>是是非非终为假，<br/>云淡风轻总是真！</font></pre>");

  }

  </script>

 </head>

<body onload="myFunc()">

<!--测试JavaScript的功能-->

  <p><b>JavaScript 能够直接写入 HTML 输出流中：</b></p>

  <p>提醒:<br/>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

  </p>

</body>

</html>
<!DOCTYPE html>

<html>

 <head>

  <title>示例8.1(3)</title>

  <script>

  function myFunc(){

    document.write("用js输出我的签名:");

    document.write("<pre><font size=5>是是非非终为假，<br/>云淡风轻总是真！</font></pre>");

  }

  window.onload=myFunc;

  </script>

 </head>

<body>

<!--测试JavaScript的功能-->

  <p><b>JavaScript 能够直接写入 HTML 输出流中：</b></p>

  <p>提醒:<br/>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

  </p>

</body>

</html>

2)对事件的反应:

<!DOCTYPE html>

<html>

 <head>

  <title>示例8.2</title>

  <script>

  function myFunc(){

    alert("My name is MenAngel!")

  }

  </script>

 </head>

<body>

<!--测试JavaScript的功能-->

  <p><b>JavaScript 能够对事件进行响应：</b></p>

  <!--这里，函数要带括号-->

  <input type="button" value="弹出对话框" onclick="myFunc()">

</body>

</html>

3)改变 HTML 内容:

<!DOCTYPE html>

<html>

 <head>

  <title>示例8.3</title>

  <script>

  function changeContent(){

    x=document.getElementById("demo");

    x.innerHTML="My name is sunjimeng!";

  }

  </script>

 </head>

<body>

<!--测试JavaScript的功能-->

  <p><b>JavaScript 能够对动态改变html元素的内容：</b></p>

  <!--这里，函数要带括号-->

  <input type="button" value="改变文本内容" onclick="changeContent()">

  <p id="demo">My name is MenAngel!<p>

</body>

</html>

document.getElementById("some id")。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

4)改变图片元素的内容:

<!DOCTYPE html>

<html>

 <head>

  <title>示例8.4</title>

  <script>

  function changeImg(){

    b_element=document.getElementById("bumb");

    s_element=document.getElementById("switch");

    if(b_element.src.match("bulbon_on")){

      b_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_off.png";

      s_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_off.png";

    }else{

      b_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_on.png";

      s_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_on.png";

    }

  }

  </script>

  <style>

  img{

   margin-left:50px;

   margin-top:18px;

  }

  </style>

 </head>

<body>

<!--测试JavaScript的功能-->

  <p><b>JavaScript 能够动态改变图片元素的内容：</b></p>

  <div style="background-color:black;width:250px;height:300px;" >

  <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_off.png" id="bumb" width="150" height="200"/>

  <img onclick="changeImg()" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_off.png" id="switch" width="150" height="50"/>

  <div>

</body>

</html>

5)改变元素的样式:

<!DOCTYPE html>

<html>

 <head>

  <title>示例8.5</title>

  <script>

  function changeColor(){

    element=document.getElementById("div_main");

    element.style.background="red";

  }

  </script>

  <style>

  #div_main{

    height:200px;

    width:200px;

    background-color:black;

  }

  </style>

 </head>

<body>

<!--测试JavaScript的功能-->

  <p><b>JavaScript 能够动态改变元素的样式：</b></p>

  <input value="改变背景颜色" type="button" onclick="changeColor()"/>

  <div id="div_main" ">

  </div>

</body>

</html>

6)验证输入:

<!DOCTYPE html>

<html>

 <head>

  <title>示例8.6</title>

 <script>

  function myFunction()

  {

    var x=document.getElementById("demo").value;

     if(x==""||isNaN(x))

     {

       alert("不是数字");

     }

  }

</script>

 </head>

<body>

<!--测试JavaScript的功能-->

  <p><b>JavaScript 验证数据类型：</b></p>

  <input type="text" value="" " id="demo"> <button onclick="myFunction()">点一下</button></input>

</body>

</html>

    (3)拓展:

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

js系列（8）简介的更多相关文章

  1. Node.js 教程 01 - 简介、安装及配置

    系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...

  2. 【原创】书本翻页效果booklet jquery插件系列之简介

    booklet jquery插件系列之简介 本文由五月雨恋提供,转载请注明出处. 一.安装 1.添加CSS和Javascript 添加booklet CSS文件到你的页面. <link rel= ...

  3. Node.js系列基础学习----安装，实现Hello World, REPL

    Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...

  4. Ember.js系列文章

    JS前端框架之Ember.js系列文章 本文为文章索引,主要是罗列Ember.js的相关文章便于阅读. 相关演示代码:github for free. 基础篇 1. EmberJs之What|Why| ...

  5. 【D3.V3.js系列教程】--（十四）有路径的文字

    [D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...

  6. 【D3.V3.js系列教程】--（十五）SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  7. 【D3.V3.js系列教程】--（十二）坐标尺度

    [D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...

  8. 最流行的Node.js应用开发框架简介

    最流行的Node.js应用开发框架简介 快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.j ...

  9. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  10. 微信JS图片上传与下载功能--微信JS系列文章（三）

    概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...

随机推荐

  1. subprocess添加超时功能

    def TIMEOUT_COMMAND(command, timeout): """call shell-command and either return its ou ...

  2. DB2 UDB DBA 核对清单

    本文摘自 http://www-128.ibm.com/developerworks/cn/db2/library/techarticles/dm-0404snow/index.htmlDB2 UDB ...

  3. [转]linux14.04下caffe的安装步骤

     linux14.04下caffe的安装步骤   原文地址:http://blog.csdn.net/xiaoyang19910623/article/details/52997481?locatio ...

  4. 新建MMS草稿保存后，再进入草稿修改收件人，退出到会话界面，会显示两条草稿

    分析原因:新建彩信草稿,保存后,再打开草稿,修改收件人,再保存会产生新的threadId, 而之前保存的草稿theadId还存在,导致此问题. (必现. 解决方法:将原来的Thread_id和新的收件 ...

  5. Floyd 求最短路（poj 1161）

    Floyd-Warshall算法介绍: Floyd-Warshall算法的原理是动态规划. 设为从到的只以集合中的节点为中间节点的最短路径的长度. 若最短路径经过点k,则: 若最短路径不经过点k,则. ...

  6. Mybatis中模糊查询的各种写法

    1. sql中字符串拼接 SELECT * FROM tableName WHERE name LIKE CONCAT(CONCAT('%', #{text}), '%'); 2. 使用 ${...} ...

  7. I Hate It(hdu1754)（线段树区间最大值）

    I Hate It hdu1754 Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  8. Linux 所有网卡统计查看小命令

    命令使用: [root@localhost home]# -v A1= 'BEGIN{print"---------------------------------------------- ...

  9. 打包解决方案后，安装时提示只能在IIS5.1以上运行解决方法

    环境:vs2010 sp1,mvc4,WIN10 生成安装项目后进行安装提示: 此安装程序需要Internet Information Server 5.1或更高版本和Windows XP和更高的安装 ...

  10. 跟我一起学WCF(8)——WCF中Session、实例管理详解

    一.引言 由前面几篇博文我们知道,WCF是微软基于SOA建立的一套在分布式环境中各个相对独立的应用进行交流(Communication)的框架,它实现了最新的基于WS-*规范.按照SOA的原则,相对独 ...