간단하고 이해하기 쉬운 자바스크립트 자습노트
- 亚连원래의
- 2018-05-18 09:52:311850검색
다음은 제가 여러분을 위해 정리한 JavaScript 자율 학습 노트입니다. 관심 있는 학생들은 한 번 살펴보세요.
1장
1. JavaScript 개요
JavaScript는 주로 클라이언트 측에서 사용되는 객체 및 이벤트 중심 스크립팅 언어입니다.
특징:
1. 상호 작용(정보의 동적 상호 작용만 가능)
2. 보안(로컬 하드 드라이브에 직접 액세스할 수 없음)
3. 플랫폼 독립적인 Js) 실행을 해석할 수 있습니다.
2. JavaScript와 Java의 차이점
1. JS는 Netscape Company의 제품이고, 이전에는 LiveScript의 제품이고 Java는 Sun Company의 제품이며 현재는 Oracle Company의 제품입니다.
2.JS는 객체와 이벤트 기반 언어이고, Java는 객체 지향 언어입니다
3.JS는 약한 유형의 언어이고, Java는 강력한 유형의 언어입니다
4.JS는 컴파일 없이 직접 실행할 수 있지만 Java는 컴파일하지 않고 직접 실행할 수 있습니다. 클래스 바이트코드 파일로 컴파일한 후에만 실행할 수 있습니다.
3. JavaScript 및 JScript
전자는 Netscape에서 가져온 것이고 후자는 Microsoft에서 가져온 것입니다.
현재 시중에 나와 있는 브라우저는
사양을 통합하기 위해 두 표준을 통합하는 ECMA 사양이 출시되었습니다.
4. JavaScript를 HTML과 결합하는 방법
1. JavaScript 코드를 3f1c4e4b6b16bbbd69b2ee476dc4f83a
2. 자바스크립트 코드를 js 파일로 캡슐화한 다음 3f1c4e4b6b16bbbd69b2ee476dc4f83a의 src 속성을 통해 가져옵니다.
3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 src 속성이 지정되면 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 캡슐화된 코드가 실행되지 않습니다. 예를 들어
<script type="text/javascript" src="test.js">alert("你好");</script>Alert("안녕하세요"); 코드가 실행되지 않습니다. 따라서 js 파일 가져오기는 일반적으로 별도의 3f1c4e4b6b16bbbd69b2ee476dc4f83a를 사용하여 수행됩니다. 예를 들어 다음 코드는 문제 없습니다:
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">alert("你好");</script> 5. 문법의 보편적 표현
일반적인 고급 언어에 포함된 문법 내용:
1. 키워드: 이 언어에서 특별한 의미가 부여되는 단어입니다.
2. 식별자: 데이터와 표현식을 식별하는 데 사용되는 기호로, 일반적으로 변수 이름, 함수 이름 등 프로그램에서 사용자 정의한 이름으로 이해될 수 있습니다.
자바와 동일합니다. (영문대소문자 26자) + (숫자 10개) + ($) + (_)
3 참고사항: 참고사항은 인터프리터에 대한 설명과 프로그램 디버깅에 사용됩니다.
두 가지 유형의 주석을 지원합니다: 한 줄 // 및 여러 줄 주석 /*주석 내용*/
4. 변수 및 상수: 메모리의 공간을 식별하는 데 사용되며 이 공간의 데이터는 변경될 수 있습니다. .
언제 변수를 사용하나요? 데이터가 불확실할 때 변수를 사용하세요.
변수 정의 방법: var 변수 이름 = 변수 값
주의 사항:
> js는 약한 유형의 언어이므로 선언 없이 변수를 직접 사용할 수 있습니다.
> "는 둘 다 나타냅니다. 문자열의 경우 작은따옴표는 큰따옴표 안에 포함될 수 있고, 큰따옴표는 작은따옴표 안에 포함될 수도 있습니다.
5. 연산자: 데이터를 연산할 수 있는 기호입니다.
1> 산술 연산자: + - * / % ++ --
참고: 나눗셈을 계산할 때 두 개의 정수가 나누어집니다. 결과에 소수가 있는 경우 js는 이를 유지합니다. 이는 Java와 약간 다릅니다. ,
> var a = 2321;
alert("a:"+a/1000*1000);
출력된 결과는 2321이지만 java에서는 2입니다. 왜냐하면 js는 약한 유형이고 강한 유형이 없기 때문입니다. 2321/1000 이후의 소수를 정수로 변환
> var a1=2.3,b1=4.7;
Alert("a1+b1="+(a1+b1));//결과는 7.0이 아니라 7입니다. 약한 유형임
>alert("12" -1);//결과는 11이며, 12는 먼저 정수로 변환됩니다.
>alert("12"+1);//결과는 121입니다. 기호를 추가하면 문자열이 연결됩니다
> Alert(true +1);//js에서는 false가 0 또는 null이기 때문에 결과는 2입니다. 0이 아니고, null이 아닌 것은 true를 의미하며, 기본적으로 1로 표현됩니다.
>alert(2%5);//결과는 2, 6%1, 결과는 1, 10%5, 결과는 0
2>할당 연산자: =, +=, -=, *= , /= , %=
3> 비교 연산자(연산 결과는 false 또는 true): >, 95ec6993dc754240360e28e0de8de30a=, 5a1817d3fb92aad0a87a6c08d6a1ff12 , ||,!
var t = 4;
alert(!t); //false, t=4이고 4가 0이 아니기 때문에 0은 false를 나타내고, 0이 아닌 것은 true를 의미하므로!t는 false입니다
5> 비트 연산 기호: &, |, ^, >>, <95ec6993dc754240360e28e0de8de30a>>
6> 삼항 연산자: 실제로는 if...else 문의 약어입니다. Java의 삼항 연산자 결과가 있어야 하지만 js는 결과가 있을 수 없습니다. 예를 들어 Alert(3>0?alert("3은 0보다 큽니다"):alert("3은 0보다 작습니다"));
예: a>b? 1 : 0
6 .Statement: 프로그램의 실행 프로세스를 제어하는 데 사용되는 표현식입니다.
1>.순차구조
코드를 위에서 아래로 실행할 때 이를 순차구조라고 합니다
2>.판단구조
대표문: if
세부사항:
<script type="text/javascript">
var x = 3;
if(x=4){
alert("yes");
}else{
alert("no");
}
</script>打印结果：yes,因为x=4是赋值，将4赋值给x后，x=4了，4是非0，0代表假，非零代表真，所以为true，打印“yes”
3>.选择结构switch(x),这个x在java里面只能是byte,short,int,char或枚举类型，而在javascript中，任何类型都可以，
因为它是弱类型switch的执行顺序是先执行case,再执行default,而且按照从上到下的顺序执行//演示：
<script type="text/javascript">
var x = "abcaaa";
switch(x){
default:
alert("默认值");
case "ddd":
alert("我是ddd");
break;
case "abc":
alert("我是abc");
break;
}
</script>//打印结果："默认值"、"我是ddd"，因为default下没有break，所以它会一直执行到break为止，但是如果default选项放在了
//最后一个，而且没有break的话，这条语句的执行结果就只有"默认值"
4>.循环结构:while、for,用法跟java是一样的
演示：用while循环向浏览器中打印1到10的值，每打印一次换行
<script type="text/javascript">
var x = 0;
while(x<10){
document.write("x="+x+"<br/>");
x++;
}
</script>演示：跳出循环,打印依次x==0,如果将break w换成continue w的话，那就会打印x==0x==1x==2了
<script type="text/javascript">
w:for(var x=0; x<3; x++){
for(var y=0; y<4; y++){
document.write("x=="+x);
break w;
}
}
</script>5>.其他语句
7.函 数：用于对功能的代码进行封装，便于提高复用性。
1.概念：函数就是一个功能的封装体
2.定义功能通常需要两个明确：
1>.功能的结果
2>.功能实现中的参与运算的未知的内容
3.函数细节问题：
1>.javascript中只要使用函数的名称就是对函数的调用，它不存在重载形式:举例如下
show();//直接这么调用的话将打印：undefined:undefined,一般不建议这么调用，建议有几个参数就传几个参数
show(4,5,6);//将打印4:5，这里的6看似丢了，其实没丢，被一个arguments数组存储起来了
<script type="text/javascript">
function show(x,y){
alert(x+":"+y);
}
</script>2>.每个函数中有一个数组在对传入的参数进行存储。这个数组就是arguments
<script type="text/javascript">
show(4,5,6);
function show(x,y){
alert(arguments.length);//打印3，也就是传入的参数的个数:4,5,6
}
</script>3>.返回值：
<script type="text/javascript">
function getSum(){return 100;}
var sum01 = getSum();//getSum函数运行，并将返回的100赋给sum01
var sum02 = getSum;//getSum本身是一个函数名，而函数本身在js中就是一个对象，getSum就是这个函数
//对象的引用，将getSum这个引用的地址赋给sum02,这时sum02也指向了这个函数对象。
//相当于这个函数对象有两个名称
alert(sum02);//该打印会将函数的字符串表现形式打印出来，就是该函数的代码定义格式，也就是如下代码：
/*function getSum(){
return 100;
}*/
</script>4.JS函数的其他表现形式：
1>动态函数：
>特点：函数的参数和函数体都是可以通过动态指定的
>使用的是js中内置的一个Function对象，但是用的不多，示例如下
<script type="text/javascript">
var add = new Function("x,y","var sum = x+y; return sum;");
var result = add(4,13);
alert(result);//打印结果是17
</script>2>匿名函数：没有名字的函数
<script type="text/javascript">
function hello(){
alert("你好");
}
var result = hello;
</script>//上面的写法改成匿名函数的话可以这么写：
<script type="text/javascript">
var result = function(){alert("你好");}
</script>8.数 组：对多数据进行存储，便于操作，也就是容器。
1.js中提供了定义数组的两种方式：1.var arr = []; 2.var arr = [2,23,14,48];
2.javascript中数组的特点：
1>.长度是可变的
2>.元素的类型是任意的，什么类型都可以往一个数组里装，但建议装同类型的，这样操作起来更方便
3.使用javascript中的Array对象来完成定义
1>.var arr = new Array();//这个写法相当于var arr = [];
2>.var arr1 = new Array(5);//定义数组，长度是5
9.对 象：只要是基于对象的语言，或者是面向对象的语言，就存在着对象的概念，
对象就是一个封装提。既可以封装数据又可以封装函数。
以上都是高级程序设计语言具备的共性内容，只不过各种语言对这些内容的表现形式不一样，但是基本思想是一致的
六、Javascript细节问题
1.undefined:未定义。其实它就是一个常量
举例：var x;
alert(x);//这时候就会弹出undefined,因为x没有赋值就直接用，所以就会报这个异常了
2.想要获取具体的值的类型，可以通过typeof来完成，typeof返回的类型都是字符串的。
举例：
<script type="text/javascript">
alert(typeof("abc")); //"string"
alert(typeof(2.5));//"number"
alert(typeof(true));//"boolean"
alert(typeof(78));//"number"
alert(typeof('9'));//"string"
</script>要判断某个类型，可以按照以下方法：
<script type="text/javascript">
alert(typeof("abc")=='string'); //true
alert(typeof(2.5)=='number');//true
alert(typeof(true)=='boolean');//true
alert(typeof(78)=='number');//true
alert(typeof('9')=='string');//true
</script>========================================常见Javascript算法总结===========================================
<script type="text/javascript">
//定义测试数组
var arr = [10,43,3,7,52,8,34];
//查找数组中最小的元素并输出到浏览器
function getMinValue(arr){
var min = 0;
for(var i=1; i<arr.length; i++){
if(arr[i]<arr[min]){
min = i;
}
}
return arr[min];
}
//对数组中的元素从小到大排序并输出到浏览器
function arrSort(arr){
for(var x=0; x<arr.length; x++){
var index = x;
var temp = arr[x];
for(var y=x+1; y<arr.length; y++){
if(arr[y]<temp){
temp = arr[y];
index = y;
}
}
swapArray(arr,x,index);
}
}
//对一个数组中的两个元素交换位置
function swapArray(arr,a,b){
var temp = arr[a];
arr[a] = arr[b];
arr[b] = temp;
}
//对一个数组中的数据进行反转
function reverseArray(arr){
for(var start=0,end=arr.length-1; start<end; start++,end--){
swapArray(arr,start,end);
}
}
//打印数组
function println(arr){
document.write(arr+"<br/>");
}
</script>第二章
一、全局和局部变量
<script type="text/javascript">
//1.在脚本片段中定义的变量，是全局变量，全局变量在整个页面都能访问
for(var x=0; x<3; x++){
document.write("x="+x);
}
document.write("x="+x);//打印3，这里是能访问到上面的x的，因为上面的x虽然定义在for循环里，但是它却是一个全局变量
//2.在函数内部定义的变量是局部变量
var x = 3;//全局变量
function show(x){
x = 6;//局部变量
}
show(x);
document.write("x="+x);//这个打印结果是3，x=3传到show(x)里面去，x=6,但是由于
//是局部变量，外部是访问不到的
//所以document.write("x="+x)访问的全局的x=3;
</script> 二、常见对象
1.Object
常见方法：
> toLocaleString :根据所在地返回一个对应风格的日期字符串格式，调用这个方法的对象一般都是一个日期对象
比如：var dt = new Date(); alert(dt.toLocaleString());
> toString : 将当前对象(谁调用toString方法谁就是当前对象)转化为字符串，对于不同类型的对象，返回的字符串格式是不一样的，具体格式
需要参见JScript API(由于网景公司没有给Javascript提供相应的API，所以只能用微软的Jscript的API了，两者大部分东西都是一样的)
> valueOf : 返回指定对象的原始值，具体返回格式参见API
2.String
常见方法：方法很多，查阅API可以获得详细的信息
重要属性：
> prototype : 返回对象类型原型的引用，这个解释看着有点别扭，简单点说，举例如下：
我要给字符串添加一个去除两端空格的方法，原来我们是这么做的
1>.定义一个方法trim(str)：
<script type="text/javascript">
function trim(str){
var start=0;
var end=str.length-1;
while(start<=end && str.charAt(start)==' '){
start++;
}
while(start<=end && str.charAt(end)==' '){
end--;
}
return str.substring(start,end+1);
}
</script>2>.调用这个方法：
<script type="text/javascript">
var str = " abc d asdf ";
alert(trim(str));//打印abc d asdf,结果是去除两端空格后的结果
</script> 3>.分析：这么写，我们觉得还是不够方便，我想弄成str.trim()就直接去掉空格行不行呢？就像是str.toString()方法一样方便，
参数都不用传，就直接给我去掉空格了，多爽啊，
这时候，我们就需要用到prototype这个属性了，因为toString()方法是String类的原型中的，也就是人家封装好了的，
现在我只要往它原来的类中添加一个trim(str)方法，那么所有的字符串就可以直接调用这个方法了，怎么做呢？如下：
<script type="text/javascript">
String.prototype.mytrim = trim; //这个mytrim是我在String类中加进去了一个mytrim的方法，trim是上面我定义的
//trim(str)的函数，其实也可以写成下面这种，匿名函数，但是要注意，原来的参数str
//需要改成this了，this代表当前对象，谁调用该方法，谁就代表了this
String.prototype.mytrim = function(){
var start=0;
var end=this.length-1;
while(start<=end && this.charAt(start)==' '){
start++;
}
while(start<=end && this.charAt(end)==' '){
end--;
}
return this.substring(start,end+1);
}
//调用我的mytrim方法
var str = " abc d asdf ";
alert(str.mytrim());//打印abc d asdf,结果是去除两端空格后的结果
</script> 3.Array
常见方法：
> concat(一个或多个元素用逗号分开):将一个数组或字符串加到另外一个数组中去，并返回新的数组，如果被添加的是一个数组，
该方法会将这个数组中的元素一个一个添加到调用concat的数组中去。
举例：var arr1 = ["哈哈","吼吼"];
var arr2 = ["heihei",23];
var arr3 = arr1.concat("我是数组",arr2);
alert(arr3);//打印结果：哈哈,吼吼,我是数组,heihei,23
> join(separator):这个方法其实就是将数组拼接成字符串，而且接收一个参数，用于分割每个数组元素
var arr = ['你好','中国','我爱你'];
var arr1 = arr.join("-"); //arr1的结果为：你好-中国-我爱你
> pop():移除数组中最后一个元素并返回该元素，类似java中LinkedList中的removeLast方法
> push(arr):将一个元素添加到一个数组中去，并返回新书组的长度，该方法跟concat功能差不多，但是有两个小区别，
一个是push在添加元素的时候，如果被添加的元素是一个数组，它会将整个数组作为一个元素添加到调用push方法的
数组中去，而concat是将被添加的数组中的所有元素一个一个单独作为一个元素添加到调用者数组里去，第二个小区别是
返回值，concat是返回新数组，而push返回的是新数组的长度
> reverse():反转方法，返回调用者元素顺序被反转后的数组，也就是元素头尾对调
> shift():移除数组中第一个元素并返回该元素，相当于java中的removeFirst，只不过这方法名取得有点怂，实际开发中，可以用
prototype属性调用到原型然后重写一个removeFirst方法，功能跟shift一样，这样用起来更爽
> unshift():将指定元素插入数组开始位置并返回新数组的长度，该方法和pop()方法可以实现先进先出的效果，类似队列(先进先出)，
该方法如果跟shift()方法一起用，可以实现后进先出的效果，类似堆栈(后进先出)
需要注意的是，unshift一次添加多个元素的效果和多次添加同样的这几个元素的效果是不一样的，比如：
<script type="text/javascript">
var arr = [12,44];
arr.unshift(33);
arr.unshift(66);
alert(arr);//打印结果是66,33,12,44
//---------------------------------如果是以下写法就不一样了---------------------------------------
var arr = [12,44];
arr.unshift(33,66);
alert(arr);//打印结果是33,66,12,44
</script> > slice(start,end):返回一个数组的一段数据，从start开始(包含start)，到end结尾(不包含end),跟String类的substring(start,end)方法类似
> splice(start, deleteCount, 一个或多个元素以逗号隔开):从一个数组中移除一个或多个元素，可以同时在移除的元素位置上添加一个或多个元素
> 注:如果还需要特定方法，可以自己扩展，获取到Array.prototype然后进行新功能的增加
4.Date
常见方法：跟Java中的Date对象都差不多，只不过，这个js的Date对象没有后去DateFormat对象的东东，不过提供了两个格式化的方法
toLocaleString():可以转化为本地格式，带具体时间，eg:2013年8月29日 12:11:25
toLocaleDateString:也可以转化为本地格式，不过这个是不带具体时间的,eg:2013年8月29日
对于一些常见方法基本好做，有一个需要注意的地方，就是月份和星期，对于月份，js里用0到11表示1到12月份，用0到6表示周日、周一、周二...周六
下面对所有常见方法一一介绍和解释，也作为备忘和学习笔记：
> 获取时间中具体元素的方法：
var date = new Date();
年：date.getYear()
月：date.getMonth(),获取到的值加1后等于当前月份
日：date.getDate(),获取当前日在本月中是第几天
星期：date.getDay(),获取星期，返回的值为0到6，表示星期日，星期一...星期六
日期对象的毫秒值：date.getTime()
> 字符串转换为日期：
Date.parse(str):对于str参数是有格式要求的，转换后返回一个str日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒数，如果需要转化为Date类型，
可以用new Date(time)再转依次，下面演示如何从一个字符串转换成一个本地时间打印出来：
<script type"text/javascript">
var dateStr = "03-23-2013 12:32:10";
var time = Date.parse(dateStr);
var date = new Date(time);
alert(date.toLocaleString());//打印结果：2013年3月23日 12:32:10
</script> > 日期转换为字符串：toLocaleString()、toLocaleDateString();
5.小知识补充:
为了简化对象调用内容的书写，可以使用js中的特有语句with来完成。
格式：
<script type="text/javascript">
with(对象){
//在该区域中，可以直接使用指定对象的内容，不需要写对象
}
//比如原来写一个对象调用的方法：
var arr = ["bb","cc","aa"];
arr.sort();
arr.reverse();
//每次调用数组方法的时候都要写对象名称arr.
//这样比较麻烦，所以可以写成如下效果
var arr = ["bb","cc","aa"];
with(arr){
sort();
reverse();
}
</script> 6.Math:该类中所有的方法都是静态的，用于计算数据用的方法基本上都在这里，方法不多也不少，只要是涉及到数据计算的
功能的方法，都可以到该对象中来找，下面就写一个获取随机数的方法演示下Math的基本方法，以作备忘：
//需求：获取1到100的随机数，由于获取到的随机数是一个浮点型的数据，所以需要转成整形的数据
//第一种写法：将获取到的随机数强转为整数类型
var randomNum = parseInt(Math.random()*10+1);
//第二种写法：利用Math.floor的方法获取小于该随机后的数据的一个整数
var randomNum = Math.floor(Math.random()*10+1);
7.Global:全局对象，它里面的方法可以直接调用，不需要像其他对象的方法一样需要对象名称. 来调用
> parseInt(numString,radio):将指定的数字字符串转化为指定的进制，如果字符串不是数字字符串，
用isNaN(parseInt(numString,radio))判断时为true，这个有个需要注意的是，如果numString里面的
内容是数字开头的，比如"123abc22ddd"，这时候parseInt方法会将123转换为数字对象，而且isNaN判断时为false.
numString:需要转换为整数型的数字字符串
radio:进制数，也就是转换后以什么进制表示
> 如果需要将一个数字的十进制转换为其他进制，可以使用Number对象来完成，如下：
var num = new Number(6);
alert(num.toString(2));//将num转换为二进制，打印结果110
//上面的写法可以用如下写法代替
var num = 6;
alert(num.toString(2));//也是打印110，这就类似于java中的装箱了，6被自动转化为了Number类型了
8.JavaScript特有方法:for in
格式：
var arr = ["张三","李四","王五"];
for(i in arr){
alert(arr[i]);//遍历的i是角标，依次打印张三、李四、王五
} 三、JS自定义对象：定义一个Person对象，并定义两个属性name和age,并定义人的eat(something)函数
<script type="text/javascript">
方式一：
function Person(){
}
var p = new Person();
p.name = "大雄";
p.age = 15;
p.getName = function(){
return this.name;
}
p.eat = function(something){
alert(this.getName()+":"+this.age+"岁, 喜欢吃"+something);
}
p.eat("鸡腿");//打印：大雄：15岁, 喜欢吃鸡腿
方式二：
//描述Person对象，类似构造器
function Person(name,age){
this.name = name;
this.age = age;
this.getName = function(){
return this.name;
}
this.eat = function(something){
alert(this.name+":"+this.age+"岁, 喜欢吃"+something);
}
}
//建立对象
var p = new Person("大雄",15);
p.eat("鸡腿");//打印：大雄：15岁, 喜欢吃鸡腿
方式三：
var p = {
"name":"大雄","age":15,
"getName":function(){
return this.name;
},
"eat":function(something){
alert(this.name+":"+this.age+"岁, 喜欢吃"+something);
}
}
alert(p.eat("鸡腿"));
</script>上面是我整理给大家的javascript自学学习笔记，希望今后会对大家有帮助。
相关文章：
위 내용은 간단하고 이해하기 쉬운 자바스크립트 자습노트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!