javascript101 之开始

最新推荐文章于 2023-01-09 17:10:19 发布

cswolf

最新推荐文章于 2023-01-09 17:10:19 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript html css

javascript 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

解剖一个网页

在进入javascript前，这有助于理解它是如何与其他web技术配合的

html是内容

HTML是一种定义和描述内容的标记语言，无论它是一个博客文章，搜索引擎结果或电子商务网站，网页的核心内容是用HTML写的；语义标记，HTML是采用通用术语来描述（标题、段落、图片等）

css是表现

css是一种补充语言用来对HTML文档应用样式；css通过定义字体、颜色和其他美学使所有有关内容更好看；css的强大来自于样式不夹杂内容的事实；这意味着你可以对同一块内容使用不同的样式，这对于构建跨越多种设备的漂亮网站来说是关键；

javascript是交互

在浏览器中，javascript给HTML内容带来了交互和行为；没有javascript，网页是静态的和无趣的；javascript帮助网页带来生机；

看下这个简单的包含css和javascript的网页，看这一切是如何在一起的。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<!-- CSS for presentation -->
<style>
h1 { font-size: 14px; color: hotpink; }
button { color: red; }
</style>
</head>
<body>
<h1>Hello World</h1>
<button>Click Me!</button>
<!-- JavaScript for interactivity -->
<script>
// Get a handle on the first button element in the document.
var button = document.querySelector( "button" );
// If a user clicks on it, say hello!
button.addEventListener( "click", function( ev ) {
alert( "Hello" );
}, false);
</script>
</body>
</html>

在上面的例子中，HTML用来描述内容；"Hello,Word"文本被描述为带<h1>标签的标题，"Click Me"被描述为带<button>标签的按钮。<style>块包含用来改变标题字体大小和颜色的CSS。<script>标签包含用来为按钮增加交互的javascript。当用户点击按钮时，一条告警信息将出现，说“Hello”。

web的脚本语言

开始的时候，javascript用来设计为网页增加交互的，而不是通常的编程语言，这样它就成了脚本语言。脚本语言被认为比通常的语言更高效，因为他们在某些特定领域做了优化（这里指web浏览器）。近期的提高把javascript带到了服务器边（通过Node.js）所以现在在PHP，Ruby或者ASP能够使用的地方，javascript也可以。本指南将专注于在浏览器中运行的jquery的javascript。

“javascript”这个名字有点误导，除了名字相似外，javascript和java这个普通语言没有任何关系）。javascript基于开放的web标准ECMAScript。基于标准的语言不受任何组织和公司的控制，开发者在一起工作定义该语言，这就是为什么javascript能够运行在每个浏览器中，而和设备和操作系统无关。