首页 » JavaScript » CS50 2016 Week10 学习笔记

CS50 2016 Week10 学习笔记

原文 http://blog.csdn.net/sinat_36651044/article/details/77970634

2017-09-13 22:20:04阅读(116)

讲到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代码。

<a href=CS50 2016 Week10 学习笔记" src="http://img.blog.csdn.net/20170913141500434?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2luYXRfMzY2NTEwNDQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="">

然后来看JavaScript的语法。

Hello World!

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

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

CS50 2016 Week10 学习笔记

函数

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

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

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

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

CS50 2016 Week10 学习笔记

变量

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

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

CS50 2016 Week10 学习笔记

基本数据类型

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属性的值。

CS50 2016 Week10 学习笔记

循环

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>

CS50 2016 Week10 学习笔记

条件语句

满足哪个条件,执行之后的代码。
下面的例子可以看到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>

CS50 2016 Week10 学习笔记

CS50 2016 Week10 学习笔记

CS50 2016 Week10 学习笔记

然后,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代码就好。

最后,

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

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

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示 »

按 Ctrl+D 键,
把本文加入收藏夹