반응형

applicationContext.xml 파일에서 아래와 같이 작성합니다.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context-4.3.xsd">


	<context:property-placeholder location="file:///C:\...파일경로\propertiesFileName.properties" />
	<bean id="prop" class="com.was.ios.common.util.Properties">
		<property name="uploadBasePath" value="${props.uploadBasePath}"/>
		<property name="uploadTempPath" value="${props.uploadTempPath}"/>	
	</bean>
</beans>

 

<context:property-placeholder location="file:///C:\...파일경로\propertiesFileName.properties" />

위 코드의 역할은 해당 위치에 있는 파일을 읽은 후 <bean id="" class="">에 명시된 class파일에 setter를 이용하여 properties의 데이터를 넣어줍니다.

반응형
반응형

Location 객체

현재 브라우저 창에 열려있는 문서의 URL을 알려주는 객체이다.


★ 이 포스터를 통해 보이는것 뿐만아니라 보이지않는 정보(URL) 또한 객체화 될 수 있다는 점을 알 수 있을것이다.


1. 현재 브라우저의 URL 알아내기 

개발자 도구의 콘솔창에  console.log(location.toString(), location.href);를 작성하고 실행시켜보자.

이처럼 두개의 결과가 나타나는데 같은 결과이지만 location.href를 사용하는 것이 좀 더 선호되는 방식이다.


마찬가지로 콘솔창에 alert(location);을 작성한다면

이러한 결과가 나타나게되는데 왜? 그런것일까?

alert함수는 문자로 인자값이 넘어가야하는데 객체를 넘겨준다면 객체를 문자화 시켜서 넘기게된다. 따라서 location 객체를 넘기게 된다면 location객체의 문자화 된 값인 현재 URL이 출력되는 것이다.

위의 내용은 alert(location.toString());과 같은 결과값을 출력한다.


2. 현재 웹페이지의 URL 변경하기

location객체는 URL을 알아낼 뿐만 아니라 현재 웹페이지의 URL 변경, 현재 페이지를 리로드도 제공한다.

콘솔 창에 location.href='http://olsh1108o.tistory.com/';를 작성해보자.

결과적으로 작성한 페이지로 이동하게된다. 이러한 경우는 사용자의 상황에 따라서 다른 URL로 넘어가야 하는 경우가 있을 것이다. 그렇다면 location객체를 사용해서 이동시키면 된다.


현재 웹 페이지를 리로드 시키고 싶은 경우에는 location.href=location.href라고 작성하거나 또는 location.reload(); 명령어를 통해서 리로드 시킬 수 있다.




이 글은 생활코딩 강의를 참고하여 작성된 글입니다.

반응형

'Web > HTML_JS_CSS' 카테고리의 다른 글

[Javascript] BOM_Browser Object Model  (0) 2019.01.14
[Javascript] Script 파일의 위치와 onload..  (0) 2019.01.08
[Javascript] Javascript 사용 방법  (0) 2019.01.08
[css] 선택자  (0) 2019.01.07
[JS] 회원가입 유효성 검사  (1) 2018.08.17
반응형

[전역객체 Window]


window는 브라우저 객체의 최상위 객체이고 모든 객체가 소속되어있으면서 전역객체라고도 부른다.

Browser Object는 아래와 같이 계층적으로 구조가 나뉘어져 있다.


DOM객체에 속하는 document 객체(Document Object Model을 구현하는 객체이기 때문에 따로 카테고리를 묶어서 설명함..), BOM객체에 속하는 location객체, JavaScript에 속하는 Array객체 모두 등등.. window라는 객체에 소속되어 있다.



window객체에 접근하는 방법?

→ 콘솔창을 켜서 window를 적어주면 window객체에 접근할 수 있다.




window 객체에 속하는 document객체, navigator객체 등등.. 에 접근하고 싶을 때

window.document 

window.navigator → 현재 브라우저에 대한 정보를 알려주는 객체

입력해주면 접근이 가능하다.



