AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript第三课（二）

2023-02-17 94
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript第三课

第一题：数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
    <style>
        *{
            font-size: 47px;
        }
    </style>
</head>
<body>
<h1>值类型(基本类型)：字符串（String）、<br>数字(Number)、<br>布尔(Boolean)、<br>对空（Null）、<br>未定义（Undefined）、<br>Symbol。
    引用数据类型：<br>对象(Object)、<br>数组(Array)、<br>函数(Function)。</h1>
<script>
    var x1=34.00;
    var x2=34;
    var y=123e5;
    var z=123e-5;
    var u=123*567/78^78;
   document.write(u+"<br>");
    document.write(x1 + "<br>");
    document.write(x2 + "<br>");
    document.write(y + "<br>");
    document.write(z + "<br>");
</script>
<br>
<script>
    var i;
    var cars = new Array();
    cars[0] = "Saab";
    cars[1] = "Volvo";
    cars[2] = "BMW";
    cars[3] = "Volvo";
    cars[4] = "hubin";
    cars[5] = "wangping";
    cars[6] = "xiaomi";
    for (i=0;i<cars.length;i++)
    {
        document.write(cars[i] + "<br>");
    }
</script>
<br>
<script>
    var carname1="Volvo XC60";
    var carname2='Volvo XC60';
    var answer1='It\'s alright';
    var answer2="He is called \"Johnny\"";
    var answer3='He is called "Johnny"';
    document.write(carname1 + "<br>");
    document.write(carname2 + "<br>");
    document.write(answer1 + "<br>");
    document.write(answer2 + "<br>");
    document.write(answer3 + "<br>");
</script>
<script>
    var person=
        {
            firstname : "John",
            twoname:"hubin",
            lastname  : "Doe",
            id        :  5566
        };
    document.write(person.firstname + "<br>");
    document.write(person["twoname"] + "<br>");
    document.write(person["lastname"] + "<br>");
    var person;
    var car="Volvo";
    document.write(person + "<br>");
    document.write(car + "<br>");
    var car=null;
    document.write(car + "<br>");
</script>
</body>
</html>

第二题：JavaScript对象的创建

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建对象</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo">1</p>
<p id="demo1">2</p>
<p id="demo2">3</p>
<p id="demo3">3</p>
<p>
    你可以使用 .property 或 ["property"].
</p>
<script>
    var person = {firstName:"John", lastName:"Doe", age:45, eyeColor:"blue"};
    document.getElementById("demo").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁.";
    var person = {firstName:"key", lastName:"Doe", age:32, eyeColor:"blue"};
    document.getElementById("demo1").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁.";
    var person = {firstName:"animal", lastName:"Doe", age:32, eyeColor:"blue"};
    document.getElementById("demo2").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁.";
    var person = {firstName:"animals", lastName:"Does", age:32, eyeColor:"blue"};
    document.getElementById("demo3").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁.";
</script>
</body>
</html>

2ad6c4291c67eb7f2c5d297eb4b4dbe3_b06c5f2e152b41aa859dd7ff228be198.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建对象</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
    var person = {
        firstName: "John",
        lastName: "Doe",
        id: 5566,
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    };
        var person = {
            firstName: "key",
            lastName : "Doe",
            id : 566,
            fullName : function()
            {
                return this.firstName + " " + this.lastName;
            }
    };
    document.getElementById("demo1").innerHTML = "不加括号输出函数表达式："  + person.fullName;
    document.getElementById("demo2").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
    document.getElementById("demo3").innerHTML = "不加括号输出函数表达式："  + person.fullNam;
    document.getElementById("demo4").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>函数</title>
    <style>
        button{
            color: yellow;
            background-color: red;
        }
    </style>
    <script>
        function myFunction()
        {
            alert("Hello World!");
            alert("你好我的世界");
        }
    </script>
</head>
<body>
<button onclick="myFunction()">点我出现Hellow  world</button>
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="my('Harry Potter','Wizard')">点击这个按钮，来调用带参数的函数</button>
<script>
    function my(name,job){
        alert("Welcome " + name + ", the " + job);
    }
</script>
<p>请点击其中的一个按钮，来调用带参数的函数。</p>
<button onclick="myF('Harry Potter','Wizardcctyv')">one</button>
<button onclick="myF('Bob','Builder')">two</button>
<script>
    function myF(name,job)
    {
        alert("Welcome " + name + ", the " + job);
    }
</script>
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demoasd"></p>
<script>
    function mya(a,b,c){
        return a*b/c;
    }
    document.getElementById("demoasd").innerHTML=mya(100,3,2);
   /* document.getElementById("demoasd").innerHTML=mya(100,323,2);*/
</script>
<button onclick="getElementById('de').innerHTML=Date()">现在的时间是?</button>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
<p id="de"></p>
</body>
</html>

