JS-学习

最新推荐文章于 2024-04-28 11:43:36 发布

小小小小小H

最新推荐文章于 2024-04-28 11:43:36 发布

阅读量3.6k

点赞数

本文链接：https://blog.csdn.net/weixin_43469483/article/details/119761786

版权

1、javascript简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1、javascript简介</title>
    <script>
        alert('欢迎来到js')
    </script>
</head>
<body>
<p>Ajax基础</p>
<p>Ajax :阿贾克斯</p>
<p> 浏览器提供的一套方法,实现网页无刷新更新数据.</p>
<p>一、应用场景:</p>
<p>(1)页面加载更多数据</p>
<p>(2)列表数据无刷新分页</p>
<p>(3)表单项离开焦点数据验证</p>
<p>(4)搜索框提示文字下拉列表</p>
<p> 二、Ajax的运行环境</p>
<p> Ajax技术需要运行在网站环境下</p>
<p>1、js是一门什么样的语言？</p>
<p>js是JavaScript的缩写,解释性的脚本语言，基于原型的面向对象。主要是用来做页面的逻辑，做页面的交互、特效等。</p>
<p>与java没有实质性的关系，还是有点渊源的</p>
<a style="color: cornflowerblue">2、js的组成部分：
    <p>Ⅰ语言标准：ECMAScript：基本语法,定义了语言的核心，各种语法，比如变量；</p>
    <p>Ⅱ文档对象模型：DOM（document object model）：文档对象模型,js如何操作html</p>
    <p>Ⅲ浏览器对象模型：BOM（browser object model）：用来操作浏览器</p>
</a>
<p>3、js也可以用来做后端的：nodejs</p>
</body>
</html>

2、js最简单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2、js最简单实例</title>
  <script>
    /**
     * 1、控制浏览器像页面弹出一个警告框，用来提示用户一些信息的
     * */
    alert('欢迎来到js。')

  /*
  * 2、document.write就是向叶面输出内容
  * 实质就是在body添加内容
  * dom就是文档对象模型，用来操作html的
  * */
    document.write('我们想在操作document.write想body中添加内容。')

    /*
    * 3、console.log就是向控制台输出内容
    * 这个输出控制台，一般给开发人员测试代码用的
    * */
    console.log('console.log就是向控制台输出内容')
  </script>
</head>
<body>
<p>在js中代码是从上到下依次执行的</p>

</body>
</html>

3、js的书写位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3、js的书写位置</title>
  <link rel="stylesheet" href="style.css">

  <style>
    p{
      background-color: cornflowerblue;
    }
  </style>

</head>
<body>
    <script>
        /**
         * css的代码引入方式：内联式、嵌入式、外部式
         *1、js代码可以直接写在script标签里里面，js本身就是javascript的一个缩写
         * 2、js内联式写法
         * 3、js外部式的写法
         */
    </script>
    <!--    外部式引入js是通过scrpti标签，src的属性写上js文件的路径
            引入了外部式js代码的script标签，会自动胡里奥此标签的js代码
            -->
    <script src="js.js">
        alert('这里引入了js外部式script标签，在这里再写js语句，会执行吗？答案是不会')
    </script>
<p style="font-size: 40px;">我是一个英俊潇洒v587的p标签</p>
<!--js代码可以写在标签的onclick属性上面-->
<button onclick="alert('欢迎光临')">点我</button>

<p onclick="alert('都说了不要点我了，我只是一个p标签')">不要点我</p>

<!--js代码可以写在a标签的href属性上面
    这种写法要在前面加上javacscript：表示写的是javacscript语言
       不推荐，因为这样html代码与js代码耦合，不易修改，易出错
-->
<a href="javascript:alert('这是写在a标签的js代码')">我是a标签</a>

<!--是一个空的js语句-->
<a href="javascript:">这是一个点了不动的a标签</a>

<a href="#">href="#"相当于让页面跑到本页面</a>
</body>
</html>

(js.js)

alert('这是在外部式的js文件里面')

（style.css）

p{
    color: burlywood;
}

4、js基本注意点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4、js基本注意点</title>
</head>
<body>
<!--js中的多行注释：/* 注释的内容 可分多行 */用来标注代码的功能 简单、简单、直接、适量
js的单行注释：//
在html代码中，标签不区分大小写，但是一般默认小写
1、在js中是严格区分大小写的

2、一般编程的语言中都是以分号代表语句的结束（js不写分号也是可以的但是最好还是加上，多行代码用分好区分，一行一句代码）

3、js代码中如果出错（语法错误），可以打开控制台console找错误原因

4、js代码中会忽略多余的空格和换行，让层次结构清楚
-->
<script>
  alert('欢迎');//alert的作用是让浏览器弹出一个警告框

</script>
</body>
</html>

5、js字面量和变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5、js字面量和变量</title>
</head>
<body>
<script>
  /**
   * 1、字面量 也就是常量：就是值不会发生改变的量
   * 2、变量可变化的量  x,y  x1+y1=z1  变量可以存储字面量，描述字面量，变量可以重复赋值
   *
   */
  // 在js中，用var（variable）关键字来定义变量
  // var width：定义（声明）变量，这个变量的名字是width
  // width=30； 将30这个值复制给width这个变量  赋值符号：=
  // 变量值只声明不赋值的话，初始值是undefind
  var width = 2;
  var height = 3;
  var area = width*height;
  console.log(area);
</script>
</body>
</html>

6、标识符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6、标识符</title>
</head>
<body>
<p>在js中，可以自主命名的都是标识符，如：变量名，属性名，函数名</p>
<p>命名的规则：
    <br>
    1、命名可以使用字母、数字、下划线、$,  数字不能在最前面
    <br>
    2、标识符不能使用js中的关键字或者保留字
    <br>
    3、命名一般采用驼峰命名法
    <br>
    4、unicode，utf-8里面支持的字符都是用来做标识符的
</p>
<script>
    var ab$c_123 = 1;
    console.log(ab$c_123);
    var myAge = 2000;
    console.log(myAge);
    var var1 = 1;
    console.log(var1);
    var mySisterAge = 2000;
    console.log(mySisterAge);
    var zhongwe = 2192180;
    console.log(zhongwe);
</script>
</body>
</html>

7、数据类型之字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7、数据类型之字符串</title>
</head>
<body>
<p>js的5种数据类型：</p>
<p>String：字符串</p>
<p>Number：数字 ：整数和小数（浮点数）</p>
<p>Boolean：布尔值 ：真和假</p>
<p>Null:空值</p>
<p>Undefined：未定义的</p>
<br>
<p>引用数据类型：</p>
<p>Object：对象：(狭义的对象：数组array，函数function)</p>

<p>如果字符串中引号需要嵌套的话，一般是双引号里面套单引号，或者单引号里面套双引号（这不废话）</p>
<p>引号引起来的内容（单引双引都可以）</p>
<p>转义字符</p>
<p>\" :作为一个“字符解析的</p>
<p>\’ :单引号\</p>
<p>\\ :\</p>
<p>\n ：换行</p>
<p>\t ：制表符</p>
<script>
    var str = '我爱你我的家！'
    console.log(str);
    console.log(typeof  str);

    var str1 = "11";
    console.log(str1);
    console.log(typeof  str1);

    var str2 = '他说：“我爱你我的家！”'
    console.log(str2);
    console.log(typeof  str2);
    // 转义字符 输出引号
    var str3 = 'akjf \"lsjdf\" \\aoskc \nalpl  \tn'
    console.log(str3);
    console.log(typeof  str3);

    // 获取字符串某一个字符
    var str4 = str[1];
    console.log(str4);
    console.log(typeof  str4);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8、数据类型之Number类型</title>
