zoukankan      html  css  js  c++  java

  • 三、JavaScript基础

    一、JS概述

    Javascript是基于对象和事件驱动的脚本语言，主要应用在客户端。

    - 基于对象：
    ** 提供好了很多对象，可以直接拿过来使用
    - 事件驱动：
    ** html做网站静态效果，javascript动态效果
    - 客户端：专门指的是浏览器

    • 特点：

    交互性（信息的动态交互）

    安全性（不可以直接访问本地磁盘的文件）

    跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）（java里面跨平台性，虚拟机）

    • JavaScript与java不同：（雷锋和雷峰塔）

    js是Netscape公司（网景公司）开发的一种脚本语言 ，并且可在所有主要的浏览器中运行 IE、Firefox、Chorme、Opera；java是sun公司，现在oracle；

    JavaScript 是基于对象的，java是面向对象

    JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行。

    JavaScript 是一种弱类型语言，java是强类型语言。如下：（弱变量类型：定义变量的时候 变量没有具体的类型.当变量被赋值的时候.变量才会有具体的数据类型.）

    int i = "10";  //java里面
var i = 10;  var m = "10";  //js里面

    • JavaScript历史：

      在早期浏览器竞争的背景下，各浏览器厂商标新立异，独树一帜，JavaScript 脚本编写者们苦不堪言
      W3C、ECMA 的不懈努力下，随着Microsoft 的 IE浏览器的不断改进，一个遵奉标准、笃行规范的 Web 新世界展现在世人面前 

    • JavaScript语言组成：

      一个完整 JavaScript实现由以下3个部分组成
      核心（ECMAScript）           -- ECMA：欧洲计算机协会         -- 由ECMA组织制定的js的语法，语句...
      文档对象模型（DOM）          -- document object model：文档对象模型
      浏览器对象模型（BOM）        -- broswer object model: 浏览器对象模型

                 

    • JavaScript基础思维导图

    二、js和html的结合方式（两种）

    　　第一种    --使用一个标签

    <script type="text/javascript">  js代码; </script>

    　　第二种    --使用script标签，引入一个外部的js文件

    <!-- 创建一个js文件：abc.js -->
<script type="text/javascript" src="abc.js"></script>

     　　   使用第二种方式的时候，就不要在script标签里面写js代码了，不会执行

    三、js的原始类型和声明变量

    　　1)  java的基本数据类型 byte short int long float double char boolean

    　　3)  js定义变量 都使用关键字 var

    　　2)  js的原始类型（五个）

    　　　　  - string: 字符串    >>  var str = "abc";

    　　　  　- number：数字类型　　>>  var m = 123;

    　　　  　- boolean：true和false　　 >>  var flag = true;

    　　　  　- null　　>>  var date = new Date();　　　　访问的对象不存在                 获取对象的引用，null表示对象引用为空 ，所有对象的引用也是object

    　　　  　- undifined　　>>  var aa;　　　　 变量定义了未初始化/ 访问对象不存在属性              定义一个变量，没有赋值

    　　4)  typeof(); 查看当前变量的数据类型　　　

    　　　　　　** undefined - 如果变量是 Undefined 类型的；** boolean - 如果变量是 Boolean 类型的；** number - 如果变量是 Number 类型的；** string - 如果变量是 String 类型的；** object - 如果变量是一种引用类型或 Null 类型的

    <script type="text/javascript">    
            var a = "123";  //定义一个字符串
            alert(typeof(a)); //string

            var b = 123;      //定义数字
            alert(typeof(b));  //number    
            
            alert(typeof null);  //输出的是object 。null被认为是对象的占位符，但仍然算做原始数据类型

            alert(null == undefined); //输出 true  ；undefined实际上是从值null派生来的，所以显示true；undefined是声明了变量但是未赋值，null是找不到对象。如果函数或方法要返回的是对象，那么找不到                                        该对象时，返回的通常是 null。
        </script>

    四、js的语句

    • java里面的语句
      • if判断
      • switch语句
      • 循环for  while   do-while
    • js里面的这些语句
      • if判断语句：　　=：表示赋值　　==：表示判断　
      • switch语句：
        • java里面支持数据类型 string支持吗？在jdk1.7开始支持　　
        • js里面都支持 
          switch(a) {
　　case 5:
　          break;
　  case 6:
　　 　　    break;
　　default:
　　......
}
      • 循环语句for  while   do-while ：
        • while循还 
          var i = 5;
