| WEB2 JavaScript - 24.함수예고 |
함수는 (function) = 수납상자
| WEB2 JavaScript - 25.함수 |
함수의 기본적인 문법
파라미터(parameter)와 아규먼트(argument)를 배우고
리턴(return)이라는 것을 배우면 함수 수업이 끝
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
</head>
<body>
<h1>Function</h1>
<h2>Basic</h2>
<ul>
<script>
function two() {
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>'); two();
document.write('<li>3</li>'); two();
</script>
</ul>
<h2>Prameter&Argument</h2>
<h2>Return</h2>
</body>
</html>
| WEB2 JavaScript - 26.함수 : 매개변수와 인자 |
함수는 입력과 출력으로 이루어져 있는데
바로 그 입력에 해당되는 것이 'parameter,'
한국어로는 '매개변수,'
'argument,' 한국어로는 '인자'
그리고 출력은 'return'이라는 것과 관련
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
</head>
<body>
<h1>Function</h1>
<h2>Basic</h2>
<ul>
<script> function two() {
document.write(‘<li>2-1</li>’);
document.write(‘<li>2-2</li>’); }
document.write(‘<li>1</li>’); two();
document.write(‘<li>3</li>’); two();
</script>
</ul>
<h2>Prameter&Argument</h2>
<script> function onePlusone() {
document.write(1 + !+’<br>’);
} onePlusone(); function sum{left, right}{
document.write(left + right +’<br>’);
} sum(2,3); sum(3,4); //5 </script>
//7 <h2>Return</h2>
</body>
</html>
여기서, 함수로 전달하는 2와 3이라는 값을 한국어로는 인자(argument)
그리고 이 값을 받아서 함수 안으로 매개해주는 변수들을 매개변수(parameter)
| WEB2 JavaScript - 27.함수 (리턴) |
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
</head>
<body>
<h1>Function</h1>
<h2>Basic</h2>
<ul>
<script>
function two() {
document.write(‘<li>2-1</li>’);
document.write(‘<li>2-2</li>’);
}
document.write(‘<li>1</li>’);
two();
document.write(‘<li>3</li>’);
two();
</script>
</ul>
<h2>Prameter&Argument</h2>
<script> function onePlusone() {
document.write(1 + !+’<br>’);
}
onePlusone();
function sum{left, right}{
document.write(left + right +’<br>’);
}
sum(2,3);
sum(3,4); //5
</script>//7
<h2>Return</h2>
<script> function sum2(left, right){
return left+right;
}
document.write(sum2(2,3)+’<br>’);
document.write(‘<div style=“color:red”>’+sum2(2,3)+’</div>’);
document.write(‘<div style=“font-size:3rem;”>’+sum2(2,3)+’’</div>’);
</script>
</body>
</html>
| WEB2 JavaScript - 28.함수의 활용 |
<html>
<head>
<title>WEB1 - JavaScript</title>
<meta charset=“utf-8”>
<script>
function nightDayHandler(self)
var target = document.querySelector('body');
if (self.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.Value = 'day';
var alist = document.querySelectorAll('a');
var i = 0; while (i < alist.length) {
alist[I].style.color = 'powerblue'; i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black'; self.value = 'night';
var alist = document.querySelectorAll('a');
var I = 0; while (i < alist.length) {
alist[I].style.color = 'blue'; i = i + 1;
}
}
</script>
</head>
<body>
<h1><a href=“index.html”>WEB</a></h1>
<input id=“night_day” type=“button” value=“night”
onclick="nightDayHandler(this);">
</body>
</html>
| WEB2 JavaScript - 29.객체 예고 |
함수라는 것 기반 위에서 객체라고 하는 것이 존재. 우리가 프로그래밍을 하다보면 코드가 많아지고,
코드가 많아지면 코드를 잘 정리정돈하기 위해 우리는 함수라는 걸 쓴다.
함수가 또 많아지면, 그리고 함수뿐만 아니라 그 함수와 연관되어 있는 변수들이 엄청나게 많아지면
역시나 똑같이 복잡도의 한계에 도달.
바로 그러한 한계 상황에서 서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구, 그것을 객체라고 함
출처 입력
객체에 속해 있는 함수는 함수라고 하지 않고 메소드(method)라고 부름
| WEB2 JavaScript - 30.객체 쓰기와 읽기 |
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
</head>
<body>
<h1>object</h1>
<h2>create</h2>
<script>
var coworkers = {
“programmer”:”egoing”,
“designer”:”leezche”
};
document.write(“programmer : “+coworkers.programmer +”<br>”);
document.write(“designer : ”+coworkers.designer+”<br>”);
coworkers.bookkeeper = “duru”;
document.write(“bookkeeper : ”+coworkers.bookkeeper+”<br>”);
coworkers[“data scientist”] = “taeho”;
document.write(“data scientist : ” +coworkers[“data scientist”]+”<br>”);
</script>
</body>
</html>
| WEB2 JavaScript - 31.객체와 반복문 |
검색 Javascript object iteration
<html>
<head>
<meta charset=“utf-8”>
</head>
<body>
<h1>object</h1>
<h2>create</h2>
<script>
var coworkers = { “programmer”:”egoing”, “designer”:”leezche” };
document.write(“programmer : “+coworkers.programmer +”<br>”);
document.write(“designer : ”+coworkers.designer+”<br>”);
coworkers.bookkeeper = “duru”;
document.write(“bookkeeper : ”+coworkers.bookkeeper+”<br>”);
coworkers[“data scientist”] = “taeho”;
document.write(“data scientist : ” +coworkers[“data scientist”]+”<br>”);
</script>
<h2>iterate</h2>
<script> for </script>
</body>
</html>
| WEB2 JavaScript - 31.객체와 반복문 |
객체의 데이터를 순회하는 방법
<html>
<head>
<meta charset=“utf-8”>
</head>
<body>
<h1>object</h1>
<h2>create</h2>
<script>
var coworkers = { “programmer”:”egoing”, “designer”:”leezche” };
document.write(“programmer : “+coworkers.programmer +”<br>”);
document.write(“designer : ”+coworkers.designer+”<br>”);
coworkers.bookkeeper = “duru”;
document.write(“bookkeeper : ”+coworkers.bookkeeper+”<br>”);
coworkers[“data scientist”] = “taeho”;
document.write(“data scientist : ” +coworkers[“data scientist”]+”<br>”);
</script>
<h2>iterate</h2>
<script> for(var key in coworkers){
document.write(key +’ : ’+coworkers[key]+’<br>’);
} //key ->egoing, leezche, duru, taeho가 나옴
//coworkers[key] ->programmer, designer, bookkeeper, data scientist가 나옴
</script>
</body>
</html>
| WEB2 JavaScript - 32.객체프로퍼티와 메소드 |
<html>
<head>
<meta charset=“utf-8”>
</head>
<body>
<h1>object</h1>
<h2>create</h2>
<script>
var coworkers = {
“programmer”:”egoing”, “designer”:”leezche”
};
document.write(“programmer : “+coworkers.programmer +”<br>”);
document.write(“designer : ”+coworkers.designer+”<br>”);
coworkers.bookkeeper = “duru”;
document.write(“bookkeeper : ”+coworkers.bookkeeper+”<br>”);
coworkers[“data scientist”] = “taeho”;
document.write(“data scientist : ” +coworkers[“data scientist”]+”<br>”);
</script>
<h2>iterate</h2>
<script>
for(var key in coworkers){
document.write(key +’ : ’+coworkers[key]+’<br>’);
}
</script>
<h2>property & method</h2>
<script>
coworkers.showAll = function(){
for(var key in this){document.write(key +’ : ’+this[key]+’<br>’);
}
}
coworkers.showAll();
</script>
</body>
</html>
<script>
coworkers.showAll = function(){ }
/*아래와 다 같은 것임 Var showAll = function(){ }*/
/*아래와 다 같은 것임 Function showAll(){ }*/
</script>
| WEB2 JavaScript - 33.객체의 활용 |
※ 한번 더 보기
| WEB2 JavaScript - 34.파일로 쪼개서 정리 정돈하기 |
가장 큰 정리정돈의 도구 기능, 서로 연관된 코드들을 파일로 묶어서 그룹핑하는 거
한번 웹페이지에, 웹브라우저에 다운로드된 이런 파일은 웹브라우저가 보통 컴퓨터에 저장:캐시(cache)
그리고 다음에 접속할 때 저장된 파일을 읽어서 네트워크를 통하지 않게 함.
그럼 서버 입장에서는 훨씬 더 비용을 절감할 수 있고 사용자 입장에서 네트워크 트래픽도 절감할 수 있고,
훨씬 더 빠르게 웹페이지를 화면에 표시할 수 있다라는 효과가 생기기 때문에 이렇게 파일로 쪼개는 것이 실제로
훨씬 더 효율적이고, 돈도 시간도 적게 드는 방법
| WEB2 JavaScript - 35.라이브러리와 프레임워크 |
라이브러리는 소프트웨어를 만드는 내가 라이브러리를 당겨 와서 쓰는 느낌이라면
프레임워크는 프레임워크 안에 우리가 들어가서 작업하는 느낌
자바스크립트의 대표적인 라이브러리는 제이쿼리(jQuery)
둘 다 다른 사람과 협력하는 모델
CDN은 Content Delivery Network 자기들의 서버에다가 파일을 보관해놓고
우리는 그것을 script src를 통해서 가져갈 수 있도록 하는 방식.
jQuery는 새로운 언어가 아니고 JavaScript를 이용해서
우리 대신에 CSS라는 함수를 jQuery 만들어 둔 거
| WEB2 JavaScript - 36.UI vs API |
UI는 User Interface의 약자
API는 Application Programming Interface
애플리케이션을 만들기 위해서
프로그래밍을 할 때 사용하는 조작 장치들을
Application Programming Interface라고 부른다.
alert라는 것이 바로 Application Programming Interface, 줄여서 API인 것
이것은 JavaScript에 국한된 이야기가 아니고 모든 프로그래밍 언어에 공통적으로 적용되는 얘기다.
모든 애플리케이션들은 API를 프로그래밍적으로, 즉 순서대로 실행하는 것을 통해 만들어진다.
JavaScript라는 말하자면 접착제로, 본드로 이 API들을 결합해서, 다시 말해 응용해서
세상의 누구도 만들어 본 적이 없는 응용 프로그램을 만들 수 있게 된 것.
| WEB2 JavaScript - 37.수업을 마치며 |
공부보다는 실습
여러분이 웹페이지에 있는 어떤 태그를 삭제하고 싶거나 어떤 태그에 자식 태그를 추가하고 싶다면
document 객체
ㄴ 필요한 메소드가 그 안에 포함되어 있을 것
만약에 document 객체를 통해서도 찾을 수 없다면
DOM으로 수색 범위를 넓혀 보라
DOM 객체, document 객체는 DOM의 일부
또 웹페이지가 아니라 웹브라우저 자체를 제어해야 한다면
window 객체를 보라
현재 열려있는 웹페이지 주소가 뭔지 알아내야 될 수도 있고
여러분이 새 창을 열어야 될 수도 있고,
또 웹브라우저의 화면 크기를 JavaScript를 통해 알아야 한다면
window 객체에 속해 있는 프로퍼티나 메소드가
여러분을 도울 수 있을 거
또 웹페이지를 리로드하지 않고 정보를 변경하고 싶다면
ajax
ㄴ현대적인 웹앱을 만드는 데 필수적인 테크닉
또 웹페이지가 리로드되어도 현재 상태를 유지하고 싶다면 cookie
사용자를 위한 개인화된 서비스를 제공할 수 있다.
인터넷에 끊겨도 동작하는 웹 페이지를 만들고 싶다면
offline web application
화상 통신 웹 앱을 만들고 싶다구요?
webRTC
또 사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다면
speech로 시작하는 API들을 살펴 보라
또 3차원 그래픽으로 게임과 같은 것을 만들고 싶다면
webGL을 살펴보라
가상현실에 관심이 많으시다구요?
그럼 webVR이라는 것도 있다
| WEB2-JavaScript : Long take |
※ 한번 더 보기
'생활코딩 > javascript' 카테고리의 다른 글
| 공부정리_javascript(1~23강) (0) | 2021.09.12 |
|---|
