기록
20221026_수업정리 본문
JAVA SCRIPT.
실행 프로그램 visual studio code 수업 목표 개인공부가 가능하도록 기초를 탄탄히 다지기 수업시작 2022-10-26 ~ 수업참고사이트 w3school java script 효과 - html, css를 동적으로 변화시킬 수 있다
- 새로운 html element 생성, 삭제, 수정 가능
- css도 새로추가, 수정,삭제 가능
왜 java script를 공부해야하는가?
java script는 모든 웹개발자가 배워야하는 3가지 언어중 하나
1. 웹 페이지의 내용을 정의하는 html
2. 웹 페이지의 레이아웃을 지정하는 css
3. 웹 페이지의 동작을 프로그래밍하는 javaScript
정적인 웹이아닌 반응형 웹을 개발하려면 javascript를 배워야한다.
java+script ?
- javascript의 공식명칭 -> ecamscript
- script가 붙은이유 -> java와 같이 별도 compile하는 것이 아니라, browser가 즉시 기계어로 변환하여 실행한다.
- java와 유사하다 생각할수있지만 전혀 상관이없다 ( 유명했던 java언어의 판촉효과를내기위해 명칭을 javascript라 한것)
| 자바 | 자바스크립트 |
| 컴파일언어 | 인터프리터 언어 |
| 타입 검사를 엄격하게 한다. | 타입을 명시하지 않는다. |
| 클래스(class)기반의 객체 지향 언어 | 프로토타입(prototype)기반의 객체 지향 언어 |
- 권장 version -> ES5(기본에 coding된 js version, MS explorer의 과거버젼이 ES5만 지원한다.), ES6
- 단점은 웬만하면 컴파일에러가 안나기때문에 예상한 값이 안나와 곤란한경우가 빈번하다.
특징
- 자바스크립트는 객체 기반의 스크립트 언어이다.
- 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.
- 자바스크립트는 객체 지향형 프로그래밍과 함수형프로그래밍을 모두 표현 할 수 있다.
* 인터프리터 언어
컴파일 작업을 거치지 않고, 소스코드를 바로 실행할 수 있는 언어를 의미한다.
자바스크립트는 웹브라우저(ex chrome)에 포함된 자바스크립트 인터프리터가 소스코드를 직접 해석하여
바로 실한다.
(!= c나 java는 소스파일을 작성한 후, 해당파일을 컴퓨터가 이해할수있는 언어로 컴파일하여 사용자가 실행할수있는 실행파을을 만들어 사용해야한다)
web browser가 html 파일을 실행하는 과정
| 개발자 code <h2 id ="aa">hello</h2> |
|
| 웹브라우저 실행 . . . . . | |
| web browser실행 h2#aa ▼ id : "aa" innerText : "hello" |
1. <head>tag에서 선언된 <style>, <script>에서 선언된 function내용을 해석해서 가지고 있는다.
2. <body>tag에서 html element들의 객체(인스턴스)를 생성하여 메모리에 올린다.
- 메모리에 올리는 순서는 tag를 선언하는 순서대로 올린다.
- 객체에 있는 필드와, 메소드를 모두 불러와 해당하는 변수의 벨류값으로 메모리에 생성한다.
3. <body>tag안에 작성된 <script>나 javascript code 내용을 적용한다
- 단, 해당 html element가 객체생성될 경우에 적용이 된다. 객체가 메모리에 생성이 안되어있으면 적용할수없다.
4. web browser 화면에 css, javascript 내용을 적용한 결과를 display한다.
javascript가 동작하는 과정
1. document.메소드('x').변수="value";
2. 메소드(function) 조건을 충족하는 엘리먼트를 찾는다
4. 메모리에 저장된 인스턴스의 변수의 value값이 javascript code한 value값으로 지정된다.
javascript 적용 방법
1. 내부 자바스크립트 코드로 적용
- <script>태그를 사용하여 <head>컨테이너나 <body>컨테이너에 삽입
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</head>
<body>
<button onclick="printDate()">head컨테이너의 script적용</button>
<p id="date"></<p>
</boby><head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
</head>
<body>
<button onclick="printDate()">head컨테이너의 script적용</button>
<p id="date"></<p>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</boby>- 직접 html element 에 적용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myimage').src='./images/pic_bulbon.gif'">Turn on</button>
<img id="myimage" src="./images/pic_bulboff.gif" alt="bulb off" style="width: 100px;">
<button onclick="document.getElementById('myimage').src='./images/pic_bulboff.gif'">Turn off</button>
</body>
</html>2. 외부 자바 스크립트 파일로 적용 (external file)
파일확장자는 .js (ex : file_name.js)
function myFuction2(){
document.getElementById('demo2').innerText="hello";
}<head>
<script src="file_js url"></script>
</head>
<body>
<button onclick="myFuction2"></button>
<p id="demo2">external file적용 예</p>
</body>bootstrap을 기억하자.
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"> bootstap에서 제공해주는 외부 css파일을 적용한 것을 확인 할 수 있다. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script> bootstrap에서 제공해주는 외부 자바스크립트 파일을 적용한 것을 확인 할 수 있다. |
주의:
HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용합니다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋습니다.
스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있습니다.
여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용합니다. 스크립트 파일을 한 번만 다운받으면 되죠.
이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라집니다.
출저 : https://ko.javascript.info/hello-world
*캐시 : 자주 사용하는 데이터나 값을 미리 복사해놓는 임시장소
<script> tag에 'src'attribute를 적용할때에 script 컨테이너에 코드를 작성해도 무시가 된다.
javascript 사용하기
1.BUTTON을 누르면 전구의 불키기 (버튼을 누르면 기존엘리먼트의 이미지가 변환된다)
 |
 |
