CS50 2016 Week10 学习笔记

原创 2017年09月13日 20:28:43

讲到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.

找了很多解释,大概如下:

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


HTML

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

比如,下面的一个典型的HTML文档:

  1. 第一行<!DOCTYPE html>申明这是一个HTML5文档。
  2. 然后有许多标签,对应着树结构中的一个结点。(标签一般成对出现)
  3. script标签也对应着headbody结点下的一个子结点。在script标签中写我们的JavaScript代码。

这里写图片描述


然后来看JavaScript的语法。

Hello World!

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

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

这里写图片描述


函数

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

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

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

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

这里写图片描述


变量

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

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

这里写图片描述


基本数据类型

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

结合变量一起看(尝试了一下,省去关键词var,不影响结果):

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

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

  • 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。
  • 这里person有三个属性,nameagehome,每个属性有对应的属性值。
  • 属性由逗号分隔。加空格和换行会好看一些:
    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语言类似。

  1. form表单中都是html的语法。主要看这个onsubmit="fun_if();",即用户提交表单这个事件发生后,调用fun_if()函数。
  2. if语句写在了fun_if()函数中。和C语言中语法类似。
  3. i = document.getElementById('an_int').value
    获取id属性为an_int 的元素(标签)的值。对应着下面用户提交表单中输入框的输入内容;然后将用户输入值存储在变量i中。
  4. 接着根据变量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,以及更多的应用。

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

  1. JavaScript代码写在 script标签之间。
  2. 如果不是写在函数中,浏览器会直接运行这些JavaScript代码。
  3. 但是,如果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>
  4. js 文件中不用写script标签,直接写JavaScript代码就好。


最后,

JavaScript作为一门语言,和C语言、Python一样,有一些库,例如jQuery,库中有别人写好的函数,不用自己写函数了,只要会用就行了。

JavaScript更多的都是前端来实现,前端开发也有相应的框架,例如bootstrap,会让前端开发更容易一些。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

网易公开课哈佛大学CS50学习笔记(2)

网易公开课哈佛大学CS50学习笔记(2)  函数调用自己是为什么出现段错误  因为在堆栈上加数。 内存耗尽。  递归的危险性,   sigma   return (m + sig...

公开课学习笔记-[哈佛]计算机科学CS50(七)

第15课 网络编程,HTML语言,编写网页 -2011.11.3 介绍IP的基本知识,有一个经典短片:Warriors of the net。在网上可以查到,很不错,介绍IP传输的基本概念。接着...

公开课学习笔记-[哈佛]计算机科学CS50(二)

第3课C语言,源代码,编译器(1) -2011.10.11 编程思想,从语句的格式语法中抽离。介绍了loop、逻辑表达式,数组,这些抽象概念以及C语句的范例。介绍源代码、编译器,gcc -ohell...

公开课学习笔记-[哈佛]计算机科学CS50(三)

第7课函数、数组、字符串、搜索算法 -2011.10.25 举一个phishing的黑客例子,将某个HTML页面copy,只是修改某个链接,可将username和passwd传到另一个server。...

公开课学习笔记-[哈佛]计算机科学CS50(八)

第17课 PHP语言和数据库- 2011.11.6 POST便于传输私密信息,以及二进制信息,例如图片。Get可以copy该link,可进入相同状态的网页。举例,通过linux cron定时从web...

公开课学习笔记-[哈佛]计算机科学CS50(五)

第11课 内存、头文件和数据结构 - 2011.10.30 对于C语言,内存分配是非常重要的,这涉及到程序的稳定性和安全性。假设有在stack中存储username和pw这样安全敏感的数据,有风险,...

公开课学习笔记-[哈佛]计算机科学CS50(四)

第9课 归并排序 -2011.10.27 Bubble sort的效率还是低,衡量效率包括占用空间,CPU cycles。在排序的情况,用最坏的情况衡量,例如反序。Merge Sort效率明显高。 ...

公开课学习笔记-[哈佛]计算机科学CS50(一)

看公开课“哈佛-计算机科学CS50”,看来一下课程目录,哦,学得真快,一个学期完成这么多,很有效率。和之前看完的斯坦福的课程比起来,录像的效果好,可能是时间不同吧。 第1课:开始 2011.9.19...

机器学习笔记Week1

  • 2017年06月08日 10:52
  • 206KB
  • 下载

python数据结构学习笔记-2016-10-27-01-链表

6.1 简介         结点(node):包含数据以及至少一个指向另一个结点的指针。         链式结构(linked structure):包含结点的容器。         链表(lin...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CS50 2016 Week10 学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)