AI智能
改变未来

JavaScript基础


什么是JavaScript

1.JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript特点

1.是一种解释性脚本语言(代码不进行预编译)。

2.主要用来向HTML页面添加交互行为。

3.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离

4.跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

用途

1.嵌入动态文本于HTML页面。

2.对浏览器事件做出响应。

3.读写HTML元素。

4.在数据被提交到服务器之前验证数据。

5.检测访客的浏览器信息。

6.控制cookies,包括创建和修改等。

7.基于Node.js技术进行服务器端编程。

基本结构

<script type=\"text/javascript\"><!—JavaScript 语句;—></script >

<script>…</script>

可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可

引用JavaScript的方式

1.使用

<script>

标签

2.直接在HTML标签中:

<input name=\"btn\" type=\"button\" value=\"弹出消息框\"onclick=\"javascript:alert(\'你好\');\"/>

3.外部JS文件:

<script src=\"export.js\"  type=\"text/javascript\"></script>

变量

1.先声明变量再赋值:

var   var1;var1 = 5;

var用于声明变量的关键字
var1 - 变量名。

2.同时声明和赋值变量:

var name= \"皮皮\";var x, y, z = 10;

3.不声明直接赋值【一般不使用】:

var2=5;

注:变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用。

数据类型

1.undefined:
示例:var var1;
变量var1没有初始值,将被赋予值undefined。

2.null:表示一个空值,与undefined值相等。

3.number:
(1)var x=23; //整数
(2)var y=23.0; //浮点数

4.布尔值Boolean:true和false JS会把他们解析成1和0。

5.字符串String:一组被引号(单引号或双引号)括起来的文本 。
var string1=“Hello”;

注:JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

运算符

1.一元运算符
(1)+正号,对非Number值,会先转换为Number,然后再运算,可以做隐式转换。1++“2”+3; // 6

(2)-负号,对非Number值,会先转换为Number,然后再运算。

2.自增和自减:
++ a++ ++a
– a– –a

3.逻辑运算符:
(1)&&与,对符号两侧的值进行与运算并返回结果,一假即假;该运算属于短路运算,若第一个为false,则不会看第二个;若第一个为true则必然返回第二个值,若第一个值为false则必然返回第一个值.

(2)||或,对符号两侧的值进行或运算并返回结果,一真即真,该运算属于短路运算,若第一个为true,则不会看第二个;若第一个为true则必然返回第一个值,若第一个值为false则必然返回第二个值。

(3)!非,可以用来对一个值进行非运算,对一个布尔值进行取反操作;对一个值两次取反,则不会变化,可以用来进行隐式转换成布尔类型;对非布尔值取反,会将其转换为布尔值,再取反。

(4)&& ||非布尔值的情况:先将其转换为布尔值再运算,并返回原值。

4.赋值运算符:将符号右侧的值赋值给左侧的变量
(1)=:
(2)+=:a+=5等同于a=a+5
(3)-=
(4)*=
(5)%=

5.关系运算符:通过关系运算符可以比较两个值之间的大小关系,关系成立返回true,不成立则返回false
(1)>大于号
(2)>=大于等于号
(3)<小于号
(4)<=小于等于号
(5)

==

:相等运算符,用来比较两个值是否相等,相等返回true,不等返回false;

进行比较时,若两侧值的类型不同,则会自动进行类型转换,将其转换为相同的类型,然后再比较

undefined衍生自null,所以这两个值做相等判断时,会返回true;

NaN不和任何值相等,包括它自身,可以通过isNaN()函数来判断一个值是否为NaN

(6)!=:不相等运算符,也会对变量进行类型转换,返回布尔值。

(7)

===

:全等,和

==

类似,不会做类型转换。

(8)!==:不全等,和!=类似,不会做类型转换。

6.条件运算符:又叫三元运算符:
(1)语法:条件表达式?语句1:语句2;

