JS

Front End/JavaScript

[JavaScript 응용] 방명록 만들기 1. 방명록, 작성 기능

방명록 만들기, 작성 기능을 구현해보자. 작성자, 글 비밀번호, 내용을 작성하고 작성 버튼을 누르면 새로운 영역에 글이 작성되는 기능이다. 방명록 작성자 글 비밀번호 내용 작성 바디에서 작성자, 비밀번호, 내용 의 값을 사용자에게 받아 "작성" 버튼을 이용해 함수 a() 를 불러낸다. (onclick = "a()") 에서 각 값의 이름으로 접근해 값을 받아 변수에 담는다. 값들을 파라메터에 담아 mkDiv 함수를 불러낸다 mkDiv 는 div 태그에 감싸서 내용을 프린트 하기 위해 만들었다. 새로운 div 태그를 만들어 영역을 추가한다. 새 div 태그에 id를 지정하고 비밀번호를 추가한다. 아이디가 겹치지 않도록 cnt 를 추가한다. 생성된 div 에 출력할 내용을 담은 변수 html 을 초기화해준다...

Front End/JavaScript

[JavaScript] 이미지 배열에 담아 나타내기

이미지 버튼 눌러 넘기기 버튼을 누를때마다 함수 a()를 호출한다.

Front End/JavaScript

[JavaScript] 폼 양식 자바 스크립트 (JS) 로 불러내기

폼 양식 자바 스크립트 (JS) 로 불러내기 폼 양식을 자바 스크립트로 불러오는 문법이다. text, password, number 폼 받기 변수 html 에 위 문법을 사용해 값을 받고 html 변수를 출력하는 코드이다. 폼 양식 종류 id : pwd : phone :

Front End/JavaScript

[JavaScript] 자바 스크립트, 변수/상수

변수 계속 변하는 값 var 변수명; let 변수명; //지역변수 (블록 내/외) 가능 //전역변수. 어느 함수나 사용 가능 var a = 1; let b = 2; function f1() { //함수 호출 안하면 실행 안된다 alert("f1()a:" + a); //1 alert("f1()b:" + b); //2 var x = 3; //지역변수. f1() 함수에서만 사용이 가능하고 f2()에서 쓰지 못한다. let y = 4; alert("f1()t:" + t); //변수를 정의하지 않으면 에러 발생 alert("f1()x:" + x); //3 alert("f1()y:" + y); //4 } function f2() { alert("f2()a:" + a); //1 alert("f2()b:" + b); ..

Front End/JavaScript

[JavaScript] 구구단을 테이블에 넣어보자

자바 스크립트에서 구구단을 구현하는 방식은 다양하다. 1. for 문 이용한 방식 구구단을 아래와 같은 형식으로 JS를 이용해 프린트해보자 코드 결과 2. 함수 이용한 방식 function 안에 for문을 넣어 body에서 호출하면 된다. 자바 스크립트 함수 정의 코드 결과 ⬇️ 자바 스크립트 문법 보러가기 TISTORY 나를 표현하는 블로그를 만들어보세요. www.tistory.com

Front End/JavaScript

[JavaScript] 자바 스크립트, 이벤트 핸들러

이벤트 UI에 발생한 사건이다. 클릭, 드래그, 페이지 로드, 입력값 변경 등이 있다. 이벤트 핸들러 이벤트가 발생했을 때 자동으로 호출되는 함수이다. 핸들러 등록 속성 on이벤트명 이벤트 처리 click : 클릭 시 발생하는 이벤트이다. onclick load : 페이지 열리자마자 발생하는 이벤트이다. onload window.onload = 함수명; // 코드 결합 function 함수명(){ } //onload 속성에 함수 등록 window.onload=함수명; => window의 onload 속성으로 핸들러 등록. // 위 두개 코드 결합하면. // 해당 함수는 onload 이외에 다시 사용할 일이 없어서 결합하여 한 번 사용하는 익명의 함수를 생성. // 익명함수. 이름이 없는 함수, 이벤트 핸..

Front End/JavaScript

[JavaScript] 자바 스크립트, 페이지 이동

페이지 이동 페이지를 이동하게 하는 명령어이다. location.href= "이동할 페이지"; 예시

Front End/JavaScript

[JavaScript, CSS, HTML] 오류 찾는 방법

개발자 도구 자바 스크립트에서는 코드를 통해 오류를 찾는 것이 아닌, 크롬 등의 브라우저의 개발자 모드를 통해 오류를 찾는다. 크롬의 경우, F12 혹은 도구 더보기 - 개발자 도구를 통해 오류를 찾는다. 개발자 도구 사용법 1. 오류가 발생한다면 개발자 도구 상단에 X 표시가 뜨게 된다. 이를 눌러주면 하단에 나온 에러의 파일 명을 선택하면 이와 같은 페이지가 나오며 오류가 생긴 부분을 알려줍니다. 이를 보고 고치면 끝! 참 쉽쥬?

Front End/JavaScript

[JavaScript] JavaScript에서의 HTML 사용

JavaScript 에서의 HTML 사용 HTML 문서에 출력하는 메서드이다. document.write("내용"); JavaScript 와 HTML 실행 JS에서 정의한 값을 메서드 문법을 사용해 불러오면 다음과 같은 결과를 볼 수 있다.

Lar
'JS' 태그의 글 목록