분류 전체보기

웹은 크게 4가지요소가있음 1. 웹페이지를 만드는 컴퓨터언어 html 2. 원하는 웹 페이지의 방문할 수 있도록 도와주는 주소책인 url 3. 페이지를 주고 받는 소프트웨어 인 웹브라우저 웹서버 4. 웹브라우저와 웹 서버가 통신을 할때 사용하는 규칙인 http 예전의 http는 단순한 html을 전달하고 그랬는데 요즘에는 훨씬 발전하여 이미지 오디오 동영상과 같은 다양한 멀티미디어 파일을 전송하는 매우 매우 중요한 프로토콜로 군림하고 있습니다. 이번시간은 Hyper Text Transfer Protocol 에 대해 배워보겠음 비유를 들자면 고객이 판매원한테 물건(html)주세요 하는게 Request이고 점원이 여기요 하고 주는게 response 즉 서버와 클라이언트(고객)이 컨텐츠를 주고받기 위해서는 서..

이번시간에는 백그라운드 이미지를 랜덤하게 나오게 해볼꺼임 일단 숫자를 랜덤하게 어떻게 설정할까 ? Math 모듈을 쓰면 되는데 Math는 많은 것들을 가지고 있음 이중에서 Math.random 을 사용하면 랜덤으로 숫자가 주어짐 만약 0~4.999999사이의 숫자를 랜덤으로 얻고싶으면 Math.random * 5 이렇게 하면 됌 하지만 숫자는 0.15615313 3.42153153 2.153453332 식으로 뒤에 소수점까지 붙어서 출력이 된다. 그래서 우린 Math.floor 사용 할꺼야 비슷한 것은 Math.ceiling floor 바닥 (내림) ceiling 천장 (올림) Math.floor(Math.random() *5); 이렇게하면 0~4까지 랜덤 숫자가 출력 됌

배열의 특정 값 찾기 - find(), filter() 1. find() 2. filter() 1. find() arr.find(callback(element[, index[, array]])[, thisArg]) find() 함수는.. 배열에서 특정 값을 찾는 조건을 callback 함수를 통해 전달하여, 조건에 맞는 값 중 첫번째 값을 리턴합니다. 만약 배열에 조건을 만족하는 값이 없으면 undefined를 리턴합니다. 파라미터 callback(element, index, array) 함수 조건을 비교할 callback 함수이고, 다음 3개의 파라미터가 전달됩니다. callback 함수에서 사용자가 테스트할 조건을 정의하고, 만약 배열의 값이 조건에 부합하여 true를 리턴하면, 해당 배열의 값이 f..

자바스크립트 이벤트의 동작 javascript의 이벤트는 브라우저 상에서 사용자와 상호작용을 통해 제어되는 동작들을 통칭한다. 이벤트 등록 자바스크립트에서는 이벤트 리스너를 통해 사용자의 특정 동작과 그 특정 동작이 발생했을 때 발생시킬 이벤트를 함수로 표현한다. window.onload = function () { alert("Hello World"); }; 위 함수는 window가 load 되었을 때 다음 함수를 실행시킨다. var div = document.querySelector('div'); div.addEventListener('click', function(){ console.log("hi"); }); 위 함수는 div가 클릭되었을 때 콘솔창에 “hi”를 입력시킨다. 이벤트 버블링 & 캡쳐링..

console.log 함수는 argument를 무한하게 가질수 있다 function sayHello (potato, age ){ console.log("hello!", potato, "you have", age, "years of age." ) ; } sayHello("nicolas", 15 ); console.log("hi") 요게 작동 메카니즘 출력물은 이렇게됌 hello! nicolas you have 15 years of age. hi #2-1 console이라는 함수가 있고 log 라는 key가 있음 console 은 nicoinfo보다 더 큰 오브젝트 임 console.log log는 console object안에있는 함수를 의미함 console.log (); 요거는 작동 안함 console...

스크립트파일은 맨아래 있어야함 바디의 #1-5 alert('im working im js') 경고메세지 만드는 코드 #1-6 variable (변수) 정의 : 변경되거나 변경될 수 있는 것. 예시 : a = 5 이다. a = 221로 정정한다. a는 빈 상자와 같다. 하나로 쓰이면 의미가 없지만 그 안에 무엇을 담느냐에 따라 우유상자가 될 수 있고 주스상자가 될 수도 있다. 우리는 빈 상자에 자유롭게 우유를 담기도, 주스를 담기도 한다. 이처럼 변경되거나 변경될 가능성이 있는 것. 이것을 변수라고 한다. JS 변수 기본문법 : 1. 문법은 한 줄에 하나씩 서술한다. 2. 문법이 끝나면 ; 부호를 넣어준다. 3. 변수의 시작에 let을 넣는다. (변수의 종류가 두가지라 이를 구분하기 위해 사용한다.) 변수..

To-do 리스트를 빌드해볼거다. greetings했던것과 비슷하다. todo.js 생성 후 html에 추가해보자. 그리고 toDoList를 입력 할 Form을 만들고, 그 아래에는 입력한 내용을 리스트 형태로 출력하기 위해 ul태그를 생성할거다. 만약에 toDos가 null이면 아무것도 하지 않을거다. 왜냐하면 greeting form과 다르게 이 form은 항상 입력창을 활성화 할것이므로(showing) 여기도 submit 했을 때 문제점을 해결하기 위해 이벤트를 가져올 때 event.preventDefault를 넣어줄거다. 엔터를 누르면 입력칸에 입력 내용이 그대로 남아있는데, 다음 내용을 입력할수있게 엔터를 누르면 공백이 되도록 만들어 줄거다. 이제 ul태그안에 li 를 만들어보자. PaintTo..

localStorage.setItem() 으로 key와 value를 각각 추가할 수 있다. 저장된 값을 가져올 때는 localStorage.getItem()을 사용한다. form, greeting class는 css에서 다루기 위해서 추가한 class 새로고침을 하면 화면에 입력한 User정보가 리셋되는걸 막기위해 localStorage에 정보가 저장되어 있으면, 그 값을 paintGreeting 함수를 통해서 화면에 출력해줄것이다. const form = document.querySelector(".js-form"), input = form.querySelector("input"), //form이 input의 부모이므로 . 붙이지 않고 가져옴 greeting = document.querySelector..