• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

MenAngel

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

js系列(8)简介

    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(一个标准协会)采纳。

posted on 2016-08-14 18:00  MenAngel  阅读(469)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3