<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript脚本基础</title>
<!--JavaScript引入外部的js脚本-->
<!--一对script标签只能选择“引入外部脚本、在该标签中书写js代码”中的一个-->
<!-- <script src="../js/js1.js"></script> -->
<script>
// 直接在页面中使用script标签书写js代码
alert("弹出框！");
// 消息在浏览器中console下接受
console.log("js消息！")
// 提示框,点击确定返回true，取消返回false
confirm('是否确认要删除')
</script>
<!--JavaScript 数据类型-->
<!--值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol-->
<!--引用数据类型：对象(Object)、数组(Array)、函数(Function)-->
</head>
<body>
<!--onclick点击事件，将js代码嵌入到元素内部，使用事件调用-->
<button onclick="alert('点击了按钮')">按钮</button>
<div>
<a href="javascript:console.log('在超链接中使用伪代码方式调用js')">调用JavaScript</a>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript的基础语法</title>
</head>
<body>
<!--通过事件调用函数-->
<button onclick="test1()">测试一</button>
<script>
// function函数声明，test1函数名
function test1(){
// var声明变量 num变量名
var num;
// 输出num的值
console.log(num);
// 输出num的类型
console.log(typeof num);
// 用if语句会将变量自动转化为boolean类型
// undefined、null、空字符串、数值为0 都默认为false
if(num){
console.log(true)
}else{
console.log(false)
}
// == 恒等仅仅做值的匹配
if(123=='123'){ //true
console.log(true)
}else{
console.log(false)
}
// === 恒等做值和类型的匹配
if(123==='123'){ //false
console.log(true)
}else{
console.log(false)
}
}
</script>
<button onclick="test2()">字符串转化为整数和浮点数</button>
<script>
function test2(){
// parseInt转化为整数
console.log(parseInt('1234')) //1234
console.log(parseInt('123.4')) //123
// parseInt转化为整数，到非数字为止 如果第一个字符不是数字则返回 NAN
console.log(parseInt('a1234')) //NAN(代表不是数字)
console.log(parseInt('1234a')) //1234
console.log(parseInt('0.1234')) //0
console.log(parseInt('01234')) //1234
// parseFloat转化为浮点数
console.log(parseFloat('1234')) //1234 不是1234.0
console.log(parseFloat('1234.5')) //1234.5
console.log(parseFloat('1234.0')) //1234
console.log(parseFloat('1234.3.3')) //1234.3
console.log(parseFloat('1234.')) //1234a
console.log(parseFloat('0a1234')) //0
}
</script>
<button onclick="test3()">字符串操作</button>
<script>
function test3(){
// 字符串后接 + 做拼接操作
console.log('123'+3) //1233
// 字符串后接 - 、 * 、 / 、 % 做数学运算操作
console.log('123'-3) //120
console.log('123'*3) //369
console.log('124'/3) //41.3333...
console.log('123'%3) //0
// 小数求余
console.log(5.5 %3); // 2.5
}
</script>
<button onclick="test4()">数组一</button>
<script>
function test4(){
// js中的数组与java中的集合类似，不设置长度默认长度为0，随着添加数据长度增加
arr = new Array();
console.log(arr.length); //0
arr[0] = 1;
console.log(arr.length); //1
arr[10] = 10;
// 直接添加下标为n(n在已添加的元素的下标中最大)的元素，数组长度直接增加到n+1
console.log(arr.length); //11
// 此时arr[1]还没有赋值，所以为undefined
console.log(arr[1]); //undefined
// 清除数组中的元素
arr = null;
}
</script>
<button onclick="test5()">数组二</button>
<script>
function test5(){
var a = new Array(); //var a = [];效果与var a = new Array();相同
// 创建数组的时候设置数组长度
var b = new Array(10);
console.log(b.length) //10
// 创建数组的时候给数组项赋值
var c = new Array(1,3,5); //var c= [1,3,5];效果与var c = new Array(1,3,5);相同
console.log(c.length) //3
// 循环遍历数组
for(var i=0; i<c.length; i++){
console.log(c[i]);
}
/*1
3
5*/
}
</script>
<button onclick="test6()">日期类型一</button>
<script>
function test6(){
var date = new Date();
console.log(typeof date); //object
console.log(date); //Thu Oct 11 2018 23:08:14 GMT+0800 (中国标准时间)
// date.getYear( )指定Date对象date的年份字段减去1900(不推荐使用)
// date.getFullYear( )用本地时间表示时返回的年份，返回值是一个四位数
/* date.getMonth( )指定的Date对象的月份字段，以本地时间表示，返回值在0(一月)到11(十二月)之间。
所以月份应该加一*/
/*Date.getDay( ) 返回一周中的某一天
Date.getDate( ) 返回一个月中的某一天*/
var strdate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
var strtime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
console.log(strdate+" "+strtime); //2018-10-11 23:8:14
}
</script>
<button onclick="test7()">日期类型二</button>
<script>
function test7(){
var date = new Date('2018-09-10');
// Date.parse(date)指定的日期和时间距1970年1月1日午夜(GMT时间)之间的毫秒数
console.log(Date.parse('2018-09-10'));
var date = new Date('2018-09-33');
console.log(Date.parse('2018-09-33'));// 日期时间的格式不正确，转换出来的结果为 NaN
// 可以利用Date.parse(date)转换日期为毫秒数，判断日期格式是否正确
var a = Date.parse(date);
console.log(Boolean(a));
}
</script>
<button onclick="test8()">字符串二</button>
<script>
function test8(){
var str = 'abc';
// 在js中没有字符类型只有字符串类型
console.log(typeof str.charAt(0)); //string
console.log(str.charAt(5)); // 下标超出字符串长度，那么返回一个长度为0的空字符串
var str = 'abc def';
console.log(str.charAt(2));
console.log(str.charAt(3)); //返回一个长度为0的空字符串
// js中汉字也算一个长度
var str = "李四";
console.log(str.length); //2
console.log(str.charAt(0)); // 李
// string.charCodeAt(n) 返回string中的第n个字符的Unicode编码
console.log(str.charCodeAt(0)); //26446
}
</script>
<button onclick="test9()">正则表达式</button>
<script>
function test9(){
// 开始 /正则表达式/ 结束
// 全部是数字，长度6---30
var reg = /^d{6,30}$/;
// RegExp.test( ) 检测一个字符串是否匹配某个模式，返回布尔类型
if(reg.test('123456')){
console.log('数字匹配成功！');
}else{
console.log('数字匹配失败...........');
}
// 中国手机号段
reg = /^1([38]d|4[57]|5[0-35-9]|66|7[013578]|99)d{8}$/;
// 匹配姓名汉字，u开头代表是unicode编码 ，unicode表中汉字的编码在 4e00-9fa5 之间
reg = /^[u4e00-u9fa5]{2,20}$/;
}
</script>
<br>
<button onclick="test10()">数学计算</button>
<br>
<button onclick="test11()">JavaScript函数1</button>
<script>
function add(num1, num2) {
// 没有返回值，只在浏览器控制台输出数据
console.log(num1+num2);
}
function add2(num1, num2) {
return num1+num2;
}
function add3(num1, num2) {
return ;
}
function test10() {
var num1 = 10, num2 = 20;
var mianji = num1*num1*Math.PI;
console.log(mianji); //314.1592653589793
// Math.ceil( ) 对一个数上舍入
console.log(Math.ceil(mianji)); //315
// Math.round( ) 四舍五入
console.log(Math.round(mianji));
// number.toFixed(digits)保留digits位小数，如果必要该数字会被舍入，也可以用0补足，以便它达到指定的长度，若不写参数用0代替
console.log(mianji.toFixed(2)); //314.16
}
function test11() {
var temp = add(10, 20);
console.log(temp); //add（）没有返回值，所以为undefined
temp = add2(20, 30);
console.log(temp); //add2() 返回两个参数之和，所以输出50
temp = add3(20, 30);
console.log(temp); //add3() 有return但是没有定义返回值，所以为undefined
}
</script>
</body>
</html>