반응형

JavaScript에서 if(a==1)과 if(a===1) 는 다른 비교 연산자이다.

 

==(동등 연산자, Equality Operator)

- 값을 비교할 때, 형 변환(type coercion)을 수행함.

- 예를 들어 z와 7이 동등한지 여부를 판단할 때, 두 값의 형식이 다르더라도 자동으로 형식을 변환한 후에 비교함.

- 숫자 1과 문자열 1은 동등하다고 판단

- 따라서 a=1 이거나 a='1'인 경우, a==1 은 true

 

===(일치 연산자, identity Operator)

- 값을 비교할 때, 형을 변환하지 않는다.

- 두 값의 형도 같아야 일치한다고 판단함.

- 예를 들어 a=1(숫자) 이면 a===1이 true, a='1'(문자열)이면 a===1이 false

 

결론

- '==연산자'는 형 변환을 수행하기 때문에 값을 비교할 때, 유연하게 동작하지만 예상하지 못한 결과가 나올 수도 있음.

- '===연산자'는 형 변환을 수행하지 않기 때문에 엄격하게 값을 비교하고, 타입 불일치로 인한 오류를 방지할 수 있음.

- 타입 일치 여부에 엄격한 비교가 필요한 경우, '===연산자'를 사용하는 것이 안전함.

반응형

'Programming > JavaScript' 카테고리의 다른 글

[javascript] 오늘 날짜 yyyyMMdd, yyyy-MM-dd 형식으로 출력하기  (0) 2022.08.25
[javascript] object 내용 확인하기  (0) 2022.08.07
[jQuery] .ready 와 .onload의 차이점  (0) 2021.11.18
[javascript] 공백, 특수문자 체크하기  (0) 2021.11.11
[JavaScript] select box의 option value, text 가져오기  (0) 2021.11.10
반응형
// new Date를 통해서 날짜 객체를 생성. 여기서 년, 월, 일 정보만 필요.
 const nowDate = new Date();

var year = nowDate.getFullYear(); // 년
var month = ('0' + (nowDate.getMonth() + 1)).slice(-2); // 월
var day = ('0' + nowDate.getDate()).slice(-2); // 일

// yyyy-mm-dd 형식으로 todate에 담기.
var todate = year + '-' + month + '-' + day;

여기서 getMonth에 +1을 하는 이유는 월이 0 ~ 11로 표기가 되기 때문에 1씩 더해준다. 그러면 우리가 원하는 1 ~ 12월로 정상 표기 된다.

또 년월일을 8자리로 맞추기 위해서 앞에 '0'을 더해주고 slice를 통해서 뒤에서부터 두자리로 자른다. 이렇게 하면 01 ~ 12월 / 01 ~ 31일까지 모두 표기가 가능해진다.

 

여기서 '일'을 구할 때, getDate를 사용해야하고, getDay를 사용하면 이것은 '요일'이니 참고하면 좋을 것 같다.

 

개발을 하다 보면 날짜를 구해야하는 일들이 많이 있는 것 같아서 한번 정리해둔다.

반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] == 과 === 의 차이  (0) 2023.06.16
[javascript] object 내용 확인하기  (0) 2022.08.07
[jQuery] .ready 와 .onload의 차이점  (0) 2021.11.18
[javascript] 공백, 특수문자 체크하기  (0) 2021.11.11
[JavaScript] select box의 option value, text 가져오기  (0) 2021.11.10
반응형
var object1 = new Object();
console.log(object1);
// 위와 같은 경우에는 object1에 들어 있는 내용들을 확인 할 수 없다. 
// 안에 내용들을 확인하고 싶을 경우 아래와 같이 사용한다.

console.log(JSON.stringfy(object1));
반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] == 과 === 의 차이  (0) 2023.06.16
[javascript] 오늘 날짜 yyyyMMdd, yyyy-MM-dd 형식으로 출력하기  (0) 2022.08.25
[jQuery] .ready 와 .onload의 차이점  (0) 2021.11.18
[javascript] 공백, 특수문자 체크하기  (0) 2021.11.11
[JavaScript] select box의 option value, text 가져오기  (0) 2021.11.10
반응형
$(document).ready(function(){
	alert('junfe - reday');
});

$(window).onload(function(){
	alert('junfe - load');
});

 

두 코드의 차이점은 무엇일까?

 

- 호출 시점의 차이 : 한 페이지에 두 함수 모두 있으면 우선 순위는 .ready() -> .onload() 순으로 실행된다.

 

즉 .ready()는 DOM tree 생성 완료 후 호출되고, .onload()는 모든 페이지 구성요소 페인팅 완료 후 호출 되는 것이다.

 

 

 

[html문서 렌더링 과정]

