여행하는 코딩끄적끄적

목차 [Javascript] Jquery HTML 불러오기 javascript로 만든 Jquery에서 html()함수를 사용하게 되면 선택자(selector)로 선택된 범위 내에 html 구문 내용을 가져옵니다. 우선 jquery를 사용하기 위해 아이디는 무엇? 비밀번호 Get Html info 결과>> [Javascript] Jquery 텍스트(text)값 가져오기 선택한 태그내의 텍스트 값을 가져 옵니다. 구성은 위에 html 함수와 동일 합니다. 코드>> 아이디는 무엇? 비밀번호 Get Html info 결과>> [Javascript] Jquery 속성(attribute)값 가져오기 attr(속성값) 함수를 사용하여서 속성의 값을 가져옵니다. 구성은 앞 예제들과 동일 합니다. 코드>> 아이디는 무엇..

목차 참조 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) Bootstrap 팝업창(modal, dialog box) 만들기 (크기 조절) Bootstrap에서 말풍선을 만드는 방법은 크게 두가지가 있다. tooltip modal 툴팁의 경우 마우스를 올려만 놓아도 박스가 생기고 마우스를 옮기면 사라진다. 모달의 경우 클릭과 같은 행동을 통해 새로운 창을 만들고 그 창을 원하는 형태로 꾸며 줄 수 있다. 예제 코드로 이해해보기 코드>> 버튼을 클릭하면 말풍선/팝업창이 생깁니다 클릭 × 헤더 부분 바디 부분 테일부분 닫기 결과>> 주석>> 모달..

html 문서에서 head 내에 필요한 css나 js(javascript) 문서 링크를 선언한다. ​ 코드>> 주석>> web 브라우저에 그래프를 그리기 위해서 필요한 js와 css를 가져오는 가정이다. ​ link 문에는 css 문서를 css 서버에서 가져온다. ​ script 는 js 자바스크립트 문서를 가져온다. jquery는 javascript 코드를 사용하기 편하게 만들어놓은 일종의 라이브러리로 앞으로 진행할 프로젝트에 필요하다. ​ bootstrap은 jquery 처럼 누군가 구현하기 피곤한 javascript를 객체로 제공하는 것으로 우리는 필요한 부분만 빼서 사용하면 된다. ​ Chart는 그래프 그릴때 필요한 자바스크립트로 이미 구현된 것을 명령어들을 가져와서 사용하면된다.

자바스크립트의 객체 지향을 공부했다. 파이썬의 Class 와 유사했다. 파이썬의 클래스에서 init에서 변수를 선언하고 그 뒤에 함수들을 선언해서 사용하는 것과 유사하게 javascript 에서 사용할 수 있다. 아래 예를 통해 이해해 보자. 코드>> 결과>> 주석>> a_var 라는 객체 안에 변수들을 키값하나에 다시 객체로 넣었다. 그리고 함수를 'function'이라는 키값 안에 넣었다. for 문 안에 this가 있는데 이것은 python에서 self를 말하는 것처럼 여기서는 a_var 자신을 가리키는 것이다. 그래서 a_var에서 변수 키값인 "variables"를 사용해서 값을 가져와서 함수에 적용한 것이다.

코드 예제를 통해 바로 이해해보자 코드>> 결과>> 주석>> push 는 배열 마지막에 추가해준다. concat은 배열 마지막에 여러값을 추가해준다. unshift는 배열 앞에 추가해준다. splice는 원하는 인덱스 위치에 여러 값을 넣어준다. pop은 배열 마지막 값을 빼준다. shift는 배열 앞의 값을 빼준다. sort는 숫자나 string을 정렬해준다. reverse는 역순으로 정렬해준다.

크롬 브라우저에서 디버깅 하는 방법을 정리하겠다. 아래와 같은 코드를 실행한다고 가정하겠다. 코드>> hello1 hello2 주석>> 코드를 실행하고 한줄 한줄 내용을 확인하고 싶을때 break point를 정하고 그 부분부터 한줄씩 코드를 실행하면서 변수가 값의 변화를 확인하는 것을 debugging 이라고 한다. 위와 같은 코드는 간단해서 쉽게 알수 있지만 만일 코드가 복잡하고 많은 변수가 있다면 변수의 변화를 직관적으로 확인하기 힘들 때가 있다. 그럴때 코드를 실행 후 웹 브라우져에서 마우스 오른쪽을 클릭하고 검사를 누른다. 그럼 아래 그림처럼 나온다. 그림에서 위에 탭중에 Source를 선택한다. 그럼 아래처럼 코드를 확인할 수 있고 원하는 break point 지점의 숫자를 클릭한다. 여기 예..

자바스크립트로 웹페이지에 텍스트를 표현하고 싶을 때 사용하는 명령어 이다. 아래 코드로 애해해보자. 코드 >> hello1 hello2 결과>> 주석>> 자바스크립트로 write를 이용해서 글을 쓰는 이유는 반복적인 동작이나 논리에 따른 텍스트의 변화를 주고 싶을때 write와 함께 사용할 수 있다.

자바스크립트 prompt는 웹 화면에서 입력을 받아서 넘겨 주는 역할을 한다. 아래 코드를 통해 이해해 보자. 코드 >> 결과>>

이제부터 자바스크립트 기초부터 정리하려고 한다. 파이썬의 print 와 비슷하게 결과들을 확인 하는 방법으로 alert와 console log로 확인하는 방법이 있다. 아래 코드로 이해해 보자 코드>> 결과 >> 주석>> html 파일을 열면 위처럼 alert 메세지가 바로 뜨고 console log는 크롬에서 개발자 모드로 들어가면 위 그림처럼 console 탭이 있다. console 탭을 선택하면 위처럼 메세지 값을 확인할 수 있다.