第三题：if_else循环

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>if else 循环</title>
  </head>
  <body>
    <script  type="text/javascript" >
            var age =prompt('请输入你的分数');
      if (age>18) {
        alert('adult');
        console.log(age);
      } else{
        alert('teenage');
                console.log(age);
      }
    </script>
    <script  type="text/javascript" >
            var chengji =prompt('请输入你的分数');
      if (chengji>80) {
        alert('A');
      } else{
        alert('B');
      }
    </script>
    <script  type="text/javascript" >
            var chengji =prompt('请输入你的分数');
            if (chengji>100) {
                alert('你的分数大于为一百分');
            } else if(chengji>90) {
                alert('你的分数大于为90分');
            }else if(chengji>80) {
                alert('你的分数大于为80分');
            }else if(chengji>70) {
                    alert('你的分数大于为70分');
            } else if(chengji>60) {
                alert('你的分数大于为70分');
            }
      console.log(chengji)
    </script>
  </body>
</html>

第四题：JavaScript函数

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="demo">prompt方法</div>
    <div id="demo2">计算圆</div>
    <script type="text/javascript">
      function myFuction(){
        var x;
        var person=prompt("请输入你的名字");
        if(person!=null&&person!=" "){
          x="你好呀"+person+",今天又什么感觉吗小明？";
          document.getElementById("demo").innerHTML=x;
        }
      }
      myFuction();
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>图片的转化</title>
  </head>
  <style>
    #image{
      display: block;
      width: 500px;
      height: 180px;
      margin: 10px auto;
    }
    #next{
      margin-left: 350px;
    }
  </style>
  <body>
    <img src="img/img/1.jpg" id="image" />
    <button id="next">next</button>
    <button id="prev">prev</button>
    <script>
      var image = document.getElementById('image');
      var next = document.getElementById("next");
      var prev = document.getElementById('prev');
      var nowIndex = 1;
      var count = 6;
      next.onclick = function(){
      if(nowIndex+1>count){
          nowIndex = 1;
        }else{
          nowIndex++;
        }
        nowIndex = nowIndex+1>count?1:nowIndex+1;
        image.src = "img/img"+nowIndex+".jpg";
      };
      prev.onclick = function(){
        nowIndex = nowIndex<=1?count:nowIndex-1;
      if(nowIndex-1<=0){
        nowIndex = count;
      }else{
        nowIndex--;
      }
        image.src = "img/img/"+nowIndex+".jpg";
      }
    </script>
  </body>
</html>

