JavaScript-基础语法

前言：

一个网页由三个部分组成：

1.html：超文本标记语言，用于控制网页的结构(页面元素和内容）

2.css：级联样式表，用于控制网页布局，涉及对网页文字，背景，布局进行修饰

3.javaScript：是一门跨平台，面向对象的脚本语言，是用来控制网页行为，实现页面交互的语言

一.js的引入方式

1.内部引入方式

2.外部引入方式

一.js的引入方式

1.内部引入方式

将js的代码定义在HTML页面中，javaScript代码必须位于<script></script>标签之间，js可以放在HTML页面的任何位置，通常放在bdoy标签底部(提高代码解析速度)

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 内部引入，内部脚本 -->
		<script>
			//内部脚本
			alert("hellow js");
		</script>
	</body>
</html>

2.外部引入方式

将js代码定义在外部js文件中，然后引入HTML页面当中

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 外部脚本 -->
		<script src="js/demo.js">
			alert(JSON.stringify("hellow"));
		</script>
	</body>
</html>

通过src属性将js文件导入HTML页面当中

二.变量，常量

1.变量

在javaScript语言当中，通过let关键字声明变量，由于javaScript是弱类型语言，变量可以存放不同类型的值

javascript 复制代码

<script>
	let a = "a";
    let b = 10;
    let c = true;
</script>

2.常量

在javaScript语言当中，通过const关键字声明常量，需要注意的是常量一旦被赋值就不能改变

javascript 复制代码

<script>
    const a = 10;
</script>

三.三种输出方式

alert()：弹出框输出

console.log():输出到控制台

docment.write():输出到页面当中的body区域，不常用

1.alert()输出

javascript 复制代码

<script>
		//let关键字声明变量(弱类型·语言,变量可以存放不同类型的值)
		let a;
		a = "hellow";
		alert(a);//弹出框输出
</script>

在网页中的显示效果:

2.console.log()输出

javascript 复制代码

<script>
    //const关键字用来声明常量,一旦赋值不能改变
	const pi = 3.14;
	console.log(pi);//输出到控制台
</script>

输出到网页中的效果:

需要注意的是，现需要打开网页的检查，然后打开控制台才能查看

3.docment.write()输出

javascript 复制代码

<script>

		let a = "hello";
		document.write(a);//输出到页面中的body区域,不常用

</script>

在网页中的显示效果:

四.数据类型

javaScript中的数据类型分为基本数据类型和引用数据类型：

基本数据类型:

number(整数,小数,NaN)

boolean,null(代表对象为空 object),undefined(当声明的变量未初始化赋值,默认是undefined)

string(单引号,双引号,反引号都可以)

引用数据类型:对象(object)

这里需要注意的是：用反引号(Tab上面的那个键)括起来的字符串称为模版字符串

模版字符串可以简化字符串的拼接

使用typeof运算符可以获取数据的数据类型

eg:alert(typeof "hellow");

五.函数

函数：被用来设计执行特定任务的代码

定义函数的语法：通过function关键字进行定义，不需要定义返回值类型和参数类型(因为js是弱类型语言)

注意:在调用函数时，实参个数可以和形参个数不一样，但是不推荐

javascript 复制代码

<script>
    function fun(a , b){
        return a + b;
    }
    alert(fun(1,2));
</script>

匿名函数:没有名称的函数

1.函数表达式：:eg:let add = function(a,b){ return a+b;}

2.箭头表达式(可以省略function)：eg:let add = (a,b) =>{ return a+b;}

函数定义后可以直接通过变量名调用

javascript 复制代码

<script>
    //函数表达式
	let a = function (a , b){
			 return a + b;
	        }

	alert(a(1,2));
    //箭头表达式
	let b = (a , b)=>{
        return a - b;
    }

	alert(b(2,1));
</script>

六.自定义对象

1.通过let关键字声明，对象里面可以有变量和方法

2.this关键字代表当前对象

注意:在使用箭头函数定义方法时,this关键字并不指向当前对象，指向的时当前对象的父级

javascript 复制代码

let user = {

			name:"tom",
			age:10,
			gender:'男',
			fun:function(){
				alert(this.name + 'hellow,world')
			}

}

七.JSON

JSON：javaScript object Notation,javaScript对象标记法(js对象标记法书写的文本))，由于其语法简单，层次鲜明，现多用于作为数据载体，在网络中进行传输

JSON文本看起来虽然像自定义对象,但本质完全不一样,自定义对象是对象,json文本本质是字符串

前后端交互时传输时基本都是json载体

JSON.stringify()将js的对象转换为json格式字符串

JSON.pares()将json格式字符串转化为js的对象

注意：JSON中所有的key都要求""括起来

javascript 复制代码

<script src="js/demo.js">
		let user = {
		    name:"tom",
		    age:10,
			gender:'男',
			fun:function(){
			alert(this.name + 'hellow,world')
				}
		}
		// 想要看见对象中的信息，需要转换为一个字符串
		alert(JSON.stringify(user));
		let jsonuser = '{"name":"to","age":10,"gender":"男"}';
		alert(JSON.parse(jsonuser).name);
</script>