본문 바로가기

WEB

(28)
[JS] 이벤트처리 - 마우스 조작 https://developer.mozilla.org/ko/docs/Web/Events#%EA%B0%80%EC%9E%A5_%EC%9D%BC%EB%B0%98%EC%A0%81%EC%9D%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 마우스 이벤트 이벤트명발생하는 시점 mouseenter (en-US) 포인팅 장치가 리스너가 등록된 엘리먼트 위로 이동했을 때. mouseover (en-US) 포인팅 장치가 리스너가 등록된 엘리먼트나 ..
[JS] Window - addEventListener 이벤트 처리하기 2022.07.01 - [WEB/Javascript] - [JS] 브라우저 DOM [JS] 브라우저 DOM https://www.w3schools.com/js/js_htmldom.asp JavaScript HTML DOM W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like.. tae-05-yu.tistory.com 이전 DOM 포스팅에 사용했던 버튼 예시를 사용해보자 HTML 삽입 미리보기할 수 없는 소스 타겟.addEventListener(타입(이벤트명),함수(리스너)) const btn = document.quer..
[JS] Window - 안내메세지 / 확인메세지 / 입력메세지 띄우기 window 속성(값) 메소드 타겟 을 배경색으로 구분하겠다. HTML 삽입 미리보기할 수 없는 소스 여기서 사용한 메세지창을 띄우는 각각의 메소드들(alert / confirm / prompt)은 DOM의 최상위 객체인 window객체의 메소드이므로 타겟인 window을 생략하고 사용할 수 있다. .innerHTML() 으로 사용자에게 받은 결과값을 html 요소 중 class 이름이 .log인 요소의 값을 변경한다. 타겟 : document.querySelector('.log') 값 : 변수에 저장되는 메소드(confirm,prompt)의 결과값 결과 : 요소의 값이 사용자에게 입력받은 결과값으로 변경된다. 버튼2는 confrim('재밌는 하루를 보냈나요?')으로 확인과 취소 두 버튼을 가지며 메시지..
[JS] 브라우저 DOM https://www.w3schools.com/js/js_htmldom.asp JavaScript HTML DOM W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 웹 브라우저에서 다루는 객체(BOM) 중 가장 최상위는 window이며 DOM은 window의 하위객체 DOM(Document Object Model) 문서객체모델로 여러 모델이 있지만 여기선 HTML DOM으..
[JS] 기본 배열 - 1편 JS의 배열은 데이터 타입에 상관없이 혼합해서 사용할 수 있다. const array_1= [1,'apple',true] 배열의 정의로 함수 new Array()을 이용할 수도 있다. const a = new Array(3) a[0]='apple' a[1]=false a[2]=34 또는 아래처럼 정의할 수 있다. const b = new Array('orange',true,43) 그렇지만 데이터를 직접입력하는 경우 [ ] 을 사용하는 것이 가장 간단하다. 배열을 다룰 때 사용하는 여러 함수가 있다. 1) forEach(콜백함수) 콜백함수로 배열의 값과 인덱스를 활용해서 출력해보자 onst array_1 = [2,3,5,7,11,13,17,19] array_1.forEach((value,index) => ..
[Flask][Flask-WTF] 유효성 검사 이전 포스팅에 이어서 유효성 검사 Validating Forms 1. vaildator 객체를 추가한다. from flask_wtf import FlaskForm from wtforms import StringField,PasswordField,SubmitField from wtforms.validators import DataRequired class MyForm(FlaskForm): email = StringField('Email',validators=[DataRequired()]) password=PasswordField('Password',validators=[DataRequired()]) submit=SubmitField("Login") 유효성 검사에도 필수입력인가, @이 포함되었는가, 특수문자..
[Web][Bootstrap][Python][Flask]예시template 을 이용해서 flask에연결해보기-2. 목표 여러 페이지를 만들고, 반응형 내비게이션을 사용한다. 포스트 페이지를 동적으로 만들고 페이지를 수정한다. 참조할 templatehttps://startbootstrap.com/theme/clean-blog Clean Blog - Bootstrap Blog Theme - Start Bootstrap Like our free products? Our pro products are even better! Go Pro Today! startbootstrap.com 1. flask을 이용해서 잘 연결하기 이것은 지난 포스팅을 참고하자 2022.05.27 - [WEB/Bootstrap] - [Web][Bootstrap][Python][Flask]예시template 을 이용해서 flask에연결해보기 [Web][..
[Web][Bootstrap][Python][Flask]예시template 을 이용해서 flask에연결해보기 오늘의 목표 flask에 다운받을 리소스들을 잘 연결해보자 오늘의 도구 bootstrap/flask/startbootstrap 참조할 멋있는 template : https://startbootstrap.com/theme/grayscale [Grayscale - Free One Page Bootstrap Theme - Start Bootstrap Like our free products? Our pro products are even better! Go Pro Today! startbootstrap.com](https://startbootstrap.com/theme/grayscale) 1. flask 서버를 이용하기 위해서 파이썬 파일을 하나 먼저 만든다. from flask import Flask app..