김숭늉 마음대로

안녕하세요. 이번글에서는 기본연산자에 대해 알아보겠습니다. 첫번째는 계산기 기능을 하는 수학 연산자(math operators)입니다. 숫자 덧셈 뺄셈 나누기 곱하기 등 계산기의 역할을 하는 연산자를 의미합니다. 아래 예시를 보시면 -, *, / 를 연산자라고 합니다! //math opeators const now = 2037; const ageJonas = now - 1991; const ageSarah = now - 2018; console.log(ageJonas, ageSarah); // 46 19 console.log(ageJonas * 2, ageJonas / 10, 2 ** 3); // 92 4.6 8 두번째는 문자열 연산자 (string operators) 입니다. 문자열 두개이상을 서로 이..

안녕하세요. 김숭늉입니다. let, const, var의 차이점에 대해 간단하게 알아보겠습니다. let, const, var의 차이점 let : 빈 변수를 선언할수 있고, 변수값을 재 할당 할수 있습니다. const : 변수값을 재 할당할수 없으며 빈변수를 선언할수 없습니다. 변수값을 바꾸면 버그가 생기는경우에 사용합니다. var : 옛날 정의 방식으로 let이랑 거의 비슷하지만 지금은 거의 사용하지 않습니다. let age = 30; // 빈 변수를 선언할수 있음 age = 31; // 변수값 재 할당 가능(reassign the variable) const birthYear = 1991; // 빈변수를 선언할수 없음 , 변수값을 바꾸면 버그가 생기는 경우 birthYear = 1990; var job..

자바스크립트의 Data type에 대해 알아 보겠습니다. Data type의 Value(값)은 object(객체) 혹은 primitive data(원시 데이터) 둘중 하나 입니다. primitive data(원시 데이터)의 종류는 뭐가 있을까? 1. 숫자(number) let age = 23; let PI = 3.1415; // 파이 처럼 변하지 않는 숫자인경우는 변수명을 대문자로 사용함 (관례적 약속) 2. 글자 (string) let firstname = 'seung' 3. 불리언 (Boolean) - true or false 4. undefined - 변수를 선언했을때 (빈값임) //undifined let year; // 빈 변수 console.log(year); // undifined conso..

Jquery 설치 방법에 대해 알아보겠습니다. Jquery는 자바스크립트 코드를 짧고 효율적으로 쓸수있는 마법의 라이브러리이죠! 아주 오래된 라이브러리여서 아주 안정된 라이브러리라고 볼수 있으며 아직까지도 많은 사람들이 쓰고 있는 라이브러리 입니다. 바로 본론으로 들어가서 Jquery 설치방법에 대해 알아보겠습니다. 이 Jquery를 설치하는 방법에는 총 두가지가 있습니다. 먼저 첫번째 방법부터 알아볼게요. 첫번째방법 : 내컴퓨터에 직접 Jquery 파일 다운 내 컴퓨터 안에 Jquery파일을 다운로드하여 스크립트 소스로 파일경로를 연결 시키는 방법입니다. 아래 URL에 접속하거나 구글에 'Jquery CDN'이라고 검색을 하시면 됩니다! 원하는 버전의 파일을 클릭하시면 됩니다. 간단하죠 ? 아래 캡처로..

1. 자바스크립트에서 이벤트란? 웹브라우저 상에서 일어나는 의미있는 동적인 이벤트 ! // 클릭시 alert // 변화가 있는경우 alert // 화살표 아래방향시 alert 2. 자바스크립트에서 콘솔창이란? 개발자도구로 들어가 Elements 에서 esc를 누르면 콘솔창이 사라졌다 생겼다함 콘솔창에서 화살표 윗쪽 키를 누르면 전에 썻던 코드가 불러와짐 3. 자바스크립트에서 데이터타입이란? 자바스크립트 데이터타입에는 어떤것이 있는가? 참고 url https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures 'hello world'.length // 글자갯수 11개 'hello world'.toUpperCase() // HELLO WORLD 대..

고차 함수를 이해하기 위해서는 함수에서 쓰이는 인자(아규먼트)와 매개변수(파라미터의) 개념을 먼저 알아 보겠습니다. 인자란(argument, 아규먼트)란? 함수에서 호출시에 함수로 실제 INPUT 값을 전달하는 변수값 매개변수(parameter, 파라미터)란? 함수안에서 사용되는 '변수'이며, 함수를 정의할때 사용됩니다. function test("매개변수") { return 매개변수; } test("인자", "인자"); 고차함수란? 고차 함수(Higher order function, 'HOF')는 함수를 인자로 전달받거나 혹은 함수를 결과값으로 반환하는 함수를 뜻합니다. 쉽게 이야기하면, 함수안의 함수 즉 함수를 핸들링하는 함수입니다. 고차함수에 대해 계산기 만들기 예제 코드로 한번 알아 볼게요! //..

안녕하세요 김숭늉 입니다 :) 그럼 바로 알아보겠습니다! 먼저 첫번째로는 dom을 사용하여 button 요소중 [0]번째를 가지고온후 이벤트 리스너를 추가해줍니다. 이벤트 리스너는 click시 alert가 노출되는 function을 추가하였습니다 :) document.getElementsByTagName("button")[0].addEventListener("click", function(){ /// 0번째의 버튼에 적용 alert("클릭하셨네요? You got clicked!"); }) 위 코드를 실행하면 아래와 같이 button의 0번째의 버튼을 클릭하면 아래와 같은 alert 창이 생성 됩니다. 그다음은 방금 작성한 문장을 for 루프로 넣어서 버튼의 갯수만큼 루프가 돌아갈수 있도록 설정합니다! :..

자바스크립트 이벤트리스너의 기존구조 안녕하세요~ 자바스크립트의 이벤트리스너의 기본 구조에 대하여 알아 보겠습니다 ! document.getElementById("names").addEventListener("click", function(){ // 이 안에 function에 대한 내용을 작성함 }) 위의 이벤트리스너 기본구조를 풀어서 설명 하였습니다. 아래는 마우스 클릭시 이벤트 리스너를 통해 해당 names를 보여주지 않는 방법입니다. document.getElementById("names").addEventListener("click", function(){ // click을 하였을때 document.getElementById("alert").style.display = 'none'; // style..

DOM과 자바스크립트를 활용하여 2인 랜덤 주사위 굴리는 페이지 만들어 보겠습니다. 플레이어1과 플레이어2가 각각 랜덤주사위를 굴려 누가 승자인지 페이지에 노출시켜주면 되는 과제 입니다. 위 페이지는 랜덤주사위를 굴리기 첫 시작 페이지입니다. 상단에 으로 문구가 작성되어있고, Player 1과 Player 2의 주사위가 각각 h1문구 하단에 위치해 있습니다. 지금 위 상태는 js파일과 아래의 주사위 이미지 파일이 html 문서에 연결되어있지 않은 상태입니다. (아무런 액션을 취하지 않은 상태의 페이지에서는 각 주사위는 6이 고정으로 보이도록 합니다.) 먼저, dicee.html에 미리 만들어둔 자바스크립트 문서(index.js)와 이미지소스를 html 문서에 연결 시키는 간단한 작업부터 시작합니다. Re..

DOM을 이용해서 a 태그의 웹 주소를 수정해보겠습니다. 먼저 아래 attributes 통해 속성을 파악합니다. 먼저 아래 getAttribute 통해 href를 조회합니다. 먼저 아래 setAttribute로 수정할 주소를 콤마 뒤에 입력합니다.