您的位置: 首页  >  文章  >  JavaScript基础

JavaScript基础

分类: 文章 • 2023-10-12 18:50:14

JavaScript:

JavaScript(LiveScript)一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，是广泛用于客户端的脚本语言。

完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型（DOM Document Object Model），浏览器对象模型(BOM Browser Object Model)。

 

基本语法：

  • 变量声明：

在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。

JavaScript语句以分号结尾，分号可以省略。

var num; //声明变量
num=10;//赋值

var s="zhangsan";//声明的同时赋值

JavaScript的关键字和保留字：

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、
interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、
final、native、throws、char、finally、new、transient、class、float、null、true、const、
for、package、try、continue、function、private、typeof、debugger、goto、protected、
var、default、if、public、void、delete、implements、return、volatile、do、import、
short、while、double、in、static、with。
//单行注释
/* 多行注释 */
  • 数据类型：

变量的基本类型有number、string、boolean、undefined、null五种。    (n u u s b)

在Java中，当一个变量未被初始化的时候，Java中是null或者基本数据类型的默认值。在JavaScript中，当一个变量未被初始化的时候，它的值为undefined。

JavaScript中当一个引用不存在时，它为Null。

var a=1;//数字Number类型
var a='1';或 var a="1";//字符串String类型
var a=false;//声明一个Boolean类型

var a;
document.write(a);//undefined

typeof：关键字

        <script type="text/javascript">
		var i = 20;
		var j = 3.14;
		var k = 0;
		document.write(typeof(i)+"<br />");
		document.write(typeof(j)+"<br />");
		document.write(typeof(k)+"<br />");
		var p = "张三";
		var address = '天堂';
		document.write(typeof(p)+"<br />");
		document.write(typeof(address)+"<br />");
		
		var a;//定义未赋值
		var b = null;//可以理解为对象的占位符
		document.write(typeof(a)+"<br />");
		document.write(typeof(b)+"<br />");
		document.write(typeof(c)+"<br />");//c未声明
	</script>

运行结果：

 JavaScript基础

您也许会问，为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

  • 引用类型：
       <script type="text/javascript">
		document.write("----------包装类----------<br/>");
		var num1 = 10;
		var num2 = new Number(10);
		//自动类型转换 num2.valueof()
		document.write(num1 == num2);
		document.write("<br />");
		//不会做任何的转换
		document.write(num1 === num2);
	</script>

运行结果：

JavaScript基础

<script type="text/javascript">
	document.write("--------------function--------------<br />");
	function Person(){//js中没有类的概念，叫做“对象定义”
		this.name;
		this.age;
		
		this.show=function(){
			document.write(this.name+"----->"+this.age);
		}
	}
	var person = new Person();
	person.name = "张三";
	person.age = 22;
	document.write(person.show());
	
	//使用Object添加属性生成对象
	document.write("<br />--------------Object--------------<br />");
	var obj = new Object();
	obj.name = "张三";
	obj.age = 20;
	obj.toString = function(){//重写了toString方法
                                //document.write(obj.toString()+"<br />");//[object Object]
		document.write("姓名："+this.name+" 年龄："+this.age);
	}
	document.write(obj.toString());
	document.write("<br/>");
	document.write(obj);
	
	//使用json对象直接写出来
	document.write("<br />--------------json--------------<br />");
	var student={name:"李四",age:21};
	document.write(student.name+"----->"+student.age);
</script>

运行结果：

JavaScript基础

事实上，student被赋值为了一个JSON，JSON就是我们在Java基础阶段学过的，全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。

        <script type="text/javascript">
		var students=[
			{name:"张三",age:20},
			{name:"李四",age:21},
			{name:"王五",age:22},
		];
		document.write(students[0].name+"<br />");
		document.write(students[2].age);
	</script>

运行结果：

JavaScript基础

  • 数组类型：

数组就是和我们之前理解的数组概念一致，而在JavaScript中成为Array类型

        <script type="text/javascript">
		var nums = new Array();
		document.write("<br />--------------------添加元素--------------------<br />")
		nums[0] = "beauty";
		nums[1] = "123";
		nums[2] = "3.14";
		nums[3] = "北京";
		nums[4] = true;
		nums[5] = null;
		nums[6] = undefined;
		nums[7] = "xixi";
		nums[8] = "end"
		
		document.write("<br />--------------------打印toString--------------------<br />")
		document.write(nums.toString());
		
		document.write("<br />--------------------获取Constructor--------------------<br />")
		document.write(nums.constructor());
		
		document.write("<br />--------------------获取Prototype--------------------<br />")
		document.write(nums.prototype);
		
		document.write("<br />--------------------获取长度--------------------<br />")
		document.write(nums.length);
		
		document.write("<br />--------------------shift--------------------<br />")
		nums.shift();//删除第一个元素
		document.write(nums.toString());
		
		document.write("<br />--------------------pop--------------------<br />")
		nums.pop();//删除最后一个元素
		document.write(nums.toString());
		
		document.write("<br />--------------------reverse--------------------<br />")
		nums.reverse();//翻转    
		document.write(nums.toString());
		
		document.write("<br />--------------------sort--------------------<br />")
		nums.sort();//排序（默认）
		document.write(nums.toString());
		
		document.write("<br />--------------------遍历--------------------<br />")
		for(var i in nums){
			document.write(nums[i]+"->");
		}
	</script>