</head>
<body>
<p>Number 数字：整数和小数（浮点数</p>

<p>科学计数法：</p>
<p>1.7e+3 = 1.7*10*3=1700；</p>
<p>1.7e-3 = 1.7*10*（-3）=1.7*0.001</p>
1.7976931348623157e+308
<p>常量</p>
<p>Number.MAX_VALUE：表示js中最大的数</p>
<p>常量一般用全大写表示 </p>
Number.MIN_VALUE：最小数：5e-324
<p>Infinity：正无限大</p>

<p>js小数做计算时可能会出现不精确的情况，原因是：10进制里1/3无法准确表示，0.33333</p>
<p>二进制里1/10无法准确表示，是一个无限循环小数</p>
<p>解决方式：可以把小数先全部转化为整数，计算之后全部转化为小数</p>
<script>
    var num1 = 123;
    console.log(num1);
    console.log(typeof num1);

    var num2 = 12.3;
    console.log(num2);
    console.log(typeof num2);

    var num3 = "12.3";
    console.log(num3);
    console.log(typeof num3);

    // 常量最大值
    var num4 = Number.MAX_VALUE;
    console.log(num4);
    console.log(typeof num4);
    // 常量最小值
    var num5 = Number.MIN_VALUE;
    console.log(num5);
    console.log(typeof num5);

    // 常量无限大
    var num6 = Number.MAX_VALUE*Number.MAX_VALUE;
    console.log(num6);
    console.log(typeof num6);

    // 常量无限大
    var num7 = Infinity;
    console.log(num7);
    console.log(typeof num7);

    //小数计算不准确
    var num8 = 0.1*0.1;
    console.log(num8);
    console.log(typeof num8);

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9、布尔类型（布尔值）</title>
</head>
<body>
<p>boolean 布尔值：真true 假false</p>
<p>一般是用来做逻辑判断的</p>
<p>区分false 和‘false’</p>
<script>
    var dropMoney = true;
    if(dropMoney){
        alert('我们一起去捡钱');
    }else{
        alert('老实呆在家里面');
    }

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10、Null和Undefined类型</title>
</head>
<body>
<p>1、Null表示空值</p>
<p>Null这个数据类型类面只有一个值，就是null，这个null值表示的是一个空的对象</p>
<p>typeof返回null的时候，返回的是一个object</p>
<br>
<p>Undefined这个类型也只有一个值，就是Undefined，表示变量未定义</p>
<p>表示变量定义了未赋值</p>
<script>
    var var1 = null;
    console.log(var1);
    console.log(typeof var1);

    var var2;
    console.log(var2);
    console.log(typeof var2);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11、js强制转换类型</title>
</head>
<body>
<p>1、其他类型转成Number类型</p>
<script>
    console.log('1、其他类型转成Number类型');
    // 初始语句：var str1 = '123';
    // 方法1：var str1 = Number('123');
    // 方法2：var str1 = parseInt('123');
    // 方法3：
    var var1 = parseFloat('123');
    console.log(var1);
    console.log(typeof var1);

    var bool1 = true;
    console.log(bool1);
    console.log(typeof bool1);

    var num1 = Number(bool1);
    console.log(num1);
    console.log(typeof num1);
    console.log('这里是分割线--------------------');
</script>
<p>2、其他类型转String类型（主要使用String类型）</p>
<script>
    console.log('2、其他类型转String');
    console.log('方法1：');
    var var2 = 1234;
    console.log(var2);
    console.log(typeof var2);
    var num2 = String(var2);
    console.log(num2);
    console.log(typeof num2);
    console.log('方法2：');
    var var3 = 1234;
    console.log(var3);
    console.log(typeof var3);
    var num3 = var3.toString();
    console.log(num3);
    console.log(typeof num3);
</script>

<p>3、其他类型转boolean类型（boolean函数）</p>
<script>
    console.log('3、其他类型转boolean类型（boolean函数）');
    var var4 = 1;
    console.log(var4);
    console.log(typeof var4);
    var bool1 = Boolean(var4);
    console.log(bool1);
    console.log(typeof bool1);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12、js算数运算符</title>
</head>
<body>
<p>算术运算符</p>
<p>+（加）</p>
<p>隐式类型转换，在算数运算中，其它类型的变量都会转换为Number类型的变量</p>
<p>在+号运算符中，非String类型的变量，都会转换（隐式类型转换）为Number类型的变量</p>
<p>在+号运算符中，String类型的变量，会变成连接符</p>
<p>算术是在运算的时候是从左往右进行的</p>
<script>
    console.log('这里是+号运算');
    var num1 = 123;
    var num2 = 17.8;
    var sum = num1+num2;
    console.log(sum);

    // 连接符+
    var num3 = 23;
    var num4 = '123';
    var sum2 = num3+num4;
    console.log(sum2);
    console.log(typeof sum2);
    var sum3 = 1+2+'3';
    console.log(sum3);
    var sum4 = '1'+2+3;
    console.log(sum4);
</script>

<p>-（减号）</p>
<p>NaN（也是number类型的）:not a number</p>
<p>任何数字和NaN运算，都会得到NaN</p>
<script>
    console.log('这里是-号运算');
    var num5 = 2323;
    var num6 = true;
    var sum5 = num5-num6;
    console.log(sum5);
    console.log(typeof sum5);
</script>

<p>*（乘)</p>
<script>
    console.log('这里是*号运算');
    var num7 = 2;
    var num8 ='2.2';
    var sum6 = num7*num8;
    console.log(sum6);
    console.log(typeof sum6);
</script>

<p>/（除）</p>
<script>
    console.log('这里是/号运算');
    var num9 = 2;
    var num10 ='2.2';
    var sum7 = num9/num10;
    console.log(sum7);
    console.log(typeof sum7);
</script>

<p>%（取余）</p>
<script>
    console.log('这里是%号运算');
    var num11 = 20;
    var num12 ='3';
    var sum8 = num11%num12;
    console.log(sum8);
    console.log(typeof sum8);
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13、一元运算符</title>
</head>
<body>
<p>二元运算符就是需要两个数的运算符：比如之前的加减乘除、取余</p>
<p>一元运算符  值需要一个操作数的运算符</p>
<p>+（正号）  -（负号）</p>
<p>一元运算符也可以进行隐式类型转换</p>
<p>用一元运算符正好将其他类型转换为number类型的一种简单的方式</p>
<script>
    var num1 = -12;
    var num2 = -(-12);
    var num3 = +'1'+2+3;
    console.log(num1,num2,num3);
    console.log(typeof num1,typeof num2,typeof num3);

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14、自增和自减运算符</title>
</head>
<body>
<p>1、++自增运算符</p>
<p>自增运算符是++，a++相当于给变量a的值加1，自减运算符是--，a--相当于给变量a的值减1。a++是先赋值再加，++a是先加再赋值。</p>
<p>1、++a和a++的区别？</p>
<p>a++是先赋值再加，如果a=10，b=a++，那么a的值是11，b的值是a原来的值是10；</p>
<p>++a是先加再赋值，如果a=10，b=++a，那么a的值是11，b的值也是11；</p>
<script>
    var a = 1;
    var b = 1;
    var c = a++;
    var d = ++b;
    console.log('a='+a);//a = 2
    console.log('b='+b);//b = 2
    console.log('c='+c);//c = 1
    console.log('d='+d);//d = 2
