Introduction
앞서 day 02과제에 대해서 몇가지 추가적인 JS의 함수 및 연산자들의 작동 방식 및 특징을 살펴보자.
함수 및 연산자
null 과 공백
-
num1 == ""||!num1
과 같은 방식으로 숫자가 아닌 공백을 판별 할 수 있다. -
input_X.value = "null"
input창의 내용을 초기화
alert
alert()
사용자의 브라우저에 알람메세지를 보냄
parseInt
parseInt()
앞쪽에 숫자가 나오는 경우, 뒷쪽 문자열이 나와도 상관없음.
but, 처음부터 문자가 나오는 경우 그 즉시 NaN이 반환 됨.
Number
Number(text)
위의 parseInt의 경우 Int를 파싱하는 형태였다면, 이는 값을 숫자(Int)로 형변환 하는 방법이다.
focus
input_X.focus()
마우스 커서를 해당 위치로 이동 가능
indexOf
text.indexOf("hello")
"내가 찾는 문자열이 해당 텍스트 내에서 몇번 째에 위치해 있는가?"의 해당 위치의 인덱스를 반환해 준다.
- 만약 찾는 문자열이 없다면
-1이 반환된다.
eval
- 문자열을 수식으로 바꿔주는 것.
eval(num1 + operation + num2)
위와 같이 연산하게 되면 바로1,+,3이 연산되어 4라는 값이 반환된다.
- 이를 이용해서 주로 변수 값을 문자열로 변경할 때 사용된다.
num1 = 1234
"안녕하세요"+eval("'"+num1+"'")
결과 : "안녕하세요1234"
arr.splice(n,n)
arr.splice(2,1)
배열 index의 2번째부터 시작하여 1개의 요소를 제거한다.
forEach와 ES6 표현(=>)
- forEach의 내부에는 배열의 각 요소에 적용할 콜백함수를 정의한다.
형태를 보면
다음과 같이 있는데 분리해서 보면 보기 쉬울 것이다.
이렇게 forEach내부에 함수가 적용되어 있는 것을 확인할 수 있다.
여기서 첫번째 값인 data는 배열 내 요소를 뜻하고 index는 배열 내 번지(index)를 뜻한다.
이러한 forEach구문은ES6 화살표 함수 표현을 사용해서 다음과 같이 간단한 형태로 표현할 수 있다.
map
var arr = ['오징어','꼴뚜기','대구','명태'];
var newHtml = arr.map(function(item, index) {
return "<b>"+item+"</b>";
});
document.getElementById("demo").innerHTML = newHtml;이또한 forEach와 동일하다. 배열에 대해서 반복적인 함수를 적용해야 할 때 사용한다. 해당 배열 내 요소에 대해서 해당 function함수 내 수식인 return"<b>"+item+"</b>"이 반복되며 newHtml에 저장된다.
이후 수행되는 코드는 해당 생성된 HTML을 현재 HTML에 적용하는 것이다.
배열 내부와 같이 , 콤마가 함께 추가되는 것을 확인할 수 있다.
Object
- 객체로 초기화
- 자바스크립트의 Object는 Python의 dict와 비슷하다.
var obj = {}
`
- 빽틱 : 템플릿 문자열을 의미한다.
즉, 어떠한 태그를 포함하는 문자열을 사용하기 위해서는 해당 빽틱 내 포함시켜 주어야 한다.
또한 문자열내에 변수의 데이터를 추가하기 위해서는
${}연산자를 사용한다.
여담으로.. velog에서 빽틱은
회색 사각형템플릿 문자열을 만드는데 사용되기에 필기를 위해 입력할 때 템플릿 문자열로 인식해 버려서 당황했다.
숫자와 string 변환
// 숫자를 스트링로 바꾸기
var numberA = 2
numberA += "";
alert(typeof numberA); // Result : string
// 스트링을 숫자로 바꾸기
stringA = "2"
stringA *= 1;
alert(typeof stringA); // Result : number부트스트랩
해당 부트스트랩의 내용을 복사해서 붙여넣기 하면 HTML 프로젝트에서 부트스트랩을 사용할 수 있다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>내용은 head태그 내에 복사해서 붙여넣기 해준다.
해당 테이블 부분의 코드 또한 복사해서 붙여넣기 한다.
결과적으로 추가 된 부분
css의 적용 범위
낮을수록 해당 css가 적용된다고 생각하면 된다.
Inline(태그 안에 정의) > Internal(내부js) > external(bootstrap)
과제
후기 및 여담
if문 관련
if문 내에 true/false로 확실하게 정해줘야 했다.
당연히 인덱싱이 성공하면 정수 값이 반환되니까 if문이 잘 실행될 것이라 생각하여 처음에 아래와 같이 코드를 작성했다.
if (saram.name.indexOf(KeyWord.value))이처럼 keyWord에 입력된 값이 사람 데이터베이스의 이름내에 들어있는 지 찾으려 하였는데, 제대로 동작하지 않았다.
그 이유는 nonzero이기 때문이다.
고00 교수님 블로그가 생각난다..
if문은 음수일 때도 동작하고 양수일 때도 동작한다.
다만 만약 이름의 첫번째인 성만 치고 검색을 했다면 해당 인덱스는 0으로 if문이 동작하지 않는다는 것이다.
따라서 요렇게 반환되지 않는 경우의 조건을 확실히 쓰자.
if (saram.name.indexOf(KeyWord.value) != -1)과제 관련
과제 시, 강사님 코드는 일체 보지 않고 진행했는데 삭제는 쉬웠으나 글에 취소선을 긋는 부분이 바로 떠오르지 않았다.
코드를 살펴보니 삼항 연산자를 사용해서 페이지 리로딩 시에 데이터 내의 done값에 따라 클래스 명을 다르게 부여하는 방식으로 취소선이 토글되는 방식으로 구현 되어있었다.
<span class=${task.done ? "deleted":"undeleted"}>${task.todo}</span>클래스 또는 아이디에 따라 여러 css스타일이 적용 가능한 웹이기에 가능한 코딩이고, 정말 웹스러운 코딩이였다.
이게 웹인가 싶었다.
Github
Whole source code is right Here!
