[java] gpt, bard ai를 활용하여 초등학생도 이해 가능한 자바스크립트 기초 강좌만들기

자바스크립트는 웹 브라우저에서 실행되는 프로그래밍 언어이다. 말하자면 외국어와 외계어의 중간급정도 되는 난이도를 가진 체계인것이다.

웹 페이지의 동적인 기능을 구현하는 데 사용되지만 문외한이 이해하기 너무 여럽기에 최대한 쉽게 기본 기초강좌에 대해 풀어서 설명해보려 한다.

나도 자바를 아예 모르지만 혼자 bard로 찾아보며 공부해보려고 작성한다.

목차
1. 기본개념

2. 기본문법

3. 느낀점

 

 

1. 자바스크립트의 기본 개념을 이해하세요.

자바스크립트는 변수, 함수, 조건문, 반복문 등과 같은 기본적인 개념을 가지고 있습니다. 이러한 기본 개념을 이해하지 못하면 자바스크립트를 제대로 사용할 수 없다.

자바스크립트의 기본 개념을 이해하는 방법은 다음과 같다.

• 자바스크립트의 기본 개념을 설명하는 책이나 강의.
• 자바스크립트의 기본 개념을 연습할 수 있는 사이트를 이용.

아래는 bard를 통해 가져온 기본개념의 추가설명이다.

자바스크립트의 기본 개념은 다음과 같습니다.

• 변수

변수는 데이터를 저장하는 공간입니다. 변수는 이름, 데이터 타입, 초기값으로 구성됩니다.

JavaScript

var myName = "Bard";

코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기

content_copy

위의 코드에서 myName은 변수의 이름이고, "Bard"는 변수의 데이터 타입과 초기값입니다.

• 함수

함수는 특정 작업을 수행하는 코드의 집합입니다. 함수는 이름, 매개변수, 코드 블록으로 구성됩니다.

JavaScript

function sayHello() {
  console.log("안녕하세요!");
}

sayHello();

코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기

content_copy

위의 코드에서 sayHello()는 함수의 이름이고, ()는 함수의 매개변수입니다. console.log()는 콘솔에 메시지를 출력하는 함수입니다.

• 조건문

조건문은 특정 조건에 따라 코드를 실행하거나 실행하지 않도록 하는 명령문입니다. 조건문은 if, else, else if로 구성됩니다.

JavaScript

var age = 20;

if (age >= 19) {
  console.log("성인입니다.");
} else {
  console.log("미성년자입니다.");
}

코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기

content_copy

위의 코드에서 if 조건문은 age가 19 이상이면 "성인입니다."를 출력하고, 그렇지 않으면 "미성년자입니다."를 출력합니다.

• 반복문

반복문은 특정 코드를 반복해서 실행하는 명령문입니다. 반복문은 for, while, do-while로 구성됩니다.

JavaScript

for (var i = 0; i < 10; i++) {
  console.log(i);
}

코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기

content_copy

위의 코드에서 for 반복문은 i가 0부터 9까지 1씩 증가하면서 console.log() 함수를 실행합니다.

자바스크립트의 기본 개념을 이해하면 자바스크립트 코드를 더 쉽게 이해하고 작성할 수 있습니다.

 

 

 

2. 자바스크립트의 기본 문법을 익히세요.

자바스크립트의 기본 개념을 이해했다면, 이제 기본 문법을 익혀야 합니다. 자바스크립트의 기본 문법은 다음과 같습니다.

• 변수 선언
• 함수 선언
• 조건문
• 반복문
• 객체
• 배열

각 기본문법에 대한 예시를 마찬가지로 bard에서 가져와보겠다.

1. 변수 선언

변수는 데이터를 저장하는 공간입니다. 변수는 이름, 데이터 타입, 초기값으로 구성됩니다.

예시

JavaScript

// 변수 선언
var myName = "Bard";

// 데이터 타입
var age = 20;

// 초기값
var isMarried = false;

코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기

content_copy

2. 함수 선언

함수는 특정 작업을 수행하는 코드의 집합입니다. 함수는 이름, 매개변수, 코드 블록으로 구성됩니다.

예시

JavaScript

// 함수 선언
function sayHello() {
  console.log("안녕하세요!");
}

// 함수 호출
sayHello();

코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기

content_copy

3. 조건문

조건문은 특정 조건에 따라 코드를 실행하거나 실행하지 않도록 하는 명령문입니다. 조건문은 if, else, else if로 구성됩니다.

예시

JavaScript

// 조건문
var age = 20;

if (age >= 19) {
  console.log("성인입니다.");
} else {
  console.log("미성년자입니다.");
}

코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기

content_copy

4. 반복문

반복문은 특정 코드를 반복해서 실행하는 명령문입니다. 반복문은 for, while, do-while로 구성됩니다.

예시

JavaScript

// for 반복문
for (var i = 0; i < 10; i++) {
  console.log(i);
}

코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기

content_copy

5. 객체

객체는 데이터와 함수를 하나로 묶은 구조입니다. 객체는 속성과 메서드로 구성됩니다.

예시

JavaScript

// 객체 선언
var person = {
  name: "Bard",
  age: 20,
  sayHello: function() {
    console.log("안녕하세요!");
  },
};

// 객체 속성 접근
console.log(person.name); // Bard

// 객체 메서드 호출
person.sayHello(); // 안녕하세요!

코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기

content_copy

6. 배열

배열은 같은 타입의 데이터를 여러 개 저장하는 구조입니다. 배열은 인덱스로 데이터를 접근할 수 있습니다.

예시

JavaScript

// 배열 선언
var numbers = [1, 2, 3, 4, 5];

// 배열 인덱스 접근
console.log(numbers[0]); // 1

// 배열 길이
console.log(numbers.length); // 5

코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기

content_copy

이러한 기본 문법을 이해하면 자바스크립트를 더 쉽게 이해하고 사용할 수 있습니다.

 

3. 느낀점

바드가 생각보다 c언어에 대한 인지와 예시를 굉장히 디테일하게 붙여주고 이해가 쉬운편이다.

다만 대부분의 대답이 프롬프트에 절대적으로 기댈뿐, 자체적으로 인간의기준에서 사고하기엔 어렵기에

1) 정확한 프롬프트값을 입력하는 방식이나

2) 이미 프리셋처럼 검증이 된 프롬프트값을 다양하게 가져오는게 이득일듯 하다.

 

다음시간에는 ai 프롬프트값을 기준으로 gpt를 좀더 효율적으로 사용하는 방법을 배워볼 생각이다.

 

 

참고 링크 : https://d2.naver.com/helloworld/7226235

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript
• W3Schools: https://www.w3schools.com/js/default.asp
• JavaScript.info: https://javascript.info/