출처 : nomad coder 크롬 앱 만들기
자바스크립트를 다루는 방법 : 브라우저의 console 이용하기.
HTML에 CSS & JS 불러오기
CSS : <Link rel ="stylesheet" href ="style.css">
JS : <script src = "script.js"></script>Data type
- number
integer = full number (정수) ex) 1,2 / float ex) 1.2
- string = text ex) "hello"
console.log() : 괄호 안에는 number 혹은 string과 같은 data type을 입력할 수 있다. console에 값을 출력하는 장치이다.
Variable
1. const
const = 상수. 바뀌지 않는 값
ex)
constant a = 5; -----> constant인 valauble을 만든 것!
console.log(a+2);
console.log(a/2);
console.log(a*2);변수를 만들 때 띄어쓰기가 허용되지 않는다.
띄어쓰기 대신 첫글자를 대문자로 적어줄 수 있다.
ex) const myName = "hani";
const veryLongVariableName = "sally";이와 같은 이름의 형태를 camelcase라고 부른다.(낙타모양)
2. let
constant 와 let 의 차이
이 둘은 동일한 결과 값이 나오지만, const는 값이 바뀔 수 가없지만 let은 새로운 정보를 업데이트 할 수 있는 특징을 가지고 있다.
ex)
let myName = "nico";
myName = "nicolas";라고 적어주면 정보가 변경이 된다. let 대신 const를 쓰면 오류가 뜬다.
정보를 변경할 때 let을 한 번 더 적어줄 필요는 없다. let은 변수를 생성할 때만 쓰인다.
정리 : 기본적으로 대부분의 경우 const 를 사용하고 variable을 업데이트하고 싶다면 필요한 경우에만 let을 사용할 것! (var은 쓰지 말기!)
Boolean
Boolean : True or false 의 값
const hi = true문자열이 아니기 때문에 따옴표와 함께 쓰이지 않는다.
- null : 아무 것도 없는 상태 자체가 값인 것. 그 변수에 아무 것도 없다는 의미. (false 와 다름), 자연적으로 발생하지 않는다. variable 안에 어떤 것이 없다는 것을 확실히 하기 위해 쓰인다.
const hi = null아무 것도 없는 상태로 변수가 채워진 것.
- undefined : 값이 없는 것. 컴퓨터 메모리에는 저장이 되어있지만 값이 없을 때 "undefined" 이라고 출력이 된다.
let something;
console.log(something);위와 같은 경우 값을 명시하지 않았기 때문에 undefined이라고 표기가 된다.
null 과 undefined 는 다름!
Array
Array : (일일히 변수를 만드는 데에는 한계가 있기에) data를 정리 해주는 역할을 한다.
ex)
const daysOfWeek = ["mon","tue","wed","thu","fri","sat"]
const nonsense = [1, null, undefined, "hello"]
console.log(daysOfWeek[0]);
console.log(nonsense);배열 내의 element로는 변수를 포함하여 어떠한 data type이든 올 수 있다!
array 내의 데이터 추가하기 : .push()
ex)
daysOfWeek.push("sun")Object
object : array와 다르게 각각의 요소들에 대한 부연 설명이 필요할 때.
내부에 있는 요소들을 property라고 부른다.
ex)
const player = {name : "nico", points : 10, fat : true};
console.log(player.name);위의 코드로 콘솔 내에 "nico"라는 값이 출력이 된다.
object 내의 데이터 변경 또는 추가하기
ex)
player.fat = false ;
player.age = 25 ;variable을 const 로 설정했음에도 정보가 변경이 되는 이유는 variable이 아닌 그 안의 무언가를 수정한 것이기 때문!
만약 player = false 라고 했다면 오류가 발생한다.
Function
function : 계속 반복해서 사용할 수 있는 코드조각
function sayHello(){} 와 같은 형태
()내에 argument를 보냄으로서 function을 실행시킬 수 있다.
ex)
function sayHello(nameOfPerson){
console.log("hello my name is " + nameOfPerson)};
sayHello('Hani');
sayHello('Nico');hello my name is Hani 라고 출력된다.
여러 인자를 넣는 것도 가능하다.
ex)
function SayHello(nameOfPerson, age)
{console.log("Hello my name is " + nameOfPerson + "I am " + age)};
sayHello("Hani",25);
function plus(a,b){console.log(a+b)};
plus(2,3)함수들의 객체 만들기
ex)
const player = { sayHello : function(OtherPersonsName)
{console.log("hello " + OtherPersonsName + "nice to meet you),
sayBye : function(OtherPersonsName)
{console.log("bye " + OtherPersonsName);
player.sayHello('Hani')Return
Return : 어떤 작업을 처리하고 그 결과를 return하기 위해 function을 사용한다.
ex)
const age = 96;
function calculateKrAge(ageOfForeigner)
{return ageOfForeigner + 2};
const krAge = calculateKrAge(96);
console.log(krAge)위의 코드 값으로 console 내에 98 값이 출력이 된다.
이 function이 호출한 것은 calculateKrAge 함수의 "return"값이다.
만약
function calculateKrAge(ageOfForeigner)
{ageOfForeigner + 2 ;
return "hello"}
const krAge = calculateKrAge(96);
console.log(krAge)
와 같은 코드라면 return 값인 "hello" 가 반환 된다.
return을 사용함으로써 함수 내부에서 직접 console.log를 사용하지 않아도 되었다. -> 내부에서 console.log를 하는 대신 function의 외부에서 값을 얻은 뒤에 그 값으로 무엇이든 할 수 있는 것!
또다른 ex)
const calculator = {
plus : function(a,b){return a + b},
minus : function(a,b){return a - b},
times : function(a,b){return a * b},
divide : function(a,b){return a / b}};
const plusResult = calculator.plus(2,3);
const minusResult = calculator.minus(plusResult, 10);
const timesResult = calculator.times(10, minusResult);
const divideResult = calculator.divide(minusRetult, 2);
각 함수들의 상호관계 파악 가능
console.log를 표시하지 않았기 때문에 console 내에 표시가 되지는 않지만 plusResult 의 값을 입력하면 value가 출력이 된다!
console.log는 console내에 값을 표시해주지만 이를 function 안에 넣으면 js 코드에서는 그 value를 바로 얻을 수가 없다.
만약 함수 내에 return 대신 console.log를 적는다면 plusResult를 적었을 때 undefined라고 나온다. -> 아무것도 return 하지 않았기 때문
정리 : 외부에서의 value를 얻고 싶을 땐 꼭 return 써주기.
추가사항> return 하는 순간 function은 결과값을 남기고 종료 된다.
ex)
const calculator = {
plus : function(a,b){return a + b
console.log("hi")}다음과 같은 경우 return값만 나오고 뒤의 명령은 실행되지 않음.
Conditionals
promt(message,default) : 사용자에게 창을 띄울 수 있게 해준다.
promt 자체가 js 코드 실행을 멈추고 있을 수 있는 기능이 있다.
(but 요즘은 잘 사용하지 않음)
typeof : variable이 어떤 datetype인지 확인하고 싶을 때 사용할 수 있다.
ex)
const age = promt("how old are you?");
console.log(typeof age);위의 코드로 console 내에 string 이라는 값이 출력된다.
parseInt()
parseInt() : string을 number 형태로 바꾸어 준다.
ex)
console.log(typeof "15" typeof parseInt("15")위의 값으로 console 내에 string number 이 출력된다.
parseInt()의 장점 : 숫자의 크고 작음을 비교할 수 있다.
사용자가 숫자가 아닌 문자열을 입력했을 때 인지할 수 있다.
console(parseInt(age))promt 창에 문자열을 입력했을 시 NaN(Not a Number)이라는 값이 나온다. 이를 통해 숫자와 문자열을 구분할 수 있는 것!
isNaN()
isNaN() : 값이 true or false 로 출력이 된다. datatype이 숫자인지 아닌지 알려준다.
true = Nan (숫자 x)
false = 숫자
const age = parseInt(prompt("how old are you?"))
console.log(isNaN(age))숫자이므로 false라는 값이 출력이 된다.
if문
ex)
if(isNaN(age)){
console.log("please write a number.")}
else{console.log("Thank you for writing your age.")}else if문
여러개의 조건을 만들 수 있다.
ex)
if(isNaN(age) || age < 0){
console.log("please write a real positive number.")}
else if(age < 18){
console.log("You are too young.")}
else if(age > 18 && age <= 50){
console.log("You can drink.")}
else if(age > 50 && age <= 80){
console.log("You should exercise.")}
else if(age > 80){
console.log("Do whatever you want.")}
맨 마지막에 나오는 else 는 위의 모든 조건이 false 일 때 실행이 된다. 생략 가능!
&& : and (a와 b 둘다 true 이어야 함)
|| : or (a 또는 b 둘중 하나 이상이 true 이어야 함)
위 함수에
else if(age===100){} 을 추가하고 싶다면, else if(age > 80){} 위에 적어줄 것! (js는 위에서 아래의 순서로 실행되기 때문!)
if((a&&b)||(c&&d)||(x||y)){} 와 같은 복잡한 형태도 가능하다.
