자바스크립트 기능 학습 노트_자바스크립트 기술 정리
- WBOY원래의
- 2016-05-16 15:28:321338검색
1. 함수란
동일한 코드를 여러 번 사용해야 하는 경우 이를 함수로 캡슐화할 수 있습니다. 함수는 코드에서 언제든지 호출할 수 있는 일련의 명령문입니다. 각 함수는 실제로 짧은 스크립트입니다.
예를 들면 다음과 같습니다. 여러 합계 집합 기능을 완성합니다.
var sum; sum = 3+2; alear(sum); sum = 7+8; alear(sum); ......//不停的重复两行代码
8개 숫자 그룹의 합을 구현하려면 16줄의 코드가 필요합니다. 더 많이 구현할수록 더 많은 코드 줄이 필요합니다. 따라서 특정 기능을 수행하는 코드 블록을 함수에 넣어서 이 함수를 직접 호출할 수 있어, 많은 양의 코드를 반복적으로 입력하는 수고를 덜 수 있습니다. 기능 사용 완료:
function add(a,b){
sum = a+b;//只需要写一次就可以
};
add2(3,2);
add2(7,8);
......//只需要调用函数就可以
2. 기능 정의
함수 구문 정의
function 函数名(参数argument){
函数体statements;
}
//function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
function shout(){
var beatles = Array("John","Paul","George","Ringo");
for (var count = 0; count < beatles.length; count++){
alert(beatles[count]);
}
}
//这个函数里面的循环语句将依次弹出对话框来显示beatles里面内容。
shout();调用函数，执行脚本里的动作
두 숫자를 합산하여 결과를 표시하는 기능 완성:
<script type="text/javascript">
function add2(){
sum = 3+2;
alert()sum;
}
add2();
</script>
3. 함수 호출
함수를 정의한 후에는 자동으로 실행할 수 없으며, 해당 함수를 직접 호출하여 필요한 위치에 함수명을 적어주셔야 합니다.
첫 번째 경우: 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그 내에서 호출됩니다.
<script type="text/javascript">
function add(){
sum = 1+1;
alert(sum);
}
add();//调用函数，直接写函数名。
</script>
두 번째 경우: 버튼을 클릭한 후 정의된 함수를 호출하는 등 HTML 파일에서 호출됩니다.
<html>
<head>
<script type="text/javascript">
function add2(){
sum = 5 + 6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>
4. 매개변수가 있는 함수
실제로 함수 정의는 다음 형식일 수도 있습니다.
함수 함수 이름(매개변수 1, 매개변수 2) {
기능코드
}
함수를 정의할 때 쉼표로 구분된 인수만큼 선언할 수 있습니다. 함수 내에서 일반 변수처럼 매개변수를 사용할 수 있습니다.
이 형식에 따르면 두 숫자의 합을 구현하는 함수는 다음과 같이 작성되어야 합니다.
function add2(x,y){
sum = x + y;
document.write(sum);
}
//x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。
은 다음 기능을 구현합니다.
세 숫자의 합을 구현하는 함수를 정의합니다. 함수 이름은 add3입니다.
5, 8, 3/7, 1, 4 세 숫자로 구성된 두 집합의 합을 계산합니다.
<script type="text/JavaScript">
function add3(x,y,z) {
sum = x + y +z;
document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");
}
add3(5,8,3);
add3(7,1,4);
</script>
5. 값을 반환하는 함수
함수는 데이터(매개변수 형식)를 받을 수 있을 뿐만 아니라 데이터를 반환할 수도 있습니다. 함수를 생성하고 값, 문자열, 배열 또는 부울을 반환하도록 할 수 있습니다. 이를 위해서는 return 문을 사용해야 합니다.
function multiply(num1,num2){
var total = num1*num2;
return total;
}
이전에는 "document.write"를 통해 결과가 출력되었으나 이제는 함수를 사용하여 출력됩니다
"document.write(sum)" 줄을 다음 코드로 변경하기만 하면 됩니다.
function add2(x,y){
sum = x + y;
return sum; //返回函数值,return后面的值叫做返回值。
}
//还可以通过变量存储调用函数的返回值：
result = add2(3,4);//语句执行后，result变量中的值为7。
예: 다음 함수에는 하나의 매개변수(화씨 온도 값)만 있으며 숫자 값(동일한 온도의 섭씨 온도 값)을 반환합니다.
<script type="text/javascript">
function convertToCelsius (temp) {
var result = temp - 32;
result = result / 1.8;
return result;
}
//函数的真正价值体现在，我们还可以把它们当做一种数据类型来使用，这意味着可以把一个函数的调用结果赋给一个变量：
var temp_fahrenheit = 95;
var temp_celsius = convertToCelsius(temp_fahrenheit);
alert(temp_celsius);
</script>
이 예에서 변수 temp_celsius의 값은 35이며, 이는 ConvertToCelsius 함수에 의해 반환됩니다.
변수 이름을 지정할 때 밑줄을 사용하여 단어를 구분하고, 함수 이름을 지정할 때는 두 번째 단어로 시작하는 각 단어의 첫 글자를 대문자로 표시합니다(즉, camelCase).
1) 변수의 범위
변수는 전역 또는 로컬일 수 있습니다.
전역 변수 는 스크립트 어디에서나 참조할 수 있습니다. 스크립트에서 전역 변수를 선언하면 함수 내부를 포함하여 스크립트의 어느 곳에서나 이를 참조할 수 있습니다. 전역 변수의 범위는 전체 스크립트입니다.
로컬 변수 는 선언된 함수 내부에만 존재하며 해당 함수 외부에서는 참조할 수 없습니다. 지역 변수의 범위는 특정 함수로 제한됩니다.
함수 변수는 var 키워드를 사용하여 명시적으로 범위를 지정할 수 있습니다.
var가 함수에 사용되면 해당 변수는 이 함수의 컨텍스트에만 존재하는 지역 변수로 간주됩니다. 반대로 var가 사용되지 않으면 해당 변수는 전역 변수로 간주됩니다. 스크립트에 이름이 같은 전역 변수가 있고 이 함수는 해당 전역 변수의 값을 변경합니다.
예:
function square(num){
total = num*num;
return total;
}
var total = 50;
var number = square(20);
alert(total);
这是错误的，number的值为400，但是这里alert弹出的是total的值，应该是50.
这些代码将不可避免地导致全局变量total的值发生变化。
全局变量total的值变成了400.我的本意是让square()函数只把它计算出来的平方值返回给变量number，但因为未把这个函数内部total变量明确地声明为局部变量，这个函数把名字同样是total的那个全局变量的值也改变了。
把这个函数写成如下的样子才是正确的：
function square(num){
var total = num*num;
return total;
}
var total = 50;
var number = square(20);
alert(total);
</script>
正确结果：
以上就是关于Javascript函数的学习笔记，还涉及到了一些变量的知识点，希望对大家的学习有所帮助。