> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 기본 사항에 대해 자세히 알아보세요.

JavaScript의 기본 사항에 대해 자세히 알아보세요.

php中世界最好的语言
풀어 주다: 2018-03-13 13:19:55
원래의
1408명이 탐색했습니다.

이번에는 JavaScript의 기본 사용법과 JavaScript사용 시 주의사항에 대해 자세히 알아보겠습니다. 실제 사례를 살펴보겠습니다.

함수 반환 값

반환 값 1

<script>function show(){    return &#39;advb&#39;;
}var a=show();
alert(a); // 结果: advb</script>
로그인 후 복사

반환 값 2

<script>function show(a, b){    return a+b;
}
alert(show(3, 5));</script>
로그인 후 복사

반환 값 3

<script>function show(a, b){    //return; //没有return}
alert(show(3, 5));  //结果 : undefined</script>
<script>function show(a, b){    return; //没有return任何东西}
alert(show(3, 5));  //结果 : undefined</script>
로그인 후 복사

일반 합산

<script>function sum(a, b){    return a+b;
}
alert(sum(12, 6));</script>
로그인 후 복사

여러 매개변수의 합(인수는 변수 배열)

<script>
    function sum()    {        //arguments 是一个可变数组 
        var result=0;        for(var i=0;i<arguments.length;i++)
        {
            result+=arguments[i];
        }        return result;
    }
    alert(sum(12, 6, 8, 6, 8, 6, 8)); //结果 : 54</script>```
로그인 후 복사

- CSS 함수 매개변수가 2개인 경우 가 전달되면

속성을 가져오고 세 개의 매개변수가 전달되면 스타일을 수정합니다

<html>
<head>
<meta charset="utf-8">
<title>CSS函数</title>
<script>
function css(obj, name, value)
{
if(arguments.length==2) //获取
{
return obj.style[name];
}
else
{
obj.style[name]=value; //修改
}
}
window.onload=function ()
{
var oDiv=document.getElementById(&#39;div1&#39;);
//alert(css(oDiv, &#39;width&#39;)); //获取到宽度 200px
css(oDiv, &#39;background&#39;, &#39;green&#39;); //修改背景颜色为绿色
};
</script>
</head>
<body>
<div id="div1" style="width:200px; height:200px; background:red;">
</div>
</body>
</html>
로그인 후 복사
function getStyle(obj, name)
{if(obj.currentStyle) //由于currentStyle只兼容IE,所以在IE浏览器中他是true,其他浏览器中为false
{
return obj.currentStyle[name]; //IE
}
else
{    //计算样式 其中getComputedStyle(oDiv, xxx) 第二个参数可以随便填,一般习惯写false
return getComputedStyle(obj, false)[name];  //Chrome、FF
}
}
로그인 후 복사

샘플 코드:

위 함수를 통해 비인터라인 스타일 `BackgroundColor`를 가져옵니다

window.onload=function (){var oDiv=document.getElementById(&#39;div1&#39;);
alert(getStyle(oDiv, &#39;backgroundColor&#39;));
};
로그인 후 복사

###참고 이 기능은 단일 스타일에만 적용 가능하며 복합 스타일은 적용할 수 없습니다!!!

단일 스타일: 너비, 높이, 위치 등
복합 스타일: 배경, 테두리 등
>###3. 배열 - 배열 기본
- 배열
definition

var arr=[12, 5, 8, 9]; //一般用这种创建方式,简单
var arr=new Array(12, 5, 8, 9); //也可以这样创建
로그인 후 복사

사용에는 차이가 없습니다. 코드가 짧기 때문에 []의 성능이 약간 높습니다


- array

length

획득 및 설정 가능: ①. 배열 수, ②를 사용하여 배열 수를 설정할 수도 있습니다. /Array.length = 0을 사용하여 배열을 지웁니다.

배열 사용 원칙: 배열

에는 한 가지 유형의 변수만 저장되어야 합니다. - 배열 방법


push(요소) 추가, 꼬리에서 요소 추가

unshift(element), 헤드에서 요소 추가

delete


pop( ), tail에서 요소 삭제

shift(), 헤드에서 요소 삭제


- 삽입, 삭제 `splice` (` 표음 기호: [splaˈs]`): 배열의 범용 연산

delete



splice(start, Length) //첫 번째 매개변수: 위치 지정; 두 번째 매개변수: 길이 지정

Insert


splice(start, 0 , 요소...)

먼저 삭제한 다음 삽입


스플라이스(시작, 길이, 요소...)

먼저 삭제한 다음 삽입


Replace


먼저 삭제한 다음 삽입을 대체하여 사용할 수 있습니다

-배열 연결(두 배열 병합):concatconcat(array 2)

두 배열 연결


<script>
var a = [1,2,3];
var b = [4,5,6];
alert(a.concat(b)); 结果:[1,2,3,4,5,6];
alert(b.concat(a)); 结果:[4,5,6,1,2,3];
</script>
로그인 후 복사

- 결합(구분 기호)

구분 기호를 사용하여 배열 요소를 결합하여 문자열을 생성합니다(Ajax 학습 시 URL을 연결하는 데 사용됨)


<script>
var arr = [1,2,3,4];
alert(arr.join(&#39;-&#39;)) //1-2-3-4
alert(arr.join(&#39;- -p&#39;)) //1- -p2- -p3- -p4
</script>
로그인 후 복사

- 문자열 분할(`[splət]`separation; decomposition) 분할() 메서드는 문자열을 문자열 배열로 분할하는 데 사용됩니다. stringObject.split(separator,howmany)


separator 필수입니다. 이 매개변수로 지정된 위치에서 stringObject를 분할하는 문자열 또는 정규식입니다.

몇개는 선택사항입니다. 이 매개변수는 반환된 배열의 최대 길이를 지정합니다. 이 매개변수가 설정되면 이 매개변수로 지정된 배열보다 더 많은 하위 문자열이 반환되지 않습니다. 이 매개변수를 설정하지 않으면 전체 문자열이 길이에 관계없이 분할됩니다.


사용


단어를 문자로 분할하거나 문자열을 문자로 분할하려면 다음 코드를 사용할 수 있습니다.

"hello".split("")   //可返回 ["h", "e", "l", "l", "o"]
로그인 후 복사

문자의 일부만 반환해야 하는 경우에는 몇 개의 매개변수를 사용하세요.


"hello".split("", 3)    //可返回 ["h", "e", "l"]
로그인 후 복사

- 정렬 sort`sort([비교 함수])`, 배열 정렬

문자열 배열 정렬

숫자 배열 정렬
① 문자열 배열 정렬

<script>
var arr=[&#39;float&#39;, &#39;width&#39;, &#39;alpha&#39;, &#39;zoom&#39;, &#39;left&#39;];
arr.sort();
alert(arr); //结果 [&#39;alpha&#39;,&#39;float&#39;,&#39;left&#39;,&#39;width&#39;,&#39;zoom&#39;]
</script>
로그인 후 복사

② 숫자 배열 정렬 - 2.1 기본 버전

<script>
var arr=[12, 8, 99, 19, 112];
arr.sort();
alert(arr); //结果: [112,12,19,8,99] //其实他把数字当成字符串来排序了
</script>
로그인 후 복사

- 2.1 업그레이드 버전

<script>
var arr=[12, 8, 99, 19, 112];
arr.sort(function (n1, n2){
if(n1<n2)
{
return -1;//只要是个负数就可以 -2,-7等都可以
}
else if(n1>n2)
{
return 1; //只要是个正数就够了
}
else
{
return 0;
}
});
alert(arr); //结果:[8,12,19,99,112]
</script>
로그인 후 복사

- 2.2 최종 버전(2.1에서 진화)

<script>var arr=[12, 8, 99, 19, 112];
arr.sort(function (n1, n2){    return n1-n2; //若果n1>n2,为正;如果n1<n2,为负;如果相等,则为0;});alert(arr);//结果:[8,12,19,99,112]
</script>
로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어에 주목하세요. 홈페이지

기타

관련 기사! 추천 도서:

HTML과 CSS의 배경 관련 속성


JS에서 주의해야 할 8가지 기본 지식

위 내용은 JavaScript의 기본 사항에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