• JSD-2204-HTML-CSS-JavaScript-Day04

    1.css

    1.1溢出设置overflow

    • visible超出部分显示(默认值)
    • hidden超出部分隐藏
    • scroll超出部分滚动显示
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     div{
    8.       width: 200px;
    9.       height: 200px;
    10.       border:1px solid red;
    11.       /*hidden超出隐藏
    12.       visible超出显示(默认)
    13.       scroll超出滚动显示*/
    14.       overflow: scroll;
    15.     }
    16.   </style>
    17. </head>
    18. <body>
    19. <div>
    20.   <img src="../b.jpg" alt="">
    21. </div>
    22. </body>
    23. </html>

    1.2行内元素垂直对齐方式vertical-align

    • top上对齐
    • middel中间对齐
    • bottom下对齐
    • baseline基线对齐

    1.3显示层级 z-index

    • 当元素层叠显示时,需要控制元素的显示层级
    • z-index的值越大显示越靠前.
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     img{
    8.       width: 50px;
    9.       /*垂直对齐方式:
    10.       baseline基线对齐
    11.       top上对齐
    12.       middle中间对齐
    13.       bottom下对齐
    14.       */
    15.       vertical-align: bottom;
    16.     }
    17.     #d1{
    18.       width: 50px;height: 100px;
    19.       background-color: red;
    20.       position: absolute;
    21.       /*设置显示层级, 值越大显示越靠前*/
    22.       z-index: 1;
    23.     }
    24.     #d2{width: 100px;height: 50px;
    25.       background-color: green;
    26.       position: absolute;
    27.       z-index: 2;
    28.     }
    29.   </style>
    30.     <!---->
    31. </head>
    32. <body>
    33. <div id="d1"></div>
    34. <div id="d2"></div>
    35. <input type="text"><img src="../b.jpg" alt="">
    36. </body>
    37. </html>

    2.JavaScript

    • 作用: 负责给页面添加动态效果.
    • 语言特点:
    • 属于脚本语言, 不需要编译直接由浏览器解析执行
    • 基于面向对象
    • 属于弱类型语言
    • 安全性强: JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据禁止访问
    • 交互性强: 因为JS语言是嵌入到html页面中 最终执行在客户端电脑上的语言和用户近距离接触, Java语言每次交互都需要通过网络请求到服务器后再执行.

    变量,数据类型,运算符,各种语句,方法,面向对象

    2.1如何在html页面中添加JavaScript代码

    • 三种引入方式:
    • 内联: 在标签的事件属性中添加JS代码,当事件触发时执行.
    • 事件: 系统给提供的一些特定的时间点
    • 点击事件: 当点击元素时触发的时间点称为点击事件.
    • 内部: 在html页面中的任意位置添加script标签,在标签体内写JS代码
    • 外部: 在单独的js文件中写js代码, 然后在html页面中 通过script标签的src属性引入到页面中
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.  
    7.  
    8. </head>
    9. <body>
    10.  
    11. <!--onclick点击事件属性   alert()弹出提示框-->
    12. <input type="button" value="内联按钮" onclick="alert('按钮点击了')">
    13.  
    14. <script>
    15.   //单行注释
    16.   /*多行注释*/
    17.   //在浏览器的控制台输出内容
    18.   console.log("内部JS代码执行")
    19. </script>
    20. <!--引入外部的js文件,引入外部文件后 标签体内不能再写js代码-->
    21. <script src="my.js"></script>
    22. </body>
    23.  
    24. </html>
    console.log("外部js代码执行")

    2.2变量

    • JS属于弱类型语言
    • java强类型: int age = 18; String name="张三"; name=20;报错
    • JS弱类型: let age=18; let name="张三"; name=20; 不报错
    • JS中通过let或var关键字声明变量
    • let声明的变量作用域类似Java语言中的作用域
    1. for(let i=0;i<10;i++){
    2.  
    3. let j=i+1;
    4.  
    5. }
    6.  
    7. let x = j+i; //不报错 但是访问不到j和i两个变量
    • var声明的变量作用域相当于是全局变量
    1. for(var i=0;i<10;i++){
    2.  
    3. var j=i+1;
    4.  
    5. }

    var x = j+i; //不报错,而且可以访问到j和i的值

    2.3数据类型

    • JavaScript语言只有对象类型.
    • 常见的对象类型:
    • string: 表示字符串, 可以通过单引号或双引号修饰 'abc' "abc"
    • number:相当于Java中所有数值类型的总和
    • boolean: 布尔值 true/false
    • undefined: 未定义 , 当变量只声明不赋值时,对象的类型为未定义类型
    • typeof 变量; 获取变量的类型

    2.4运算符

    • 算数运算符: + - * / %
    • 除法运算会自动根据结果转换整数或小数
    • java: int x=5; int y=2; x/y = 2;
    • JS : let x=5; let y=2; x/y=2.5; x=6 x/y=3;
    • 关系运算符: > < >= <= != ==和===
    • ==和===区别: ==先统一两个变量的类型再比较值, ===先比较类型,如果类型相同之后再比较值

    "666"==666 true "666"===666 false

    • 逻辑运算符: && , ||, !
    • 赋值运算符: = += -= *= /= %=
    • 三目运算符: 条件?值1:值2

    2.5各种语句

    • if else
    • while / do while
    • for
    • switch case

    2.6方法

    • java: public 返回值类型 方法名(参数列表){方法体}
    • JS: function 方法名(参数列表){方法体}
    • 三种声明方法的方式:
    • function 方法名(参数列表){方法体}
    • let 方法名 = function(参数列表){方法体}
    • let 方法名 = new Function("参数1","参数2","方法体");
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <input type="button" value="按钮" onclick="f1()">
    9. <script>
    10.   //无参无返回值方法
    11.   function f1() {
    12.     console.log("f1");
    13.   }
    14.   //调用方法
    15.   f1();
    16.   //有参无返回值
    17.   function f2(name, age) {
    18.     console.log(name+":"+age);
    19.   }
    20.   f2("张飞",18);
    21.   //无参有返回值
    22.   function f3() {
    23.     return "这是返回值";
    24.   }
    25.   let info = f3();
    26.   console.log(info);
    27.   //有参有返回值
    28.   function f4(x,y) {
    29.     return x*y;
    30.   }
    31.   let result = f4(5,9);
    32.   console.log(result);
    33.   //第二种声明方法的方式
    34.   let f5 = function (name,age) {
    35.     console.log(name+":"+age);
    36.   }
    37.   //调用
    38.   f5("诸葛亮",50);
    39.   //第三种声明方法的方式
    40.   let f6 = new Function("name","age","console.log(name+':'+age)")
    41.   f6("程咬金",30);
    42.  
    43.  
    44.  
    45. </script>
    46. </body>
    47. </html>

    2.7和页面相关的方法

    1. 通过选择器选择页面中的元素对象

      let 元素对象 = document.querySelector("选择器");

    2. 获取或修改元素的文本内容 <标签名>文本内容</标签名>元素对象.innerText; //获取元素对象.innerText = "xxxx"; //修改
    3. 获取或修改控件的值元素对象.value; //获取元素对象.value = "xxxx"; //修改
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <div>这是div</div>
    9. <p id="p1">这是p1</p>
    10. <p id="p2">这是p2</p>
    11. <input type="text">
    12. <input type="button" value="按钮" onclick="f()">
    13. <script>
    14.   function f() {
    15.     //得到div
    16.      let d = document.querySelector("div");
    17.      //得到文本框
    18.      let i = document.querySelector("input");
    19.      //把文本框里面的内容取出赋值给div
    20.      d.innerText = i.value;
    21.  
    22.   }
    23. </script>
    24. </body>
    25. </html>

    2.8NaN

    • Not a Number: 不是一个数字
    • isNaN(变量), 判断变量是否是NaN true代表是NaN false代表不是NaN

    2.8.1平方练习

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <input type="text">
    9. <input type="button" value="平方" onclick="f()">
    10. <div></div>
    11. <script>
    12.   function f() {
    13.     let i = document.querySelector("input");
    14.     let d = document.querySelector("div");
    15.     if (isNaN(i.value)){//判断如果输入的不是数字则进行提示
    16.       d.innerText="输入错误!";
    17.       return;//结束方法
    18.     }
    19.     //字符串进行-*/运算时会自动转成数值
    20.     //  d.innerText = i.value*i.value;
    21.     d.innerText = i.value*1+i.value*1;
    22.   }
    23. </script>
    24. </body>
    25. </html>

    2.8.2计算器练习

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <input type="text" id="i1">
    9. <input type="text" id="i2">
    10. <input type="button" value="加" onclick="f(1)">
    11. <input type="button" value="减" onclick="f(2)">
    12. <input type="button" value="乘" onclick="f(3)">
    13. <input type="button" value="除" onclick="f(4)">
    14. <div></div>
    15. <script>
    16.     function f(x) {
    17.         let i1 = document.querySelector("#i1");
    18.         let i2 = document.querySelector("#i2");
    19.         let d = document.querySelector("div");
    20.         if (isNaN(i1.value)||isNaN(i2.value)){
    21.             d.innerText = "输入错误!";
    22.             return;
    23.         }
    24.         switch (x) {
    25.             case 1://加
    26.                 d.innerText = i1.value*1+i2.value*1;
    27.                 break;
    28.             case 2://减
    29.                 d.innerText = i1.value-i2.value;
    30.                 break;
    31.             case 3://乘
    32.                 d.innerText = i1.value*i2.value;
    33.                 break;
    34.             case 4://除
    35.                 d.innerText = i1.value/i2.value;
    36.                 break;
    37.         }
    38.  
    39.     }
    40.  
    41.   function f1() {
    42.     let i1 = document.querySelector("#i1");
    43.     let i2 = document.querySelector("#i2");
    44.     let d = document.querySelector("div");
    45.     d.innerText = i1.value*1+i2.value*1;
    46.   }
    47.   function f2() {
    48.     let i1 = document.querySelector("#i1");
    49.     let i2 = document.querySelector("#i2");
    50.     let d = document.querySelector("div");
    51.     d.innerText = i1.value-i2.value;
    52.   }
    53.   function f3() {
    54.     let i1 = document.querySelector("#i1");
    55.     let i2 = document.querySelector("#i2");
    56.     let d = document.querySelector("div");
    57.     d.innerText = i1.value*i2.value;
    58.   }
    59.   function f4() {
    60.     let i1 = document.querySelector("#i1");
    61.     let i2 = document.querySelector("#i2");
    62.     let d = document.querySelector("div");
    63.     d.innerText = i1.value/i2.value;
    64.   }
    65. </script>
    66. </body>
    67. </html>

    2.8.3猜数字练习

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <input type="text" placeholder="请输入1-100的数字">
    9. <input type="button" value="猜一猜" onclick="f()">
    10. <div></div>
    11. <script>
    12.   //得到1-100之间的随机整数
    13.   let x = parseInt(Math.random()*100)+1;
    14.   let count = 0;
    15.   function f() {
    16.     count++;
    17.     let i = document.querySelector("input");
    18.     let d = document.querySelector("div");
    19.     if (i.value>x){
    20.       d.innerText = "猜大了!";
    21.     }else if(i.value<x){
    22.       d.innerText = "猜小了!";
    23.     }else{
    24.       d.innerText = "恭喜你第"+count+"次猜对了!";
    25.     }
    26.   }
    27.  
    28. </script>
    29. </body>
    30. </html>

    2.9JavaScript代码排错思路

    • 如果页面没有运行出效果 第一时间F12查看控制台的报错, 根据控制台提示的信息找到错误的位置

    2.10JavaScript对象分类

    • 内置对象: 包括number,string,boolean等
    • BOM: Browser Object Model, 浏览器对象模型, 包含和浏览器相关的内容
    • DOM:Document Object Model ,文档对象模型, 包含和页面相关内容

    2.11BOM浏览器对象模型

    • window对象, 该对象中的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.
    • window中的常用方法:
    • isNaN() 判断变量是否是NaN
    • alert("xxxx") 弹出提示框
    • confirm("xxx") 弹出确认框
    • prompt("xxx") 弹出文本框
    • parseInt() 将字符串或小数转成整数
    • parseFloat() 将字符串转成整数或小数
    • let timer = setInterval(方法,时间间隔) 开启定时器
    • clearInterval(timer) 停止定时器
    • setTimeout(方法,时间间隔) 开启执行一次的定时器
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <h1>0</h1>
    9. <script>
    10.   //开启只执行一次的定时器
    11.   setTimeout(function () {
    12.     console.log("时间到");
    13.   },3000);
    14.  
    15.   let count=0;
    16.   let h1 = document.querySelector("h1");
    17.   //开启每秒执行一次的定时器
    18.   let timer = setInterval(f,1000);
    19.   function f() {
    20.      count++;
    21.      h1.innerText = count;
    22.      if (count==5){
    23.        //停止定时器
    24.        clearInterval(timer);
    25.      }
    26.   }
    27. </script>
    28. </body>
    29. </html>

  • 相关阅读:
    【牛客刷题-SQL大厂面试真题】NO1.某音短视频
    C++11之显式转换操作符-explicit
    如何运行HBuilder内置浏览器
    智能合约安全漏洞与解决方案
    SQLi-LABS Page-3 (Stacked Injections)
    CSDN前面加空格
    [附源码]java毕业设计冷链物流管理系统论文
    第七章 查找
    微信一面：什么是一致性哈希？用在什么场景？解决了什么问题？
    logos_HSST简要说明
  • 原文地址：https://blog.csdn.net/TheNewSystrm/article/details/125547044