AI 助理
备案控制台
开发者社区 云计算 文章 正文

JavaScrip 第二课。回顾

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

观看PPT的内容

运用数值型完成+ - * / % 的运算

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
<h1>算数运算符: 2:2+2 2-2 2*2 2/2 2%2</h1><br>
<h1>前置和后置的++与--</h1>
<h1>逻辑运算符 boolean 与或非</h1>
<script>
    console.log(2+2);
    console.log(2/2);
    console.log(2*2);
    console.log(2-2);
    console.log(8%2);
//    浮点数2
    var num =console.log(0.3+0.4);
    console.log(0.3*1000);
    console.log(num==0.7);
//    自++ 自--
    var sd=10;
    ++sd; //age=age+1
    console.log(sd);
    var sds=100;
    --sds; //age=age+1
    console.log(sds);
    //后置++运算符
    var sd=234;
    sd++;
    console.log(sd);
    var p=345;
    console.log(++p+456);
    //后置--运算符
    var sdq=234;
    sdq--;
    console.log(sdq);
    //定义一个变量++破+456
    var p=345;
    console.log(++p+456);
    //练习题一
    var a=456;
    ++a;
    console.log(a);
//    练习二
    var b=++a+34;
    console.log(b);
//    练习四
    var c =122;
    c++;
    var d=c++ -54;
    console.log(d);
    //    练习六
    var e=123;
    var f= e++ + ++e;
    console.log(e);
//比较运算符关系运算符·
    console.log(2>=4);
    console.log(2<=4);
    console.log(2==4/2);
    console.log(2!=4);
    console.log(456==789);
    console.log(2!=4);
    console.log(4===4);
    //逻辑运算符 boolean 与或非
    console.log(3>5&& 3>2);
    console.log(32>53&& 32<2);
    console.log(3>5|| 3>2);
    console.log(true);
    //逻辑短路
    console.log(123 &&4567);
    console.log(0 &&4567);
    console.log(0&&1+2&&456*89889);
    //逻辑或短路
    console.log(123||456);
</script>
</body>
</html>


运行结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String字符串类型</title>
</head>
<body>
<script>
    <!--外两内单 外单内两-->
    var str='我是\c一个“高\n富帅”的程序\b员';
    //字符串拼接 数组相加 字符相连
    var str1="我是一'个高'富帅\n的程序员Hellow world javasc v ript nees to you"+"hellow javascript";
    console.log(str);
    console.log(str1);
    alert("今天是第一天回顾JavaScript的学习，希望自己能静下心来 ");
    console.log(str1.length);
    console.log('78'+'67');
    console.log('lop老师'+23+'年');
    var agese=89;
    console.log('pink老师'+agese + '年');
</script>
</body>
</html>

