웹 개발에 JavaScript가 필요한 이유와 간단한 JavaScript

JavaScript (JS) 는 인터프리터 방식으로 실행되는 프로그래밍 언어로, 다양한 프로그래밍 패러다임을 지원합니다. JavaScript는 웹 페이지를 위한 스크립트 언어로 많이 사용하고 잘 알려져 있습니다. 웹 개발에 HTML과 CSS로 웹 페이지 생성하고 유지할 수 있지만, 왜 JavaScript가 필요한가요? 

 

JavaScript는 웹 페이지에서 애니메이션, 비디오 및 음악 재생, 온라인 드럼 키트 등 다양한 복잡한 기능들을 구현할 수 있습니다. 따라서 JavaScript는 웹 페이지에 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고 다양한 작업을 할 수 있는 스크립팅 언어입니다. 또한 JavaScript을 이용하여 애플리케이션 프로그래밍 인터페이스 (API)들을 호출하여 다양한 멀티미디어 콘텐츠를 웹 페이지에 무료로 사용할 수 있습니다. 예를들어 카카오 지도 API 사용하여 웹 페이지에 카카오 지도 기능을 표시 및 사용할 수 있게 됩니다. 

 

웹 페이지에서 JavaScript의 가장 일반적인 용도는 위에서 언급했듯이 DOM (Document Object Model) API를 통해 HTML과 CSS를 동적으로 수정하여 사용자 인터페이스를 업데이트하는 것입니다. 

 

보통 HTML + CSS + JavaScript는 보기 현하고 정리 목적으로 파일들을 따로 생성하고 외부 방식으로 연결합니다. Javascript는 CSS 와 비슷한 방식으로 <script src="자바스크립트 파일명.js" charset="utf-8"></script> 태그를 사용하여 HTML 파일과 연결합니다. 

 

<자바스크립트 데이타 종류들> :

String " " :  텍스트 데이터를 저장하며, 이를 통해 컴퓨터가 입력된 내용이 텍스트임을 인식할 수 있습니다.

Boolean : true 또는 false 값을 가지는 데이터 타입입니다

Number : 숫자

typeof() : 변수나 표현식의 데이터 타입을 문자열로 반환합니다

 

<자바스크립트 변수> :

자바스크립트에서 var를 사용하여 데이터를 저장하거나 변수를 설정할 수 있습니다.
변수의 값은 항상 덮어쓸 수 있으며, var는 처음 한 번만 사용됩니다.

myname -> name 값

prompt를 사용하여 이름 값을 변수에 저장할 수 있습니다.

 

<문자열 길이와 문자 수 가져오기> :

length 함수를 사용하여 문자열의 길이를 구할 수 있습니다. 예를 들어 name.length와 같이 사용할 수 있습니다.
아래의 코드를 사용하여 구글 스니펫에서 트위터의 글자 제한과 비슷한 기능을 구현할 수 있습니다:

var words = prompt(“What is on your mind today?”);

var word_limit = 180 - words

alert(“You have written “ + words.length + “ characters.  You have “ + word_limit + “ characters left.);

 

<문자열 자르기 및 부분 추출> :

.slice 함수를 사용하여 문자열을 자를 수 있습니다.

var name = "Jack";

name.slice(0,1)은 첫 번째 글자(위치 0)를 포함하지만 두 번째 글자는 포함하지 않습니다. 결과는 "J"가 됩니다. 파이썬과 유사하게, 첫 번째 글자의 위치는 0입니다. "k"를 얻으려면 name.slice(3,4)를 사용하거나, name.slice(0,2)와 같이 사용하여 "Ja"와 같은 결과를 얻을 수 있습니다.

 

트위터의 글자 제한과 비슷하게, 지정된 글자 수까지만 게시하도록 만들 수 있습니다.

var words = prompt(“What is on your mind today?”);

var word_limit = words.slice(0,180);

alert(word_limit);

 

또한 .toUpperCase 또는 .toLowerCase를 사용하여 특정 단어 또는 이름을 대문자로 만들어 일관성을 유지할 수 있습니다.

var name = prompt(“What is your name?”);

var firstChar = name.slice(0,1);

var upperCaseFirstChar = firstChar.toUpperCase();

var restOfName = name.slice(1,name.length);

restOfName = restOfName.toLowerCase();

var capitalisedName = upperCaseFirstChar + restOfName

alert(“Hello, + “ capitalisedName);

 

<자바스크립트 함수> :

{ }를 사용하여 패키지된 함수를 호출할 수 있습니다. 이를 통해 많은 코드를 한 줄의 코드로 컴파일할 수 있어 시간과 반복 작업을 크게 줄일 수 있습니다. 함수를 시작하려면 function 함수이름() {}을 사용합니다. 정의된 함수는 함수이름();으로 호출할 수 있습니다.

 

<매개변수와 인자>

코드 내에서 함수를 수정한 후 매개변수를 함수에 포함시킬 수 있습니다.

function getMilk(bottles) {
    var cost = bottles * 1.5;
    console.log("buy " + bottles + " bottles of milk");
}

 

<함수 파트 3: 출력과 반환값>

출력을 얻기 위해 return 키워드를 사용할 수 있습니다.

return money % 1.5; // 이 나눗셈의 나머지를 출력

 

함수와 출력, 반환을 사용하여 간단한 BMI 계산기를 만들 수 있습니다.

function bmiCalculator(weight, height) {
    var bmi = Math.round(weight / (height * height));
    return bmi;
}