happy cat image

Start Web Coding

Your First step toward web coding,
Start Web Coding

change UI

Output statement

This time, we are going to study the output of JavaScript. ^ - ^ *

JavaScript Source

document.write("contents");

The above document.write is the output statement and we put the contents in parentheses().

For example, if you want to output the text Hello World through JavaScript, create the following source and place it inside the script tag.

Write it like this and wrap it with the double quotation mark (") or quotation mark (") when printing the text: "Hello World"

document.write("Hello World");

So if you put the above source into an actual HTML document

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>start JavaScript</title>
<script>
document.write("Hello World");
</script>
</head>
<body>
</body>
</html>

I have never used JavaScript's output statement in practice. It is very rare to output any information to the screen with a JavaScript output statement. I'll explain it just because it exists….

In the case of string output, you entered between quotation marks. Let's show the number.

Printing numbers

In the case of numbers, write in parentheses without quotes. For example, to print 30:

document.write(30);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>start JavaScript</title>
<script>
document.write(30);
</script>
</head>
<body>
</body>
</html>

If so, let's look at four quadratic operations.

four quadratic operations

For example, if you want to get the result of 30 + 40, put 30 + 40 in parentheses.

Plus +

document.write(30+40);

Substract -

document.write(30-20);

multiply *

document.write(30*40);

division /

document.write(30/2);

Remainder %

document.write(10%3);

So let's feel it while checking out the source below..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Start Javascript</title>
<script>
document.write(30+40);
document.write("<br  />");
document.write(30-20);
document.write("<br  />");
document.write(30*40);
document.write("<br  />");
document.write(30/2);
document.write("<br  />");
document.write(10%3);
</script>
</head>
<body>
</body>
</html>

When you look at the source above,

document.write("<br  />");

You can also put the tag inside as shown above.

I tried to put letters, numbers, and tags.

And for letters, I put a string between double quotes. So how do you put double quotes? Reverse slash ".

Let's test it.

Expressing quotes \ "

document.write("\"");

Let's see with the source.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>start JavaScript</title>
<script>
	document.write("\"");
</script>
</head>
<body>
</body>
</html>

Finally, let's look at the concatenation of strings.

concatenation of strings +

Concatenation of strings means connecting the word Mickey with the word Mouse. By doing so, you can express with Mickey Mouse.

I use + to connect string. In the case of number, 3 + 3 will do the operation, and the result will be 6

For a string connection, write "Mickey" + "Mouse" and the result will be Mickey Mouse. So let's understand it through the source.

  document.write("Mickey"+"Mouse");

Let's see with the source.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>start JavaScript</title>
<script>
	document.write("Mickey"+"Mouse");
</script>
</head>
<body>
</body>
</html>

What if you create a number like a character and use +

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>start JavaScript</title>
<script>
    document.write('number 6 and 6+' + '<br />');
	document.write("6+6  ? " + (6+6));
    document.write('<br />' + '문자 6과 6을 +' + '<br />');
	document.write("6+6  ? " + ('6'+'6'));
</script>
</head>
<body>
</body>
</html>

We will end this with the output statement and next we will try to alert() the window.

강좌로 돌아가기