CS50 2016 Week10 学习笔记

最新推荐文章于 2024-06-21 16:41:46 发布

sinat_36651044

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量422

点赞数

分类专栏：学习笔记文章标签： CS50 javascript

本文链接：https://blog.csdn.net/sinat_36651044/article/details/77970634

版权

学习同时被 2 个专栏收录

124 篇文章 1 订阅

订阅专栏

笔记

124 篇文章 0 订阅

订阅专栏

讲到JavaScript，倒数第二节课了。

首先，JavaScript是一门语言，然后能用JavaScript写代码，这些JavaScript代码一般都是在客户端（浏览器上）运行的。
使用一些框架，比如Node.js，JavaScript代码也能在服务器上运行。

然后，使用JavaScript是为了让HTML页面变得更好看。

前端、后端

一直听到这个概念。
视频中简单提到两句：
The front end gives us better user interface.
The back end serves us data and searches things for us.

找了很多解释，大概如下：

前端就是用户看到，接触到和体验到的，主要做静态用户界面加上一些动态效果，不涉及数据逻辑，前端考虑到的是用户体验；控制着前端的内容，主要负责程序设计架构思想，管理数据库等。
前端负责跟用户交互；后端负责跟前端交互。
一般来说，前端指的就是浏览器端，后端指的就是直接为浏览器端提供服务的服务器端。
前端是做页面的，后端是提供服务数据接口的，前端通过调用后端返回的数据接口重组渲染页面。

HTML

第五课讲到了数据结构，HTML是基于树结构存储数据的。

比如，下面的一个典型的HTML文档：

第一行<!DOCTYPE html>申明这是一个HTML5文档。
然后有许多标签，对应着树结构中的一个结点。（标签一般成对出现）
script标签也对应着head或body结点下的一个子结点。在script标签中写我们的JavaScript代码。

这里写图片描述

然后来看JavaScript的语法。

Hello World!

script标签之间的是JavaScript代码 document.write("Hello World!")

每个载入浏览器的 HTML 文档都会成为 Document 对象。
write() 用来向文档写 HTML 表达式或 JavaScript 代码。

这里写图片描述

函数

JavaScript的代码更接近C语言，函数的定义方法如下:

function functionname()
{
    要执行的代码
}

例如下面，把Hello World!写在函数中。

这里JavaScript代码依然在script标签之间，但是这里将script标签写在了head标签下。
body标签中定义了一个按钮，同时定义了点击按钮这个事件发生后，调用hello()函数。
上面讲过每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象是 Window 对象的一部分（Window 对象表示浏览器中打开的窗口）。
hello()函数内部使用了Window 对象中的alert()方法，显示带有一段消息和一个确认按钮的警告框。

这里写图片描述

变量

一样的概念，变量用来存储数据。

语法和C语言类似，var name;用来定义一个name变量。不用事先申明变量类型。
name = "FengWeilei" 来对变量赋值。
document.write(name);用来将name变量中的数据写到文档中。（每个载入浏览器的 HTML 文档都会成为 Document 对象。write() 用来向文档写 HTML 表达式或 JavaScript 代码。）

这里写图片描述

基本数据类型

JavaScript有Number、String、Boolean、Array、Object 这些数据类型。

结合变量一起看（尝试了一下，省去关键词var，不影响结果）：

var a = 6;
var b = "a string";
var c = true;（true、flase首字母小写，别加引号，不然成字符串了）
var d = ["Nice","Day","HaHa"]; （这样定义最方便，和python列表类似，也能使用d[2]访问列表中元素）。
var person={ name : "FengWeilei", age: 22, home : "China"};
这个对象 类型存储数据的格式，就是经常见到的JSON（JavaScript Object Notation）。

重点看这个person变量，或者说JavaScript对象。

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。
这里person有三个属性，name、age、home，每个属性有对应的属性值。
属性由逗号分隔。加空格和换行会好看一些：
var person={ name : "FengWeilei", age: 22, home : "China" };
使用person.name可以访问person对象中的name属性的值。

这里写图片描述

循环

JavaScript语言中也有for循环和while循环，还有do while 循环。写法和C语言类似。

<script> #三种写法，输出结果一样
      var d = ["Nice","Day","HaHa"];
      for(i=0; i<3;i++){
        document.write(d[i]);
        document.write("<br>");
      }

      i = 0;
      do {
        document.write(d[i]);
        document.write("<br>");
        i++
      } while (i<3);

      i = 0;
      while(i<3) {
        document.write(d[i]);
        document.write("<br>");
        i++
      }
    </script>

这里写图片描述

条件语句

满足哪个条件，执行之后的代码。
下面的例子可以看到if语句的用法，语法和C语言类似。

form表单中都是html的语法。主要看这个onsubmit="fun_if();"，即用户提交表单这个事件发生后，调用fun_if()函数。
将if语句写在了fun_if()函数中。和C语言中语法类似。
i = document.getElementById('an_int').value
获取id属性为an_int 的元素（标签）的值。对应着下面用户提交表单中输入框的输入内容；然后将用户输入值存储在变量i中。
接着根据变量i（用户输入值）的大小展示不同的结果。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Learn JavaScript</title>
    <script>  
      function fun_if() {
        i = document.getElementById('an_int').value
        if (i<0) {
          document.write(i + " is less than zero")
        }
        else if (i>0) {
          document.write(i + " is bigger than zero")
        }
        else {
          document.write(i + " is equal to zero")
        }
      }
    </script>
  </head>
  <body>
    <form id="get_an_int" method="post" onsubmit="fun_if();">
      <input type="text" id="an_int" placeholder="please type an int"/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

这里写图片描述

然后，JavaScript大多数语法和C语言类似，或者本质上和许多编程语言都一样，这里就不再往下写了。

w3school网站有JavaScript 教程。可以边写代码边学习语法。

得知道为什么要用JavaScript，或者用JavaScript来干什么。

HTML中有很多事件，比如鼠标滚动、鼠标点击、鼠标停留在某个元素上、表单提交等等等等

这些事件发生后，需要运行相应的脚本，让用户看到不同的消息（或者页面效果）。这样，用户体验才会好。

对这些事件发生做出的反应，不是后端完成的，而是由前端完成的。即浏览器运行一些脚本，在这里，这些脚本就是JavaScript代码。

然后，就联系上了。HTML事件发生后，浏览器中运行一些JavaScript代码，来对这些事件做出反应。

JavaScript存在于全世界所有 Web 浏览器中，一般用来对网页进行改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

然后，回到最开始的地方。

JavaScript代码写在 script标签之间。
如果不是写在函数中，浏览器会直接运行这些JavaScript代码。
但是，如果JavaScript代码太长了，写在HTML文档中会显得太乱，可以用script标签的src属性指向HTML文档外部的一个JavaScript文件。
可以指向HTML代码目录中的某个 js 文件的地址：<script src="base.js"></script>
也可以输入URL指向互联网上某个js文件资源：
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
js 文件中不用写script标签，直接写JavaScript代码就好。