一、js简介

JavaScript是运行在浏览器端的脚本语言,JavaScript主要解决前端与用户交互的问题,包括使用交互和数据交互。JavaScript是浏览器解释执行的,通常直接嵌入HTML页面。
【特点】弱类型、基于对象、安全、兼容性

二、js嵌入页面的方式

2.1 嵌入式:页面script标签嵌入
<body>
	<!-- js引入:嵌入式 -->
	<script>
		// 弹框
	    alert('js使用成功');
	</script>
</body>
2.2 外链式:通过script标签的src属性来引入外部js文件

使用此方法后,不能在script标签中写js程序(不执行不生效)。

<!-- html -->
<body>
	<!-- js引入: 外链式 -->
	<script src="js/c07.js"></script>
</body>
//c07.js
alert('这是外部引入的js文件');

&& script标签的常见属性

关键字

释义

src

引入js文件地址

language

脚本语言类型(已废弃)

type

设置引入文件的MIME类型

charset

设置引入文件的字符集类型(防止编码格式不一致导致乱码)

defer

延时执行属性,用于令js在html完全加载完毕后执行(对外部js文件有效)

async

异步加载属性,用于改变下载顺序而不改变执行顺序

2.3 内联式(行间样式):嵌入在元素属性中(主要用于事件)
<body>
	<!-- js引入: 行间样式 -->
	<!-- 行间样式1  on当...   click单机 -->
	<div onclick="alert('行间样式')"></div>
	<!-- 行间样式2 -->
	<a href="javascript:alert('a标签行间样式')">请点击</a>
	<!-- 样式2上面的表达方法会暴露代码,因此常用以下方式 -->
	<a href="javascript:void(0)" onclick="alert('a标签行间样式常用表达')">再次点击</a>
</body>



三、js语句与注释

1. 一条javascript语句应该以分号 “ ; ” 结尾
2. javascript注释

//单行注释
/*
	多行注释
	alert();
*/



四、js基本语法——变量

javascript是一种弱类型语言,其变量类型由它的值来决定

4.1 变量声明:关键字var var 变量名=值;

     && 不使用var关键字定义全局变量在严格模式下会执行错误(“use strict”;)

var x=2;
var aa='Lili';
//同时定义多个变量用逗号隔开
var z=6,mydress='China',w=8;
//严格模式声明
"use strict";		   
test2=2
//严格模式下没有用关键字var声明的test2不会弹出
alert(test2);
4.2 变量命名规范

变量名应为数字、字母、下划线、$组成,不能以数字开头,区分大小写,不能使用系统关键字、 保留字

本节示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js简介</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: yellowgreen;
			}
		</style>
	</head>
	<body>
		<!-- js引入:嵌入式—————————————————————————————————— -->
		<script>
			//单行注释
			/*
				多行注释
			*/
		   
		   // 弹框
		   // alert('js使用成功');
		   
		   //严格模式声明
		   "use strict";
		   
		   var test =1;
		   alert(test);
		   // test2=2
		   //alert(test2);   //严格模式下test2不会弹出
		   
		   //变量命名规范:数字字母下划线$
		   var a=1;
		   var A=2;   //区分大小写
		   //var 1a=3;  //不能以数字开头
		   //var name=3;   //不使用系统关键字
		   alert(A);
		   
		</script>
		
		<!-- js引入: 外链式—————————————————————————————————————— -->
		<script src="js/c07.js"></script>
		
		<!-- js引入: 行间样式———————————————————————————————————— -->
		<!-- 行间样式1  on当...   click单机 -->
		<div onclick="alert('行间样式')"></div>
		<!-- 行间样式2 -->
		<a href="javascript:alert('a标签行间样式')">请点击</a>
		<!-- 样式2上面的表达方法会暴露代码,因此常用以下方式 -->
		<a href="javascript:void(0)" onclick="alert('a标签行间样式常用表达')">再次点击</a>
	</body>
</html>
//c07.js
alert('这是外部引入的js文件');