Posted Updated  minkuen frontEnd / javascript4 minutes read (About 579 words)

Java Script 기초

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step03_js_basic
    • 파일 생성 : index.html
    • 파일 생성 : main.js

JavaScript 작성

  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width">
    <title>Document</title>
    <script src="./main.js"></script>
</head>

<body>
    <h1>자바스크립트 연습</h1>
</body>

</html>
  • main.js에 다음 내용 작성
1
2
// hello world
console.log("hello!")
  • step03_js_basic 폴더에서 index.html을 오픈
  • 다음과 같이 페이지가 출력된다.

Untitled

시스템 로그

  • main.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// hello world
console.log("Hello!!!");

// 변수명 작성 스타일
// camel Case : numOne

const myName = "kmk";
const email = "abc@gmail.com";
const hello = '안녕 ${myName}!';

// print()
console.log(myName);
console.log(email);
console.log(hello);
  • html 페이지에서 우클릭 → 검사
  • 다음과 같이 시스템 로그가 출력되었다.

Untitled

key-value

  • key-value를 비롯한 여러 변수를 호출해본다.
  • main.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// hello world
console.log("Hello!!!");

// 변수명 작성 스타일
// camel Case : numOne

const myName = "kmk";
const email = "abc@gmail.com";
const hello = '안녕 ${myName}!';

// print()
console.log(myName);
console.log(email);
console.log(hello);

// 숫자
const number = 123;
console.log(number)

// Boolean
let checked = true;
let isShow = false;
console.log(checked)
console.log(isShow)

//undefied
let abc;
console.log(abc);

//null
let name = null;
console.log(name);

//재할당
name = 'kmk';
console.log(name);

// 파이썬 딕셔너리와 비슷
// key-value
const user = {
    name: 'kmk',
    age: 20,
    isValid: true 
}

console.log(user.name);
console.log(user.age);
console.log(user.isValid);
// console.log(user.user.city);  undefined
  • 다음과 같이 시스템 로그가 출력된다.

Untitled

사칙 연산

  • main.js 에 다음 내용 추가
1
2
3
4
5
6
7
// 사칙 연산
const a=2;
const b=5;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
  • 연산 결과가 시스템 로그에 출력된다.

Untitled

함수 선언과 호출

  • main.js 에 다음 내용 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 함수의 선언과 호출
function helloFunc() {
    console.log(1234);
}

helloFunc();

function returnFunc() {
    return 123;
}

const fun_result = returnFunc();
console.log(fun_result);

function sum(a, b){
    return a + b;
}

const sum_a = sum(1, 2);
console.log(sum_a);

const sum_b = sum(4,5)
console.log(sum_b);

// anonymous(익명 함수)
const world = function(){
    console.log("We are the world");
}
world();
  • 결과가 시스템 로그에 출력된다.

Untitled

조건문

  • main.js 에 다음 내용 추가
1
2
3
4
5
6
7
// 조건문
const isDone = false;
if (isDone) {
    console.log('done!')
} else {
    console.log('Not Yet')
}
  • 결과가 시스템 로그에 출력된다.

Untitled

Java Script 기초

https://kmk3593.github.io/2022/06/07/javaScript_start/

Author

minkuen

Posted on

2022-06-07

Updated on

2022-06-23

Licensed under

#
You need to set install_url to use ShareThis. Please set it in _config.yml.

Like this article? Support the author with

You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.
Follow

Links

Categories

Recents

Archives

Tags

HTML6
JPA11
JPA 기초11
Java9
JavaScript1
NiFi1
Notion4
PL/SQL4
R2
R Markdown1
VScord1
Vue.js7
Vue.js 기초7
airflow4
anaconda1
apache1
chatbot5
crawling4
elasticsearch1
git1
github blog1
heroku4
javascript10
kakao_chatbot5
kibana1
machine learning22
oracle15
pipeline1
postgreSQL5
python30
setting14
spark7
wsl21
생활코딩1

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×