zoukankan      html  css  js  c++  java
  • (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从零开始学”和个人学习笔记,转载请注明出处!谢谢合作!

  • 相关阅读:
    洛谷 P2370 P2370 yyy2015c01的U盘
    洛谷 P1214 等差数列
    洛谷 P1483 序列变换
    洛谷 P2032 扫描
    洛谷 P2846 光开关
    洛谷 P2872 道路建设
    Codeforces Round #510 #C Array Product
    Codeforces Round #510 #B
    Codeforces Round #510 #A
    关于各种数字倍数的判断
  • 原文地址:https://www.cnblogs.com/LiuWeiLong/p/7088108.html
Copyright © 2011-2022 走看看