1. 불러오기(Loading)

 - 불러오기는 HTTP 모듈 또는 파일시스템으로 전달받은 리소스 스트림(Resource Stream)을 읽는 과정으로 로더(Loader가 이 역할을 맡음.

- 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인, 팝업창을 열지말지, 또는 파일을 다운로드 받을 지를 결정한다.

 

2. 파싱(Parsing)

 - 파싱은 DOM(Document Object Model) 트리를 만드는 과정이다.

 - 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다.

 - DOM Tree : 내용을 저장하는 트리로 javascript에서 접근하는 DOM객체를 쓸 때 이용된다.

 

3. 렌더링 트리 만들기(Rendering Tree)

- 렌더링 트리 : DOM Tree와는 별도로 그리기 위한 트리가 만들어져야 하는데, 그것이 렌더링 트리

(그릴 때 필요없는 head, title, body 태그 등은 없음 + display:none; 처럼 DOM에 있지만 화면에서 걸러내야할 것들은 걸러진 트리

 

4. CSS 결정

 - CSS는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 CSS 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정.

 

5. 레이아웃(Layout)

 - 렌더링 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해주는 과정을 레이아웃이라고 한다.

 

6. 그리기(Parsing)

 - 렌더링 트리를 탐색하면서 페이지를 그려나간다.

 

 



출처: https://hahahoho5915.tistory.com/28 [넌 잘하고 있어]

 

반응형

'Programming > JavaScript' 카테고리의 다른 글

[javascript] 오늘 날짜 yyyyMMdd, yyyy-MM-dd 형식으로 출력하기  (0) 2022.08.25
[javascript] object 내용 확인하기  (0) 2022.08.07
[javascript] 공백, 특수문자 체크하기  (0) 2021.11.11
[JavaScript] select box의 option value, text 가져오기  (0) 2021.11.10
[jQuery] DataTable을 그린 후에 작업 수행할 때.  (0) 2021.11.09
반응형

회원 가입 작성 시 쓰기 좋은 자바스크립트

공백 체크, 특수문자 체크.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
// 공백체크, 특수문자 체크
<input type="text" name="personName" id="personName"/>
<input type="button" value="특수문자 체크" onClick="check()"/>
</body>
<script>
function check(){

	var str = document.getElementById('personName');

	 

	if( str.value == '' || str.value == null ){
	    alert( '값을 입력해주세요' );
	    return false;
	}

	var blank_pattern = /^\s+|\s+$/g;
	if( str.value.replace( blank_pattern, '' ) == "" ){
	    alert(' 공백만 입력되었습니다 ');
	    return false;
	}

	 

	//공백 금지
	//var blank_pattern = /^\s+|\s+$/g;(/\s/g
	var blank_pattern = /[\s]/g;
	if( blank_pattern.test( str.value) == true){
	    alert(' 공백은 사용할 수 없습니다. ');
	    return false;
	}


	var special_pattern = /[`~!@#$%^&*|\\\'\";:\/?]/gi;

	if( special_pattern.test(str.value) == true ){
	    alert('특수문자는 사용할 수 없습니다.');
	    return false;
	}

	alert( '최종 : ' + str.value );

	/*
	if( str.value.search(/\W|\s/g) > -1 ){
	    alert( '특수문자 또는 공백을 입력할 수 없습니다.' );
	    str.focus();
	    return false;
	}*/

	}
</script>
</html>​
반응형

'Programming > JavaScript' 카테고리의 다른 글

[javascript] object 내용 확인하기  (0) 2022.08.07
[jQuery] .ready 와 .onload의 차이점  (0) 2021.11.18
[JavaScript] select box의 option value, text 가져오기  (0) 2021.11.10
[jQuery] DataTable을 그린 후에 작업 수행할 때.  (0) 2021.11.09
[jQuery] 보이기, 숨기기  (0) 2021.11.08
반응형
// 셀렉트 박스 옵션 사이에 있는 텍스트 값을 가져온다.
options[target.seletedIndex].text

// 셀렉트 박스 value 의 값을 가져온다.
options[target.selectedIndex].value

 

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<select name="selectBox" id="selectBox">
		<option value="가" selected>A</option>
		<option value="나">B</option>
		<option value="다">C</option>
	</select>

</body>

<script type="text/javascript">
	var target = document.getElementById("selectBox");
	alert('선택된 옵션 text 값=' + target.option[target.selectedIndex].text); // 옵션 text 값
	alert('선택된 옵션 vlaue 값=' + target.options[target.selectedIndex].value); // 옵션 value 값
</script>
</html>

예제 결과화면

반응형

'Programming > JavaScript' 카테고리의 다른 글

[javascript] object 내용 확인하기  (0) 2022.08.07
[jQuery] .ready 와 .onload의 차이점  (0) 2021.11.18
[javascript] 공백, 특수문자 체크하기  (0) 2021.11.11
[jQuery] DataTable을 그린 후에 작업 수행할 때.  (0) 2021.11.09
[jQuery] 보이기, 숨기기  (0) 2021.11.08
반응형
// DataTable이 다 그려진 후 작업을 해야할 때
	table('draw.dt', () => {
		//실행할 코드
	});

 

반응형

'Programming > JavaScript' 카테고리의 다른 글

[javascript] object 내용 확인하기  (0) 2022.08.07
[jQuery] .ready 와 .onload의 차이점  (0) 2021.11.18
[javascript] 공백, 특수문자 체크하기  (0) 2021.11.11
[JavaScript] select box의 option value, text 가져오기  (0) 2021.11.10
[jQuery] 보이기, 숨기기  (0) 2021.11.08
반응형

1. show, hide

// show, hide
	jQuery('#toggle').click(function(){
		if($("#id").css("display")=="none"){
			jQuery('#id').show();
		}
	});

 

2. display = "block" or "none"

// display = "block" or "none"
	jQuery('#toggle').click(function(){
		if($("#id").css("display")=="none"){
			jQuery('#id').css("display","none");
		}
	});

 

 

반응형

'Programming > JavaScript' 카테고리의 다른 글

[javascript] object 내용 확인하기  (0) 2022.08.07
[jQuery] .ready 와 .onload의 차이점  (0) 2021.11.18
[javascript] 공백, 특수문자 체크하기  (0) 2021.11.11
[JavaScript] select box의 option value, text 가져오기  (0) 2021.11.10
[jQuery] DataTable을 그린 후에 작업 수행할 때.  (0) 2021.11.09

+ Recent posts

티스토리툴바