IDE란?
- Integrated Development Environment → 통합개발 환경
예를들면
-
Debugger…
-
Simulator…
-
Editor…
-
(Browser…)
-
Terminal…
등을 꼽을 수 있겠다.
그중
iOS는 XCode (공식 made by Apple)을 보편으로 사용한다.
VSCode, Pycharm, …
(꼭, 뭘 써야 한다! 라는 건 없는데 대충 언어마다, 플랫폼마다 정해진 건 있다)
개발을 공부한다고 한다면 뭘 공부해야할까. 쉽게 언어를 생각할 수 있지만
- 프로젝트 세팅
- 언어 익히고 (영어,..)
- 문서 보면서 (문서는 그냥.. 문화)
프로젝트를 세팅하고 언어를 익히고 문서를 보면서 만드는 것
이라 정리하고 시작하면 좋을 것 같다.
JAVA SCRIPT
먼저 자바스크립트는 무엇일까?
💡 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.쉽게 생각해서 ‘웹페이지를 위한 것’ + ‘생명력(동적인 요소)을 불어넣는 역할을 겸하는 것’으로 생각된다
자바스크립트 실행하는 방법
자바스크립트는 웹에서 저장된 도큐먼트를 가져와 실행시키는 방법으로 불러오면 된다
예를 들어서
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>다음은, 버튼을 눌렀을 때, document.getElementById(’demo’).innerHTML = Date() 을 실행시킨다는 것이다.
‘demo’라고 작성된 파일을 찾아서 적용한다는 것이다.
그리고 여기서는 Date()를 보여주도록 실행하기 때문에
결과는
이렇게 나온다고 할 수 있다.
쓰는 형태는 다양하다.
document.getElementById("demo").innerHTML = "Hello JavaScript";document.getElementById('demo').innerHTML = 'Hello JavaScript';불러오는 파일은 “demo” 라고 불러왔을 때 나타낼 결과값도 “”로 표시가 되어야한다
반대로 ‘demo’를 사용했을 경우 똑같이 ‘’로 표현할 것.
사진을 불러와보자
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>다음과 같이 작성했을 경우 myImage 를 불러오고 그 이미지는 pic.bulbon이다
그리고 각 버튼을 눌렀을 때 bulbon이나 bulboff의 이미지를 불러오는 것이다.
그럼 자바스크립트는 어떻게 넣는 것인가?
자바 스크립트는 로 감싸서 넣을 수 있는 방법이 있다.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>아니면 외부의 js 파일로 저장하여 불러오는 방법이 있다.
<script src="myScript.js"></script>자바스크립트의 Functions
JavaScript 함수는 "호출"될 때 실행할 수 있는 JavaScript 코드 블록이다.
예를 들어 사용자가 버튼을 클릭할 때와 같이 이벤트가 발생할 때 함수를 호출할 수 있다.
그리고 그걸 function (함수) 이란 단어로 사용하고 있다
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>여기서 봐도 function 으로 myFunction을 만들어서 그 안에 도큐먼트를 넣으면
하단의 Html에서 작성할 때 계속 document.getElementById 으로 불러올 필요없이 바로 function으로 지정시켜 불러올 수 있다는 것. (나중에 자세히 다룹니당)
JAVA SCRIPT STATEMENTS
자바스크립트는 STATEMENTS 로 구성되어 있다.(명령)
이 Statements 는 values, operators(+ -..), expressions(컴퓨터 내에서 계산해주는 것), keywords(’function), comments(주석) 로 구성되어있다.
Semicolons
하나의 statement가 끝났다고 알려주는것이 바로 세미콜론이다.
c = a + b;[다른 팁 자바스크립트는 왜 복잡할까? \n 을 사용해야하는데, 그것도 문자 2개이기 때문에 최소한으로 만드는 이유도 있다.]
JAVASCRIPT KEYWORDS
JavaScript Syntax요약
변수 만드는 방법.
x,y는 변할 수 있는 값이기에 변수라고 한다
// How to create variables:
var x;
let y;
// How to use variables:
x = 5;
y = 6;
let z = x + y;값은 literal, 변수는 variables 이다
Literals
- Numbers 2.4
- Strings ‘Jihye’
