You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: page/javascript-101/getting-started.md
+14-9Lines changed: 14 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -12,13 +12,13 @@ Before diving into JavaScript, it helps to understand how it aligns with the oth
12
12
13
13
### HTML is for Content
14
14
15
-
HTML is a markup language used to define and describe content. Whether it be a blog post, a search engine result or an e-commerce site, the core content of a web page is written in HTML. A semantic markup, HTML is used to describe content in universal terms (headers, paragraphs, images, etc.)
15
+
HTML is a markup language used to define and describe content. Whether it be a blog post, a search engine result, or an e-commerce site, the core content of a web page is written in HTML. A semantic markup, HTML is used to describe content in universal terms (headers, paragraphs, images, etc.)
16
16
17
-
###CSS is for Presentation
17
+
###CSS is for Presentation
18
18
19
19
CSS is a supplemental language that applies style to HTML documents. CSS is all about making content look better by defining fonts, colors, and other visual aesthetics. The power of CSS comes from the fact that styling is not intermingled with content. This means you can apply different styles to the same piece of content, which is critical when building responsive websites that look good across a range of devices.
20
20
21
-
###JavaScript is for Interactivity
21
+
###JavaScript is for Interactivity
22
22
23
23
In the browser, JavaScript adds interactivity and behavior to HTML content. Without JavaScript, web pages would be static and boring. JavaScript helps bring a web page to life.
24
24
@@ -28,9 +28,10 @@ Look at this simple HTML page that includes CSS and JavaScript to see how it all
28
28
<!doctype html>
29
29
<html lang="en">
30
30
<head>
31
-
<meta charset="utf-8">
31
+
<meta charset="utf-8" />
32
32
<title>Hello World</title>
33
-
<!-- CSS for presentation -->
33
+
34
+
<!-- CSS for presentation. -->
34
35
<style>
35
36
h1 { font-size: 14px; color: hotpink; }
36
37
button { color: red; }
@@ -39,26 +40,30 @@ Look at this simple HTML page that includes CSS and JavaScript to see how it all
39
40
<body>
40
41
<h1>Hello World</h1>
41
42
<button>Click Me!</button>
42
-
<!-- JavaScript for interactivity -->
43
+
44
+
<!-- JavaScript for interactivity. -->
43
45
<script>
46
+
44
47
// Get a handle on the first button element in the document.
45
48
var button = document.querySelector( "button" );
49
+
46
50
// If a user clicks on it, say hello!
47
51
button.addEventListener( "click", function( ev ) {
48
52
alert( "Hello" );
49
53
}, false);
54
+
50
55
</script>
51
56
</body>
52
57
</html>
53
58
```
54
59
55
-
In the example above, HTML is used to describe the content. The "Hello World" text is described as a heading with the `<h1>` tag and "Click Me!" is described as a button with the `<button>` tag. The `<style>` block contains CSS that changes the font-size and color of the header text. The `<script>` block contains JavaScript that adds interactivity to the button. When a user clicks on the button, an alert message will appear that says "Hello!".
60
+
In the example above, HTML is used to describe the content. The "Hello World" text is described as a heading with the `<h1>` tag and "Click Me!" is described as a button with the `<button>` tag. The `<style>` block contains CSS that changes the fontsize and color of the header text. The `<script>` block contains JavaScript that adds interactivity to the button. When a user clicks on the button, an alert message will appear that says "Hello!"
56
61
57
62
## A Scripting Language for the Web
58
63
59
64
JavaScript was originally designed to add interactivity to web pages, not to be a general programming language, which makes it a scripting language. [Scripting languages](http://en.wikipedia.org/wiki/Scripting_language) are regarded to be more productive than general languages because they are optimized for their specific domain (in this case, the web browser). However, recent advancements have brought JavaScript to the server-side (via [Node.js](http://nodejs.org/)) so it can now be used in place of languages like PHP, Ruby, or ASP. This guide will focus exclusively on JavaScript running in the browser with jQuery.
60
65
61
-
The name "JavaScript" is a bit misleading. Despite the similarity in name, JavaScript has no relationship with [Java](http://en.wikipedia.org/wiki/Java_\(programming_language\)), a general purpose language. JavaScript is based on an Open Web standard called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript). Standards-based languages are not controlled by any one entity or corporation – instead, developers work together to define the language, which is why JavaScript will run in *every* web browser regardless of the operating system or device.
66
+
The name "JavaScript" is a bit misleading. Despite the similarity in name, JavaScript has no relationship with [Java](http://en.wikipedia.org/wiki/Java_\(programming_language\), a general purpose language. JavaScript is based on an open web standard called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript). Standards-based languages are not controlled by any one entity or corporation – instead, developers work together to define the language, which is why JavaScript will run in *every* web browser regardless of the operating system or device.
62
67
63
68
## What You Need to Get Started with JavaScript and jQuery
64
69
@@ -76,4 +81,4 @@ Commonly referred to as "developer tools," many browsers ship with built-in feat
0 commit comments