window객체에서 아래와 같은 메서드를 사용할 수 있다.


1. alert()

흔히 경고창이라고 부른다. 사용자에게 정보를 제공하거나, 문제가 있을 때 경고를 하거나, 코딩을 할 때 변수에 담겨있는 값을 확인할 때 사용한다.


콘솔창을 켜고 alert('Hello World');를 작성해보자.

그렇다면 다음과 같이 경고창이 뜨는 것을 확인 할 수 있다.


alert() 특징은 실행하는 동안은 다음 코드가 실행되지 않는다.


개발자가 디버깅을 위해서 alert()를 사용하는 경우가 있지만 최근들어 개발자 도구를 사용할 수 있어서 alert()보다는 console.log()를 자주 사용한다.


2. confirm

확인하는 창을 띄워준다. 다른 창과 다르게 확인/취소 버튼이 있다.

콘솔창에서 confirm('ok');를 적어주자.

그럼 괄호 안에있는 인자가 창에서 나타나게된다.

확인 버튼을 누르면 return 값으로 true가 넘어오고 취소를 누르면 false가 넘어온다.

< return 값으로 true가 넘어온다. >

< return 값으로 false가 넘어온다. >


3. prompt

사용자가 입력한 값을 얻어내어 자바스크립트가 활용할 수 있다. 

console창에 prompt('id?'); 를 작성해보자


이처럼 입력할 수 있는 칸이 나오고 여기에 맞는 답변을 작성해주면 콘솔창에 답변이 나타난다.




생활코딩 강의를 참고하여 작성된 글입니다.

반응형
반응형

BOM 

Browser Object Model


웹 브라우저를 제어하기 위해서 브라우저가 제공해주는 객체들을 의미한다.


이를 이용하여..

1. 자바스크립트를 통해서 새 창을 연다.

2. 현재창의 URL을 알아낸다

3. 현재 동작하고 있는 웹브라우저의 제품명, 버전명을 알아낼 수 있다.

이러한 일을 수행할 수 있다.

반응형
반응형

js파일을 쓰다보면 html 파일과 분리 시킬 경우가 있고 또 외부에 있는 js 파일을 불러와서 실행시키는 경우가 있을 것이다.

그렇다면 html 파일과 js 파일을 따로 분리시킨 후 html내에서 script 파일의 위치가 어떻게 되는지 알아보자.


1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <script src="script2.js"></script>
</head>
<body>
    <input type="button" id="hw" value="Hello world" />
</body>
</html>
cs

<new02.html>


1
2
3
4
var hw = document.getElementById('hw');
    hw.addEventListener('click'function(){
        alert('Hello world');
    })
cs

<script2.js>


위와 같이 파일이 존재한다고 해보자. 이를 실행시켜 버튼을 클릭해도 alert창이 뜨지 않는다. 개발자 도구를 통해 진행상황을 보자면


이와같이 에러가 발생하게 된다.


그렇다면 왜? 에러가 발생하는 것일까?


html파일은 위에서부터 아래로 순차적으로 읽으며 실행을 하는데 <script>태그를 만나게 되면 js코드로 인식하게 되고 script02.js파일을 다운로드 한다.

그런 후 script02.js파일을 실행시키는데 js파일에서 id값이 hw인 element를 찾게된다.

하지만 <body> 태그까지 실행시키지 않은 상황에서 hw element는 null로 뜨게되고 이로인해 에러가 발생하게 된다.


이를 해결하는 방법은 js 파일을 아래와 같이 수정하면된다.


1
2
3
4
5
6
window.onload = function(){
    var hw = document.getElementById('hw');
    hw.addEventListener('click'function(){
        alert('Hello world');
    })
}
cs

<script2.js>


앞과 차이점은 window.onload = function(){} 인데 onload함수를 살펴보자


마찬가지로 html파일은 위에서 아래로 순차적으로 읽고 js파일을 실행시킨다.

하지만 window.onload = function(){} 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수이다.

(이를 이벤트라 한다.)

