如何写一段JS代码并运行
-
写在行内
<!--html--> <input type="button" value="按钮" onclick="alert('Hello World');" /> -
写在script标签中
<!--html--> <head> <script> alert('Hello World'); </script> </head> -
写在外部js文件中，在页面引入
<!--html--> <head> <script src="main.js"></script> </head>// main.js alert("Hello World");
变量的声明
// 变量：可以变化的量 用来存储数据的
// 可以通过变量名称，使用或者修改对应的数据(保存在计算机中的数据)
// 声明变量 使用 var 关键字
// 单独声明变量
var age;
// 再赋值
age = 28;
// 声明变量的同时并进行赋值
var num = 18;
// 特殊用法(js不推荐这种写法)
sex = '男';
// 同时声明多个变量
var name, age, sex;
name = 'mike';
age = 38;
sex = '女';
// 同时声明多个变量并赋值
var name='mike', age=18, sex='男';
变量的命名规则和规范
- 规则 - 必须遵守的，不遵守会报错
- 由字母、数字、下划线、$符号组成，且不能以数字开头
- 区分大小写
- 不能是关键字和保留字，例如：for while...
- 规范 - 建议遵守的，不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。(首字母小写，后面单词的首字母需要大写。例如：userName userPassword)
// name变量名，本身不是保留关键字，但是依旧建议少用。name在有的浏览器中，是自动声明过的。
变量案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量案例</title>
</head>
<body>
<h1>
交换两个变量的值
</h1>
<script type="text/javascript">
// 交换两个变量的值
var number1 = 100;
var number2 = 200;
// 方法1 定义中间变量
var number3 = number1; // number3 = 100
number1 = number2; // number1 = 200 number2 = 200 number3 = 100
number2 = number3; // number1 = 200 number2 = 100 number3 = 100
// 方法2 不使用中间变量
number1 = number1 + number2; // number1 = 300 number2 = 200
number2 = number1 - number2; // number1 = 300 number2 = 100
number1 = number1 - number2; // number1 = 200 number2 = 100
</script>
</body>
</html>
代码调试(输出变量的值-三个方法)
var userName = 'mike';
alert(userName); // 浏览器弹框
console.log(userName); // 浏览器F12打开开发者工具，在Console控制台中可查看
document.write(userName); // 直接把该值显示在了浏览器页面最后的位置
简单数据类型
- Number、String、Boolean、Undefined、Null
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据类型</title>
</head>
<body>
<script type="text/javascript">
// 数值型 number
var age = 30;
// 字符串 string
var nickName = "jordan"; // "100"也是字符串类型
// 布尔值 boolean bool 饱含 true 和 false
var result = true; // 真 true 假 false
// 未定义 undefined(声明了变量，但是没有赋值，默认就是undefined)
var teshu = undefined; // 未定义(未赋值) 不带引号
// 空 null 不带引号
var kong = null;
</script>
</body>
</html>
获取变量的类型
var age = 18;
console.log(typeof age); // 'number'
var nickName = "mike";
console.log(typeof nickName); // string
var result = false;
console.log(typeof result); // boolean
var teshu = undefined;
console.log(typeof teshu); // undefined
var kong = null;
console.log(typeof kong); // object 使用typeof判断结果是object 实际上null是一个单独的数据类型
数值Number类型
-
数值字面量：数值的固定值的表示法
18 100 33.3
-
浮点数
- 浮点数的精度问题
// 浮点数 var n = 5e-324; // 科学计数法，5乘以10的-324次方 // 浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数 var result = 0.1 + 0.2; // 结果不是0.3，而是：0.30000000000000004 console.log(0.07 * 100); // 不要直接判断两个浮点数是否相等，可按照上面的方式先取整 -
数值范围
// 最小值 Number.MIN_VALUE // 这个值为：5e-324 5乘以10的-324次方 // 最大值 Number.MAX_VALUE // 这个值为：1.7976931348623157e+308 // 无穷大 Infinity // 无穷小 -Infinity