본문 바로가기

웹/JAVA SCRIPT12

[코딩 공부_105] Symbol Symbol() 함수는 심볼 형식의 값을 반환하는데, 이 심볼은 내장 객체의 여러 멤버를 가라키는 정적 프로퍼티와 전역 심볼 레지스트리를 가리키는 정적 메서드를 가지며, new symbol() 문법을 지원하지 않아 생성자 측면에서는 불완전한 내장 객체 클래스와 유사하다. symbol()로부터 반환되는 모든 심볼 값은 고유한다. 심볼 값은 객체 프로퍼티에 대한 식별자로 사용될 수 있다. 이것이 심볼 데이터 형식의 유일한 목적이다. 매개변수 선택적 문자열. 디버깅에 사용할 수 있는 심볼에 대한 설명으로 심볼 자체에 접근하는 용도로는 사용할 수 없다. 새 원시 심볼을 생성하려면, 심볼을 설명하는 선택적 문자열과 함께 symbol()을 쓰면 된다. var sym1 = Symbol(); var sym2 = Sym.. 2021. 7. 14.
[코딩 공부_104] js, 이벤트 종류! js 이벤트 종류에 대해 알아보자! 1. 기본 이벤트 - 요소에 개발자가 굳이 이벤트를 연결하지 않았음에도 기본적으로 실행되는 이벤트 (ex. a요소를 클릭 → 해당 경로로 페이지 이동) (ex. 브라우저 화면에서 우측 마우스 버튼을 클릭 → contextMenu 나타남) (ex. form 요소 내 submit 버튼을 클릭 → 지정된 경로로 내용을 전송함) 2. 마우스 이벤트 - click(onclick=addEventListener) : 마우스 버튼을 클릭하고 버튼에서 손을 땠을 때 생기는 이벤트 - dbclick(ondbclick) : 마우스 버튼을 두번 연속 더블 클릭함 - mousedown(onmousedown) : 마우스 클릭의 앞 절반 (버튼을 누름) - mouseup(onmouseup) : .. 2021. 7. 11.
[코딩 공부_102] drag 이벤트 사용하기 포트폴리오에 drag 이벤트를 사용해서 넣으려했는데 다 만들고나니... 필요가 없어져서 ㅠㅠㅠ 블로그에만 남기기로 했다.. 하하 왼쪽에 있는 검정원을 오른쪽으로 드래그하면 텍스트가 바뀌는 drag 이벤트를 사용했다 ㅎㅎ! Drag로 항해를 도와주세요! 2021. 7. 2.
[코딩 공부_91] accordian 실습하기(pure js) close all About Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciatis alias nihil commodi quos praesentium sint officiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nostrum magni ex aspernatur. Modi mollitia in aliquid earum, placeat, odio voluptas perspiciati.. 2021. 6. 8.
[코딩 공부_90] DOM 1. BOM : 웹 서비스 개발은 브라우저와 밀접한 관련이 있다. 모든 서비스는 웹 브라우저를 바탕으로 실행된다. 이 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라 부른다. BOM을 이용해서 Browser와 관련된 기능들을 구성한다. DOM은 BOM 중 하나이다. ** BOM의 차상위 객체는 window라는 객체이다. DOM은 이 window 객체의 하위 객체이기도 하다. 2. DOM : Document Object Model의 약자로, 문서 객체 모델이다. - 더 쉽게 풀어 이야기하자면, 넓은 의미론웹브라우저가 HTML 페이지를 인식하는 방식을 의미하고, 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있다. - D.. 2021. 6. 7.
[코딩 공부_89] for in 반복문, 배열(Array) 1. for in 반복문 : 객체 안의 property를 제어할때 사용한다, 소스 코드를 입력한 배열 혹은 객체의 속성에 맞게 반복하여 실행하는 역할을 한다 2. 배열(array): 순서가 있는 여러 값(data)의 묶음 - 순서가 있는 데이터들 or 순서가 없는 데이터들도 가능 - 배열은 [] 대괄호로 나타낸다 (객체는 {}) ** 배열도 object다 3. length : 문자열의 길이를 반환하는 속성이다 - 예를 들어 'abcd'.length 인 경우 4(문자열의 길이)를 반환하게 된다. 4. forEach 반복문 : 배열의 요소들을 반복하여 작업을 수행할 수 있다 (array에서만 사용가능하다.) - forEach구문의 인자로 callback 함수를 등혹할 수 있고, 배열의 각 요소들이 반복될 때.. 2021. 6. 4.
[코딩 공부_88] 객체(object), 프로퍼티(property), 메소드(method) 1. 객체(Object) : 여러값을 한번에 저장한 형태를 뜻한다(JS는 모든 것이 다 객체로 이루어져있다) 2. 객체의 구성 3. 객체의 표현 - key에 따옴표 생략 가능하다. - key에 _, $ 문자로 시작하기 - value에는 모든 자료형 추가 기능 - 객체 안에 객체도 삽입가능 4. 객체에 접근하기 - 점 표기법 > .으로 접근 - 대괄호 표기법 - 객체 안에 객체에 접근 2021. 6. 3.
[코딩 공부_87] for문, switch문 * 증가/감소 연산자 : 숫자 1을 증가시키거나 감소시킨다 1) 증가연산자 2) 감소 연산자 1. for문 : 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문이다.(쉼표 연산자를 사용하면 동시 사용가능) - 초기화 부분은 처음 한번만 실행된다 - 조건 부분은 boolean으로 판단, false가 될때까지 실행된다 - 조건 부분이 한번 실행되고 추가 동작 부분이 한번 실행된다 * if문은 한번만 실행되지만 for문은 조건만큼 계속 반복된다 - i = 0; (i를 0부터 시작한다) - i 2021. 6. 3.
[코딩 공부_86] scope, const, 연산자, if문(조건문) 1. scope :변수에 접근할 수 있는 범위 - 지연 변수는 블록문 내에서만 유효하다 ** scope는 global(전역)과 local(지역) 2가지의 타입이 있다. - global scope : 전역에 선언되어 어느곳이든 해당 변수에 접근할 수 있다 - local scope : 함수 내부에만 영향을 주며, global scope처럼 전역에 접근 할 수 없다! 2. const : 변하지 않는 값 1) var, let, const의 차이점 - var는 함수 레벨 스코프이고, let, const는 블럭 레벨 스코프이다. - var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만, let, const는 에러가 발생한다. - var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나.. 2021. 6. 1.
[코딩 공부_85] Return에 대하여 Return에 대해 배웠다 여전히 긴가민가한 그녀석 ..이다 하하 1. Return : 반환하다, 값을 돌려준다 - 함수가 실행된 자리에서 값을 돌려준다 - 함수 내에서 어떤 값을 최종적으로 돌려주는 것 ** return 뒤에 오는 함수는 즉시 종료 된다 (dead code) - function 함수이름(파라미터) {return 반환할 값;}; 이 기본이다. (위 내용 해석 : firstNum + secondNum = 300, return하여 300 * 2를 해줌으로써, 600의 값이 나온다. (헷갈리는 것?) return과 console.log - console.log : 값을 출력해 주는 것 - return : 함수 내에서 어떤 값을 최종적으로 돌려주는 것 2021. 5. 30.
[코딩 공부_84] function과 parameter function과 parameter에 대해 배웠다 참 복잡미묘한 친구들인 거 같다 어려운 거 같기도 하고 아닌 거 같기도 하고! 잘모르겠당,, 1. function(함수) : 명령들의 모임, 함수를 선언하고 실행할 수 있다 - 반복을 줄여준다 - 재사용 가능하다 - 일관성 유지 - 버그 발생률이 떨어진다 - 추상화다 2. Parameter(파라미터) : 값을 전달한다 쉽게 설명하자면, 믹서기(function)는 과일(parameter)을 입력받아 주스를 출력하는 함수와 같다. 1. 과일 값 계산하기 - 알파카는 퇴근길에 마트에 들러 오랜만에 장을 봤습니다. 아래와 같이 감자, 복숭아, 사과를 구입하였습니다 - 감자 5개, 복숭아 10개, 사과 2개 - 감자 : 2000원, 복숭아 3700원, 사과 : 5.. 2021. 5. 27.
[코딩 공부_83] JS 첫걸음, 기초 공부 드디어 JS 문을 열어버렸다!! 😨 근데 아직 처음이라 그런가!! 아직 어려운 느낌은 안든다..! 이랬는데 또 담날 되면 울고 있을 나의 모습이 보인다 하핫 그래! 처음부터 힘들면 누가 하겠나 싶다!! 오늘은 JS 변수 선언하는 방법에 대해 배웠다 js는 코드에 따라 다르지만 통상적으로 제일 밑에 자리를 차지하고 있다. 왜냐?! css 또는 html 문서가 다 읽히고 난 후에 적용 되는 부분이 많기 때문에 제일 밑에 자리하는 경우가 많다고 한다. 그 이야기를 역으로 해보면 js가 먼저 결과가 나와야할 경우엔 위에 위치해야한다는 말이 된다! 이 부분을 잘 기억해둬야할 거 같다!!😏 1. JavaScript - netscape사에서 개발(브랜든) - 동적인 웹사이트를 만들기 위해 개발됨 - 개발 언어는 누군.. 2021. 5. 26.