뒷북 정리 (국비 교육)/javascript16 [javascript] step08. regular expression step08. regular expression (정규 표현식) 정규 표현식 (Regular Expression) 첫글자는 영문 소문자로 시작, 특수문자는 허용하지 않음... 최소 5글자 최대 10글자 가입 정규 표현식. regular expression이라고 한다. 어떤 언어를 사용하든 정규 표현식은 거의 유사하다고 말했다. 언어마다 조금씩 다르지만 javascript에서 정규 표현식은 '/' 로 감싸서 작성한다. 다른 text와 마찬가지로 정규 표현식으로 작성한 값을 변수에 담는 것은, 그 text 자체를 담는 것이 아니라 text의 참조값을 담게 된다. 또한 test(str) 함수를 통해 input 값과의 일치 여부를 확인할 수 있다. 영어 대소문자를 구분한다. (ex - Hello와 hello는 .. 2021. 12. 14. [javascript] step07. innerHTML step07. innerHTML .innerHTML 사용하기 innerText는 해당하는 문자열을 내용 그대로 출력하지만, innerHTML은 html 해석에 맞게 해석해서 출력해준다. step07. example 추가 문자열이 담긴 변수를 더해서 해당 요소를 추가할 수도 있다. 문자열 대신 back tick ` ` 을 이용해서 해당 요소를 추가할 수도 있다. 이런 방식으로 요소를 만드는 것보다 createElement 함수를 이용해서 만드는 것이 더 나아보인다고 말했으나, 가끔씩은 사용한다고 말했다. 참고 debug를 할 때, web browser 검사 sources tab에서 break point를 걸어서 확인할 수 있다. 활용 가치가 높다. 여기까지 html의 기초와 javascript의 기초가 끝.. 2021. 12. 13. [javascript] Dragon Flight 만들기 (21.04.14 ~ 21.04.16) Dragon Flight 만들기 (21.04.14 ~ 21.04.16에 걸쳐 진행) 파일이 길어서 작성했던 필기를 기반으로 몇 가지만 기록하도록 한다. // context를 이용해서 그림이 그려지는 빈공간 let canvas = document.querySelector("#myCanvas"); // canvas에 그림이 그려지기위한 도구 let context = canvas.getContext("2d"); // 배경 이미지 loading let backImg = new Image(); backImg.src = "images/backbg.png"; canvas 위에 context로 그림을 그리는 방식으로 게임을 만든다. 초당 몇 번씩 반복해서 그림을 그려주려고 한다. new의 의미는 heap 영역에 obj.. 2021. 12. 11. [javascript] step06. createElement step06. - 01~02. createElement 문서 객체를 javascript로 만들기 추가하기 createElement : 원하는 시점에, 원하는 객체를 만들어서 넣을 때 사용한다. console 창에서 직접 작성해보면 요소 안에 없던 요소가 생긴다. 이렇게 문서 객체를 동적으로 만들 때 사용한다. 하지만 변수에 넣어주지 않으면 그저 버려질 뿐이라고 했다. createElement로 만들어진 요소는 원하는 객체에 .append(xxx)를 통해서 추가할 수 있다. querySelector는 document의 기능이고, append나 addEventListener는 참조해온 것에 해당하는 객체의 기능이다. 추가 box box box setAttribute("a", "b") : 만든 요소에 속성을 .. 2021. 12. 11. [javascript] step05. operator (연산자) : 증감 연산자 / example.3~4 5. 증감 연산자 증감 연산자 테스트 가장 마지막 예시를 짚고 넘어가야 한다. num++ 와 ++num은 같은 결과를 낸다고 했지만, 두 result는 서로 다른 결과를 낸다. (11 / 10) ++a의 경우는 증감 연산 -> 산술 연산 -> 대입 연산 순으로 진행되어 11이다. b++의 경우는 산술 연산 -> 대입 연산 -> 증감 연산 순으로 진행되어 10이다. 하지만 a와 b는 동일하게 1의 값을 가진다. 이것은 증감 연산자를 변수 뒤에 붙이면 연산의 우선 순위가 가장 뒤쳐지기 때문이다. 이런 식을 쓸 일은 없긴 하겠지만, 혹시 모르기 때문에 적어둔다. 이 ++는 이전 loop에서도 본 적이 있다. 이 내용을 loop에 추가할 것이다. example.3~4 대입연산자 예제 누적하기 0 증감 연산자, .. 2021. 12. 9. [javascript] step05. operator (연산자) : 비교 연산자 4. 비교 연산자 비교 연산자 테스트 문자열의 일치여부나 숫자의 크기 비교는 어떻게 보면 당연한 것이다. 짚고 넘어가야할 부분은 문자열에도 크기가 있다는 것이다. 예시의 5번째 경우를 보면 "a"보다 "b"가 크고, "가" 보다 "나"가 큰 것을 짚고 넘어가자. 글자가 뒤로 갈수록 커지니까, 이것으로 순서의 비교가 가능하다. 2021. 12. 9. 이전 1 2 3 다음
