JavaScript 基本使用

最新推荐文章于 2019-09-07 16:48:46 发布

ONESTAR博客

最新推荐文章于 2019-09-07 16:48:46 发布

阅读量2.1k

点赞数 1

分类专栏： JavaWeb 文章标签： JavaScript基本使用

本文链接：https://blog.csdn.net/One_L_Star/article/details/99670740

版权

JavaWeb 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

一、JavaScript 的简介

1、什么是JavaScript

JavaScript 是一种动态类型，弱类型，基于原型的直译式脚本语言，边执行边解释，是基于对象和事件驱动的语言，应用于客户端，简称 JS
基于对象的语言，提供好了很多对象，可以直接拿过来使用
事件驱动：HTML是做静态效果，JavaScript是动态效果
客户端：专门指的是浏览器

2、JS 的特点

被设计用于与 HTML 的交互行为
JavaScript 是一种脚本语言（轻量级的编程语言）
JavaScript 是一种解释性的语言（不进行预编译）
JavaScript 对大小写敏感
跨平台：内嵌于 HTML 页面，在大多数浏览器的支持下，可以在多个平台运行
安全性：不支持直接访问本地文件
交互性：信息的动态交互

3、JS 和 Java 的区别

Java 是 oracle 公司，JS 是网景公司
Java 是面向对象，JS 是基于对象
Java 是强类型语言，JS 是弱类型语言
Java 需要先编译成字节码文件再执行，JS 只需要解析就可以执行

4.、JS 的作用

可以动态修改 HTML 的页面内容和属性
可以对浏览器事件作出响应
可以动态修改 css 样式
可以用于表单的动态验证
可以用于检测浏览器的信息
可以控制 cookie 的创建和修改

5、JS 的组成

ECMAScript：ECMA 国际，欧洲计算机协会，由 ECMA 组织制定的 JS 语法
BOM：浏览器对象模型
DOM：文档对象模型

二、JS 基本语法

1、JS 和 HTML 结合方式

script 标签：脚本必须位于 <script> 和 </script> 标签内，该标签可以在 <head> 或 <body> 中，建议放到</body>的后面
外部 JS 文件：脚本位于 JS 文件中，可在多个页面中引用，外部文件名以 .js 结尾

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<script type="text/javascript" src="a.js">		<!--方法二-->
			//alert("qwefqwergfq");		//方法一
		</script>
	</body>
</html>


/*a.js 文件*/
alert("qwefqwergfq");

2、JS 的变量和数据类型

【1】变量

JS 是弱类型的语言，变量以 var 声明
变量可以以字母， _ 和 $ 符号开头
对大小写敏感
向变量分配文本值时，需要使用单引号或双引号

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<script type="text/javascript">
			//声明数值类型变量（全局变量）
			var a = 1;
			//声明字符串类型变量
			var b = 'a';
			//定义函数
			function test(){
				var a = 2;	//局部变量
				//显示数据
				alert(a);
			}
			test();	//函数调用
		</script>
	</body>
</html>

【2】数据类型

字符串类型：string
数值类型：number
boolean 类型
数组类型：Array
null 类型
undefined 类型
object 类型

使用 typeof 可以查看数据类型

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 1;//number类型
			var b = 'aa';//string类型
			var c;//undefined类型
			var bool = false;//Boolean类型
			var d = null;//null类型
			var e = ['aa','bb'];
			e = new Array('11','22');//array类型
			var f = {'id':'1','name':'zs'};	//object类型
			alert(typeof e);   //使用typeof可以查看数据类型
		</script>
	</body>
</html>

3、JS 语句

if 语句
switch 语句
for 语句
while 语句

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<script type="text/javascript">
			//if语句
			var a = 2;
			if(a == 1){
				alert(a);
			}else{
				alert("not 1");
			}
			
			//switch语句
			var b = 2;
			switch(b){
				case 1:
					alert(1);
					break;
				case 2:
					alert(2);
					break;
				case 3:
					alert("other");
					break;
			}
			
			//while循环
			var c = 5;
			while(c){
				alert(c--);
			}
			
			//for循环
			for(var i = 0;i < 3;i++){
				alert(i);
			}
		</script>
	</body>
</html>

4、JS 运算符

【1】算术运算符

【2】赋值运算符

【3】比较运算符

【4】逻辑运算符

【5】三目运算符

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<script type="text/javascript">
			var a =2;
			var b = 3;
			var max = a > b ? a : b;
			document.write(max);	//直接显示在页面上
		</script>
	</body>
</html>

注意：

JS 里面不区分整数和小数：alert(123/1000*1000); 结果为123
字符串相加减：相加时，做的是字符串连接；相减时，做的是减法运算
boolean类型加减：设置为 true 时，相当于为 1；设置为 false 时，相当于为 0
== 和 === 的区别：== 只比较值，不比较类型；=== 比较值和类型

【6】九九乘法表案例

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<script type="text/javascript">
		document.write("<table border='1' bordercolor='red'>");
			//循环行
			for(var i=1;i<=9;i++){
				document.write("<tr>");
				//循环列
				for(var j=1;j<=i;j++){
					document.write("<td>");
					//计算
					document.write(j+"*"+i+"="+i*j);
					document.write("</td>");
				}
				document.write("</tr>");
			}
		document.write("</table>");
		</script>
	</body>
</html>

5、JS 数组

方式一：var arr = [1,2,3]; var arr = [1,"10",true];
方式二：使用内置 Array 对象
var arr = new Array(5); //定义一个数组，数组长度为 5
arr[1] = "1"; //为数组元素赋值
方式三：使用内置 Array 对象
var arr = new Array(3,4,5); //定义一个数组，里面的元素为3 ，4 ，5

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<script type="text/javascript">
		//方式一
		var arr1 = [1,2,"3"];
		alert(arr1);
		//方式二
		var arr2 = new Array(2);
		arr2[0] = "4";
		arr2[1] = "5";
		arr2[2] = "6";
		alert(arr2);
		//方式三
		var arr3 = new Array("a","b","c");
		alert(arr3);
		</script>
	</body>
</html>

6、JS 函数

方式一：使用关键字：function
function 方法名（参数列表）{
方法体；
返回值可有可无；
}
方式二：匿名函数
var add = function(参数列表){
方法体和返回值；
}
方式三：JS内置对象：Function
var add =new Function("参数列表","方法体和返回值");

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<script type="text/javascript">
		//方式一
		function fun1(a,b){
			alert(a+b);
		}
		
		//方式二
		var fun2 = function(a,b){
			alert(a+b)
		}
		
		//方式三
		var data = "a,b";
		var fangfati = "var sum;sum = a+b;return sum";
		var fun3 = new Function(data,fangfati);
		
		//调用
		fun1(3,4);
		fun2(4,5);
		alert(fun3(5,6));
		</script>
	</body>
</html>