运行结果：

JavaScript基础

数组的Map使用：

        <script type="text/javascript">
		var map = new Array();
		document.write("<br />--------------添加元素--------------<br />")
		map['cn'] = "中国";
		map['usa'] = "美国";
		map['uk'] = "英国";
		
		document.write("<br />--------------获取长度--------------<br />")
		document.write(map.length);
		
		document.write("<br />--------------遍历--------------<br />")
		for(var i in map){
			document.write(i+"->"+map[i]);
		}
	</script>

运行结果：

JavaScript基础

JSON可以标记一个对象，那么它同样可以标记一个数组，就是Java基础时我们学过的JSONArray

var a=[1,2,3,4];//a中角标为0的元素是1
  • JavaScript的三种使用方式 ：

<script>标签，script可以放在网页中任何位置，但最好放在body最后，为了不影响静态网页部分的加载。

<script type="text/javascript">
  	var num=10;
	var d=new Date();
	document.write(num);
</script>

使用外部JavaScript文件，把js代码放入单独的文件中 ，这个文件的扩展名.js

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

放在标签中的事件属性中，常见事件 ，onclick

<input type="button" value="你点我啊" onclick="alert('你点我干嘛')" />
  • 运算符：

算数运算符：+、-、*、/、%、++、--

赋值运算符：=、+=、-=、/=、*=、%=

逻辑运算符：&&、||、!

关系运算符：<、<=、>、>=、!=、== （）相等、===（全相等）

var a=1;
var b=2;
//a==a->true
//a==b->false
//a===b->false
//这里三个等于“===”和两个等于“==”区别：
//前者相当于比较两个引用，后者相当于比较两个值。
//当比较两个值的时候，不考虑数据类型。
//也就是说1=="1"是true的。

字符串连接运算符：+

三目运算符：？xxx ：xxx

  • 分支结构：

if-else ：

1、 if(条件表达式)            条件表达式：关系运算符  逻辑运算符

2 、if(变量) 直接写变量，不用运算符。如果变量定义过（var x；），变量值为undefined，null 表示false，否则true。如果变量没有定义，则出现异常（try{}catch(){}处理）

3、if(对象.属性)，zhangsan.name，给zhangsan添加name属性，但此属性没有赋值，所以为false

4、if(变量)，变量为0：false；变量为非0：true

switch ：同java，switch(n){case i:...... }中 n 和 i 的比较方式为 “ === ”

  • 循环结构：

for 、while 、do-while 、 break与continue

增强for循环 ：

for(var i in arr){}    //i不是arr中的元素，而是下标

 

函数和事件：

  • 函数定义：

包含一段功能的代码。目的：重复使用

用function关键字来声明，后面是函数名字，参数列表里不写var，整个方法不写返回值类型

function add(a,b){
    return a+b;
}
var c=1;
var d=2;
var e=add(1,2);
document.write(e);
//运行结果：3
//这里定义了一个add方法，参数是两个，与Java不同，参数的数据类型并没有。
//因为就算是写，全都是var，为了保证语法的简洁性，全写var索性就设计成全都不用写了。
//返回值也是同样的道理，区别是，如果你写了返回值，那么有返回值，如果没写return，就没有返回值。
  • 同名函数的覆盖问题：
        <script type="text/javascript">
		document.write("<br />--------------------add1--------------------<br />")
		function add(){
			var a = 10;
			var b = 20;
			return a+b;
		}
		document.write(add());
		
		document.write("<br />--------------------add2--------------------<br />")
		function add(){//函数会覆盖之前的同名函数
			var a = 20;//虽然js是解释性语言，但解释之前会有预处理
			var b = 30;
			return a+b;
		}
		document.write(add());
	</script>

运行结果：

JavaScript基础

  • 匿名函数：
        <script type="text/javascript">
		document.write("<br />-----------------匿名函数-----------------<br />");
		var f1 = function(){
			document.write("这是一个匿名函数<br />");
		}
		f1();
			
		document.write("<br />-----------------自执行匿名函数-----------------<br />");
		(function(s){
			document.write("这是一个自执行匿名函数"+s);
		})("嘻嘻");
	</script>

运行结果：

JavaScript基础

  • 全局变量和局部变量：

函数内部声明的变量是局部变量,所以只能在函数内部访问它；

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它

  • 闭包(Closure)：

闭包就是能够读取其他函数内部局部变量的函数； 闭包可以理解成“定义在一个函数内部的函数”。

闭包三个条件：

1 闭包是一个函数

2 闭包能够读取其他函数的局部变量

3 闭包和局部变量在同一个作用域。