while(i>1) {
      alert(i);
      i--;  
}
        • for循坏 
          for(var mm=0;mm<=3;mm++) {
    alert(mm);
}
      • i++  ++i 和java里面一样

    五、js的运算符

    • += ： x+=y;  ===>x=x+y;
    • js里面不区分整数和小数 
      var j = 123;
alert(j/1000*1000);
// 123/1000*1000  在java里面int类型得到结果是0；    在js里面不区分整数和小数，123/1000=0.123 * 1000 = 123
    • 字符串的相加和相减的操作 
      //如果相加，做的是字符串连接。如果相减，做的是相减的运算
var str = "456";     //把“456”换成“abc”，做相减运算，提示NAN：表示不是一个数字
//alert(str+1);    //在java里面操作的结果是4561；在js里面还是4561
alert(str-1);    //相减的时候，执行减法的运算
    • boolean类型也可以操作    
      • 如果设置成true，相当于这个值是1
      • 如果设置成false，相当于这个值是0 
                <script type="text/javascript">    
            var flag = true;
            alert(flag+1);      //结果：2
            var flag1 = false;
            alert(false+1);       //结果：1
        </script>
    • == 和 === 区别      
      • 做判断        
      • == 比较的只是值  
      • === 比较的是值和类型 
        <script type="text/javascript">    
    var a = "9";　　//定义一个字符串
    if(a==9){      //==输出9；===输出other
        alert(9);
    }else{
        alert("other");
    }
</script>
    • 引入知识　　　　
      • 直接向页面输出的语句（可以把内容显示在页面上）　document.write("aaa");    document.wirte("<hr/>");
      • 可以向页面输出变量，固定值和html代码
    • 实现99乘法表（输出到页面上） 
      document.write("<table border='1' bordercolor='blue'>");
//循环行 9
for(var i=1;i<=9;i++) {

    document.write("<tr>");
    //循环列
    for(var j=1;j<=i;j++) {
        document.write("<td>");
        //运算
        document.write(j+"*"+i+"="+i*j);
        document.write("</td>");
    }
    //document.write("<br/>");
    document.write("</tr>");
}
document.write("</table>");

       　　　- document.write里面是双引号，如果设置标签的属性需要使用单引号

    　　　　　　- document.write可以输出变量，还可以输出html代码

    六、js的数组

    • 什么是数组？
      • 使用变量，只能存一个值；而数组可以村多个值。   var m = 10;
      • java里面的数组 定义 int[] arr = {1,2,3};
    • 定义方式（三种）
      • 第一种：  
        var arr = [1,2,3];      //结果：1，2，3
var arr = [1,"4",true];          //结果：1，4，true
      • 第二种：使用内置对象 Array对象 
        var arr1 = new Array(5);  //定义一个数组，数组的长度是5
arr1[0] = "9";
        alert(arr1);           //运行结果为：9，，，， 九后面四个逗号
      • 第三种：使用内置对象 Array　 
        var arr2 = new Array(3,4,5); //定义一个数组，数组里面的元素是3 4 5
    • 数组里面有一个属性  - length：获取到数组的长度 
      <script type="text/javascript">    
    var arr = [1,"4",true];
    alert(arr);
    alert(arr.length);       //3
</script>
    • 数组长度是可变的；数组可以存放不同的数据类型的数据

    七、js的函数

    • 在java里面定义方法 
      public 返回类型void /int   方法名(参数列表) {
    方法体;
    返回值;
}

public int add(int a,int b) {
    int sum = a+b;
    return sum;
}
    • 在js里面定义函数（方法）有三种方式
      • 函数的参数列表里面，不需要写var，直接写参数名称
      • 第一种方式： 
        //使用到一个关键字 function
function 方法名(参数列表) {
    方法体;
    返回值可有可无（根据实际需要）;
}

//代码
//使用第一种方式创建函数
function test() {
    alert("qqqqq");
}

//调用方法
//test();

//定义一个有参数的方法  实现两个数的相加
function add1(a,b) {
    var sum = a+b;
    alert(sum);        
}

//add1(2,3);

//有返回值的效果
function add2(a,b,c) {
    var sum1 = a+b+c;
    return sum1;
}
alert(add2(3,4,5));
      • 第二种方式： 
        // 匿名函数
