JavaScript
브라우저에서 실행될 수 있는 유일한 프로그래밍 언어다.
- HTML: 구조 및 의미(sementic)를 정의함
- CSS: element와 content의 스타일을 지정
- javascript: 페이지를 역동적으로(dynamically) 변화 할 수 있게 함. 화면 밖에서 무언가의 처리를 함 (behind the scene)
JavaScript 이용 예시
- diplay를 update함 (날씨, 주식가격 등)
- timer 사용
- user의 입력을 검증하고 error 메세지를 보여주기
- 오버레이를 진열하고 보여주기
- 화면 엘리먼트를 재배열, 숨기기, 보여주기, 제거하기
- 웹사이트가 인터넷이 없는(끊어진) 환경에서도 일정부분 동작하게 할 수 있음
HTML에서 Javascript 연결하기
HTML에서 Javascript를 활용하기 위해서는 다음과 같이 <script> 태그를 활용하며 src 속성을 통해 작성된 javascript를 활용한다. script의 위치는 어느곳에서 불러오나 상관이 없으며, 기본적인 HTML과 마찬가지로 두 가지에 동일한 변수나 함수명이 있을 경우 하단에 작성된 내용이 적용됩니다. 또한, 상단에서 정의된 함수나 변수를 하단의 javascript에서 정의하지 않더라도 사용할 수 있습니다.
<head>
<script src="first-script.js"></script>
<script src="second-script.js"></script>
</head>
</body>
...
<script src="third-script.js"></script>
</body>Core JaveScript Syntax
// 변수할당방법
// let으로 변수명을 선언
// 변수명에는 특수문자 사용불가능 (_는 사용가능)
// 소문자로 시작해 단어변경시 대분자로 표현이 관례
// 숫자
let age = 32;
// 문자
let userName = 'Max';
// 배열 (Array)
let hobbies = ['Sports', 'Cooking', 'Reading'];
// 객체 (Object)
let job = {title: 'Developer', place: 'New York', Salary: 50000};매개변수
let age=24;
/* 복수개의 변수가 필요할 경우 , 이후로 입력 */
function calculateAduleYears(userAge) {
return userAge - 18;
}
totalAdultYears = calculateAdultYears(age);
alert(totalAdultYears);Method
앞서 살펴본 객체는 숫자, 문자, 배열 뿐 아니라, 함수를 추가하여 사용할 수도 있습니다. 이렇게 객체에서 사용하는 함수를 method라고 합니다. 객체에서 사용하는 메소드는 다음과 같이 정의할 수 있습니다.
- 객체내부의 변수: property(속성)
- 객체내부의 함수: method(메소드)
let person = {
name: "Max", // Property
greet() { // Method
alert("Hello!");
},
};console.log
내장 객체인 console 의 log method를 활용하여 개발자도구의 console창에 결과를 출력할 수 있다.
alert 의 경우 화면에 창이 뜨고 이를 종료해야하는 번거로움이 있지만 console.log를 활용하면 별도의 종료 없이도 결과값을 표시할 수 있어 정보를 출력하기에 용이하다.
함수/method의 실행결과 값을 반환하지 않음
return 이 명시되지 않았을 때
console.log() 를 사용할경우 아래와 같이 console에 값이 출력 되어 결과를 확인할 수 있다.
연산
연산기호
+: 두 숫자를 더하거나 문자열을 연결
-: 두숫자 빼기
*: 두 숫자 곱사기
/: 두 숫자 나누기
%: 나눗셈의 나머지
축약표기법
특정한 연산을 짧게 요약해서 표시 할 수 있다.
++:result++==result = result + 1(값을 1 증가시켜 변수에 재할당)
--:result--==result = result - 1(값을 1 감소시켜 변수에 재할당)
result+=5==result = result + 5
result-=5==result = result - 5
result*=5==result = result * 5
result/=5==result = result / 5
**:4**3==4*4*4
연산결과 예시
let a = 'hi' + ' there'; // 'hi there' => a string
let b = 'the number' + ' 2'; // 'the number 2' => a string
let c = 'the number' + 2; // 'the number2' => a string
let d = 2 + 2; // 4 => a number
let e = 2 + '2'; // '22' => a string! (i.e. the number 2 is treated like a string '2' here)
let f = '2' + '2'; // '22' => a string! ('2' and '2' concatenated)
let g = '2' * 3; // 6 => a numbere,f 의 경우 + 가 문자열에 대해서 작동하는 연산이기에 문자에 대한 연산을 수행하며
g의 경우 * 는 숫자에 적용되므로 ‘2’ 를 숫자로 인지하여 결과를 산출
'웹 > 100일 코딩 챌린지' 카테고리의 다른 글
| Javascript 반복문 (0) | 2023.11.27 |
|---|---|
| JavaScript HTML Element 편집 (0) | 2023.11.26 |
| Web Forms (0) | 2023.11.05 |
| 반응형 웹디자인 (0) | 2023.08.18 |
| HTML 기본 (0) | 2023.06.29 |
