js简介与语法
- JS组成:js语法,页面文档对象类型(DOM),浏览器对象模型(BOM)。
- ECMAScript:规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。
- 文档对象模型(DOM):W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
- 浏览器对象模型(BOM) :提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
js书写方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/test1.js" type="text/javascript"></script>
</head>
<body>
<input id="num1" type="number" value="" />
<br />
<!-- <input id="num2" type="number" value="" > -->
<input id="num2" type="string" value="" >
<br />
<button onclick="num()" style="width: 100px;height: 30px;">运算</button>
<h3 id="h3"></h3>
</body>
</html>
function num(){
var num1 = document.getElementById("num1").value;
/*var num2 = document.getElementById("num2").value;
/* var num = num1/num2; */
/* document.getElementById("h3").innerText = num; */
/* console.log(num1++);
//++在前面先运算
document.getElementById("h3").innerText = num1++;
document.getElementById("h3").innerText = (num1==num2); */
/*console.log(typeof num1);
console.log(typeof num2);
document.getElementById("h3").innerText = (num1===num2);
document.getElementById("h3").innerText = (32==='32'); */
/* if(32=='32'){
document.getElementById("h3").innerText = 'ok';
} */
switch(num1){
case '34':document.getElementById("h3").innerText = num1;break;
case '35':document.getElementById("h3").innerText = num1;break;
}
}
代码运行结果:
js输入输出语句
- alert(msg) :浏览器弹出警示框
- console.log(msg): 浏览器控制台打印输出信息
- prompt(info): 浏览器弹出输入框,用户可以输入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style></style>
<!-- 内部引用:通过script标签,在页面中任何位置都可以
,但最好不要放在html标签外面-->
<!-- <script>
function run(){
alert('讨厌,点我做什么?');
}//放到body里面和下面也可以运行
</script> -->
<!-- 外部引用:可以在多个HTML页面中引用,
在访问过程中,只需要下载一次JS文件,更节省流量-->
<script src="./js/test.js" type="text/javascript">
</script>
</head>
<body>
<!-- 行内引用 -->
<!--<input type="button" value="点我试试~" οnclick="alert('Hello World!')" /> -->
<input type="button" value="点我" onclick="run()" />
</body>
</html>
function run(){
alert('点朕作甚?');
//program.write("");
console.log("爱卿该上税了!");
var a;
console.log(a);
//不建议省略var关键字
c = "朕不想批奏折!!!";
console.log(c);
var q = Number.MAX_VALUE;
var t = Number.MAX_SAFE_INTEGER;
console.log(t);
var d = "aaa";
console.log(isNaN(d));
console.log(typeof(d));
console.log(isNaN(t));
console.log(typeof(t));
console.log(isNaN(q));
console.log(typeof(q));
console.log(q);
var x = 0.1;
var y = 0.2;
var z = x + y;
console.log(z);
}
var b = "hello world";
代码的运行结果:
变量的概念
- 变量:程序在内存中申请的一块用来存放数据的空间。
- 声明变量:var x;
- 赋值:x = 1;
- 变量初始化:var x = 1;
- 更新变量:var x = 1; x = 2; x->2
- 声明多个变量:var x = 1, y = 2 , z = 3;
- 声明变量的特殊情况:
情况 | 说明 | 结果 |
---|---|---|
var x; console.log(x); | 只声明 不赋值 | undefined |
console.log(x); | 不声明 不赋值 直接使用 | 报错 |
x = 10; console.log(x); | 不声明 只赋值 | 10 |
变量命名规则
- 由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:urcX, num01, _name
- 严格区分大小写。var app; 和 var App; 是两个变量
- 不能 以数字开头。 18age 是错误的
- 不能 是关键字、保留字。例如:var、for、while
- 变量名必须有意义。
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。firstName
数据类型
简单数据类型
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整型值和浮点型值,如22、0.22 | 0 |
Boolean | 布尔值类型,如true、false,等价于1和0 | false |
String | 字符串类型,如“张三” ,js里面字符串带引号 | “” |
Undefined | var a;声明了变量a但是没有给值,此时 a = undefined | undefined |
Null | var a = null; 声明了变量a为空值 | null |
数字型三个特殊值:
- Infinity ,代表无穷大,大于任何数值
- -Infinity ,代表无穷小,小于任何数值
- NaN ,Not a number,代表一个非数值
字符串拼接:
- 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
- 拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。
一个声明后没有被赋值的变量会有一个默认值undefined。一个声明变量给 null 值,里面存的值为空。
获取变量数据类型
类型 | 例 | 结果 |
---|---|---|
Number | typeof 18 | “number” |
Boolean | typeof true | “boolean” |
String | typeof"张三" | “string” |
Undefined | typeof undefined | “undefined” |
Null | typeof null | “null” |
数据类型转换
方式 | 说明 | 案例 |
---|---|---|
toString() | 转成字符串 | var num = 1;alert(num.toString()); |
String()强制转换 | 转成字符串 | var num = 1;alert(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1;alert(num+“字符串”); |
parseInt(string)函数 | 将string类型转成整数数值型 | parseInt(‘78’) |
parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat(‘78.21’) |
Number()强制转换函数 | 将string类型转换为数值型 | Number(‘12’) |
js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | ‘12’ - 0 |
Boolean()函数 | 其他类型转成布尔值 | boolean(‘true’) |
代表空、否定的值会被转换为 false ,其余值都会被转换为 true。
关键字和保留字
- 关键字:break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。
- 保留字:boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。