文章目录
一、JavaScript简介
1、什么是JavaScript
一种基于对象和事件驱动并具有安全性能的解释型脚本语言。它不需要编译,直接嵌入在HTTP页面中,把静态页面转变为支持用户交互并响应应用事件的动态页面。我们熟知的Java,是强类型语言,有预处理、编译、汇编和链接过程,JVM一般是将Java编译成class文件后放入内存。
2、JavaScript的三个部分:
1)核心(ECMAScript)
它规定了这门语言的下列组成部分:
语法 、类型、语句、关键字、保留字、操作符、对象,
ECMAScript 就是对实现该标准规定的各个方面内容的语言的描述。
2)文档对象模型(DOM)
文档对象模型(DOM,Document Object Model)是针对 XML 但经过扩展用于 HTML 的应用程序编程接口(API,Application Programming Interface)。DOM 把整个页面映射为一个多层节点结构。HTML或 XML 页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。看下面这个HTML 页面:
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
在 DOM 中,这个页面可以通过下图所示的分层节点图表示。
通过 DOM 创建的这个表示文档的树形图,开发人员获得了控制页面内容和结构的主动权。借助DOM 提供的 API,开发人员可以轻松自如地删除、添加、替换或修改任何节点。
3)浏览器对象模型(BOM)
支持可以访问和操作浏览器窗口的浏览器对象模型(BOM,Browser Object Model)。开发人员使用 BOM 可以控制浏览器显示的页面以外的部分。
主要内容有:window对象、location对象、history对象、screen对象、navigator对象(用来识别浏览器)。DOM和BOM的关系图如下:
3、学习参考材料
(分量如何因人而异,不妄加评论,请自行选择,资料众多,不一一赘述)
1)w3cschool
2)w3cschool.cn
https://www.w3cschool.cn/javascript/
3)菜鸟教程
4)《JavaScript高级程序设计》
4、第一个JavaScript代码段(值得纪念一下!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript基础</title>
</head>
<body>
<div id="demo"></div>
</body>
<script>
document.getElementById('demo').innerHTML='hello world';
</script>
</html>
温馨提示:JavaScript有些地方与Java很相似,可比较学习!
二、JavaScript基础
1、JavaScript引入方式
1)内联式(不推荐)
2)嵌入式(复用性差,可维护性差,不推荐)
3)外部引用(推荐使用,一个HTML文件就需要配一个JavaScript文件)
2、JavaScript输出语句
<script>
document.getElementById('demo').innerHTML='hello world';
document.write('hello');
alert('hello');
console.log('hello');
</script>
3、数据类型
https://www.w3school.com.cn/js/js_datatypes.asp
种类:字符、数字、数组、布尔、对象、undefined 、null,举一个例子:
<script>
/**
* 弱类型语言:
* 1、声明变量时,不需要规范数据类型
* 2、JavaScript的数据类型可以随时改变
*/
var str = 'hello';
var num = 1;
var arr = [1,2,1];
var flag = false;
var object = {name:'Martin',gender:'Male'};
var nullObject = null;
var undefinedObject;
console.log(str);
console.log(num+1);
console.log(arr[0]);
console.log(flag);
console.log(object.gender);
console.log(nullObject);
console.log(undefinedObject);
console.log(typeof nullObject);
console.log(typeof undefinedObject);
</script>
其中最麻烦的就是null和undefined类型,那么我么有表格来做一个比较:
数据结构 | 默认值 | typeof |
---|---|---|
null | 被赋值为空 | object |
undefinded | 从未被赋值 | undefined |
4、引用类型
1)字符串
https://www.w3school.com.cn/jsref/jsref_obj_string.asp
a、连接 concat()
<script>
var str1 = 'hello';
var str2 = 'world';
console.log(str1+str2);
console.log(str1.concat(str2));
</script>
b、拆分 split()
<script type="text/javascript">
var str="How are you doing today?";
document.write(str.split(" ") + "<br />");
document.write(str.split("") + "<br />");
document.write(str.split(" ",3));
</script>
c、大小写转换 toUpperCase()、toLowerCase()
<script type="text/javascript">
var str="Hello World!";
document.write(str.toLowerCase());
</script>
2)数组
https://www.w3school.com.cn/jsref/jsref_obj_array.asp
a、长度 length属性
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "John";
arr[1] = "Andy";
arr[2] = "Wendy";
document.write("Original length: " + arr.length);
document.write("<br />");
arr.length=5;
document.write("New length: " + arr.length);
</script>
b、添加 push() 向数组的末尾添加一个或更多元素,并返回新的长度
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
document.write(arr + "<br />");
document.write(arr.push("James") + "<br />");
document.write(arr);
</script>
c、移除 pop() 删除并返回数组的最后一个元素
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
document.write(arr);
document.write("<br />");
document.write(arr.pop());
document.write("<br />");
document.write(arr)
</script>
3)时间
https://www.w3school.com.cn/jsref/jsref_obj_date.asp
a、getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
<script type="text/javascript">
var birthday = new Date("July 21, 1983 01:15:00");
document.write(birthday.getDate());
</script>
b、getMonth() 从 Date 对象返回月份 (0 ~ 11)
<script type="text/javascript">
var d=new Date();
document.write(d.getMonth());
</script>
c、getFullYear() 从 Date 对象以四位数字返回年份
<script type="text/javascript">
var born = new Date("July 21, 1983 01:15:00");
document.write("I was born in " + born.getFullYear());
</script>
d、运用类库转换时间格式
4)数字
https://www.w3school.com.cn/jsref/jsref_obj_math.asp
a、随机数 random() 返回 0 ~ 1 之间的随机数
<script type="text/javascript">
function forRandom() {
for(var i=0;i<10;i++){
document.write(Math.random());
}
}
</script>
b、四舍五入 round(x) 把数四舍五入为最接近的整数
<script type="text/javascript">
document.write(Math.round(0.60) + "<br />");
document.write(Math.round(0.50) + "<br />");
document.write(Math.round(0.49) + "<br />");
document.write(Math.round(-4.40) + "<br />");
document.write(Math.round(-4.60))
</script>
c、向上取整 ceil(x) 对数进行上舍入
<script type="text/javascript">
document.write(Math.ceil(0.60) + "<br />");
document.write(Math.ceil(0.40) + "<br />");
document.write(Math.ceil(5) + "<br />");
document.write(Math.ceil(5.1) + "<br />");
document.write(Math.ceil(-5.1) + "<br />");
document.write(Math.ceil(-5.9))
</script>
d、向下取整 floor() 对数进行下舍入
<script type="text/javascript">
document.write(Math.floor(0.60) + "<br />");
document.write(Math.floor(0.40) + "<br />");
document.write(Math.floor(5) + "<br />");
document.write(Math.floor(5.1) + "<br />");
document.write(Math.floor(-5.1) + "<br />");
document.write(Math.floor(-5.9));
</script>
三、练习热身
看了上面的这些基础知识,来几道编程小题热热身吧!
1)打印固定格式的时间
声明一个时间对象,打印出如下格式: 2020-2-29 17:29;
代码Demo:
<script type="text/javascript">
var d=new Date();
document.write(d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes());
</script>
2)输出随机数
使用数学对象,
- 输出(10个)1-100之间的随机数 ;
- 输出一个指定范围的随机数(使用函数机制 : 1-10)。
代码Demo:
<script type="text/javascript">
for(var i=0;i<10;i++){
document.write(Math.floor(Math.random()*100+1)+"</br>");
}
</script>
</br>
<script type="text/javascript">
document.write(Math.floor(Math.random()*10+1));
</script>
四、总结
1、数据类型
1)基本数据类型
更简单化,声明变量时使用var关键字,需要注意null和undifined
2)引用数据类型
提供了更多的方法和功能,一般用new关键字声明对象
3) 计算符号
2、函数
- 解决问题:复用——可维护性高、可读性强、结构化
现在的编程语言更多的是在强调描述,而不是做计算 - 首先,做到结构清晰 ——告诉用户干什么(抽象的层次)而不是怎么干(细节)
- 之后,再去研究细节算法——具体怎么干
举例说明:
1) 判断字符串是否为空
<script>
showMsg('hello');
function showMsg(msg1,msg2) {
if(msg2==undefined){
msg2='';
}
alert(msg1+msg2);
}
</script>
2) 判断是否是数字
<script>
var num = showMsg(1,'');
alert(num);
function showMsg(msg1,msg2) {
/**
* 正则表达式验证数据 是数字:返回true;不是数字:返回false
**/
var regPos = /^\d+(\.\d+)?$/; //非负浮点数
var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
if(regPos.test(msg1) &®Pos.test(msg2)|| regNeg.test(msg1)&®Neg.test(msg2)){
return msg1+msg2;
}else{
alert("不全是数字");
}
}
</script>
3)匿名函数怎么使用
<script>
/**
* 匿名函数
*/
//方式1
//这种方式尽量少用
const sum1 = function(x, y){
return x + y;
}(1, 2);
alert(sum1);
//方式2
//推荐
const sum = (function(x, y){
return x + y;
})(1, 2);
alert(sum1);
//方式3
alert((new Function("x","y","return x+y"))(1,2));
</script>