アプリケーション開発学習1週間
32198 ワード
JavaScriptの体験
javascriptとは?
通常、JavaScriptは、Webサイト(Webドキュメント)にダイナミックな画像を描くためのコンパクトで軽量な言語です.通常、JavaScriptはWebテクノロジーであり、アプリケーションを作成するために使用できるという固定観念があります.これは反応自機がJavaScriptに基づいているためである.
2.JavaScript基礎構文
1)変数
//변수 선언
let num = 20
var num2=10
//const로 변수 선언
let value_box = '값'
value_box = '변경한 값';
console.log(value_box) // 콘솔엔 '변경한 값'이 찍힙니다.
const value_fix = '값';
value_fix = '변경한 값';
console.log(value_fix) // const로 선언한 변수엔 새로운 값을 재 할당(다시 입력!) 할 수 없습니다.
//사칙연산
let a = 1
let b = 2
a+b // 3
a/b // 0.5
//문자열 더하기
let first = 'Bob'
let last = 'Lee'
first+last // 'BobLee'
first+' '+last // 'Bob Lee'
first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
2)リスト(配列)&ディックシリーズ(オブジェクト)
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'
let b_dict = {'name':'Bob','age':21}
//bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다.
b_dict['name']
b_dict.name
//둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
//딕셔너리 활용X
let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';
//딕셔너리 활용O => 고객 별로 정보 묶기 가능
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
//리스트 활용O => 순서 표현 가능
let customer = [
{'name': '김스파', 'phone': '010-1234-1234'},
{'name': '박르탄', 'phone': '010-4321-4321'}
]
//둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.
//딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능.
//객체
let blog = {
owner : "noah",
url : "noahlogs.tistory.com",
getPost() {
console.log("ES6 문법 정리");
}
};
//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()
//비구조 할당 방식
let { owner, getPost } = blog;
//각각 blog 객체의 owner , getPost() 의 데이터가 할당
//blog의 키 값과 이름이 같아야 해요!
//(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.)
** 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식**
//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
console.log(owner)
console.log(url)
console.log(getPost())
}
blogFunction(blog)
3)関数
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
let a = function(){
console.log("리터럴 방식 이라고 합니다");
}
a()
//기존 방식
let a = function() {
console.log("function");
}
a();
//최신 방식
let a = () => {
console.log("arrow function");
}
a();
4)条件文
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)
// AND 조건 &&
function is_adult(age, sex){
if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
// OR 조건 ||
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
is_adult(25,'남')
5)繰り返し文
let people = ['철수','영희','민수','형준','기남','동희']
// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}
//딕셔너리가 들어간 리스트
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
//리스트(배열)를 순회하여 값을 꺼내 확인할 기존 반복문
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
console.log(numbers[i]);
}
//map 사용
let numbers = [1,2,3,4,5,6,7];
numbers.map((value,i) => {
console.log(value,i)
})
Reference
この問題について(アプリケーション開発学習1週間), 我々は、より多くの情報をここで見つけました https://velog.io/@jay2721/앱개발-공부-1주차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol