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 2016 Week9 学习笔记

数据库管理系统;SQL语言;关系型数据库MySQL;
  • sinat_36651044
  • sinat_36651044
  • 2017年09月12日 17:31
  • 231

Coursera_机器学习_week10_笔记

- 批量梯度下降法Batch Gradient Descent(BSD) - * 随机梯度下降Stochastic gradient descent ( SGD) * - 小批量梯度下降 Mini...
  • icecutie
  • icecutie
  • 2016年05月14日 15:30
  • 536

CS50 2016-Week 0 学习笔记

机器语言(二进制数); C语言; Python(解释型语言)
  • sinat_36651044
  • sinat_36651044
  • 2017年09月05日 23:16
  • 235

Coursera机器学习 Week10 笔记

more data & gradient descent & online learning & map reduce
  • u013515273
  • u013515273
  • 2017年08月26日 15:32
  • 146

CS50 2016 Week 7 学习笔记

机器学习
  • sinat_36651044
  • sinat_36651044
  • 2017年09月10日 23:30
  • 80

写点看Harvard CS50 公开课的感受

Harvard University,世界顶级大学,对于来自普通院校的我来说,真是太具有吸引力了,而我也“愿意”为她蒙上一层厚厚的神秘的面纱,我真的愿意。我很幸运能有机会“拜读”CS50公开课,谢谢网...
  • logan676
  • logan676
  • 2012年11月26日 11:32
  • 1621

CS50 2016 Week 8 学习笔记

python; 函数、变量、循环、if语句、运行python程序、基本数据类型; 类和面向对象编程; MVC模式;Web server;flask框架。...
  • sinat_36651044
  • sinat_36651044
  • 2017年09月11日 17:40
  • 102

20161202 Coursera Stanford-MachineLearning/Week10-11

Week10:Large Scale Machine LearningStochastic Gradient Descent
  • SPARKKKK
  • SPARKKKK
  • 2016年12月05日 00:10
  • 359

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

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

CS50 任务3 笔记

老师开始时展示了一个饼干人爱情故事——去年一个学生编写的scratch项目,告诉我们编程要一步一步来最终达成目标而不是直接完成整个项目。老师大致讲解如何编写这样的程序,点出一些核心思想,一步一步从单独...
  • wtrnash
  • wtrnash
  • 2015年07月02日 18:40
  • 602
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CS50 2016 Week10 学习笔记
举报原因:
原因补充:

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