一、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文件');