面向IT产品经理的计算机语言知识普及（一）

来源：互联网发布：移动网络共享编辑：程序博客网时间：2024/05/16 19:43

一、写在前面

为什么要写这篇文章？很简单，因为我的朋友们有做产品的，这是我能帮到他们的。

产品经理（以下都用PM）们为什么要读我写的这篇文章？因为不懂技术，会经常被coder们鄙视。我认为PM可以不懂技术的细节，但一定要知道，某个产品的某个功能可以通过什么技术实现。这样可以更好地与技术沟通，也有助于设计更合理的产品。

还有一个目的，就是让不太了解技术的小姑娘们，不要太崇拜程序员，它们没有那么神，多数只是做类似于搬砖一样的事情。

二、这篇文章的范围

要想说清楚一件事，首先要设定范围，范围太广了太笼统，没意义。

这一次只针对web产品（主要基于浏览器作为展现方式），PM需要了解的web开发方面的技术知识，同时我也会简单介绍其它的知识。

三、免责声明

1、这是一篇针对PM（非技术人员）的文章，所以只要能表达清楚，有助于理解，有些话我不会过分严谨，希望更专业的人可以指出，但不要喷我！

2、文字主要来自网络，我只是整理和修改，尽可能做到没有错误。多数内容都不是原创，但也没有列出转载地址的必要。

--------我是华丽丽的分割线----以下才是正文，前面都是在装B----------

四、网页的组成

网页：显示在浏览器上的内容（文字、图像、声音、动画等……）

在网页上，点击右键-->查看源代码。就可以看到网页的内容。实际上我们打开一个网页时，从互联网上下载的就是所谓的源代码。浏览器的工作就是把这些源代码解析、渲染成便于人们阅读的形式。

网页源代码由html、javascript、css组成。基本格式如下：

<html>

<head>

<scripttype="text/javascript" src="js/jquery.js"/>

<linkrel="stylesheet" href="css/base.css"type="text/css"/>

<scripttype="text/javascript">

functionfun1() {

}

</script>

<styletype="text/css">

body{ background-image:url(img/bg/0.png);}

</style>

</head>

<body>

我是网页正文

</body>

</html>

一个html文件，基本结构就是head+body；head里面可能会有javascript和css。body里就是网页的具体内容。

所有的标签都有开始和结束标记，如<head>对应着</head>，<body>对应着</body>

五、什么是前端开发、后端开发。

可以这样定义（但这个没什么标准）

前端开发：用到javascript（以及JQuery等框架），css。

后端开发：用到jsp、sql。

当然html是他们都必须精通的。

下面举个例子来说明，上面各种语言都用来干什么。

假设以下举的例子都是用javascript、css、jsp、sql来实现。

javascript：是在浏览器上执行的函数，实现一些功能。

例如在google主页的输入框输入一个“中”字，然后下面会有提示“中国移动”“中关村”“中国银行”之类的输入建议。这个功能就是当输入框有按键操作的时候，调用javascript函数，这个函数发送已经输入的“中”字给google的服务器，然后返回给用户“中国移动”“中关村”“中国银行”这样的内容。

其它的，比如，饭否上的小图片，点击之后，也会以弹了层的形式显示大图片。和google的“输入建议”功能都类似，都是通过网页上的javascript函数来实现。

javascript能做什么？根据我给出的定义“javascript：是在浏览器上执行的函数，实现一些功能。”，可以知道javascript只能在浏览器上执行，可以实现一些功能。能实现什么功能呢？

主要有这么几类：

1、修改网页内容；

如：饭否上，点击一条微博的“收藏”，过一会儿“收藏”变成了“取消收藏”。

2、用服务器请求数据。

如“输入建议”的内容、“显示大图”的图片，都是执行了相应的javascript函数之后才开始加载。

3、实现某些显示效果。

如：动画切换页面、图片等。淡入淡出等特效。

css:定义了网页元素显示的样式。

如上文

<styletype="text/css">

body{ background-image:url(img/bg/0.png);}

</style>

就是css内容，这段代码定义了网页的背景图片。

到了这里，如果有人问你网页是什么。你只要说“网页由三部分组成：内容、功能和样式，其中html是网页的内容，javascript定义了功能，css定义了网页内容的显示样式”，这就可以了！

JQuery：是封装了一些常用的javascript函数。

jsp：服务器端脚本语言，用于产生动态网页。

例如：在浏览器中打开相同的http://fanfou.com/home，在服务器上执行的是同一个jsp，但最终输出不同的内容，这就是动态网页。

sql：用于读写数据库。

例如：还以打开http://fanfou.com/home为例。当浏览器向服务器发出这样一个打开网页的请求（当然同时会带上用户名和密码），jsp程序段首先通过sql语句向数据库查询有没有这个用户，以及密码是否正确，如果正确就把用户当前的主页返回给浏览器，如果不正确就返回错误提示的内容给浏览器。

到了这里，我们可以再概括一下。后端技术jsp对应的是功能逻辑，sql对应的是数据。jsp程序会调用sql语句读写数据库，并执行一段程序段，最终生成的网页源代码。网页源代码包含了html、javascript、css，浏览器接收到这些内容后解析并渲染，这样我们就在浏览器上看到了排版清析的网页内容。

六、补充

前面的内容，为了便于理解，很多都简单化了。下面补充说明一下。看不明白也没关系。

1、后端程序不一定是用jsp写。主流的方案组合有：

jsp+oracle sql

php+mysql

asp+sql server

2、脚本语言：通过对应的解释器，解释执行的机算机语言。（和解释执行对应的是编译执行。）

javascript是浏览器上执行的脚本语言。各种浏览器提供了解释器的功能。

jsp、php、asp是在服务器上执行的脚本语言。只要服务器上安装了相应的解释器，就可以执行相应的脚本。

－－－

谁能告诉我，这个写得太简单了，还是太难了？这种风格的教程好不好？还有，下一篇该介绍哪个方面的？（ps：只针对产品经理及非技术人士）