본문 바로가기

Java Script59

JS] 자바스크립트로 HTML element 선택하기 1. 자바스크립트 DOM 사용해서 HTML element 선택하기 getElement 보다는 querySelector를 더 많이 사용한다. .getElementsByTagName( ) 태그 이름으로 검색 1) 3번째에 있는 태그 검색하기 3번째 에 있는 Third의 글자를 바꿔보자. document.getElementsByTagName("li"); HTMLCollection(3) [li, li, li] document.getElementsByTagName("li")[2].style.color = "blue"; li가 여러 개 있기 때문에 몇 번째인지 적어줘야하고, 그 뒤에 원하는 효과를 적어놓는다. 2) element 갯수 검색 element가 몇 개 있나 검색하기 getElementsByClassNam.. 2021. 8. 18.
JS] Properties, Methods Properties vs Methods 자동차인 경우 버튼의 경우 하나의 object에는 properties, methods 두가지 특성이 있다. dot notation(마침표 찍는 방식)을 통해서 properties, methods에 접근할 수 있다. click()처럼 method에는 뒤에 괄호를 해준다. Properties 설정 get property 뭔지 물어보고 답 얻기 car.color; //blue set property 설정해주기, 설정 바꿔주기 car.numberOfDoors = 0; method 설정 call method 모두 괄호를 붙여준다. car.drive( ); method vs function method는 object가 하는 function이다. 자주 바꿔서 많이 말한다. 하지.. 2021. 8. 18.
JS] DOM(Document Object Model) Dominating the DOM to add functionality to HTML elements DOM 쓰는 이유 지금까지 우리는 html, css로 static한 웹사이트를 배웠다. static한 웹사이트는 화면에 보여주는 일만 하는 것을 말한다. html, css를 로드하고 저장해서 브라우저를 리프레쉬하면 웹사이트가 보인다. 여기서 우리가 인터렉티브한 웹사이트를 만들고자 한다면 유저가 버튼을 눌렀을 때 웹사이트 일부를 그 때 그 때 변경해야 할 것이다. 우리는 그에 맞는 컨텐츠와 웹사이트의 디자인을 바꿔서 반응을 해주어야 한다. 웹사이트가 인터넷 상에서 라이브로 반응해줘야하는데 우리는 유저가 요청할 때마다 html, css 코드를 업데이트하고 웹페이지를 다시 로드해야하는 일을 수작업으로 매 번 .. 2021. 8. 17.
JS] 웹사이트에 자바스크립트 추가하는 법 css 를 html 웹사이트에 넣는 방법은 3가지가 있었다 1. in-line CSS html 태그에 직접 attribute를 넣는 경우 2. internal CSS htmldp 영역 만들고서 그 안에 attribute를 넣는 경우 3. external CSS 새로 페이지 만들어서 효과 자바스크립트도 크게 다르지 않다. 1. in-line JS html 태그에 직접 attribute 넣기 downside: not very modular, difficult debug, not good practice. 그냥 in-line은 쓰지마. 그래도 연습삼아서 실행해 보기 onload: body 태그가 로드업 될 때 onload에 있는 것도 수행이 된다. 큰따옴표가 여러개 있으니 브라우저가 alert(노란색)를 스트.. 2021. 8. 17.
JS] 피보나치 퀴즈 퀴즈 Fibonacci was an Italian mathematician who came up with the Fibonacci sequence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144.... Where every number is the sum of the two previous ones. e.g. 0, 1, 1, 2, 3, 5 comes from 0 + 1 = 1 1 + 1 = 2 1 + 2 = 3 2 + 3 = 5 etc. Create a function where you can call it by writing the code: fibonacciGenerator(n) Where n is the number of items in the sequence. S.. 2021. 8. 16.
JS] 99 bottles of beer 퀴즈 99 Bottles of Beer 아래와 같은 노래 가사 만들기 99 bottles of beer on the wall, 99 bottles of beer. Take one down and pass it around, 98 bottles of beer on the wall. 98 bottles of beer on the wall, 98 bottles of beer. Take one down and pass it around, 97 bottles of beer on the wall. : : 1 bottle of beer on the wall, 1 bottle of beer. Take one down and pass it around, no more bottles of beer on the wall. No .. 2021. 8. 15.
JS] While Loops, For Loops While Loops vs For Loops 둘 다 반복인데 while은 state, 어떤게 true인 상태 일 때 반복 for는 iterate, 시작과 끝 입력하고 반복 While Loops true이면 계속 반복한다 더 이상 true가 아니면 다음 코드로 넘어간다. 기본형 사용 FizzBuzz 퀴즈 1~100까지 하나씩 계산해볼때 https://kingkongcoding.tistory.com/109 For Loops 기본 문법 for (i=0; i for 변환 while loop일 때 var i = 1; while(i for loop일 때 for (var i = 1; i 2021. 8. 15.
JS] 누가 점심낼까? 퀴즈 You are going to write a function which will select a random name from a list of names. The person selected will have to pay for everybody's food bill. important: The output should a returned from the function and you do not need alert, prompt or console.log. The output should match the example output exactly, including capitalisation and punctuation. 이름이 몇 개 입력될 지 모른다. Example Input: ["Angela",.. 2021. 8. 15.
JS] FizzBuzz 퀴즈 Fizzbuzz 퀴즈 Write a program that prints the numbers from 1 to 100. But for multiples of three print "Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both three and five print "FizzBuzz". 1) array에 숫자 자동으로 증가시켜서 담기 일일이 입력하지 말고 자동으로 숫자 커지게 해서 담아보자. 함수를 만든다 ( 이상하게 fizzbuzz(); 함수 호출을 창안에서 하면 숫자 추가가 안된다. 아직 이유는 아직 모르겠다.. ) 또 이상하게 콘솔 창에서 함수 호출.. 2021. 8. 14.
JS] Arrays / 명단에 이름확인 퀴즈 사용자에게 이름 물어보고 guestList에 이름 있는지 확인후 이름 있으면 "welcome, name" 이름 없으면 "Sorry, you're not on the list." 내용 띄우기 var guestList = ["Jane", "Adam", "John", "Jack", "Jean"]; var guestName = prompt("what's your name?"); if (guestList.includes(guestName)) { alert("welcome "+ guestName); } else { alert("Sorry "+ guestName +", You're not on the list."); } 2021. 8. 14.
JS] 자바스크립트 Arrays array 언제 쓰나? variables는 데이터를 담는 통이라고 했다. var a = "Jane"; var b = 25; 그런데 이렇게 한 통에 하나의 데이터 밖에 담을 수 밖에 없는 것일까? 한 통에 여러 개의 데이터를 담을 수는 없을까? 당연히 가능하다 이 때 필요한 것이 array 이다. array syntax syntax는 다음과 같다 하나만 담을 땐 괄호가 없었지만 array로 담을 땐 [ ] (스퀘어 브레켓) 모양의 괄호 속에 데이터들을 입력한다. retrieve array 안에서 원하는 데이터 뽑아오는 법 var mycar = cars[1]; 원하는 번호 적어준다. 두 번째에 위치한 🚕가 mycar에 저장된다. .length; array 안에 데이터가 몇 개있는지 알려준다. cars.len.. 2021. 8. 11.
JS] 윤년 확인하기 leap year 윤년이란? 태양년과의 편차를 줄이기 위해 도입된 달력 시스템 예전에 쓰던 율리우스력은 4년에 한 번씩 하루를 늘려 366일이 되도록 하였다. 하지만 4년에 한 번씩 하루를 늘리면 약간 오차 발생 이를 보안한 그레고리력은 4년에 한 번씩 366일하는 거 그래로 하고, 400년 주기로 그 안에서 3일을 빼기로 했다. 그래서 100년에 한 번씩 윤년 안하는 걸로 하였다. 100년, 200년, 300년 단위는 윤년에서 빼면 3일이 빠지게 된다. 400년 배수 단위가 오면 윤년이 된다. https://www.timeanddate.com/date/leapyear.html 현대 대부분의 나라에서 그레고리력을 사용한다. 1896(윤년), 1900년(윤년아님)-4배수지만 100의 배수라 빠짐, 400배수는 아님 1904.. 2021. 8. 11.
JS] Comparators and Equality Comparators and Equality Combining Comparators ! not / opposite === (3개) 와 == (2개) 차이 a 에 숫자 1 , b 에 string 1을 넣었을 때 일단 각 타입을 보면 a 는 숫자 b 는 스트링으로 나온다 여기서 a와 b가 같은지 a==b로 물어보면 둘이 같다고 나온다 a === b로 물어보면 둘이 다르다고 나온다 === 은 모양이 아니라 타입까지 같아야 한다. 2021. 8. 10.
JS] If-Else Conditionals & Logic / advanced BMI (미해결) conditionals 조건문 statement를 평가한 후(evaluate) if에 맞는 true이면 거기에 맞는 시퀀스를 수행한다. if에 맞지 않고 false이면 else로 가서 거기에 있는 시퀀스를 수행한다. 1. 이 전에 만든 love calculator 기본 문형 이름 나오고 스코어 알려주기 2. 여기에서 만약 스코어가 100%가 나온다면 천생연분이라는 메세지 추가하기 아니면 그냥 기본 문구만 나오게 하기 조건문 만들고 거기에 === 넣기 3. 100%는 안나오니 50%만 넘어도 천생연분이라는 메세지 띄우기 조건문에 > 넣기 4. 더 세부적으로 나누기 70보다 큰 경우 30< loveScore 2021. 8. 9.
JS] 랜덤 숫자/love calculator/ dice game Math.random(); Random number generation 16 Decimal Place. 소수점 16자리까지 나옴 0~0.9999999999999999 사이에서 랜덤 숫자 나옴 ex) 0.3647382678956781 var n = Math.random( ); //0.3647382678956781 n = n * 6; //2.188429607374069 n = Math.floor(n); //2 주사위 던지기 만들기 var n = Math.random(); n = n*6; n = Math.floor(n)+1; // 0~5까지만 나와서 1 더해줌 console.log(n); pseudo random number 컴퓨터가 완전 random number는 아니고 pseudo random number.. 2021. 8. 9.
JS] 함수연습 / BMI 계산 weight, height 값 입력 받아 BMI 값 구하기 BMI = weight / height * height 숫자 지수(power): height*height 두 번 곱해도 되고, Math.pow(밑숫자 base, 지수 exponent)로 써도 된다. 반올림(round): Math.round() 를 쓴다. 2021. 8. 8.
JS] 함수 parameters and Arguments 함수는 3가지 타입이 있다. 1. 단순한 형태 함수 함수 안에 들어간 코드 실행 function getMilk(){ console.log("leaveHome"); console.log("moveRight"); console.log("moveRight"); console.log("moveUp"); console.log("moveUp"); console.log("moveUp"); console.log("moveUp"); console.log("moveRight"); console.log("moveRight"); console.log("moveLeft"); console.log("moveLeft"); console.log("moveDown"); console.log("moveDown"); console.log.. 2021. 8. 7.
JS] 함수안의 함수 / Stanford Karel Stanford Karel Stanford Karel(캐'를)에서 간단히 함수를 연습해보자 https://stanford.edu/~cpiech/karel/ide.html karel the robot은 간단한 로봇이다. 맨 왼쪽 아래에서 맨 오른 위쪽으로 로봇 옮기기 여러 방법이 있지만 4칸 이동하고 방향 바꾸고 4칸 이동하는 것으로 해보았다. 함수 속 함수 여기서 move()가 계속 반복됨을 알 수 있는데 이 것을 하나의 함수로 또 묶어서 사용할 수 있다. 새로운 함수를 만들어서 Beeper 대각선으로 놓기 a chessboard pattern 만들기 선생님이 만든 방식 내가 만든 방식 2021. 8. 7.
JS] console.log 쓰는 이유 console.log 언제 쓸까? 지금까지 우리는 alert를 사용해왔다. alert로 썼을 때는 팝업을 화면에 띄워 사용자에게 내용을 보여주었다. 하지만 console.log는 console에서 내용이 나와 개발자만 결과를 볼 수있다. 함수 실행시 결과는 콘솔에서 보임 alert -> console.log로 바꾸기 developer tool snippet에서 alert를 console.log로 바꾸기 Control+F 또는 Command+F 를 누르면 Find가 나오고 AB 전환키를 누른다. 바꿀 내용을 입력한 후 replace all을 누른다. 변환전 변환 후 2021. 8. 6.
JS] function 기초, 함수 만들기/ 호출하기 함수 언제 쓸까요? 예를들어 로봇이 A에서 B로 갔다가 오는 과정을 대충 코드로 아래와 같이 써보았습니다. alert("leaveA"); alert("moveRight"); alert("moveRight"); alert("moveUp"); alert("moveUp"); alert("moveUp"); alert("moveRight"); alert("moveRight"); alert("EnterB"); alert("moveLeft"); alert("moveLeft"); alert("moveDown"); alert("moveDown"); alert("moveDown"); alert("moveLeft"); alert("moveLeft"); alert("EnterA"); 이런 여러 줄의 코드를 만들었다고 했을 때.. 2021. 8. 6.
JS] 자바스크립트 Numbers (?1) operator 알아보기 보통 계산 할 때랑 같다 var a = 4 + 2; 더하기 (add, plus sign) var b = 4 - 2; 빼기 (subtract, dash or minus sign) var c = 4 * 2; 곱하기 (multiply, asterisk sign 애'-스트릭) var d = 4 / 2; 나누기 (division. a single forward slash) var e = 4 % 2; 나머지 (modulo 머'줄러 a percentage sign) 홀,짝(odd, even number) 구분 할 때 좋음 2로 나눠서 나머지가 0이면 짝, 1이면 홀수 var cost = 3 +5 * 2 는 곱하기, 나누기 먼저한 후 더하기 빼기가 나중이다 // 13 var cost = (3 .. 2021. 8. 6.
JS] 자바스크립트 string - concatenation, length, slicing, extracting concatenation 컨,케'ㅌ네이션 "a" + "b" --> "ab" 로 출력됨 변수 이용해서 내용을 alert로 출력하기 .length 1. 아이템이 하나인 경우 하나의 아이템이 들어있다면 몇 글자인지 세줌 2. 아이템이 여러 개인 경우 아이템이 여러개인 경우 아이템이 몇 개인지 세줌 names 안에 5개의 이름이 들어가 있다. .length로 몇 개의 아이템이 있는지 확인할 수 있다. 3. 트위터에서처럼 몇 글자 썼는지, 몇 글자 남았는지 알려주는 방법 띄어쓰기도 포함됨. 방법1 .length를 따로 var에 담아서 카운팅 코드 더 깨끗하고 한 눈에 보기 편함 var tweet = prompt("Compose your tweet"); var tweetCount = tweet.length; ale.. 2021. 8. 4.
JS] 자바스크립트 변수명 짓는법 | Naming variables 누구나 알아 먹을 수 있고, 기억할 수 있는 이름을 짓자. 키워드를 변수명으로 쓰지않는다 var var = "Jane"; (x) var myvar = "Jane"; (O) 포함은 가능 숫자만있는 변수명을 쓰지 않는다. var 17 = "Jane"; (X) var my17 = "Jane"; (O) 띄어쓰기 들어간 변수명은 쓰지 않는다. var my name = "Jane"; (x) 컴퓨터는 첫번째 my만 변수명으로 인식하고 다음 name은 뭐하는 건지 모른다. 가능한 텍스트는 문자, 숫자, _ (언더스코어), $(달러) 만 가능하고 다은 기호는 안된다. camel casing 가능 첫단어 소문자 + 다음 단어 대문자를 띄어쓰기 없이 적기 myName 2021. 8. 2.
JS] 자바스크립트 variables 변수란? 변수 만드는 법 변수(Variables)란? Variables(변수)는 데이터를 담는 새 컨테이너를 말한다. 새 변수 만들기 var: variable 데이터를 담을 새 컨테이너 myName: 새 컨테이너 이름 Angela: Value Value 바꾸기 var는 컨테이너 처음 만들때만 쓴다 이 전에 있던 Angela는 꺼내서 버리고 새로운 이름이 통 안으로 들어간다. alert로 value가 나오게 하기 1 변수에 Hannona를 담고 2 alert로 변수이름을 부르면 그 안에 들어있는 Hanoona를 보여준다. Prompt에 입력된 내용 저장하기 변수를 이용해서 prompt에 입력한 내용을 저장할 수 있다. prompt만 사용하면 입력창이 뜨는데 내용을 입력해도 저장되는 곳은 없다. 입력한 내용을 저장하려면 변수를 만들.. 2021. 7. 31.
JS]자바스크립트 Alert / Prompt alert alert는 알림 pop up창이다. 입력한 내용을 화면에 보여준다. Prompt Prompt(프롬트)는 사용자가 입력까지 할 수 있게 한다. 입력한 내용이 프로그램에 저장되지는 않는다. 저장하고 싶다면 variable을 사용해야 한다. 2021. 7. 31.
JS] 데이터 타입 | 명령어와 데이터타입 컴퓨터는 어떻게 명령어와 사용자에게 보여줄 말을 구분할까? 앞에 쓰인 말은 컴퓨터가 명령어로 생각하고 괄호안에 든 말은 데이터 타입으로 인식하여 사용자에게 보여줘야할 말로 생각한다. 프로그래밍 언어는 입력, 연산, 출력이 가장 기본 형태로 되어 있다. 사용자에게 내용을 입력 받아 연산을 한 후 다시 사용자에게 내용을 보여주는 과정이 기본 형태이다. 그래서 1. CPU에 최적화된 연산(로직)을 작성하고, 2. 메모리를 최소화하여 사용하는 것이 중요하다. 그렇기에 어떤 데이터 타입을 결정해서 쓰는 지도 중요하다. 데이터 타입 ( Variable Types ) 데이터 타입은 primitive data type 과 object data type (reference values) 2가지로 나눌.. 2021. 7. 30.
JS] 자바스크립트 기본 문법 기본 문법 function: 브라우저에게 무엇을 할 지 키워드를 준다. 브라우저에 입력된 키워드를 입력해줘야 한다. message: 화면에 띄울 메세지 큰 따옴표, 작은 따옴표 상관 없지만 메세지 띄울 때 대부분의 자바스크립트 개발자들이 큰따옴표를 사용한다. 세미콜론: 마침표 역할 2021. 7. 27.
JS] 크롬에서 자바스크립트 콘솔열어 behavior 만들기 크롬에서 자바스크립트 콘솔 여는 법 2가지 방법이 있습니다. 방법 1 view -> 개발자 -> 자바스크립트 콘솔 alert 입력해 보기 세미 콜론 까지 쓰고 엔터를 누르면 팝업창이 뜬다. 잘 되네요!! 팝업 2개 뜨게 하기 하지만 단점이 있습니다. 팝업 2개를 뜨게 하려고 첫 라인 쓰고 엔터를 쳐버리면 바로 팝업이 나와버립니다. 이럴 때 shift+Enter를 쳐야 다음 줄로 내려갑니다. 두 개를 입력 후 엔터를 치면 하나가 나타나고 엔터를 눌러 업애면 다음 팝업이 뜹니다. 방법 2 화면 오른쪽 클릭 -> inspect -> Source -> 작은 화살표 누르기 -> snippets -> New snippet 생성 이 경우에는 여러 줄 입력하고 마지막에 빨간 박스를 클릭하거나 해당 단축키 누르면 작동이.. 2021. 7. 27.
JS] 자바스크립트란? 자바스크립트 간단한 역사 오늘 자바스크립트를 시작하는 날이다. 공부한 내용을 정리해 보겠다. 우선 자바스크립트가 어떻게 시작하게 되었는지 살펴보자. 옛날 옛날? 1990년 대에 우리가 아는 인터넷익스플로어, 크롬, 파이어팍스, 사파리 이 전에 Mosac이라는 브라우저가 있었다. 마크라는 대학생 때 이 Mosac을 파고서 대학 졸업 후엔 팀의 주축으로 Netscape Navigator 브라우저를 만든다. 그 전까지 html에 특별한 기능이 없었다. 서버에 웹페이지를 요청하면 서버가 제공하는 정도였다. 1995년 넷스케이프 팀은 에니메이션도 넣고, 좀 더 다이나믹한 웹페이지를 만들고 싶었다. 그래서 서버가 아니라 브라우저 자체에서 돌아가게 끔 작은 스크립트 언어로 코드를 짜서 아주 심플하고 비개발자도 사용 할 수 있는 쉬운 프로그래.. 2021. 7. 26.

티스토리툴바