(1)code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myimage').src='./images/pic_bulbon.gif'">Turn on</button>
<img id="myimage" src="./images/pic_bulboff.gif" alt="bulb off" style="width: 100px;">
<button onclick="document.getElementById('myimage').src='./images/pic_bulboff.gif'">Turn off</button>
</body>
</html>(2)살펴보기
<button onclick="document.getElementById('myimage').src='./images/pic_bulbon.gif'">
Turn on
</button>
<img id="myimage" src="./images/pic_bulboff.gif" alt="bulb off" style="width: 100px;">
<button onclick="document.getElementById('myimage').src='./images/pic_bulboff.gif'">
Turn off
</button>| onclick -> mouse로 html element를 클릭(onclick)하면 attribute의 value값을 실행한다. |
"document.getElementByid('myimage').src=''./images/pic_bulbon.gif"
- document => 현재 html문서 (document)
- getElementByid('myimage') => id가 'myimage'인 element를 가져온다
- src="./images/pic_bulbon.gif" => 소스주소는 "./images/pic_bulbon.gif"이다.
=> 해당element 를 onclick할 때 현재 html문서에서 아이디가 'myimage'인 element의 변수 'src'를 찾아서 src의 value값을
"./images/pic_bulbon.gif"로 설정하라.
결과 : innerHTML이 Turn on인 버튼을 누르면 꺼진전구이미지에 켜진전구이미지로 바뀌는걸 확인할 수 있다.
2.BUTTON을 누르면 텍스트 바뀌는것을 구현하기
 |
 |
(1)code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change text</p>
<button onclick="myFuction()">click me</button>
<script>
fuction myFuction(){
document.getElementById('demo').innerText="change";
}
</script>
</body>
</html>(2)살펴보기
<script>
function myFuction(){
document.getElementById('demo').innerHTML="change";}
</script><p id="demo">JavaScript can change text</p>
<button onclick="myFuction()">click me</button>- button을 클릭하면 value값이 실행된다 => myFuction() 실행
- document의 id가 'demo'인 엘리먼트를 가져온다.
- 엘리먼트의 인스턴스 변수(innerHTML)의 value값을 ("change")로 지정한다.
(3)console 결과
 |
 |
