Back to feed
Renewal·서른의 생활코딩

Sample Source 1) JavaScript Basic Document Structure (Comments //)

NS
normalstory
cover image


I am thinking about putting together a study page on JavaScript.




Foreword)
 

Majored in fashion and Western painting, then worked in sales and planning, 
ran a cafe-and-multi-shop, then learned 3D tools, 
and from around last November
have been working at a research lab, picking up markup and CSS by sneaking peeks online,

March 2011 — facing JS in my thirties, and  me, Mr. Byun..

Approaching this from a non-developer perspective,I think might actually be better for beginners...

Well... I don't have any special content or kind explanations or guidelines yet, but
for now, just typing out the examples and watching how the browser responds
and repeating that  is the way I approach this.

And this isn't only for JS —  ...


Once I started, it has been quite a hassle from the very beginning..
I do not know how far this will go, but
as always.. 

first — I begin.




Foreword )
 

Before development, you need to set up the environment.
Personally, I (Byun) use a MacBook Pro at home and a desktop at work.
The applications I use are 
Eclipse (Galileo on PC, Helios on Mac) and Aptana (2.x).
But for testing JS, EditPlus or a plain text editor is enough.

I know the feeling of losing motivation while setting up the environment..
so for now, let us just start with EditPlus or a plain text editor ^^

Beyond JS, in most life choices.. starting really is half the battle.
Even if your resolution lasts only three days, that's fine.
You can just change the plan every three days.

I would rather not waste precious time and web storage on a half-baked install guide.
If you Google it, plenty of true experts have explained it kindly.
(I personally prefer Google over Daum or Naver)





Notes )

What I mostly post will be sample source code releases.
They are simple hands-on exercises
so you can just run them and see for yourself.

That said,
for beginners... that is, when I (Byun)
first test the sample code,
I'll include the originally wrong code as a comment too.   ->>  /*I'll mark them in green.*/

The thoughts a beginner has — those born of not knowing —
I hope they become good insight for fellow beginners.
Just like reviewing a wrong-answer notebook to look back at why I approached the problem that way,
you end up understanding far more than just the right answer... 
 






Suggestions )

If fellow beginners happen to drop by,
and
find themselves running the tests with me,
I hope they share their own code or related examples by linking them.
Or we could propose a similar coding task as an assignment
and work through it together — I think that would help all of us. 
 






Begin.. )

When starting JavaScript, the first thing to do, I think, is build the shell that will hold the content.

Kind of like writing the long boilerplate before any HTML... 

Luckily, JavaScript 
can, like CSS, just be slipped between HTML markup, or placed alongside as a separate file.


1.
First,
as mentioned earlier,
the shell that holds the actual content is  

<script type="text/javascript">
</script>

this.


And what should not be overlooked is
//<![CDATA[
//]]>
 

including it.
->         It's not a serious problem for a beginner getting a web page to work, but..
some browsers misread certain tags inside the script as errors, so we put this in to prevent that ahead of time.
(It's not a precise explanation. I'd have to dig through a book... but it's past quitting time, so we'll stop here for now..ㅋ)


2.
더불어
요즘은 스크립트가 적용되지 않을 경우가 거의 없지만
그래도 혹시 그럴 일이 생기면
<noscript></noscript>it is also worth knowing that you can use this.





Example 1 >
 
 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko"lang="ko">  




<head>


<meta http-equiv="Content-Type"content="application/xhtml+xml; charset=UTF-8" />


<title> Basic JS Document Structure </title>


<meta name="Keywords" content="" />


<meta name="Description" content="" />




<script type="text/javascript">


//<![CDATA[


document.write("<h1>\"The script\" is working.</h1>");


//]]]]>


</script>


</head>  




<body>




<noscript>


JavaScript is not supported, so the content may not run properly.


</noscript>




</body>




</html>


This English version was translated by Claude.

친절한 찰쓰씨
Written by
친절한 찰쓰씨

Pleasant Charles — UI/UX researcher at AIT. Keeping notes on design, planning, and slow days here since 2010.

More on the author's page

Keep reading

Renewal

Steadily, for the long haul, without burning out

Mar 31, 2026·9 min
Renewal

Tech-life balance

Feb 7, 2026·3 min
Renewal

Humanality, by Park Jeong-ryeol

Feb 7, 2026·11 min