# Week 01

## 1. Introduction and Workflow(Javascript, Text Editor)

### A. What is JavaScript ?&#x20;

JavaScript is a programming language for the World Wide Web.  It is a scripting language that a computer reads out your code just like reading a book. You can get the hint by the term, "Script." However it has a callback function which allows to objectify one's function to match other compiling language. C, C++ is a father of all computer language but it needs compiling. Compiling is basically like a baking a bread before eating. On the other hand, the JavaScript is live just like when you are talking to someone and it is great for the World Wide Web, the live web environment.  &#x20;

#### 자바스크립트란?

자바스크립트는 인터넷을 위한 프로그래밍 언어입니다. '스크립트'에서 볼수 있듯이 스크립팅언어로 책을 읽듯 컴퓨터가 코드를 읽습니다. 그러나 콜백 기능이 있어 기능을 오브젝트화 할 수 있습니다. 이는 컴파일링 언어와 대조됩니다. C, C++ 는 컴파일링 언어의 아버지로 컴파일링이 필요합니다. 컴파일링은 빵을 먹기 전에 빵을 굽는 것과 같습니다. 반대로 자바스크립트는 남에게 대화하듯 라이브한 인터넷에 최적화 되어 있습니다. &#x20;

### B. Workflow

HTML -  CSS - JS (Javascript)

![](/files/-LHl1Gfa-dr-VJ_NedAZ)

Every coding person has its workflow. One might need a [rubber duck](https://rubberduckdebugging.com/) for debugging. Just like you are setting up your desk for studying, you need a work flow.&#x20;

코딩을 하는 모든 사람은  작업흐름이 있습니다. 누구는 [러버덕](https://rubberduckdebugging.com/)이 꼭 필요할 수 도 있습니다. 공부를 하기전 책상을 정리하듯, 코딩엔 작업흐름이 있습니다.&#x20;

### C. How does WWW Work?&#x20;

| **HTML**                  | **CSS**                | **JavaScript**                    |
| ------------------------- | ---------------------- | --------------------------------- |
| Hypertext Markup Language | Cascading Style Sheets | Object Oriented Computer Language |
| Structure                 | Appearance             | Logic                             |
|                           |                        |                                   |
| Where the eyes, mouth?    | Color of eyes, lips... | Open mouth when there is food     |

#### HTML, CSS, JAVASCRIPT

```
<!DOCTYPE html>
<html>
  <head>
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <script src="sketch.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body> 
  Hello!
  </body>
</html>
```

#### <https://jsfiddle.net/kdoodoo/dmvj1t8e/>

### D. Text Editor

When you write an essay in English what would be your text editor? One would answer "Microsoft Word." Then, why do you use the Microsoft Word? It is because it offers various features like typo checker. Just like the Microsoft Word offers English typo checking feature, there are text editors which help computer language coding.  &#x20;

에세이를 영어로 쓸 때, 어떤  텍스트 에디터를 쓰나요? 누구는 마이크로소프트 워드라고 답할겁니다. 그렇다면 왜 마이크로소프트 워드를 쓰나요? 오타를 잡아주는 기능 같은 것들 때문이라고 답할 것입니다. 마이크로소프트 워드가 영어 오타를 찾아주듯, 컴퓨터 언어 코딩에도 도움이 되는 텍스트 에디터가 있습니다.&#x20;

For Mac and Windows

{% embed url="<https://www.sublimetext.com/>" %}

{% embed url="<https://atom.io/>" %}

{% embed url="<http://brackets.io/>" %}

Web Text Editor

{% embed url="<https://alpha.editor.p5js.org/>" %}

{% embed url="<https://codepen.io/>" %}

{% embed url="<https://jsfiddle.net/>" %}

## 2. Assignment

### Download one of the text editor: Sublime (Recommended)

### and Watch: <https://youtu.be/8j0UDiN7my4>

##

##


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://icl.doyoki.com/week-01.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
