웹프로그래밍/JavaScript 4

드래그 앤 드롭 - JavaScript

오늘의 실습: 드래그 앤 드롭 HTML 과 CSS 설정    JavaScript 1. 변수 설정 일단 각각의 컨텐츠 요소들을 드래그가 가능하게 끔 이벤트를 지정해야 하니 하나의 배열변수로 잡아줘야한다. 그러고 나서 드래그로 가져온 컨텐츠를 놓을 공간을 (dropzone이라고 명명) 변수로 설정해준다. let content = document.querySelectorAll('.content1, .content2, .content3'); let dropzone = document.querySelector('.dropzone'); 2.이벤트 할당 이벤트 할당은 contents와 dropzone 모두에게 적용해주어야 하는데 컨텐츠의 경우 드래그를 시작하는 순간과 드래그를 종료하는 순간 ..

JavaScript - 조건문과 반복문

조건문 조건문은 특정 조건이 참인지 거짓인지에 따라 코드의 진행방향을 제어하는 구문으로 주로 프로그램에서 특정 상황에 따라 서로 다른 동작을 수행시킬 때 사용한다. 사용법이 간단하기 하고 직관적이기 때문에 유용하게 쓸 수 있다! if문 가장 기본적인 조건문의 구조로 조건이 하나만 필요할 때 사용하는 구문이다. if (조건식) { 실행하고자 하는 코드};  if (time "만약 time이 11보다 작다면 문서에 "Good morning!"을 적어주세요"그대로 해석하면 항상 어느정도 의미가 맞아떨어지는 편이라 사용하기가 좋다. If else문 if문에 조건이 하나 더 달려있는 구조 if (time "만약 time이 11보다 작다면 문서에 "Good morning!"을 적고 아니라면..

JavaScript - 연산자

연산자 (Operator)  우리가 학교에서 배웠던 더하기 빼기 등 몇 가지 이미 알고 있는 기호들이 있는데 이를 프로그래밍 언어에서는 연산자라고 부르며 사용한다. 연산자는 수치 데이터를 곱하고 옮기고 비교하는 등 데이터를 가지고 다양한 비교 분석을 할 수 있도록 도와주는 도구라고 알고있으면 된다. 연산자의 기본원칙! 1. 모든 연산에서 괄호 연산은 가장 먼저 계산한다 2. 우선순위가 동일한 연산자는 좌에서 우로 진행되면서 연산이 이루어진다 3. 이항 연산보다 단항 연산의 연산이 먼저 이루어진다 4. 산술 연산자 > 비교 연산자 > 논리 연산자 순으로 우선순위가 주어진다 5. 대입 연산자는 우선순위가 가장 낮다 산술연산자 : 수치 데이터를 처리하기 위해 사용하는 기본적인 연산자로 우리가 가장 잘 알고있는..

JavaScript 배우기

JavaScript 배우기  앞에서 배운 HTML과 CSS 그리고 JavaScript, 3개의 언어가 모두 더해져서 대부분의 웹페이지가 만들어지는데 HTML의 경우 웹페이지의 기본적인 구조, 뼈대를 담당하고 CSS는 사용자에게 보이는 모든 부분의 스타일을 담당하는데 JavaScript(앞으로 JS라고 부르겠다)의 경우에는 웹페이지가 가질 수 있는 동적인 부분. 즉 애니메이션이나 다른 기능적인 부분들을 구현할 수 있게 해준다. (사실 그것보다는 좀 더 포괄적인 일을 하는게 JS다)  JavaScript의 특징 인터프리터 언어 우리는 기계가 하는 2진수 기반의 언어인 기계어를 이해할 수 없기 때문에 기본적으로 기계어를 번역해주는 프로세스가 반드시 필요한데 이런 역할을 하는 번역기가 바로 컴파일러와 인터프리터..