var add = function(参数列表) {
    方法体和返回值;
}
//代码
//第二种方式创建函数
var add3 = function(m,n) {
    alert(m+n);
}
//调用方法
add3(5,6);
      • 第三种方式：（用的少，了解）
        • 动态函数
        • 使用到js里面的一个内置对象Function
          • var add = new Function("参数列表","方法体和返回值"); 
            <script type="text/javascript">    
    var add = new Function("x,y","var sum; sum=x+y; return sum;");
    document.write(add(5,4));
</script>


//所以称作可变参数
<script type="text/javascript">    
    var canshu = "x,y";
    var fangfati = "var sum; sum=x+y; return sum;";
    var add1 = new Function(canshu, fangfati);
    document.write(add1(5,4));
</script>

    　　　　注意：js的方法的命名：不要写单一的单词 如add()，不要把下划线放在开始位置 如 _add()

    八、js的全局变量和局部变量

    • 全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
      • 在方法外部使用，在方法内部使用，在另外一个script标签使用 
        <!DOCTYPE html>
<html>
    <head>    
    </head>
    <body>        
        <script type="text/javascript">
            var mm = 10;//定义一个全局变量
            document.write("在方法外部使用mm："+mm);

            function text(){
                document.write("在方法内部使用mm："+mm);
            }
            text();
        </script>
    </body>    
        <script type="text/javascript">    
            document.write("在另一个script标签使用mm："+mm);
        </script>
</html>
//运行结果：
//在方法外部使用mm：10在方法内部使用mm：10 在另一个script标签使用mm：10
    • 局部变量：在方法内部定义一个变量，只能在方法内部使用
      • 如果在方法的外部调用这个变量，提示出错
      • SCRIPT5009: “aa”未定义 
      • ie自带了一个调试工具，ie8及其以上的版本中，键盘上 F12，在页面下方出现一个条 
         1 <!DOCTYPE html>
 2 <html>
 3     <head>    
 4     </head>
 5     <body>        
 6         <script type="text/javascript">
 7             function text(){
 8                 var aa = 10;//定义一个局部变量
 9                 document.write("在方法内部使用aa："+aa);
10             }
11             text();
12 
13             document.write("在方法外部使用aa："+aa);
14         </script>
15     </body>    
16         <script type="text/javascript">    
17             document.write("在另一个script标签使用aa："+aa);
18         </script>
19 </html>

         

    九、script标签放在的位置

    • script标签可以放在任何位置，但是建议把script标签放到 </body>后面
    • 如果现在有这样一个需求：
      • 在js里面需要获取到input里面的值，如果把script标签放到head里面会出现问题。因为html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input里面的值，因为页面还没有解析到input那一行，肯定取不到。 
         1 <!DOCTYPE html>
 2 <html>
 3     <head>    
 4         <script type="text/javascript">
 5             var input1 = document.getElementById("nameid");
 6             document.write(input1.value);
 7         </script>
 8     </head>
 9     <body>        
10         <input type="text" name="name" id="nameid" value="aaaa">
11     </body>    
12 </html>

         

    十、js的重载

    • 什么是重载？方法名相同，参数列表不同

    　　　　java里面有重载? 肯定有

    • js里面是否有重载？没有 
      <script type="text/javascript">    
    function add(a,b){
        return a+b;
    }
    function add(a,b,c){
        return a+b+c;
    }
    function add(a,b,c,d){
        return a+b+c+d;
    }
    alert(add(2,3));  //NAN
    alert(add(2,3,4));    //NAN
    alert(add(2,3,4,5));     //14
</script>
  • 相关阅读:
    postman环境和全局变量设置语句
    2016 GitHub章鱼猫观察报告之开源统计
    Multiload-ng
    忠告初学者学习Linux系统的8点建议
    真有用？Snap和Flatpak 通吃所有发行版的打包方式。
    教你如何在Kali Linux 环境下设置蜜罐？
    下一代GNU/Linux显示服务Wayland 1.12正式发布
    为 Github 创造 Integration
    简单易懂的crontab设置工具集
    爆料喽！！！开源日志库Logger的剖析分析
  • 原文地址：https://www.cnblogs.com/drby/p/5528541.html
Copyright © 2011-2022 走看看