//逻辑运算符 boolean 与或非
console.log(3>5&& 3>2);
console.log(32>53&& 32<2);
console.log(3>5|| 3>2);
console.log(true);
//逻辑短路
console.log(123 &&4567);
console.log(0 &&4567);
console.log(0&&1+2&&456*89889);
//逻辑或短路
console.log(123||456);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据转换</title>
</head>
<body>
<h1 style="text-align: center">数据转换</h1>
`
<script>
<!--num >> String-->
  var  num =10;
  var str =num.toString();
  console.log(num);
 alert(num);
  console.log(str);
    console.log(typeof str);
    console.log(String(num));
    console.log(num+'');
//转换为数字类型
    var age=prompt('请输入你的年龄');
    console.log(parseInt(age));
console.log(parseInt(3.94));
console.log(parseInt('120px'));
console.log(parseFloat(3.12));
console.log(parseFloat(3.94));
console.log(parseFloat('120px'));
//方法三
console.log(Number(str));
    console.log('12'-0);
var year =prompt('请输入你的年份');
var ages =2021-year;
alert('今年活了'+ages+'年')
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var age = prompt('请输入你的年龄');
    var str= '你今年已经'+age+'年了';
    alert(str);
</script>
<script>
    var flag=true;
    var flagt=false;
    console.log(flag+1);
    console.log(flagt+1);
    alert(flagt);
    var str;
    console.log(str);
    console.log(flagt+'pinkgh');
    var space=null;
    console.log(space+'pinkh');
var  num=10;
    console.log(typeof num);
    console.log(typeof str);
    console.log(typeof flag);
    console.log(typeof vari);
    var timer=null;
    console.log(typeof  timer)
</script>
</body>
</html>

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      input {
        height: 200px;
        width: 200px;
      }
      button{
        height: 200px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <input type="button" onclick="asd('小明','56')" />
    <button type="button" onclick="asd('小王','67')"></button>
    <button onclick="myFun()">无参</button>
    <script type="text/javascript">
      function  asd (name,age){
        alert(name+"今年"+age+"age");
      }
      function myFun(){
        alert("hellow word")
      }
    </script>
  </body>
</html>

案例一

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>function</title>
  </head>
  <body>
    <script type="text/javascript" class="parseInt">
      var a=parseInt("10");  //return 10
      var a1=parseInt("10.33");
        var a2=parseInt("134 45 56");
          var a3=parseInt("79");
            var a4=parseInt("23 years");
              var a5=parseInt("1he we 56");
                var a6=parseInt("10",8);
      alert(a);
      alert(a1);
      alert(a2);
      alert(a3);
      alert(a4);
      alert(a5);
      alert(a6);
    </script>
    <script type="text/javascript" class="parseFloat">
      var b=parseFloat("10");  //return 10
      var b1=parseFloat("10.33");
        var b2=parseFloat("134 45 56");
          var b3=parseFloat("79");
            var b4=parseFloat("23 years");
              var b5=parseFloat("1he we 56");
                var b6=parseFloat("10",8);
       alert(b+"hellow");
      alert(b1);
      alert(b2);
      alert(b3);
      alert(b4);
      alert(b5);
      alert(b6);
    </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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript的开始</title>
</head>
<body>
<h13 id="demo2">JavaScript 是一种轻量级的编程语言。
    JavaScript 是可插入 HTML 页面的编程代码。
    JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
    JavaScript 很容易学习。</h13>
<br>
<h16 id="demo1">JavaScript 可以通过不同的方式来输出数据：
    使用 window.alert() 弹出警告框。
    使用 document.write() 方法将内容写到 HTML 文档中。
    使用 innerHTML 写入到 HTML 元素。
    使用 console.log() 写入到浏览器的控制台。</h16>
<h1>我是第一个界面</h1>
<p id="demo">我是第一段</p>
<hr>
<h1>我的 Web 页面</h1>
<p id="dem">一个段落。</p>
<div id="myDIV">一个 DIV。</div>
<div id="we"></div>
<script>
    document.getElementById("dem").innerHTML="你好 Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎么样?";
    document.getElementById("we").innerHTML="我最近中了一百万大奖，mydiv 你呢";
   /* alert("这是第一个javascript")*/
 /*  document.write("<h1 style='color: dodgerblue'>这是JavaScript的输出语言页面</h1>");
    document.write("no pains no gains ");*/
   /* document.write(Date());  /!*调用标准的时间*!/
   document.getElementById("demo").innerHTML = 89* 10;
   document.getElementById("demo1").innerHTML = 89/ 10;
   document.getElementById("demo2").innerHTML = 89- 10;*/
    var pi=3.14;
    var name="Bill Gates";
    var answer='Yes I am!';
    var height="178cm"
    document.write(pi + "<br>");
    document.write(name + "<br>");
    document.write(answer + "<br>");
    document.write(height+"<br>")
   /*写入控制台*/
  /* a = 13;
   b = 6;
   c = a + b;
   console.log(c);*/
</script>
</body>
</html>

案例四

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>計算</title>
</head>
<body>
<p>假设 y=56，计算 x=y*78，并显示结果。</p>
<!--onclick函数去调用你要的功能-->
<button onclick="myFunction()">点击这里</button>
<button onclick="my()">过来呀</button>
<p id="demo"></p>
<p id="de"></p>
<script>
    function myFunction(){
        var y=56;
        var x=y*78;
        var demoP=document.getElementById("demo");
        demoP.innerHTML="x=" + x;
    }
    function my() {
        var y=33;
        var x=y*67/78;
        var demoP=document.getElementById("de");
        demoP.innerHTML="x=" + x;
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>
<h18>值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
    引用数据类型：对象(Object)、数组(Array)、函数(Function)。</h18>
<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>

总结

                   

t75yjb52rsccc
目录
相关文章
chnjames
|
2月前
|
前端开发 UED 开发者
探索CSS的奇妙世界：实用技巧与窍门大汇总
在前端开发中，精通CSS是提升用户体验的关键。本文深入探讨了一系列实用的CSS技巧和窍门，帮助开发者在设计和布局中脱颖而出。从响应式文档布局到自定义光标，再到渐变阴影和文本列布局，本文涵盖了多种实用方法，适合新手和经验丰富的开发者。不断学习和运用这些技巧，助力您提升前端开发水平，为用户创造出色的网页体验。探索更多技巧，成就您的CSS大师之路！
chnjames
52 1
探索CSS的奇妙世界：实用技巧与窍门大汇总
神明木佑
|
2月前
|
存储 JSON JavaScript
JS知识点
JS知识点
神明木佑
23 3
渐暖
|
7月前
|
JavaScript 前端开发 C#
JavaScrip基础（二）
JavaScrip基础（二）
渐暖
41 0
渐暖
|
7月前
JavaScrip基础（三）
JavaScrip基础（三）
渐暖
37 0
渐暖
|
7月前
|
JavaScript 前端开发 C#
JavaScrip基础（一）
JavaScrip基础（一）
渐暖
46 0
东方睿赢
|
7月前
|
XML 存储 JavaScript
js知识学习总结
js知识学习总结
东方睿赢
37 1
小山猪
|
JSON 移动开发 前端开发
程序员如何用“心“表白（结尾附源码）
程序员如何用“心“表白（结尾附源码）
小山猪
101 0
前端歌谣
|
前端开发
前端知识案例-javascipt核心语法
前端知识案例-javascipt核心语法
前端歌谣
64 0
前端知识案例-javascipt核心语法
前端歌谣
|
前端开发
前端知识案例81-javascript基础语法-字符串裁切
前端知识案例81-javascript基础语法-字符串裁切
前端歌谣
73 0
前端知识案例81-javascript基础语法-字符串裁切
卖坚果的怪叔叔
|
前端开发 JavaScript 开发工具
前端CSS常用代码集合
前端CSS常用代码集合
卖坚果的怪叔叔
111 0

热门文章

最新文章

  • 1
    Hadoop迁移MaxCompute神器之DataX-On-Hadoop使用指南
  • 2
    Nginx的启动、停止与重启
  • 3
    Hive之数据倾斜的原因和解决方法
  • 4
    开发人员各级岗位胜任力模型
  • 5
    Node.js 中流操作实践
  • 6
    传奇龙版地图查看器
  • 7
    调整DC的网络对网络是否会有影响?
  • 8
    How to maintain Oracle10g Recyclebin?
  • 9
    你知道自己感染了恶意软件吗？
  • 10
    Groovy 快速入门
  • 1
    Python学习的自我理解和想法（9）
    90
  • 2
    Kimi 上线视觉思考模型，K1 系列强化学习模型正式开放，无需借助外部 OCR 处理图像与文本进行思考并回答
    103
  • 3
    CosyVoice 2.0：阿里开源升级版语音生成大模型，支持多语言和跨语言语音合成，提升发音和音色等的准确性
    83
  • 4
    Megrez-3B-Omni：无问芯穹开源最强端侧全模态模型，支持理解图像、音频和文本三种模态数据
    52
  • 5
    FreeScale：无需微调即可提升模型的图像生成能力，生成 8K 分辨率的高质量图像
    39
  • 6
    Freestyler：微软联合西工大和香港大学推出说唱音乐生成模型，支持控制生成的音色、风格和节奏等
    38
  • 7
    《C 语言与统计假设检验：洞察人工智能模型性能差异》
    83
  • 8
    《C 语言赋能：物联网环境下人工智能应用的能耗优化之道》
    24
  • 9
    《C 语言助力神经网络剪枝：优化模型的卓越之道》
    25
  • 10
    《C 语言复数运算：赋能人工智能信号处理新境界》
    20

    • 相关课程

    更多
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JS零基础入门教程（上册）
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。