js学习day06

不念不忘少年蓝@ 2023-02-24 01:32 76阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="utf-8" />
  5.   <title></title>
  6.   <script type="text/javascript">
  8.    /* * 创建一个函数，用来计算三个数的和 * * 可以使用 return 来设置函数的返回值 * 语法： * return 值 * * return后的值将会会作为函数的执行结果返回， * 可以定义一个变量，来接收该结果 * * 在函数中return后的语句都不会执行 * * 如果return语句后不跟任何值就相当于返回一个undefined， * 如果函数中不写return，则也会返回undefined * * return后可以跟任意类型的值 * */
  9.    function sum(a , b , c){ 
  10.     //alert(a + b +c);
  12.     var d = a + b + c;
  14.     return d;
  16.     //return undefined;
  18.    }
  20.    //调用函数
  21.    //变量result的值就是函数的执行结果
  22.    //函数返回什么result的值就是什么
  23.    var result = sum(4,7,8);
  25.    //var result = alert("hello");
  27.    console.log("result = "+result);
  30.   </script>
  31.  </head>
  32.  <body>
  34.  </body>
  35. </html>
  39. <!DOCTYPE html>
  40. <html>
  41.     <head>
  42.         <meta charset="UTF-8">
  43.         <title></title>
  44.         <script type="text/javascript">
  45.             /* * 定义一个函数，判断一个数字是否是偶数，如果是返回true，否则返回false */
  47.             function isOu(num){ 
  49.                 return num % 2 == 0;
  50.             }
  52.             var result = isOu(15);
  54.             //console.log("result = "+result);
  57.             /* * 定义一个函数，可以根据半径计算一个圆的面积，并返回计算结果 * 3.14*r*r */
  58.             function mianji(r){ 
  60.                 return 3.14*r*r;
  62.             }
  64.             result = mianji(5);
  66.             //console.log("result = "+result);
  69.             /* * 创建一个函数，可以在控制台中输出一个人的信息 * 可以输出人的 name age gender address * * 实参可以是任意的数据类型，也可以是一个对象 * 当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递 */
  70.             function sayHello(o){ 
  72.                 //console.log("o = "+o);
  73.                 console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address);
  74.             }
  76.             //sayHello("猪八戒",28,"高老庄","男"); //创建一个对象 var obj = { 
  77.                 name:"孙悟空",
  78.                 age:18,
  79.                 address:"花果山",
  80.                 gender:"男"
  82.             };
  84.             //sayHello(obj);
  86.             /* * 实参可以是一个对象，也可以是一个函数 */
  88.             function fun(a){ 
  89.                 console.log("a = "+a);
  90.                 //a(obj);
  91.             }
  93.             //fun(sayHello); //fun(function(){ alert("hello")});
  95.             fun(mianji(10));
  97.             /* * mianji() * - 调用函数 * - 相当于使用的函数的返回值 * * mianji * - 函数对象 * - 相当于直接使用函数对象 */
  99.         </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function fun(){ 
  100.                 alert("函数要执行了~~~~");
  102.                 for(var i=0 ; i<5 ; i++){ 
  105.                     if(i == 2){ 
  106.                         //使用break可以退出当前的循环
  107.                         //break;
  109.                         //continue用于跳过当次循环
  110.                         //continue;
  112.                         //使用return可以结束整个函数
  113.                         //return;
  114.                     }
  116.                     console.log(i);
  117.                 }
  119.                 alert("函数执行完了~~~~");
  120.             }
  122.             //fun();
  124.             /* * 返回值可以是任意的数据类型 * 也可以是一个对象，也可以是一个函数 */
  125.             function fun2(){ 
  127.                 //返回一个对象 return { name:"沙和尚"};
  128.             }
  130.             var a = fun2();
  132.             //console.log("a = "+a); function fun3(){ 
  133.                 //在函数内部再声明一个函数 function fun4(){ 
  134.                     alert("我是fun4");
  135.                 }
  137.                 //将fun4函数对象作为返回值返回
  138.                 return fun4;
  139.             }
  141.             a = fun3();
  142.             //console.log(a);
  143.             //a();注意一下这里的调用的方法
  144.             fun3()();
  147.         </script>
  148.     </head>
  149.     <body>
  150.     </body>
  151. </html>
  154. <!DOCTYPE html>
  155. <html>
  156.     <head>
  157.         <meta charset="UTF-8">
  158.         <title></title>
  159.         <script type="text/javascript">
  162.             //函数对象()
  163.             /* * 立即执行函数 * 函数定义完，立即被调用，这种函数叫做立即执行函数 * 立即执行函数往往只会执行一次 */
  164.             /*(function(){ alert("我是一个匿名函数~~~"); })();*/
  166.             (function(a,b){ 
  167.                 console.log("a = "+a);
  168.                 console.log("b = "+b);
  169.             })(123,456);
  171.         </script>
  172.     </head>
  173.     <body>
  174.     </body>
  175. </html>
  179. <!DOCTYPE html>
  180. <html>
  181.     <head>
  182.         <meta charset="UTF-8">
  183.         <title></title>
  184.         <script type="text/javascript">
  186.             /* * 创建一个对象 */
  187.             var obj = new Object();
  189.             //向对象中添加属性
  190.             obj.name = "孙悟空";
  191.             obj.age = 18; //对象的属性值可以是任何的数据类型，也可以是个函数 obj.sayName = function(){ 
  192.                 console.log(obj.name);
  193.             }; function fun(){ 
  194.                 console.log(obj.name);
  195.             };
  197.             //console.log(obj.sayName);
  198.             //调方法
  199.             obj.sayName();
  200.             //调函数
  201.             //fun();
  203.             /* * 函数也可以称为对象的属性， * 如果一个函数作为一个对象的属性保存， * 那么我们称这个函数时这个对象的方法 * 调用这个函数就说调用对象的方法（method） * * 但是它只是名称上的区别没有其他的区别 * */
  205.             var obj2 = { 
  207.                 name:"猪八戒", age:18, sayName:function(){ 
  208.                     console.log(obj2.name);
  209.                 }
  211.             };
  213.             obj2.sayName(); </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var obj = { 
  214.                         name:"孙悟空",
  215.                         age:18,
  216.                         gender:"男",
  217.                         address:"花果山"
  218.                      };
  220.             //枚举对象中的属性
  221.             //使用for ... in 语句
  222.             /* * 语法： * for(var 变量 in 对象){ * * } * * for...in语句 对象中有几个属性，循环体就会执行几次 * 每次执行时，会将对象中的一个属性的名字赋值给变量 */
  224.             for(var n in obj){ 
  225.                 console.log("属性名:"+n);
  227.                 console.log("属性值:"+obj[n]);
  228.             }
  232.         </script>
  233.     </head>
  234.     <body>
  235.     </body>
  236. </html>
  241. <!DOCTYPE html>
  242. <html>
  243.     <head>
  244.         <meta charset="UTF-8">
  245.         <title></title>
  246.         <script type="text/javascript">
  248.             /* * 作用域 * - 作用域指一个变量的作用的范围 * - 在JS中一共有两种作用域： * 1.全局作用域 * - 直接编写在script标签中的JS代码，都在全局作用域 * - 全局作用域在页面打开时创建，在页面关闭时销毁 * - 在全局作用域中有一个全局对象window， * 它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用 * - 在全局作用域中： * 创建的变量都会作为window对象的属性保存 * 创建的函数都会作为window对象的方法保存 * - 全局作用域中的变量都是全局变量， * 在页面的任意的部分都可以访问的到 * * 2.函数作用域 * */
  250.             var a = 10;
  251.             var b = 20;
  252.             //var c = "hello";
  254.             //console.log(window.c); function fun(){ 
  255.                 console.log("我是fun函数");
  256.             }
  258.             //window.fun();
  260.             //window.alert("hello");
  265.         </script>
  266.     </head>
  267.     <body>
  268.     </body>
  269. </html>
  274. <!DOCTYPE html>
  275. <html>
  276.     <head>
  277.         <meta charset="UTF-8">
  278.         <title></title>
  279.         <script type="text/javascript">
  281.             /* * 解析器在调用函数每次都会向函数内部传递进一个隐含的参数, * 这个隐含的参数就是this，this指向的是一个对象， * 这个对象我们称为函数执行的 上下文对象， * 根据函数的调用方式的不同，this会指向不同的对象 * 1.以函数的形式调用时，this永远都是window * 2.以方法的形式调用时，this就是调用方法的那个对象 */
  283.             function fun(){ 
  284.                 //console.log("a = "+a+", b = "+b);
  285.                 console.log(this.name);
  286.             }
  288.             //fun(); //创建一个对象 var obj = { 
  289.                 name:"孙悟空",
  290.                 sayName:fun
  291.             }; var obj2 = { 
  292.                 name:"沙和尚",
  293.                 sayName:fun
  294.             };
  296.             //console.log(obj.sayName == fun);
  297.             var name = "全局的name属性";
  298.             //obj.sayName();
  299.             //以函数形式调用，this是window
  300.             //fun();
  302.             //以方法的形式调用，this是调用方法的对象
  303.             //obj.sayName();
  304.             obj2.sayName();
  306.         </script>
  307.     </head>
  308.     <body>
  309.     </body>
  310. </html>
  316. <!DOCTYPE html>
  317. <html>
  318.     <head>
  319.         <meta charset="UTF-8">
  320.         <title></title>
  321.         <script type="text/javascript">
  323.             //创建一个name变量
  324.             var name = "全局"; //创建一个fun()函数 function fun(){ 
  325.                 console.log(this.name);
  326.             }
  328.             //创建两个对象 var obj = { 
  329.                     name:"孙悟空",
  330.                     sayName:fun
  331.             }; var obj2 = { 
  332.                     name:"沙和尚",
  333.                     sayName:fun
  334.             };
  336.             //我们希望调用obj.sayName()时可以输出obj的名字
  337.             //obj.sayName();
  339.             obj.sayName();
  343.         </script>
  344.     </head>
  345.     <body>
  346.     </body>
  347. </html>
  353. <!DOCTYPE html>
  354. <html>
  355.     <head>
  356.         <meta charset="UTF-8">
  357.         <title></title>
  358.         <script type="text/javascript">
  360.             /* * 创建一个对象 */
  361.             var obj = { 
  362.                     name:"孙悟空", age:18, gender:"男", sayName:function(){ 
  363.                         alert(this.name);
  364.                     }
  365.             };
  367.             /* * 使用工厂方法创建对象 * 通过该方法可以大批量的创建对象 */
  368.             function createPerson(name , age ,gender){ 
  369.                 //创建一个新的对象 
  370.                 var obj = new Object();
  371.                 //向对象中添加属性
  372.                 obj.name = name;
  373.                 obj.age = age;
  374.                 obj.gender = gender; obj.sayName = function(){ 
  375.                     alert(this.name);
  376.                 };
  377.                 //将新的对象返回
  378.                 return obj;
  379.             }
  381.             /* * 用来创建狗的对象 */
  382.             function createDog(name , age){ 
  383.                 var obj = new Object();
  384.                 obj.name = name;
  385.                 obj.age = age; obj.sayHello = function(){ 
  386.                     alert("汪汪~~");
  387.                 };
  389.                 return obj;
  390.             }
  392.             var obj2 = createPerson("猪八戒",28,"男");
  393.             var obj3 = createPerson("白骨精",16,"女");
  394.             var obj4 = createPerson("蜘蛛精",18,"女");
  395.             /* * 使用工厂方法创建的对象，使用的构造函数都是Object * 所以创建的对象都是Object这个类型， * 就导致我们无法区分出多种不同类型的对象 */
  396.             //创建一个狗的对象
  397.             var dog = createDog("旺财",3);
  399.             console.log(dog);
  400.             console.log(obj4);
  403.         </script>
  404.     </head>
  405.     <body>
  406.     </body>
  407. </html>
  414. <!DOCTYPE html>
  415. <html>
  416.     <head>
  417.         <meta charset="UTF-8">
  418.         <title></title>
  419.         <script type="text/javascript">
  421.             /* * 创建一个构造函数，专门用来创建Person对象的 * 构造函数就是一个普通的函数，创建方式和普通函数没有区别, * 不同的是构造函数习惯上首字母大写 * * 构造函数和普通函数的区别就是调用方式的不同 * 普通函数是直接调用，而构造函数需要使用new关键字来调用 * * 构造函数的执行流程： * 1.立刻创建一个新的对象 * 2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象 * 3.逐行执行函数中的代码 * 4.将新建的对象作为返回值返回 * * 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。 * 我们将通过一个构造函数创建的对象，称为是该类的实例 * * this的情况： * 1.当以函数的形式调用时，this是window * 2.当以方法的形式调用时，谁调用方法this就是谁 * 3.当以构造函数的形式调用时，this就是新创建的那个对象 * */
  422.             function Person(name , age , gender){ 
  423.                 this.name = name;
  424.                 this.age = age;
  425.                 this.gender = gender; this.sayName = function(){ 
  426.                     alert(this.name);
  427.                 };
  428.             }
  430.             function Dog(){ 
  432.             }
  434.             var per = new Person("孙悟空",18,"男");
  435.             var per2 = new Person("玉兔精",16,"女");
  436.             var per3 = new Person("奔波霸",38,"男");
  438.             var dog = new Dog();
  440.             /*console.log(per); console.log(dog);*/
  442.             /* * 使用instanceof可以检查一个对象是否是一个类的实例 * 语法： * 对象 instanceof 构造函数 * 如果是，则返回true，否则返回false */
  443.             //console.log(per instanceof Person);
  444.             //console.log(dog instanceof Person);
  446.             /* * 所有的对象都是Object的后代， * 所以任何对象和Object左instanceof检查时都会返回true */
  447.             //console.log(dog instanceof Object);
  450.         </script>
  451.     </head>
  452.     <body>
  453.     </body>
  454. </html>

发表评论

表情：
评论列表 （有 0 条评论，76人围观）

还没有评论，来说两句吧...

相关阅读

    相关 day06_02

     定义类： 　　定义格式 　　　　创建java文件，与类名相同 　　　　public class 类名\{     　　　　数据类型  属性名称1；     　　　　

    你的名字你的名字/ 0 赞/ 287 阅读

    相关 day06_01

    ArrayList集合的使用 \ 　　也是引用数据类型 \ 步骤： \ 　　 1，导入包java.util包中 \ 　　 2.创建引用类型的变量 \ 　　　

    港控/mmm°港控/mmm°/ 0 赞/ 283 阅读