이렇게된다면 hw는 null로 뜨지 않을 것이고 정상 작동하게된다.


애초에 이런일을 막는 방법이 있는데 바로 script 파일을 head태그에 두는 것보다 페이지 하단에 위치시키는 방법이 더 낫다.




---------------------------------------------

알고가기!

학습할 때엔 head태그 내에 script로 작성하는 것으로 알고있었는데 하단에 위치하면 좋은 구체적이고 확실한 이유가 무엇인가요?

Q.

<script> 의 위치는 웬만하면 head 안에... <script> <link> <style> 순으로 위치하는것을 권장한다

라고 알고있었는데요.
요즘 문득 다시 공부하면서 보면 아에 다르더라구요?
제일 맨 하단에 정의하는게 성능상으로나 문제없는거로나.... 이것저것 하단이 좋다고....
하단에 위치하는게 왜 좋은건가요?
대강은 알고있는데, 

왜 저는 여태것 head 안에 위치하는걸 권장한다 라고 알고있었고,
하단에 위치하면 좋은 구체적이고 확실한 이유를 알고싶네요.
 


A.

님 잘못이 아닙니다. 
많은 이들이 그렇게 말해왔으니까요.
잘 팔린다는 어느 책에는 '우리나라 개발자 대부분은 헤드 태그 안에 넣고, 이게 우리나라 개발 환경'이라고 써 있기도 하네요.
하지만 바디 하단에 외부 파일로 넣는 것이 좋은 것 맞습니다. 
로딩부하, 자원 관리, 코드 가독성, 코드 재사용 등등 잇점이 많으니까요.


출처 : 생활코딩[https://opentutorials.org/course/1375/6620] 댓글

반응형
반응형

웹브라우저 또는 HTML을 프로그래밍적으로 제어해주는 것을 Javascript라고 한다.


자바스크립트를 HTML에서 로드하는 방법을 알아보자.


1. inline


inline방식은 태그에 직접 자바스크립트를 기술하는 방식이다.

태그에 연관된 스크립트가 분명히 드러나는 장점이 있지만 정보와 제어가 섞여있기 때문에 유지보수 측면에서는 가치가 떨어진다.


1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>
cs


2. script


<body>태그 내에 <script></script> 태그를 생성하여 자바스크립트 코드를 삽입하는 방식이다.

inline방식과 다르게 html태그와 js코드를 분리할 수 있는 장점이 있다.


1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script type="text/javascript">
        var hw = document.getElementById('hw');
        hw.addEventListener('click'function(){
            alert('Hello world');
        })
    </script>
</body>
</html>
cs


위에서 아래로 코드를 인식하다가 <script>태그를 만나면 자바스크립트 코드로 인식하고 실행하고 </script>를 만나면 다시 html 코드로 인식한다.

☆ <script>까지 html코드로 작동.



3. 외부 파일로 분리


자바스크립트 파일과 html 파일을 따로 분리하는 방식이다.

html문서에서 자바스크립트 코드를 완전히 바깥으로 밀어낼 수 있다는 점에서 html과 js파일의 결합도를 낮춘다. 또 html 여러개의 파일이 하나의 js파일을 참조가 가능하므로 유지보수가 용이해진다.


1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script src="./script.js"> </script>
</body>
</html>
cs

<test01.html>


1
2
3
4
var hw = document.getElementById('hw');
hw.addEventListener('click'function(){
    alert('Hello world');
})
cs

<script.js>


 test01.html에서 <script>태그의 src는 html의 속성값으로 인식된다.

반응형

'Web > HTML_JS_CSS' 카테고리의 다른 글

[Javascript] BOM_Browser Object Model  (0) 2019.01.14
[Javascript] Script 파일의 위치와 onload..  (0) 2019.01.08
[css] 선택자  (0) 2019.01.07
[JS] 회원가입 유효성 검사  (1) 2018.08.17
[HTML] 회원가입 폼 만들기  (0) 2018.08.17

+ Recent posts