第七次网页前端培训笔记

qq_57231850

已于 2022-02-11 23:51:07 修改

阅读量406

点赞数

分类专栏： html的学习文章标签：前端 javascript html

于 2022-02-11 23:50:20 首次发布

本文链接：https://blog.csdn.net/qq_57231850/article/details/122888854

版权

html的学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、总体概述

学习链接：

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

HTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibili

JavaScript 教程 | 菜鸟教程

本次学习主要内容是JS中的对象和事件。其次还有天气请求和如何将内容输出咋HTML中。

二、学习内容

1.对象

首先，JS中对象是拥有属性和方法的数据。在JS中几乎所有事物都是有对象的。

创建对象的方式也很简单，和定义一个变量的方式一样，因此可以说JS对象是变量的容器。有两种访问对象属性的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的对象</title>
</head>
<body>
<script type="text/javascript">
  //定义对象
  var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
  //访问对象属性的第一种方式
  console.log(person.lastName);
  //访问对象属性的第二种方式
  console.log(person["lastName"]);


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

2、事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的常用事件</title>
</head>
<body>
<script type="text/javascript">
  /*
    JS中的事件：
      (1):blur失去焦点
      (2):change下拉列表选中项改变，或文本框内容改变
      (3):click鼠标点击
      (4):dblclick鼠标双击
      (5):focus获得焦点
      (6):keydown键盘按下
      (7):keyup键盘按上
      (8):load页面加载中
      (9):mousedown鼠标按下
      (10):mouseover鼠标经过
      (11):mousemove鼠标移动
      (12):mouseout鼠标离开
      (13):mouseup鼠标弹起
      (14):reset表单重置
      (15):select文本被选定
      (16):submit表单提交、


    任何一个事件都会对应一个事件句柄，事件句柄是在事件前加on。
    onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
   */
  //对于当前程序来说，sayHello函数被称为回调函数(callback函数)
  //回调函数的特点:自己把这个函数代码写出来了，但是这个函数不是自己负责调用，由其他程序负责调用该函数。
  function sayHello(){
      alert("hello js!");
  }
</script>
<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
<!--以下代码的含义是，将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value=" hello" onclick="sayHello()"/>
<input type="button" value="hello2" id="mybtn"/>
<input type="button" value="hello3" id="mybtn1"/>
<input type="button" value="hello4" id="mybtn2"/>
<script type="text/javascript">
    function doSome(){
        alert("do some!")
    }
    /*
        第二种注册事件的方式，是使用纯JS代码完成事件的注册。
     */
    //第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表这个HTML页面)
    var btnObj = document.getElementById("mybtn");
    //第二步:给按钮对象的onclick属性赋值
    btnObj.onclick = doSome;//注意千万别加小括号btnObj.onclick = doSome();这是错误的写法。
                            //这行代码的含义是，将回调函数doSome注册到click事件上。
    var mybtn1 = document.getElementById("mybtn1");
    mybtn1.onclick = function (){//这个函数没有名字，叫做匿名函数，这个匿名函数也是一个回调函数。
        alert("test......");     //这个函数在页面打开的时候只是注册上，不会被调用，在click事件发生之后才会调用。
    }
    document.getElementById("mybtn2").onclick = function (){
        alert("test2222...........");
    }
</script>
</body>
</html>

<!--
    java中也有回调函数机制:
        public class MyClass(){
            public static void main(String[] args){
                //主动调用run()方法,站在这个角度看run()方法叫做正向调用。
                run();
            }
            //站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。
            public static void run(){
                System.out.println("run...");
            }
        }
-->

3、天气请求

由于水平目前不足，此处使用的json数据为提前导入的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON提取数据</title>
</head>
<body>
<script type="text/javascript">
    var text={"results":[{"location":{"id":"WWGQDCW6TBW1","name":"天津","country":"CN","path":"天津,天津,中国","timezone":"Asia/Shanghai","timezone_offset":"+08:00"},"now":{"text":"晴","code":"1","temperature":"3"},"last_update":"2022-02-09T21:18:05+08:00"}]};
    var text1=eval(text);
    document.write("城市："+text1.results[0].location.name+"<br>");
    document.write("天气："+text1.results[0].now.text+"<br>");
    document.write("温度："+text1.results[0].now.temperature+"<br>");



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

4、将内容输入HTML的四种种方式

在JS中，总共有四种方式来将内容输入到HTML中。

第一种：window.alert()是弹出警告框；

第二种：document.write()是将括号内的内容直接输入到HTML文档中。

第三种：innerHTML直接写入到HTML元素中。

第四种：console.log()写入到浏览器的控制台中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中的四种输入方式</title>
</head>
<body>
<p id="demo">段落一</p>
<script type="text/javascript">
    //方法一:window.alert()  (此处window可省略)
    window.alert(1+1);
    //方法二:document.write();
    document.write(1+1);
    //方法三:innerHTML
    document.getElementById("demo").innerHTML = "段落已修改。";
    //方法四:console.log()
    console.log(1+1);
</script>
</body>
</html>

三、学习总结

本次学习内容较多，有对象和事件，部分JSON中的内容以及四种在HTML中输出的方法。

首先，要明确什么是对象，什么是事件。对象是拥有属性和方法的事件，而事件则是发生在HTML元素上的事情，

创建对象的语法：
                        new 构造对象方法名(实参);//构造方法名和类名一致。

事件种类繁多，应记住大部分较为常用的事件。随后，进行了JS对JSON数据提取的学习，对于不同格式的数据，要采取不同的方法，其中较为复杂的JSON数据，则可以通过eval()函数进行转化，可以大大方便数据的读取。然后，要记住四种HTML中输出的方法，虽然都是输出，但是输出的形式和地方都不完全相同，各自有各自的特点。

最后，本次所学内容因为牵扯东西较多，需要仔细思考，并且自己编写几个实例方便理解，通过直观的方式去理解事件，数据的提取方式和输出方法，让记忆更加牢固。

qq_57231850

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第七次网页前端培训笔记

一、总体概述学习链接：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibiliHTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibiliJavaScript 教程 | 菜鸟教程本次学习主要内容是JS中的对象和事件。其次还有天气请求和如何将内容输出咋HTML中。二、学习内容1.对象首先，JS中对象是拥有属性和方法的数据。在J...
复制链接

扫一扫