</script>
<p>2、自减运算符</p>
<p>a--是先赋值再减，如果a=10，b=a--，那么a的值是9，b的值是a原来的值是10；</p>
<p>--a是先减再赋值，如果a=10，b=--a，那么a的值是9，b的值也是9；</p>
<script>
    var e = 1;
    var f = 1;
    var g = e--;
    var h = --f;
    console.log('e='+e);//e = 0
    console.log('f='+f);//f = 0
    console.log('g='+g);//g = 1
    console.log('h='+h);//h = 0
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15、逻辑运算符</title>
</head>
<body>
<p>js逻辑运算符有&&（与）、||（或）、！（非）</p>
<p>1、js逻辑运算符 &&（与） 的运算规则是什么？</p>
<p>&&两边的结果都是true，结果才是true，否则是false，两真才真，一假即假</p>
<p>2、js逻辑运算符 ||（或） 的运算规则是什么？</p>
<p>||两边的结果只要有一个true，结果就是true，只有两个都是false，结果才是false</p>
<p>3、js逻辑运算符 !（非） 的运算规则是什么？</p>
<p>!是取反，true变false，false变true</p>
<script>
    var a = true;
    var b= false;
    var c = true;
    var ans1 = a||b;
    var ans2 = a||c;
    var ans3 = b||c;
    var ans4 = a&&b;
    var ans5 = b&&c;
    var ans6 = a&&c;
    var ans7 = !a;
    var ans8 = !b;
    var ans9 = !!a;

    console.log('ans1='+ans1);//true
    console.log('ans2='+ans2);//true
    console.log('ans3='+ans3);//true
    console.log('ans4='+ans4);//false
    console.log('ans5='+ans5);//false
    console.log('ans6='+ans6);//true
    console.log('ans7='+ans7);//false
    console.log('ans8='+ans8);//true
    console.log('ans9='+ans9);//true
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16、非bool值的逻辑运算</title>
</head>
<body>
<p>非boolean值的进行逻辑运算时，会先将其转换为布尔值，然后再运算，并且返回原值（注意返回的不是boolean值）</p>
<p>非bool类型的值在进行逻辑运算的时候，会先转换成boolean类型，再进行运算，最后返回原来的值（也就是非boolean类型的值）</p>
<script>
    console.log("或运算符a||b");
    var a = 0;//true
    var b = 2;
    var ans = a||b;
    console.log(ans);
    console.log("-----------------------")
    console.log("与运算符c&&d")
    var c = 0;//true
    var d = 2;
    var ans1 = c&&d;
    console.log(ans1);

    console.log("与运算符c&&d")
    var c1 = NaN;//true
    var d1 = 2;
    var ans2 = c1&&d1;
    console.log(ans2);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17、赋值运算符</title>
</head>
<body>
<p>js的赋值运算符有=、+=、-=、*=、/=、%=等等，</p>
   <p> 赋值运算符的作用是把等号(=)右边的值赋值给左边的变量，</p>
       <p>复合的赋值运算符比如a+=b就等效于a=a+b，其它类似</p>
<p>a+=b  等效于  a=a+b</p>
<p>a-=b  等效于  a=a-b</p>
<p>a*=b  等效于  a=a*b</p>
<p>a/=b  等效于  a=a/b</p>
<p>a%=b  等效于  a=a%b</p>//取模
<p>a+=b  等效于  a=a+b</p>
<script>
    var a = 5;
    var b = 6;
    var ans = a+b;
    // a += b;
    // a*=b;
    // a/=b;
    a%=b;//5%6=0.....5
    console.log('a='+a);
    console.log('ans=a+b='+ans);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18、比较运算符</title>
</head>
<body>
<p>比较运算符有>、>=、<、<=等，在比较的时候，关系成立返回true，否则返回false</p>
<p>js中两个不同类型的变量在进行比较时，会先进行类型转换，然后再比较</p>
<p>比较运算符在比较的时候，如果这个比较运算符成立，就返回true，否则返回false</p>
<p>>:大于</p>
<p>>=:大于等于</p>
<p><：小于</p>
<p><=：小于等于</p>
<script>
    var ans = 5>5;
    console.log('5>5:'+ans);
    var ans1 = 5<5;
    console.log('5<5:'+ans1);
    var ans2 = 5>=5;
    console.log('5>=5:'+ans2);
    var ans3 = 5<=5;
    console.log('5<=5:'+ans3);
</script>
<p>如果是不同类型的值比较</p>
<p>不同类型的值在比较的时候会走动转换成一样的类型，然后再进行比较</p>
<SCRIPT>
    console.log('如果是不同类型的值比较');
    var ans4 = '5'>=5;
    console.log("'5'>=5:"+ans4);
    var ans5 = true<5;
    console.log("true<5:"+ans5);
    var ans6 = true>='';
    console.log("true>='':"+ans6);
</SCRIPT>
<p></p>
<p></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19、相等运算符</title>
</head>
<body>
<p>相等运算符有==、===、!=、!==，相等运算符也是比较运算符的一种</p>
<p>满足关系返回true，不满足返回false</p>
<p>=:赋值号</p>
<p>==：等于</p>
<p>===：全等（同时满足值和类型必须相等。会先比较类型，如果类型不一样，就直接返回false；如果类型一样，比较值相等不相等，如果值相等返回tru，否则false）</p>
<p>！=：不等于</p>
<p>!==：不全等(只要值和类型有一个不相等，就返回false)</p>
<p>1、相等运算符中的==（等于）和===（全等）的区别是什么？</p>
<p> ==（等于）：如果类型不同，会先将类型转换成一样再比较，比如 false==0就成立</p>
<p> ===（全等）：类型和值都一样才成立，比如 false===0就不成立</p>
<script>
    var ans1 =5==4;
    console.log("5==4:"+ans1)
    var ans2 =5=='5';
    console.log("5=='5':"+ans2)
    var ans3 =5!=5;
    console.log("5!=5:"+ans3)
    var ans4 =5===5
    console.log("5===5:"+ans4)
    var ans5 =5==='5'
    console.log("5==='5':"+ans5)
    var ans6 =5!=='5'
    console.log("5!=='5':"+ans6)
    var ans7 =5!==5
    console.log("5!==5:"+ans7)
</script>
<p>比较运算符在比较浅，如果比较的类型不一样，会先把类型转换成一样再做比较</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20、字符串比较</title>
</head>
<body>
<p>字符串在比较的时候，是一位一位的比较的，每一位的比较都是通过字符的unicode编码来比较，</p>
    <p>比如str1='abc'和str2='adc'比较，先比较两个'a'的unicode编码，发现一样，然后再比较第二位，以此类推</p>
<p>1、字符串str1='abc'和str2='adc'在js中如何比较大小？</p>
<p>先比较两个'a'的unicode编码，发现一样，然后再比较第二位，str1的第二位'b'的unicode编码小于str2的第二位'd'的unicode的编码，所以str2比str1大</p>
<p>-------------------------------------------------</p>
<p>如果比较运算符两边都是运算符，就要按照字符串的比较规则来比较</p>
<p>字符串的比较规则就是逐位进行比较，比较的时字符串对应的unicode的编码</p>
<p>解决两个数字字符串的比较情况：将某一个字符串转换成数值类型</p>
<p></p>
<script>
    var a1 = '123';
    var b1 = 5;
    var ans1 = '123'>'5';
    var ans2 = '123'>+'5';
    var ans3 = 'A'>'a';
    console.log('ans1='+ans1);
    console.log('ans2='+ans2);
    console.log('ans3='+ans3);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js运算符的优先级</title>