第五题：图片转的效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 圆的面积</title>
    <style type="text/css">
      *{
        font-size: 30px;
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <p class="n">圆的面积与周长</p>
      <label for="redius">圆的r</label>
      <input type="text"  id="redius"/>
    </div>
    <div class="box2">
      <label for="perimeter">圆的周长</label>
      <input type="text"  id="perimeter"/>
    </div>
    <div class="box3">
      <table>
      <label for="area">圆的面积</label>
      <input type="text"  id="area"/>
      </table>
    </div>
    <script>
      let radius =document.getElementById("redius"),
        perimeter=document.getElementById("perimeter"),
        area=document.getElementById("area");
      radius.oninput=function(){
        let r=radius.value;
        let res_perimeter=Math.PI*2*r;
        let res_area=Math.PI*Math.pow(r,2);
        if(r=='0'){
          perimeter.value='0';
          area.value='0';
        }else{
          perimeter.value=res_perimeter.toString().substr(0,4).concat('0');
          area.value=res_area.toString().substr(0,4).concat('0');
        }
      }
    </script>
  </body>
</html>

第六题：圆的面积

 

第七题：循环语句

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>循环语句</title>
    <style type="text/css">
      .qw{
        color: mediumvioletred;
        font-family: "微软雅黑";
        font-size: 45px;
      }
    </style>
  </head>
  <body>
    <div class="qw"></div>
    <script type="text/javascript" class="qw">
      document.write("AA========while循化=====================","<br/>");
      var i=0;
      while (i<100){
        document.write(i);
        i++;
      }
      document.write("BB====do====while循化=======================","<br/>");
      var  i=0;
      do{
        document.write(i);
        i++;
      }while (i<1000);
      document.write("CC========for循化==============================","<br/>");
      for (var i = 0; i < 2000; i++) {
        document.write(i);
      }
      document.write("=DD=======for in遍历对象属性循化==============================","<br/>");
      obj={
        name:"bobtyuuuuuuuiijgvngngjvhjg",
        age:45,
        gender:"maile"
      };
      for(var x in obj) {
        document.write(obj[x]);
      };
      document.write("EE========for in循化==对象继承属性============================","<br/>");
      for(var key in obj){
        if(obj.hasOwnProperty(key)){
          document.write(key);
        }
      }
      document.write("=FF=======for in循化===遍历数组===========================","<br/>");
      var a=['A7','B8','C9','D5','E7','F5','G6'];
      for(var i in a){
        document.write(i,a[i],"<br>")
      }
    </script>
    <script type="text/javascript">
      try{
        tryStatements
      }catch(exception){
        //TODO handle the exception
        catchStatements
      }
    </script>
  </body>
</html>

 

第八题：数据练习

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      /*
      var uri="my test.asp? name =stalek&car=saab "
      document.write(encodeURI(uri)+"<br />")
      document.write(decodeURI(uri)+"<br />")
      */
      var a1=typeof "john";
      var a2=typeof "3.24567";
      var a3=typeof false;
      var a5=typeof {name:'join',age:67};
      var a6=typeof undefined;
      var a7=typeof null;
      alert(a1);
      alert(a2);
      alert(a3);
      alert(a5);
      alert(a6);
      alert(a7);
      document.write(a);
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .yu{
        color: red;
        font-family: "微软雅黑";
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <p class="yu">Date对象</p>
    <script type="text/javascript">
      var myDate=new Date();
      Date();
      var a = myDate.getYear();
      var a1=myDate.getFullYear();
      var a2 = myDate.getMonth();
      var a3 = myDate.getDate();
      var a4 = myDate.getDay();
      var a5 = myDate.getTime();
      var a6 = myDate.getHours();
      var a7 = myDate.getMinutes();
      var a8 = myDate.getSeconds();
      var a9 = myDate.getMilliseconds();
      var a10 = myDate.toLocaleDateString();
      var a11 = myDate.toISOString();
      var a12=myDate.toGMTString();
    document.write(a+"<br />");
    document.write(a1+"<br />");
    document.write(a2+"<br />");
    document.write(a3+"<br />");
    document.write(a4+"<br />");
    document.write(a5+"<br />");
    document.write(a6+"<br />");
    document.write(a7+"<br />");
    document.write(a8+"<br />");
    document.write(a9+"<br />");
    document.write(a10+"<br />");
    document.write(a11+"<br />");
    document.write(a12+"<br />");
    </script>
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css>">
        *{
            font-size: 30px;
            background-color: #0099FF;
        }
    </style>
<title>猜数游戏</title>
<script type="text/javascript">
var num = Math.floor(Math.random()*50+1); 　//产生1～100之间的随机整数
var num = Math.floor(Math.random()*50+1);
do{
   var guess =parseInt(prompt("下面进行猜数游戏\n请输入1-50之间的整数：",""));
   var he=parseInt(prompt("下面进行猜数游戏\n请输入1-50之间的整数：",""));
   if (guess ==num,he==num){
      alert("^_^ ,恭喜你，猜对了，幸运数字是："+num);
      break;} 
   else
   { if(guess > num ,he>num){
     alert("^_^ ,你猜的数字大了");
     go_on =confirm("是否继续游戏？");
    }
   else{
       alert("^_^ ,你猜的数字小了");
      go_on =confirm("是否继续游戏？");
    }
    }
}while(go_on);
alert("谢谢参与游戏！");
</script>
</head>
<body>
</body>
</html>

练习题老师last

文章标签：
JavaScript
前端开发
t75yjb52rsccc
目录
相关文章
felix@
|
人工智能 前端开发 JavaScript
学习JavaScript笔记
学习JavaScript笔记
felix@
77 0
数据分析螺丝钉
|
5月前
|
SQL 算法 数据挖掘
LeetCode第五题：最大回文子串【5/1000 python】
LeetCode第五题：最大回文子串【5/1000 python】
数据分析螺丝钉
29 0
林中静月下仙
|
存储 缓存 资源调度
Yarn安装与使用详细介绍
Yarn安装与使用详细介绍
林中静月下仙
837 0
Yarn安装与使用详细介绍
timberman666
|
C++
C++程序设计实验1
C++程序设计实验1
timberman666
97 0
林中静月下仙
|
JSON JavaScript 数据格式
Vue系列之十二: 实战快速上手
我们采用实战教学模式并结合ElementUI组件库，将所需知识点应用到实际中，以最快速度带领大家掌握Vue的使用；
林中静月下仙
146 0
Vue系列之十二: 实战快速上手
zlt2000
|
JSON 前端开发 安全
前后端分离基于Oauth2的SSO单点登录怎样做？
单点登录顾名思义就是在多个应用系统中，只需要登录一次，就可以访问其他相互信任的应用系统，免除多次登录的烦恼；本文主要介绍跨域间的前后端分离项目怎样实现单点登录，并且与非前后端分离的差异在那里？需要解决什么问题？
zlt2000
4484 0
powdba
|
算法 关系型数据库 MySQL
MySQL离线分析工具innochecksum
介绍 innochecksum打印InnoDB文件的校验和。此工具读取InnoDB表空间文件，计算每个页面的校验和，将计算的校验和与存储的校验和进行比较，并报告不匹配，这表明页面已损坏。它最初是为了在停电后加快验证表空间文件的完整性而开发的，但也可以在文件复制后使用。
powdba
2535 0
技术小胖子
WCF分布式开发常见错误(5)Could not find a base address that matches scheme
技术小胖子
1398 0
技术小美
|
Windows
Mac下Outlook如何做Archive
技术小美
1720 0
余二五
lr之RTE脚本（telnet方式访问水木清华）
余二五
1046 0