변수 innerHTML의 value값이 재지정된것을 확인 할 수 있다.
innerText와 innerHTML차이
innerHTML : value를 html tag를 사용하면 동적으로 html tag를 새로 생성하여 웹브라우저에 반영할 수 있다.
innerText : html tag를 사용하더라도 단순하게 문자열로 인식한다.
(+) 그렇다면 style의 변수의 값을 어떻게 지정하면 될까?
<style>tag는 하나의 element로 style이라는 인스턴스객체에있는 필드가 메모리에 올라가있다.
그렇다면
(document.getElementById('demo').backgroundColor="value")->로 하면 value값은 적용이 안된다.
style인스턴스객체에 접근하지 못했기 때문이다. 그러므로
(document.getElementById('demo') .style.backgroundColor="value") 로 선언하면 되겠다.
- style 인스턴스안의 backgroundColor변수 호출하여 변수값 지정.
실습한 js function
| window.print() | 해당 document를 출력하는 창을 띄운다. |
| window.alert('value') | 특정 속성적용할 상황이 아닐때 선언하면 html element들을 화면에 display하기 전에 먼저 'value'가 입력된 pop up창을 출력한다 |
| console.log('value') | 웹브라우저 개발자툴안의 console창에 'value'값이 입력되어있다. 디버깅용으로 많이 사용한다. |
js keyword ( = data type )
| let (ES6) | 변수 선언 - 변수에대해서 중복 선언 불가능하다 (JAVA동일) - var의 단점을 없애려고 나온 키워드 (let 키워드 사용 권장) - 변수에 data type이 다른값을 넣으면, 다른 data type으로 변경된다. |
| var | 변수 선언 - 변수에대해서 중복 선언 가능하다 - 변수에 data type이 다른 값을 넣으면, 다른 data type으로 변경된다. |
| const (ES6) | 변수 선언 - 변수에대해서 중복 선언 불가능하다. - const는 상수를 선언할 때 사용한다. - const로 선언된 변수에 다른값을 넣으면 에러가 발생한다. (웹브라우저 개발자 툴에서 사용가능 |
| if / switch / for | 조건 | 반복문 |
| fuction() | java의 메소드와 동일함 |
- 자바스크립트는 변수데이터타입을 오직 (let, var, const)로 사용한다.
- 변수명에 대소문자를 구별한다.
- oldweb browser에서는 let, const를 사용 못하고 var만 사용 가능할 경우엔 let,const로 만든 es6 js파일을 var을 사용한 es5 js파일로 자동 transfer해주는 tool(예 : babel)을 사용하면 된다.
js charset
unicode
js 주요 data type
자바스크립트느 c나 java와는 다르게 변수를 선언할 때 데이터 타입을 미리 정하지 않는다.
변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정된다.
| 분류 | 데이터형 | |
| 기본형 | 숫자형(number) | 정수냐, 실수냐 구분하지않음 실수 하나만을 표현한다., |
| 문자열형(string) | 큰따옴표(" ")나 작은따옴표(' ')로 둘러싸인 문자의 집합을 의미 (자바와 달리 ""와 ''를 써도 에러가 안난다) - 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있다. - 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있다. onclick = "document.getElementId('id').innerHTML='value2'" let v1 = '큰따옴표는"작은따옴표로"둘러싸인 문자열에만 포함될수있다' |
|
| 논리형(boolean) | 참과 거짓 (true | false) | |
| 심벌형 | 유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용한다. | |
| 특수형(null/ undefined) | null : '값'이 정해지지않는 것을 의미한다. undefined : '타입'이 정해지지 않는 것을 의미한다. |
|
| 참조형 | 배열 | 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의한다. 배열을 구성하는 각각의 값을 '요소' 라고하며 배열에서의 위치를 가리키는 숫자를 '인덱스'라고 한다. |
| 객체(Object) | js의 class로 생각한다. 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체 let dog = { name : "해피", age : 3 } //객체생성 document.getElementById(",,,").innerHTML = "강아지이름은" + dog.name + "이고, 나이는 "+dog.age+"살 입니다" |
|
| 함수 | function() |
- java와는 달리 string타입이 primitive타입인것의 차이점이있음
- java와는 달리 null타입이 데이터타입으로 지정되어있음
- 자바 : 클래스로 시작해서 클래스로 끝난다 js : 오브젝트로 시작해서 오브젝트로 끝난다.
- 참조형은 객체의 주소값을 가지고 있다.
js 연산
| 산술연선자 | +, - , / , %, * |
| 문자열 연결 연산자 | + |
| 할당 연산자 | = |
| 비교연산자 | > , < , ==, ===, |
| 논리연산자 | && |
| 타입연산자 | typeof |
| 인스턴스생성연산자 | new |
"문자열"+ " "+"문자열2"
=> "문자열 문자열2"
숫자/숫자
=> 몫.나머지
숫자%숫자
=> 나머지
typeof v1 ;
=> 피산자의 데이터타입을 리턴하는 연산자
'수업기록(2022-10~)JAVA SCRIPT' 카테고리의 다른 글
| 20221102_수업기록 (0) | 2022.11.16 |
|---|---|
| 20221101_수업기록 (0) | 2022.11.09 |
| 20221031_수업기록 (0) | 2022.10.31 |