</head>
<body>
<p>js中的运算符像数学中的运算符一样有优先级，比如先乘除后加减，这些优先级不用记，我们可以用小括号()来调整优先级</p>
<p>优先级别不用记，百度就有</p>
<script>
    var ans1 = 1+2+3-5*6/2;
    console.log('ans1='+ans1);
    var ans2 = (1+2)*3/4-5;
    console.log('ans2='+ans2);
    var ans3 = 1||2&&5;
    console.log('ans3='+ans3);

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择结构（if）</title>
</head>
<body>
<p></p>
<p></p>
<script>
    console.log('单分支的情况：if(条件语句){ 语句块1 }：当条件为 true 时，执行 语句块1。')
    var zhongjiang = true;
    if(zhongjiang){
        alert('开心😊')
    }

    console.log('双分支的情况：if(条件语句){ 语句块1 }else{ 语句块2 }：当条件为 true 时，执行 语句块1，否则执行 语句块2。')
    var isRain = false;
    if(isRain){
        alert('出门');
        console.log('出门')
    }else {
        alert('不出门');
        console.log('不出门')
    }
    console.log('if(条件1){ 语句块1 }else if(条件2){ 语句块2 }else{ 语句块3 }：当条件1为 true 时，执行 语句块1，当条件1不成立且条件2成立的时候，执行 语句块2，否则执行 语句块3')
    time=10;
    if(time<12&&time>6){
        document.write("<b>现在是上午时间</b>");
    }else if(time>12&&time<18){
        document.write("<b>现在是下午时间</b>");
    }else {
        document.write("<b>现在是晚上时间</b>");
    }
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p><b>1、js中的prompt函数的作用是什么？</b></p>
    <p>rompt()方法用于显示 可提示用户进行输入的 对话框，用户输入的值是函数的返回值，例如 var year=prompt();</p>