(2)执行时,首先对条件表达式进行求值,若为true,则执行语句1并返回执行结果,若为false,则执行语句2并返回结果;若条件表达式的结果是非布尔值,则会先转换为布尔值,再运算。

typeof运算符

1.typeof检测变量的返回值;typeof运算符返回值如下:
1.undefined:变量被声明后,但未被赋值.
2.string:用单引号或双引号来声明的字符串。
3.boolean:true或false。
4.number:整数或浮点数。
5.object:javascript中的对象、数组和null。

逻辑控制语句

1.if条件语句

/*---示例if语句---*/if(判断语句:关系表达式或逻辑表达式){语句1}else{语句2}语句3;/*--- else if语句 ---*/if (判断语句1) {语句1}else if (判断语句2) {语句2}else {语句3}语句4

If中0,null,” ”,undefined,NaN,false——–结果是false;其他的都是true!
代码示例:

/*---if else语句---*/var x = 1;if (x == 3) { //判断x等于3y = 2;  //如果对输出y值} else if (x > 3) { //判断x大于3y = 1;//如果对输出y值} else if (x < 3) {  //x小于3y = 4;//如果对输出y值}document.write(\"y=\" + y + \"<br />\");//在页面显示y值//y值为4。

2.switch多分支语句:基于不同的条件来执行不同的动作,用 switch 语句来选择要执行的多个代码块之一。

switch (表达式){  case 常量1 :JavaScript语句1;break;case 常量2 :JavaScript语句2;break;default :JavaScript语句3;  }

注:在语句后不写break,会导致执行下一条语句。
代码示例:

var message = prompt(\"请输入今天是周几:\",\"周一\");switch(message) {case \"周一\":{alert(\"新的一周,加油!!!\");break;}case \"周二\":case \"周三\":case \"周四\":{alert(\"继续努力工作!\");break;}case \"周五\":{alert(\"明天周末,幸福要来了!!!\");break;}case \"周六\":case \"周日\":{alert(\"终于放假了!!!\");break;}}

3.循环语句—— for、while
(1)for 循环语句:可以将代码块执行指定的次数。

for(表达式1(初始值);判断表达式2(条件判断);表达式3(变量运算)){语句a;语句b;语句c;语句……;}

代码示例:

for(var i=0;i<a;i++) {document.write(\"Hello World\");

代码示例:
1到100的和:

var result = 0;for (var i = 1; i <= 100; i++) {result += i;}document.write(\"1到100的和:\" + result);

(2)while 循环语句:循环的目的是为了反复执行语句或代码块。只要指定条件为 true,循环就可以一直执行代码块。

while(判断语句){循环体;}

代码示例:

//循环变量初始化var i = 1;var result = 0;//结果while(i<=100){result += i;i++;//循环变量改变}document.write(\"1到100的和为:\" + result);

4.用于跳转的语句
1.return、 Break 和 Continue 语句。

2.break 语句用于跳出循环,(不带标签引用),只能用在循环或 switch 中。

3.continue 用于跳过循环中的一个迭代,(带有或不带标签引用)只能用在循环中。

4.return终止函数整体的运行,并返回一个值。

数组

1.创建
(1)通过字面量直接创建
var arr1 = []; //创建一个空数组。

var arr2 = [1,2,3];
//创建一个有3个值的数值。

var arr3 = [1,true,“hello”];
//创建元素类型不同的数组。

(2)通过构造函数Array创建
//a,调用时没有参数
var a = new Array();

//b,调用时有一个数值参数,它指定长度
var b = new Array(10);

//c,显式指定两个或多个数组元素或者数组的一个非数值元素
var c = new Array(1,2,3);

注:在js中,数组的元素类型可以是任意的,因此,有时数组中的某个元素值,也可以是一个数组,这样的数组被称为多维数组。

2.获取数组元素:通过指定数组名以及索引号码,可以访问某个特定的元素。

/*格式: 数组名[下标];下标又称为索引,从0开始,到数组长度-1。功能:获取下标对应元素的值,如果下标不存在,则返回undefined。*/var arr = [2,3,4];console.log(arr[0]);console.log(arr[1]);console.log(arr[2]);console.log(arr[3]);//输出结果为:2,3,4,undefined

3.遍历数组:常用的遍历数组方法有for,foreach等。
(1)for循环

var arr = [\"a\",1,2];for(var i=0,len=arr.length;i<len;i++){console.log(arr[i]);}// 输出结果为:a 1 2

(2)foreach遍历:
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

forEach() 对于空数组是不会执行回调函数的。

arr.forEach(function(currvalue,index,arr),thisValue);

function(currvalue,index,arr):必选。currvalue必需,index可选(当前索引),arr可选(当前元素数组对象)

thisValue:可选,表示当前对象,this;如果为空,“undefined”会传递this值。
代码示例:

var abc = [\"冰\", \"甯\", \"予\", \"蒋\", \"赵\"];abc.forEach(function(value, index){console.log((index+1)+\"号是:\" + value);})//输出结果为:1号是:冰 2号是:甯 3号是:予 4号是:蒋 5号是:赵。

4.数组元素修改和添加:通过数组下标方式,可以修改和添加数组的元素。js中数组的长度是动态的,如果添加的下标不存在,则在数组末尾新增一个元素
代码示例:

var arr = [\"hello\",\"world\"];//可以将world,修改为javascriptarr[1] = \"javascript\";//可以在数组最后添加一个新元素。soarr[2] = \"so\";//循环遍历数组,并在控制台中打印for(var i=0,len=arr.length;i<len;i++){console.log(arr[i]);}//输出结果为:hello javascript so

5.数组常用方法

函数

1.概念:函数是由事件驱动的或者当他被调用时可执行的可重复使用的代码块。

2.定义(创建):声明式和创建式
(1)通过关键字function声明;
(2)通过变量赋值(未命名函数);

var fun=function(a,b){var num=a+b;return num;}var num = fun(1,2);document.write(num);
function fun(a,b){var sum=a+b;return sum;}var num=fun(1,2);document.write(num);
var fun = new Function(\"a\",\"b\", \"return a+b\");var num = fun(1,2);document.write(num);

3.分类
(1)有名函数 :function fn(){ }

(2)无名函数 :function (){ }
特点:不允许直接存在代码空间中, 可以作为值存在;

(3)匿名函数 ,(function ( ){ })( );
特点:自动执行;

4.函数的参数:可以执行时,向定义好的函数传入数据,执行不同的功能或处理。

(1)形参:函数定义的时候参数列表里的就是形式参数,简称形参,作用就是用来接收实参。

(2)实参:调用函数时,传递的参数就叫做实际参数,简称实参。

// 带参数的函数声明function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔// 函数体}// 带参数的函数调用函数名(实参1, 实参2, 实参3...);

注:参数可以传任何数据;数量不限,但形参和实参要一一对应。

function sum(num1, num2) {console.log(num1 + num2);}sum(100, 200); // 形参和实参个数相等,输出正确结果sum(100, 400, 500, 700); // 实参个数多于形参,只取到形参的个数sum(200); // 实参个数少于形参,多的形参定义为undefined,结果为NaN

5.返回值
(1)return 语句:使用 return 语句将函数值返回给调用者。

// 声明函数function 函数名(){...return 需要返回的值;}// 调用函数函数名(); // 此时调用函数就可以得到函数体内return 后面的值

注:
(1)在使用 return 语句时,函数会停止执行,并返回指定的值。
(2)如果函数有return,返回return之后的值;如果函数没有 return ,返回的值是 undefined。
(3)return 语句之后的代码不被执行。
(4)return 只能返回一个值。如果用逗号隔开多个值,以最后一个为准。

6.break ,continue ,return 的区别:
(1)break :结束当前的循环体(如 for、while)。

(2)continue :跳出本次循环,继续执行下次循环(如 for、while)。

(3)return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码。

7.arguments的使用:

arguments

对象中存储了传递的所有实参,它是当前函数的一个内置对象,是一个伪数组。

function maxValue() {var max = arguments[0];for (var i = 0; i < arguments.length; i++) {if (max < arguments[i]) {max = arguments[i];}}return max;}console.log(maxValue(2, 4, 5, 9));console.log(maxValue(12, 4, 9));

注:
具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法。

8.局部和全局变量
(1)全局变量: 全局变量是在页面关闭的时候消失;

(2)局部变量: 函数执行完毕的时候,局部变量消失;

<script type=\"text/javascript\">var num=100; //全局变量,页面关闭全局变量消失var fun=function(a,b){ //形参也属于局部变量var c=20; //局部变量:函数执行完毕局部变量消失d=10; //d是全局变量,但是变量d前面有var,那么d就是局部变量,如果不写就是全局变量;return a+b+c;}var num=fun(1,2);document.write(num);</script>

对象

1.对象是一个具体的事物,一个具体的事物就会有行为和特征。
车是一类事物,门口停的那辆车才是对象特征:红色、四个轮子,行为:驾驶、刹车。

2.JavaScript中的对象其实就是生活中对象的一个抽象,是无序属性的集合。

3.事物的特征在对象中用属性来表示。事物的行为在对象中用方法来表示。

4.创建方式:
(1)对象字面量

var o = {name: \'zs\',age: 18,sex: true,sayHi: function () {console.log(this.name);}};

(2)new Object()创建对象

var person = new Object();person.name = \'lisi\';person.age = 35;person.job = \'actor\';person.sayHi = function(){console.log(\'Hello,everyBody\');}

(3)工厂函数创建对象

function createPerson(name, age, job) {var person = new Object();person.name = name;person.age = age;person.job = job;person.sayHi = function(){console.log(\'Hello,everyBody\');}return person;}var p1 = createPerson(\'张三\', 22, \'actor\');

(4)自定义构造函数

function Person(name,age,job){this.name = name;this.age = age;this.job = job;this.sayHi = function(){console.log(\'Hello,everyBody\');}}var p1 = new Person(\'张三\', 22, \'actor\');

5.new关键字:
(1)构造函数 ,是一种特殊的函数。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。

(2)构造函数用于创建一类对象,首字母要大写

(3)构造函数要和new一起使用才有意义。

(4)new在执行时会做四件事情:
new会在内存中创建一个新的空对象
new 会让this指向这个新的对象
执行构造函数 目的:给这个新对象加属性和方法
new会返回这个新对象.

6.this
(1)函数在定义的时候this是不确定的,只有在调用的时候才可以确定。

(2) 一般函数直接执行,内部this指向全局window。

(3 )函数作为一个对象的方法,被该对象所调用,那么this指向的是该对象。

(4) 构造函数中的this其实是一个隐式对象,类似一个初始化的模型,所有方法和属性都挂载到了这个隐式对象身上,后续通过new关键字来调用,从而实现实例化。

7.对象的使用
(1)遍历对象的属性:通过for…in语法可以遍历一个对象。

var obj = {};for (var i = 0; i < 10; i++) {obj[i] = i * 2;}for(var key in obj) {console.log(key + \"==\" + obj[key]);}

(2)删除对象的属性

function fun() {this.name = \'mm\';}var obj = new fun();console.log(obj.name); // mmdelete obj.name;console.log(obj.name); // undefined

简单类型和复杂类型的区别

1.基本类型又叫做值类型,复杂类型又叫做引用类型。

2.值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身,因此叫做值类型。

3.引用类型:复杂数据类型,在存储时,变量中存储的仅仅是地址(引用),因此叫做引用数据类型。

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » JavaScript基础