zoukankan      html  css  js  c++  java
  • 1在html中添加js代码的三种方式以及js中变量,函数

    1.第一种方式:在时间句柄后太假js代码;

    例如浏览器弹出对话框;

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2 "http://www.w3.org/TR/html4/loose.dtd">
     3 <html>
     4 <head>
     5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     6 <title>无标题文档</title>
     7 </head>
     8 
     9 <body>
    10 <!--JavaScript是基于事件驱动型的编程语言,当发生某个特殊的事件的时候执行一段特殊的程序-->
    11 <!--每一个时间都会对应一个事件句柄,事件句柄的名称:on+事件名-->
    12 <!--程序员可以在事件句柄后"注册"js代码-->
    13 <!--当事件发生时浏览器自动执行事件句柄后的js代码-->
    14 <!--window是js中的内置对象,代表整个窗口属于BOM的一员-->
    15 <!--window这个内置对象有一个方法,叫做alert,这个方法可以弹出消息框-->
    16 <!--JS语句以分号结尾-->
    17 <button type="button" onclick="window.alert('hello world')">请点击我</button>
    18 
    19 </body>
    20 </html>

    2.第二种:让浏览器弹出对话框也可以把js代码写在独立脚本块中:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2 "http://www.w3.org/TR/html4/loose.dtd">
     3 <html>
     4 <head>
     5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     6 <!-- TemplateBeginEditable name="doctitle" -->
     7 <title>无标题文档</title>
     8 <!-- TemplateEndEditable -->
     9 <!-- TemplateBeginEditable name="head" -->
    10 <!-- TemplateEndEditable -->
    11 <!--独立脚本块,其中可以编写js代码;独立脚本块既可以放在head中,可以出现在hmtl中的任何位置-->
    12 <script type="text/javascript">
    13 //在整个页面加载过程中之上而下的顺序解释执行
    14 //并且alert方法具有阻塞作用,只有点击确定后alert方法才算执行完成,页面中才会出现"注册"
    15 alert("hello");
    16 </script>
    17 </head>
    18 
    19 <body>
    20 注册
    21 </body>
    22 </html>

    3.第三种方式:将js文件(专门写js代码)引用到html中

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2 "http://www.w3.org/TR/html4/loose.dtd">
     3 <html>
     4 <head>
     5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     6 <title>无标题文档</title>
     7 <script type="text/javascript" src="1.js">
     8 
     9 //这里不能写js代码
    10 //alert("你好,世界");
    11 </script>
    12 </head>
    13 
    14 <body>
    15 注册
    16 </body>
    17 </html>

    4.js中的变量

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2 "http://www.w3.org/TR/html4/loose.dtd">
     3 <html>
     4 <head>
     5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     6 <!-- TemplateBeginEditable name="doctitle" -->
     7 <title>JS中的变量</title>
     8 <!-- TemplateEndEditable -->
     9 <!-- TemplateBeginEditable name="head" -->
    10 <!-- TemplateEndEditable -->
    11 <script type="text/javascript" >
    12 
    13 /*
    14 1.什么是变量?
    15   -内存中存储数据的最基本的单元
    16   
    17 2.变量怎么声明?
    18   -java是一种强类型的语言
    19      强类型:java语言是由编译阶段,在编译阶段就确定了变量的数据类型
    20      例如:int i=10;
    21      以上程序通过编译之后,i变量的数据类型从始至终都是int类型,不能将其他数据类型的值赋给i变量。例如:i="abc";
    22      以上程序不能通过编译。
    23      这种类型称为强类型;
    24   -jsvascript是一种弱类型编程语言
    25     弱类型:javascript这种脚本语言,以普通形式保存,不需要编译,直接运行。没有编译期。
    26     弱类型的特征:变量的数据类型是可以随意改变。
    27     int i=100;//在javascript中不需要这样编写,因为没有编译期了。
    28     
    29     var a=100;//javascript中是这样做的
    30     a="abc";//程序执行到此,a为字符串类型
    31     a=true;//a为boolear类型
    32     a=3.2;//a 为浮点类型
    33   -变量声明的语法格式:
    34     var 变量名;
    35 
    36 3.变量如何赋值?
    37   变量赋值格式:
    38     变量名=值;
    39     *重点:js中的变量若没有显示赋值,系统默认赋值undefined;undefined在js中是一个具体的值,表示未定义。
    40 
    41 4.全局变量,局部变量?
    42   js中遵循就近原则,全局变量作用域是整个js程序,局部变量的作用域只是某个函数
    43   
    44 5.一行上可以定义多个变量
    45 */
    46 //若没有给变量赋值,系统默认undefined
    47 var ename;
    48 alert("ename:"+ename);
    49 
    50 //可以赋其他类型的值
    51 ename="SMITH";
    52 alert("ename:"+ename);
    53 
    54 ename=100;
    55 alert("ename:"+(ename+1));
    56 
    57 ename=false;
    58 alert("ename:"+(ename?"ABC":"DEF"));
    59 
    60 //js中字符串可以使用单引号
    61 ename='abcdf';
    62 alert("ename:"+ename);
    63 
    64 //a,b的值都是undefined;c的值为300;
    65 var a,b,c=300;
    66 
    67 alert(a);
    68 alert(b);
    69 alert(c);
    70 
    71 </script>
    72 </head>
    73 
    74 <body>
    75 
    76 </body>
    77 </html>

    5.js中的函数

    (1)js中的函数定义方式:

       第一种定义方式:function   函数名(形参列表){

                                          js语句;

                                   }

      第二中定义方式:函数名=function(形参列表){

               js语句;

              }

    (2)js中的函数无返回值类型;其函数的可以返回任意类型的数据,也可以无返回值;当函数无返回值的时候默认返回undefine;

    (3)js中的函数没有重载机制,在同一个js代码中,不能出现两个同名函数;

    (4)当函数返回NaN时,表示返回的结果本应该是一个数字,但是实际返回的结果不是一个数字;

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     2 "http://www.w3.org/TR/html4/loose.dtd">
     3 <html>
     4 <head>
     5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     6 <title>无标题文档</title>
     7     <script type="text/javascript">
     8     
     9     //这段js语句直接暴露在script标签中,整个html页面加载的时候自上而下的顺序执行
    10         window.alert("测试程序");
    11         /*
    12         4.js中的函数怎么定义?
    13         语法格式1:
    14             function 函数名(形参列表){
    15             
    16                 js语句构成的函数体;
    17             
    18             }
    19         语法格式2:
    20             函数名=function(形参列表){
    21             
    22                 函数体;
    23             
    24             }
    25         
    26 
    27         function testFun(){
    28         
    29             //js的函数执行结束之后的返回值类型是任意的,也可以不返回任何数据,当函数没用返回值的时候默认返回undefine;
    30         
    31             //return 100;
    32             //return "Hello";
    33             //return  12.0;
    34         
    35         }
    36         
    37         function sum(a,b){
    38         
    39         
    40         }
    41 
    42         怎么调用函数?以下都可以
    43         sum(10,20);
    44         sum("abs","def");
    45         sum(2.0,3.0);
    46         sum(3.6);
    47         sum();
    48         
    49         注意:js中的函数没有重载机制
    50         在同一个js代码中,函数名不能重名
    51         
    52         */
    53         function sayHello(){
    54         
    55             alert("helllo World");
    56         
    57         }
    58         
    59         sayHello();//js语句,直接暴露在js标签中
    60         
    61         function sum(a,b){
    62         
    63             return a+b;
    64         
    65         }
    66         function testFun1(){
    67         
    68         
    69         
    70         }
    71 
    72     </script>
    73 </head>
    74 
    75 <body>
    76     <input type="button" value="sayHello" onclick="sayHello()">
    77     
    78     <!--NaN:表示Not a Number"-->
    79     <!--
    80     js中什么情况下结果是NaN?
    81     计算结果本应该返回一个数字,但是结果并不是一个数字,结果就是NaN-->
    82     <input type="button" value="sum1" onclick="alert(sum())">
    83     <input type="button" value="sum2" onclick="alert(sum(1,2))">
    84     <input type="button" value="sum3" onclick="alert(sum(1))">
    85     <input type="button" value="sum4" onclick="alert(testFun1())">
    86     
    87 </body>
    88 </html>
  • 相关阅读:
    Linux命令-文件管理(四)
    Linux命令-文件管理(三)
    Linux命令-文件管理(二)
    Linux命令-文件管理(一)
    Nodejs环境搭建
    Python csv文件操作
    python数组定义
    python3+Opencv 搭建环境和基本操作
    Python String startswith() Method
    Upload a file with $.ajax to AWS S3 with a pre-signed url
  • 原文地址:https://www.cnblogs.com/xuzhiyuan/p/7783576.html
Copyright © 2011-2022 走看看