<script>
    var year = prompt('请输入年份：');
    if((year%4==0&&year%100!=0)||year%400==0){
        document.write(year+'是闰年');

    }else {
        alert(year+'不是闰年');
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件运算符</title>
</head>
<body>
<p>三元运算符</p>
<p>条件运算符的基本结构是 表达式?语句1:语句2 ，</p>
<p>表示如果表达式的值为true，执行语句1，否则执行语句2，相当于if-else结构的缩写，</p>
<p>例如a > b ? alert("a大"):alert("b大");</p>
<p>1、用条件表达式求a和b中的较大值的实例？</p>
 <p>   var max = a > b ? a : b;</p>
<p></p>
<script>
    var year = prompt('请输入年份,以判断是否是闰年：');
    (year%4==0&&year%100!=0)||year%400==0?document.write(year+'是闰年'):alert(year+'不是闰年')
    //求两个数中的最大值
    var a1 = 33;
    var b1 = 22;
    var max = a1>b1?a1:b1;
    alert('max='+max);

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch选择结构</title>
</head>
<body>
<p>每个case后面不要忘记写break</p>
<script>
    // 输入月份返回每个月有多少天
    var month=7;
    switch (month){
        case 1:
            console.log('一月有31天');
            break;//break不能忘记写
        case 2:
            console.log('二月有28天');
            break;
        case 3:
            console.log('三月有31天');
            break;
        case 4:
            console.log('四月有30天');
            break;
            default:
                console.log('其他情况')
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while循环结构</title>
</head>
<body>
<div>
    <p>循环表示重复的执行，while循环的语法是while(条件表达式){代码块1}：表示当满足 条件表达式 的时候，会一直执行 代码块1</p>
    <p><b>1、常见的循环有哪几种？</b></p>
    <p>while循环，do-while循环（也是while循环的一种），for循环 等</p>
    <p><b>2、死循环是什么？</b></p>
    <p>在编程中,一个无法靠自身的控制终止的循环称为“死循环”。在循环中，如果 条件表达式 一直成立，循环会一直执行，永远停不下来。我们在编码中要根据情况避免死循环。</p>
    <p>比如while(true){}就是一个死循环</p>
    <p><b>3、循环中的break语句的作用是什么？</b></p>
    <p>终止循环</p>
    <p><b>4、循环里面特别值得注意的点？</b></p>
    <p>根据情况，一般赋初值的语句在循环体外，因为循环体内的代码会被重复执行，如果赋初值在循环体内，那么每次循环都会赋初值</p>
    <p><b>5、循环中的两个关键点？</b></p>
    <p>1、循环条件（循环变量）；2、循环的终止条件</p>
    <p>循环的执行过程<br>
       1、首先是给循环变化赋初值<br>
        2、判断循环变量是否满足条件（判断条件语句是否为真）<br>
        3、如果条件语句为真，我们就执行 循环中的 代码<br>
        4、循环变量的变化（一般是递增或者递减）<br>
        2-3是一直重复执行的</p>
</div>
<script>
    var a1 = 10;
    document.write('1'+'<br>');
    document.write('2'+'<br>');
    document.write('3'+'<br>');
    document.write('4'+'<br>');
    document.write('5'+'<br>');
</script>
<script>
    var a2 = 1;
    while(a2<=10){
        document.write(a2+'<br>');
        a2++;
    }
    var a3 = 10;
    while(a3>=1){
        document.write(a3+'<br>');
        a3--;
    }
    var a4 = 10;
    while(true){
        document.write('第'+a4+'个'+'<br>');
        a4--;
        if(a4<=0){
            break;
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while循环的小实例</title>
</head>
<body>
<p>投资利润每年为10%，问几年可以让1000块钱变成10000块，</p>
<p>所以我们的 循环条件就是 money<10000，</p>
<p>循环体里面的内容就是每年发送的内容，钱增加：money=money*1.1; 年增加：year++;</p>
<script>
    var money = 10000;
    var year = 1;
    while(money<15000){
        money = money*1.03;
        year++;
    }
    alert('一共需要'+year+'年，可以让1000块编程10000')
    var m = 10;
    var zhou = 1;
    while(zhou<=52){
        m = m+10*zhou;
        zhou++;
    }
    alert('一年可以攒'+m)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>do-while循环</title>
</head>
<body>
<p>do-while循环表示先执行后判断的循环，do里面写循环体，while后面写循环条件</p>
<p>do-while循环语法：</p>
<p>
    do{<br>
    循环体的内容<br>
    }while();<br>
</p>
<script>
    console.log('这是while循环');
    var i = 1;
    while(i<=10){
        console.log(i);
        i++;
    }
</script>
<script>
    console.log('这是do-while循环');
    var a = 11;
    do{
        console.log(a);
        a++;
    }while (a<=20);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for 循环</title>
</head>
<body>
<p>for循环和while循环的原理是一模一样的，只是相对于while把 循环中重要的三个语句的位置固定了，</p>
for循环的基本语法：<br>
for(初始化循环变量;循环条件;循环变量的变化){<br>
    循环中的代码 <br>
}</p>
<p><b>1、for循环中的初始化语句会执行几次？</b></p>
<p> <b style="color:blue;">一次</b>：for循环中的初始化语句会在循环最开始的时候执行1次，后面就不执行了</p>
<p><b>for循环的执行过程:</b><br>
    1、初始化循环变量<br>
    2、用循环变量和循环条件进行判断<br>
    3、如果为真，就执行循环中的代码，如果为假，就直接退出循环<br>
    4、循环中的代码执行完之后，就对循环变量 进行变化<br>
    2,3,4三个步骤只要满足循环条件，就会一直执行 <br>
    初始化循环变量 这个语句只执行了一次</p><br>
<script>
    console.log('这是while循环');
    //1、初始化循环变量
    var i = 1;
    //2、循环条件
    while(i<=10){
        console.log(i);//要执行的代码
        i++;//3、循环变量的变化
    }
    console.log('这是for循环');

    for(var j = 0;j<=10;j++){
        console.log(j);//要执行的代码
    }
    console.log('这是for循环的死循环');

    for(var k = 0;k<=10;k++){
        console.log(k);//要执行的代码
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for 循环练习1</title>
</head>
<body>
<p>打印1-100里面所有偶数的和</p>
<script>
    var a,sum=0;
    for(a=1;a<=100;a++){
        if(a%2==0){
            console.log(a);
            sum +=a;
        }
    }
    console.log('1-100中所有偶数的和是：'+sum);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环练习2（水仙花数）</title>
</head>
<body>
<p>题目：输出所有的“水仙花数”，所谓的“水仙花数”是指一个三位数其各位数字的立方和等于该数本身，例如153是“水仙花数”，因为：153 = 1^3 + 5^3 + 3^3。</p>
<p>1、这是一个三位数，范围100-999</p>
<p>2、求一个数各个数上的数字 xyz=153，153/100=1.53,x=parseInt(153/100), y=parseInt(153%100/10),z=parseInt(153%10)  </p>
<p>3、求一个数的立方和i*i*i</p>
<script>
    for(var i=100;i<=999;i++){
        x=parseInt(i/100);
        y=parseInt(i%100/10);
        z=parseInt(i%10);
        if(i==x*x*x+y*y*y+z*z*z){
            console.log('水仙花数有：'+i);
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环嵌套循环</title>
</head>
<body>
<p>嵌套循环也就是循环里面再套循环，比如for循环里面再套一个for循环，用于解决一些更加复杂的场景</p>
<p>需求：<br>
*<br>
**<br>
***<br>
****<br>
*****<br>
******<br>
******<br>
*****<br>
****<br>
***<br>
**<br>
*<br>
</p>
<p>简化问题：<br>
*******<br>
*******<br>
*******<br>
*******<br>
*******<br>
*******<br>
*******</p>
<p>原理：
i=0
i+1=1

i=1
i<5
j=0
j=1
j=2
j=3
j=4
j=5
j=6
</p>
<script>
    document.write('现在来实现一下上三角：<br>')
    //控制行数
    for(var i=0;i<=6;i++){
        //控制*个数
        for(var j=1;j<=i+1;j++){
            document.write('*');
        }
        document.write('<br>')
    }
    document.write('现在来实现一下下三角：<br>')
    for(var k=0;k<=6;k++){
        //控制*个数
        for(var l=0;l<=6-k;l++){
            document.write('*');
        }
        document.write('<br>')
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印99乘法表</title>
    <style>
        span{
            display: inline-block;
            width: 100px;
            color: cornflowerblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<script>
    document.write('现在来实现一下99乘法表：<br>')
    //控制行数
    for(var i=0;i<=9;i++){
        //控制*个数
        for(var j=1;j<i+1;j++){
            document.write('<span>'+i+'*'+j+'='+i*j+'&nbsp;&nbsp;&nbsp;'+'</span>');
        }
        document.write('<br>')
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>break和continue</title>
</head>
<body>
<p>break的作用是终止本轮循环，continue的作用是终止本次循环</p>
<p>可以用label来终止掉指定的循环 <br>
    格式<br>
    label名:<br>
    break时候的格式：<br>
    break label名;</p>
<script>
    console.log('现在是测试break');
    for(var i=1;i<=5;i++){
        if(i==2) break;
        console.log(i);
    }
    console.log('现在是测试continue');
    for(var i=1;i<=5;i++){
        if(i==2) continue;
        console.log(i);
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>35.对象介绍</title>
</head>
<body>
<p>五种基本的数据类型
Number 数字
String 字符串
Boolean 布尔值
Null 空值
Undefined 未定义的</p>
<p>复杂的数据类型：Object 对象</p>
<p>对象：容器：这个容器里面可以装各种数据类型，并且可以把他们弄成一个整体</p>
<p>在js中，除了五种基本的数据类型，其它都是对象</p>
<p>js对象分类：①内建对象：内部已经创建好的对象，es</p>
es里面已经创建好的对象，所有的es的实现都可以使用的对象<br>
比如说：Math，Number,String,Function....<br>
②宿主对象：表示js运行环境提供的对象，浏览器呀<br>
比如console，document,window等等<br>
③自定义对象：我们自己定义的对象<br>
<script>
    var a = Math.sqrt(9);
    window.alert(a);
    var human= new Object();
    human.name='zhangsan';
    human.age = 18;
    human.sex = '男'
    console.log(human);

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title36.对象的基本操作</title>
</head>
<body>
<p>对象的基本操作 就是创建对象（ 对象名=new Object() ），<br>
    操作对象的属性（增：对象名.属性名=属性值； 删：delete 对象名.属性名； 改：对象名.属性名=新属性值； 查：对象名.属性名；）</p>
<p>1、对象属性的基本操作有哪些？<br>
    增：对象名.属性名=属性值(human.name='zhangsan';)； 删：delete 对象名.属性名； 改：对象名.属性名=新属性值； 查：对象名.属性名；</p>
<p>注意：访问对象没有的属性不会报错，会直接返回undefined
    对象名=new Object(); 比如 var human=new Object();</p>
<p>3、如何删除一个对象的属性值？<br>
    delete 对象名.属性名。 比如：delete human.gender;</p>
<p>4、访问对象没有的属性，会发生什么？<br>
    访问对象没有的属性，不会报错，会直接返回undefined</p>
<p>创建对象：  对象名=new Object()</p>
<script>
    var a = Math.sqrt(9);
    window.alert(a);
    var human= new Object();
    human.name='zhangsan';
    human.age = 18;
    human.age = 20;
    human.sex = '男'
    human.address = '山东'
    delete human.sex;
    human.sex = 'nv';

    console.log(human);
    console.log('human.name:'+human.name);
    console.log(human.age);
    console.log('human.sex:'+human.sex);
    console.log(typeof(human));

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>37、操作对象属性的两种方式</title>
</head>
<body>
<p><b>点号：</b>对象可以通过.号来操作属性</p>
<p><b>1、js中访问对象属性两种方法的区别（一种是用点: 对象.属性名，另一种是用中括号[]: 对象[属性名]）？</b></p>
<p>变量 和 特殊属性名：对象[属性名]的方式中 属性名可以是变量，比如human[a]，也可以是一些特殊的属性名，比如纯数字，比如human[123]</p>
<p>1.对象名.属性名　　　　对象名.方法名()</p>
<p><b>2、如何判断一个 属性是否在一个对象中？</b></p>
<p> in 运算符：语法是 '属性名' in 对象，如果 属性名在对象里面，就返回true，否则返回false，例如 console.log('name' in zhubajie);</p>
<p><b>中括号[]：2.对象名["属性名"]　　　对象名["方法名"]()</b>(中括号可以操作 特殊的属性名 比如：human[123] = 'aaa';)</p>
<p>中括号一个好用的功能：中括号里的属性名可以是一个变量</p>
<p><b>对象里面套对象:</b></p>
<p>对象就是一个容器：这个容器可以装其他任意的数据类型</p>
<p>对象里面还可以是一个对象</p>
<p>容器里面也可以放一个容器</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script>
    // 新建一个对象
    var human = new Object();
    //对象名。属性名=属性值
    human.name = '周一';
    human.age = 56;
    human[123] = 'aaa';
    console.log(human);
    console.log(human[123]);
    console.log('----------------------------------');
    var a = 123;
    console.log('human[a]:'+human[a]);
    console.log('----------------------------------');
    var human1 = new Object();
    human1.name = '周天';
    human1.age = 12;
    human.huamn1 = human1;
    console.log(human.huamn1);
    console.log(human.huamn1.age);
    console.log('----------------------------------');
    var human2 = new Object();
    human2.age = 3;
    human2.name = '小东西';
    human1.child = human2;
    console.log(human.huamn1.child);
    console.log(human.huamn1.child.age);



</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>38、对象存储</title>
</head>
<body>
<p>基本的数据类型有：Number、String、Boolean、Null、Undefined</p>
<p>引用数据类型(栈空间存堆空间地址，堆空间存放值)：对象</p>
<p>基本数据类型在进行数据比较的时候，是直接比较“值”</p>
<p>引用数据类型再进行比较的时候，是比较他们的地址，就算他们的值完全一样，地址不一样，相等性比较的结果事false</p>
<p>无论是基本数据类型还是引用数据类型，都是比较的栈空间的值，而不是堆空间的值，对引用数据类型而言，栈空间的值 就是 堆空间的地址</p>
<script>
    var a = 124;
    var b=a;
    a++;
    console.log('a='+a);
    console.log('b='+b);
    var obj1 = new Object();
    obj1.name = '张三';
    var obj2 = obj1;
    obj1.name = '李四';
    console.log('这里是obj1');
    console.log(obj1);
    console.log(obj2);
    console.log('---------基本数据比较----------');
    var aa = 12;
    var bb = 13;
    console.log(aa==bb);
    console.log('---------引用数据比较----------');
    var obj3 = new Object();
    obj3.name = '张三啊';
    var obj4 = new Object();
    obj4.name = '张三啊';
    console.log(obj3);
    console.log(obj4);
    console.log(obj3==obj4);
</script>
<p>js中的对象里面的内容存储在堆空间，对象的变量名和堆空间的地址存储在栈空间，通过地址可以找到对象的内容，所以 对象是引用数据类型。 基本数据类型无论是变量名还是值都存在栈空间。</p>
<p>1、基本数据类型和引用数据类型的比较规则？</p>
<p>当比较两个基本数据类型的值时，就是比较值。而比较两个引用数据类型时，它是比较的对象的内存地址，如果两个对象是一摸一样的，但是地址不同，它也会返回false。</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>39.对象的json写法</title>
</head>
<body>
<p>创建对象另一种方式：var zhubajie = {};</p>
<P>对象的json写法：javascript object notation(javascript 对象 符号)</P>
<p>作用：通信（后端和前端的通信，数据交互）</p>
<p>相比于xml，json用的比较多</p>
<p>json不仅在js中有，在java，php等语言都有</p>
<p>json语法:</p>
<p>{属性名：属性值,属性名：属性值,属性名：属性值,属性名：属性值,属性名：属性值,属性名：属性值}</p>
<p>属性名：属性值（键值对（用逗号分隔开））</p>
<p>对象用大括号{}表示</p>
<p style="color: red">注意：</p>
<p>1、属性名加不加引号都可以</p>
<script>
    //创建对象
    var zhubajie = {};
    zhubajie.name = '猪八戒';
    zhubajie.age = 999;
    console.log(zhubajie);

    var sunwukong = {
        name:'孙悟空',
        age:777,
        pet:{
            name:'猪八戒',
            age:999
        }
    };
    console.log(sunwukong);
</script>
<div style="color:blue;">
    <p>对象的json写法就是用符号来表示js中的对象，用大括号{}表示对象，属性用键值对表示，<br>
        属性名和属性值之间是冒号，不同的键值对之间是逗号，例如{name: "猪八戒", age: 999}</p>
    <p>1、json是什么？</p>
    <p> json是javascript object notation(javascript对象符号)的缩写，表示用符号来表示js中的对象，主要用于 前后台的数据交互</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40.对象的小实例</title>
</head>
<body>
<p>大雄，学号o01 ，性别男，语文成绩30分﹐数学成绩30分<br>
    静香，学号o02 ,|性别女﹐语文成绩90分,数学成绩90分<br>
    哆啦A梦，学号003,性别男,语文成绩100分,数学成绩80分<br>
    表示上述结构,并求出谁的语文成绩最好
</p>
<script>
    var daXiong={
        name:'大雄',
        gender:'男',
        number:'001',
        score:{
            chinese:30,
            math:30
        }
    };
    var jingXiang={
        name:'静香',
        gender:'女',
        number:'002',
        score:{
            chinese:90,
            math:90
        }
    };
    var Ameng={
        name:'哆啦A梦',
        gender:'男',
        number:'003',
        score:{
            chinese:100,
            math:80
        }
    }
    if(daXiong.score.chinese>=jingXiang.score.chinese){
        //大雄语文成绩比静香语文成绩好，大雄与哆啦A梦比
        if(daXiong.score.chinese>=Ameng.score.chinese){
            console.log(daXiong.name+'的语文成绩比较好');
        }else {
            console.log(Ameng.name+'的语文成绩比较好');
        }
    }else{
        //静香语文成绩比大雄语文成绩好，静香与哆啦A梦比
        if(jingXiang.score.chinese>=Ameng.score.chinese){
            console.log(jingXiang.name+'的语文成绩比较好');
        }else{
            console.log(Ameng.name+'的语文成绩比较好');
        }
    }
    if(daXiong.score.math>=jingXiang.score.math){
        //大雄语文成绩比静香语文成绩好，大雄与哆啦A梦比
        if(daXiong.score.math>=Ameng.score.math){
            console.log(daXiong.name+'的数学成绩比较好');
        }else {
            console.log(Ameng.name+'的数学成绩比较好');
        }
    }else{
        //静香语文成绩比大雄语文成绩好，静香与哆啦A梦比
        if(jingXiang.score.math>=Ameng.score.math){
            console.log(jingXiang.name+'的数学成绩比较好');
        }else{
            console.log(Ameng.name+'的数学成绩比较好');
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>41.函数的介绍</title>
</head>
<body>
<p>函数的语法</p>
<p>function 函数名（[参数1，参数2，参数3....]）{<br>
        函数体：完成需要功能的函数代码<br>
}</p>
<p>函数的使用：函数名（[参数1，参数2，参数3...]）</p>
<p>函数的作用：封装代码（功能），便于代码的复用，提高开发的效率，减少错误</p>
<p>需求：求三个数里面的最小的那个数</p>
<script>
    var a = 13;
    var b = 5;
    var c = 39;
    // if(a<b){
    //     if(a<=c){
    //         console.log(a);
    //     }else{
    //         console.log(c);
    //     }
    // }else {
    //     if(b<=c){
    //         console.log(b);
    //     }else {
    //         console.log(c);
    //     }
    // }
    function minOfThree(x1,x2,x3){
        if(x1<x2){
            if(x1<=x3){
                console.log(x1);
            }else{
                console.log(x3);
            }
        }else {
            if(x2<=x3){
                console.log(x2);
            }else {
                console.log(x3);
            }
        }
    }
    minOfThree(1,2,3);
</script>
<p>求e、f、g三个数里面最小的那个数</p>
<script>
    var e = -561, f = -5,g = 28;
    // if(e<f){
    //     if(e<=g){
    //         console.log(e);
    //     }else{
    //         console.log(g);
    //     }
    // }else {
    //     if(f<=c){
    //         console.log(f);
    //     }else {
    //         console.log(g);
    //     }
    // }
    minOfThree(e,f,g);
</script>
<script>
    function hello(){
        console.log('函数初体验！！！！！')
        console.log('hello!!!!')

    } hello();hello();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的参数</title>
</head>
<body>
<p>实参：也就是使用时候传递给函数的实际的参数</p>
<p>形参：形参上面的参数</p>
<p>形参本质上就是在函数里面定义的变量</p>
<p>在函数调用的过程中，参数传递的实质就是：实参会一一对应的传递给形参</p>
<p>在传递参数的过程中，多余的参数会被舍弃</p>
<p>形参如果没有接收到实参传递过来的值的情况下，形参的值是undefined，相当于定义了变量没有被赋值</p>
<p style="color: blue">函数的参数分为实参和形参，实参就是调用函数时候传递的参数，形参就是函数中接收实参的参数，形参和实参是一一对应的，用于接收实参的值</p>
<p style="color: blue">1、形参如果没有接收到实参传递过来的值，形参的值是什么？</p>
<p style="color: blue">如果形参没有接收到值，形参的值是undefined，相当于定义了没有被赋值</p>
<script>
    var a = 13;
    var b = 5;
    var c = 39;
    function minOfThree(x1,x2,x3){
        console.log('x1='+x1);
        console.log('x2='+x2);
        console.log('x3='+x3);
        if(x1<x2){
            if(x1<=x3){
                console.log(x1);
            }else{
                console.log(x3);
            }
        }else {
            if(x2<=x3){
                console.log(x2);
            }else {
                console.log(x3);
            }
        }
    }
    minOfThree(1,2,3);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>43.函数的返回值</title>
</head>
<body>
<p>需求：打印两个数和的函数</p>
<p>函数里面的内容只有在调用函数的时候才会被执行</p>
<p>如何在函数里面向函数外面返回值?</p>
<p>return 表达式或者变量;</p>
<p>怎么接受函数里面返回的值？？</p>
<p>可以直接赋值给一个变量</p>
<p style="color: red">注意：return后面的语句是不会被执行的，return后面不接值会返回undefined</p>
<p style="color: red">函数里面不写return语句，也是会默认返回undefined</p>
<p style="color: navy">可以用return关键字在函数里面向函数外面返回值，可以直接将函数调用赋值给变量来接收函数的返回值（函数的执行结果）。</p>
<p style="color: navy">1、如何在函数里面向函数外面返回值？<br>
    使用return关键词，基本语法是 return 表达式或者变量;</p>
<p style="color: navy">2、怎么接收函数里面返回的值（函数的执行结果）？<br>
    可以直接赋值给一个变量，比如 var m=sum(3,5);</p>
<p style="color: navy">3、使用return返回函数值的注意点？<br>
    1、return 后面的语句是不会被执行的<br>
    2、return 后面如果不接值，会返回undefined，函数里面不写return语句，也是默认会返回undefined</p>
<p style="color: navy"></p>
<script>
    console.log('需求：写一个打印两个数和的函数')
    function sum1(a,b){
        console.log(a+b);
    }
    sum1(3.5,9);
    console.log('需求：写一个返回两个数和的函数')
    function sum2(c,d){
        // console.log(a+b);
        return c+d;
        console.log('我是return后面的语句')
    }

    var m= sum2(3.5,9);
    console.log('m='+m)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>44.函数小练习</title>
</head>
<body>
<p>练习2：写一个计算两点直线距离的函数</p>
<script>
    function mianji(r){
        return 3.14159265354*r*r;
    }
    console.log(mianji(10));
    function distance(x1,y1,x2,y2){
       return  Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))
    }
    console.log(distance(1,1,2,2));
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>45.函数也是对象</title>
</head>
<body>
<p>函数也是对象，对象是一个容器，所以函数也有对象容器的特点</p>
<p>直接打印函数得到的是函数代码</p>
<p>函数这个对象，默认属性name，属性值为函数名</p>
<p>函数就是对象，有对象的一切特点，只不过函数是功能更加强大的对象，函数里面可以封装代码</p>
<p>我们能不能用创建对象的方式来创建函数?</p>
<p>var fun1=new function ("console.log('欢迎来到js的世界！Yeah！12345')");</p>
<p>怎么调用</p>

<p style="color:blue;">1、js中创建函数的三种方式？<br>
    (1)用函数声明的方式来创建函数<br>
    function hello(){<br>
    console.log('欢迎来到js的世界！Yeah！')<br>
    }<br>
    hello();<br>
    (2)用创建对象的方式来创建函数<br>
    var fun1=new Function ("console.log('欢迎来到js的世界！Yeah！12345我是2号');");<br>
    fun1();<br>
    (3)用赋值表达式的方式来创建函数<br>
    var fun2=function hello1(){<br>
    console.log('欢迎来到js的世界3333333333333')<br>
    };<br>
    fun2();<br></p>
<script>
    //1、用函数声明的方式来创建函数
    function hello(){
        console.log('欢迎来到js的世界！Yeah！')
    }
    hello();
    hello.name = '林黛玉';
    hello.age = 18;
    console.log(hello.age)
    //2、用创建对象的方式来创建函数
    var fun1=new Function ("console.log('欢迎来到js的世界！Yeah！12345我是2号');");
    fun1();
    fun1.name22 = '贾宝玉';
    console.log(fun1.name22);
    //3.用赋值表达式的方式来创建函数
    var fun2=function hello1(){
        console.log('欢迎来到js的世界3333333333333')
    };
    fun2();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>46、对象里的函数</title>
</head>
<body>
<p>对象里的函数表示对象的行为，被称为方法，比如 猪八戒这个对象调戏嫦娥的行为</p>
<p>编程是为生活来服务的，是用来解决生活中的问题的</p>
<p>编程里面的对象就是生活中的对象的抽象</p>
<p>生活中的对象不仅有属性，还有行为</p>
<p>---------------函数和方法的区别-------------</p>
<p>在js中，我们如何表示一个对象的行为？</p>
<p>用函数，叫方法</p>
<p>对象里面的函数可以用来表示对象的行为</p>
<p>函数和方法在js里面是一回儿事，都是表示封装代码（功能），便于代码的复用</p>
<p>在对象的外面，和对象没有产生什么瓜葛额情况下我们就说成函数</p>
<p>&nbsp;这个函数在对象里面，赋值给了对象属性，把这个函数称为方法，这个方法就是表述对象的行为</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script>
    //普通对象写法（包含对象的属性和方法）
    var zhubajie = new Object();
    zhubajie.name = '猪八戒';
    zhubajie.age = 18;
    zhubajie.change= function (){
        console.log('我是猪八戒，我喜欢嫦娥，然后被贬下凡间变成了猪猪！！');
    };
    zhubajie.change();
    zhubajie.run = function(){
        console.log('随风奔跑自由式方向，追逐雷和闪电的力量，我在奔跑ε=ε=ε=(~￣▽￣)~');
    };
    zhubajie.run();
    //json
    var zhubajie1 = {
        name: '猪八戒1',
        age: 999,
        change:function () {
            console.log('我是猪八戒，我喜欢嫦娥，然后被贬下凡间变成了猪猪1111111111111111111111！！');
        },
        run:function(){
            console.log('随风奔跑自由式方向，追逐雷和闪电的力量，我在奔跑ε=ε=ε=(~￣▽￣)~1111111111112222');
        },
    };
    zhubajie1.change();
    zhubajie1.run();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>47、遍历对象中的所有属性(要重来一遍！！！！！！！！！！)</title>
</head>
<body>
<p>怎么知道别人写的对象里面有哪些属性和方法 </p>
<p>for (var i in zhubajie1){<br>
    console.log(i);<br>
    console.log(zhubajie1[i]);<br>
    }</p>
<p>语法：for(var 变量名 in 对象){<br>

}</p>
<p>对象属性名：变量名i</p>
<p>对象属性名对应的属性值：对象名[变量名]</p>
<p></p>
<p></p>
<script>
    //json
    var zhubajie1 = {
        name: '猪八戒1',
        age: 999,
        change:function () {
            console.log('我是猪八戒，我喜欢嫦娥，然后被贬下凡间变成了猪猪！！');
        },
        run:function(){
            console.log('随风奔跑自由式方向，追逐雷和闪电的力量，我在奔跑ε=ε=ε=(~￣▽￣)~');
        },
    };
    zhubajie1.change();
    zhubajie1.run();
    for (var i in zhubajie1){
        console.log(i);
        console.log(zhubajie1[i]);

    }
    for (var j in console){
        console.log(j);
        console.log(console[j]);

    }
    console.warn('这是一个警告信息');
    console.warn('这是我们自己打印的警告信息2222');
    console.error('这是一个错误信息');
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48、变量和函数的声明提前</title>
</head>
<body>
<p>变量的声明提前：使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不使用var关键字，则变量不会被声明提前</p>
<p>函数的声明提前：使用函数声明形式创建的函数 function 函数(){}，它会在所有的代码执行之前就被创建，使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用</p>
<p>1、变量的声明提前 是怎么回事？<br>
    变量的声明提前：使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不使用var关键字，则变量不会被声明提前</p>
<p>2、函数的声明提前 是怎么回事？<br>
    函数的声明提前：使用函数声明形式创建的函数 function 函数(){}，它会在所有的代码执行之前就被创建，使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用</p>
<p>3、为什么 使用函数表达式创建的函数，不会被声明提前？<br>
    因为使用var声明的变量会先声明，但是不会被先赋值，执行到赋值代码的时候才会赋值，所以使用函数表达式创建的函数不会被提升声明</p>
<p>4、为什么使用var关键字定义的变量会声明提前，而没有使用var关键字定义的变量不会被声明提前？<br>
    使用var关键字声明的变量，解析器知道这是一个新变量，所以会给你声明提前，防止你在变量声明前使用变量报错。而没有使用var关键字定义的变量，解析器不知道这是一个新变量，所以没办法帮你声明提前。</p>
<p>5、为什么使用 函数声明形式创建的函数 会被声明提前，而使用 函数表达式创建的函数，不会被声明提前？<br>
    因为使用 函数声明形式创建的函数，解析器一眼就知道这是一个函数，为了方便你在函数声明前使用函数，所以帮你函数提前声明了，而使用 函数表达式创建的函数，<br>
    本质上是一个赋值表达式，解析器一开始并不知道这是一个函数，所以没办法帮你 声明提前。</p>
<p>window对象：js里创建好的对象，表示浏览器的一个窗口</p>
<p>在js中，作用域分为全局（全局作用域）和局部（函数作用域）</p>
<p>全局的变量 就表示在script标签里面定义的变量</p>
<p>函数作用域 的变量就是在函数里面定义的变量</p>
<p></p>
<p></p>
<script>
    // 变量的声明提前
    console.log('变量的声明提前');
    var a=10;
    console.log(a);
    b= 111;
    console.log(b);

    // 函数声明提前
    hello();
    console.log('函数的声明提前');
    function hello(){
        console.log('hello world!函数声明提前!')
    }
    hello();
    console.log('这是赋值表达式创建的呢函数');
    console.log(fun1);
    var fun1 = function(){
        console.log('这是赋值表达式创建的呢函数');
    }
    fun1();

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>49、全局作用域</title>
</head>
<body>
<p>1、什么是作用域？<br>
    作用域一般是相对变量而言的，作用域表示变量的作用区域，也就是变量能发挥作用的一个范围</p>
<p>2、作用域分类<br>
    全局作用域：指在全局都能发挥作用的变量,在整个页面上都能发挥作用<br>
    函数作用域：指只能在函数里面发挥作用的变量</p>
<p>3、全局变量:在script标签里面的变量都是全局变量；只要在函数里不用var声明的变量，都是全局变量</p>
<p>函数（局部）变量</p>
<p>在js中，全局变量全部都是window对象的属性，全局的函数都是window对象的方法</p>
<p>全局变量的生命周期：
    和window一样，因为全局变量都是window对象的属性，在页面打开时创建，在页面关闭时销毁
</p>
<p style="color: blue">全局作用域指在全局都能发挥作用的变量，一般在script标签里面的都是全局变量，在函数里面不使用var关键字声明的变量也是全局变量</p>
<p style="color: blue">1、什么是作用域？<br>
    作用域一般是相对变量而言的，作用域表示变量的作用区域，也就是变量能发挥作用的范围</p>
<p style="color: blue">2、js中的作用域分类？<br>
    js中的作用域分为全局作用域（指在全局都能发挥作用的变量）和函数作用域（指只能在函数里面发挥作用的变量）<br>
    全局作用域：指在全局都能发挥作用的变量<br>
    函数作用域：指只能在函数里面发挥作用的变量</p>
<p style="color: blue">3、js中全局变量和函数 与 window对象的关系？<br>
    在js中，全局变量全部都是 window对象的属性，全局的函数全部都是window对象的方法</p>
<p style="color: blue">4、js中全局变量的生命周期？<br>
    全局变量的生命周期和window对象一样，都是 在页面打开时创建，在页面关闭时销毁</p>
<script>
    var a = 10;
    function dun1(){
        var c= 12;
        console.log(c);
    }
    dun1();
</script>
<script>
    console.log(a);
</script>
<a href="javascript:alert(a)">a</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>50、函数作用域</title>
</head>
<body>
<p>函数作用域：指只能在函数里面发挥作用的变量</p>
<p>如何定义一个函数作用域的变量？在函数里面用var关键字声明一个变量</p>
<p style="color:red;">注意：<br>
    在函数中，使用var关键字声明的变量才是函数变量，<br>
    在函数中，没使用var关键字声明的变量是全局变量
</p>
<p style="color: green">推荐：<br>
    在函数里声明变量一般都使用var关键字
</p>
<p>函数变量的生命周期：</p>
<p></p>
<p></p>
<script>
    function fun1(){
        var a = 14;
        b = 3654;
        console.log('函数里a='+a);
        console.log('函数里b='+b);
    }
    fun1();
    console.log('函数外b='+b);
</script>
</body>
</html>

小小小小小H

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS-学习

1、javascript简介<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1、javascript简介</title> <script> alert('欢迎来到js') </script></head><body><p>Ajax基
复制链接

扫一扫