使用形式：1、闭包作为函数的返回值；2、闭包作为函数的参数。

        <script type="text/javascript">
		function b(){
			var num=10;//没有释放
			/*函数包含函数*/
			function c(){
				num++;
				document.write(num+"<br />");
			}
			return c;
		}
		
		var f=b();//f是一个函数：c
		document.write(f+"<br />");
		f();
		f();
		f();
	</script>

运行结果：

JavaScript基础

闭包好处：1 使局部变量常驻内存，2 避免污染全局变量 ，3 .提高封装性保护局部变量

  • 系统函数：

alert：没有返回值，也就是说如果用一个变量去接受返回值，将会得到undefined；无论你点击“确定”还是右上角的那个“X“关闭。

confirm：返回值是boolean，当你点击“确定”时，返回true，无论你点击“取消”还是右上角的那个“X“关闭，都返回false。

prompt：当你点击确定的时候，返回用户输入的内容；当你点击取消或者关闭的时候，返回null。

//当作调试的工具，阻止程序的向下执行
alert("你好");//只能点击确定的弹窗
//当作调试的工具，不会阻止程序的向下执行
confirm("你好");//你可以点击确定或者取消的弹窗
prompt("你爱学习吗？","爱");//可以输入文本内容的弹窗 
                //第一个参数是提示信息，第二个参数是用户输入的默认值。

其他系统函数：

parseInt();// 字符串转换整数       (parse("123abc")这样的都可以转，因为px)
parseFloat();// 字符串转成小数

isNaN(); //(is not a number)判断数字是不是不是一个数字,但其本身是一个number类型
var flag1 = isNaN("abc");
var flag2 = isNaN(123);
var flag3 = isNaN("123");
document.write(flag1+"<br />");//true
document.write(flag2);//false
document.write(flag3);//false
  • 事件：
事件 描述
onchange HTML 元素改变(离开光标触发)
onclick 用户点击 HTML 元素
onmouseover 光标移动到HTML元素
onmouseout 光标离开HTML元素
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

 onload：写body标签里（onload="load()"），再补充load函数；或者window.load=load函数

  • 字符串、正则表达式：
    <script type="text/javascript">
		var str="hello";//原始类型
		var str2=new String("hello");//引用类型,对象类型
		var str3=String("hello");//原始类型
		document.write(str==str2);
		document.write("<br/>")
		document.write(str===str2+"<br/>");
		document.write("<br/>")
		document.write(typeof(str2));
		document.write("<br/>")
		document.write(str instanceof String);
		document.write("<br/>")
		document.write(str2 instanceof String);
		
		document.write("<br/>")
		document.write("长度:"+str.length+"<br/>");
		document.write("指定位置的字符:"+str.charAt(0)+"<br/>");
    </script>

运行结果：

JavaScript基础

typeof：无论引用什么类型的对象，都返回object，所以对于包装类（Array，Boolean，String，Math，Number，Date等）都只会返回object类型。此时可以用instanceof（ECMAScript 运算符）处理。

        <script type="text/javascript">
		var str="hello java";//原始类型
		var ss=str.split(",");
		document.write(ss.length+"<br/>");
		var s1=str.substr(6,4);//从起始索引号提取字符串中指定数目的字符。
		document.write(s1+"<br/>");
		var s2=str.substring(6,10)//提取字符串中两个指定的索引号之间的字符。
		document.write(s2);	
	</script>

运行结果：

JavaScript基础

  • RegExp 对象 ：

Regular Expression 正则表达式

//语法：
var re1 = new RegExp("^1[3589]\\d{9}$");
var re2 = /^1[3589]\d{9}$/;
  • RegExp 对象方法 ：
方法 描述 FF IE
exec 检索字符串中指定的值。返回找到的值，并确定其位置。 1 4
test 检索字符串中指定的值。返回 true 或 false。 1 4
  • 支持正则表达式的 String 对象的方法：
方法 描述 FF IE
match 找到一个或多个正则表达式的匹配。 1 4
replace 替换与正则表达式匹配的子串。 1 4
split 把字符串分割为字符串数组。 1 4

 代码示例：

//test()方法搜索字符串指定的值，根据结果并返回真或假
var patt1=new RegExp("^1[3589]\\d{9}$");
document.write(patt1.test("13688889999"));//true

//exec() 方法检索字符串中的指定值,返回值是被找到的值,如果没有发现匹配,则返回 null
var reg=/java/ig;
var str="hello java,java是最好的编程语言，我爱Java";
var s=null;
while(s=reg.exec(str)){
    document.write(s);
    document.write("<br/>")
}

//match()方法
var reg=/java/ig;
var str="hello java,java是最后的语言，我爱Java";
var arr=str.match(reg);
for(var i=0;i<arr.length;i++){
    document.write(arr[i]+"<br/>");
}

//replace()方法
var reg=/java/ig;
var str="hello java,java是最后的语言，我爱Java";
var str2=str.replace(reg,"JAVA");
document.write(str2+"<br/>");

//split()方法
var str="hello world,java best language";
var arr=str.split(/[ ,]/);
for(var i=0;i<arr.length;i++){
    document.write(arr[i]+"<br/>");
}

 

相关推荐