--
<script src="***.js"></script> -写在最后-连接js
学习js,需要学习什么?
1.基本语法
2.事件
3.对象
//----注销代码
boolean含义: 1==true(真)
2==false(错)
break-----------直接退出
continue--------退出,并进入下次循环
Iterator -- 可迭代
a += i-----------循环累加
(for(var j=1;j<i;j++){
if(i % j == 0){}
})----------------求因子
push()------可向数组的末尾添加一个或多个元素,并返回新的长度。
var log = document.getElementById ("***")----js连接到id为***的div.
.toFixed(*)--------保留*为位小数
console.log(Math.max.apply(null,arr));-------求arr数组最大值(ES5)
console.log(Math.max(...arr));-------------求arr数组最大值(ES6)
-----------------------------------------
var * = *; ----------------------------------------- 用于声明变量
let * = *; ----------------------------------------- 一样用于声明变量,但只能用于 块结构 中
var * = prompt("***"); ----------------------------- 输入框 ,输入内容(*)输入提示(***)
document.write(""); -------------------------------- 在页面显示
console.log("*");----------------------------------- 在页面控制器查看
alert("");------------------------------------------ 警告弹出框,仅确定
confirm(""); --------------------------------------- 选择弹出框,当用户点击确定或取消时,都会得到对应的点击结果
prompt("");----------------------------------------- 提示弹出框
document.write("");--------------------------------- 在html文档中,书写一段内容
console.log("");------------------------------------ 在控制台进行内容输出,主要用于代码调试,控制器查看
\n-------------------------------------------------- 弹出框换行
parseInt()------------------------------------------ 取整数
parseFloat()---------------------------------------- 取小数
(* % 2 = 0)----------------------------------------- 取偶数
if(i == *){break;}---------------------------------- 满足条件停止循环
&& :并且-------------------------------------------- 多个条件必须同时成立
|| :或者-------------------------------------------- 多个条件只要有一个条件成立
! :取反
Math.abs(xxx); ------------------------------------- 绝对值
Math.cbrt(x); -------------------------------------- 立方根
Math.sqrt(x); -------------------------------------- 平方根
Math.ceil(x.1); ------------------------------------ 最接近x的最大整数(x+1)
Math.floor(x.1); ----------------------------------- 最接近x的最小整数(x)
max(x, y, z, ..., n)-------------------------------- 最高的数字。
min(x, y, z, ..., n)-------------------------------- 最小的数字。
Math.pow(x,y) -------------------------------------- x的y次幂
Math.round(x) -------------------------------------- x的四舍五入值
Math.random() -------------------------------------- 得到0-1之间的随机小数,不包含1
parseInt(Math.random() * (大 - 小 + 1) + 小)-------- 随机数
-----------------------------------------------------------------------------------
数组的遍历:------for(var i=0;i<4;i++){console.log(typeof i);}
console.log("-----------");
for..in : 遍历出数组中的下标值,注意,它的数据类型是string
for(var i in arr){console.log(arr[i]);console.log(typeof i);}
for..of : 遍历出数组中的所有元素
for (var item of arr) {console.log(typeof item);}
-------------------------------------------------------------
if(条件1){
}else if(条件2){
}else if(条件3){
}else{
}
---------------------------------------------------------------------
switch(aa){
case xx: -- switch块中提供的标识的可能取值
[default]:
[break]
}
---------------------------------------------------------------------
for(循环的起始;循环的条件;循环的条件迭代){
循环体
break----------直接退出
continue-------退出,并进入下次循环
}
---------------------------------------------------------------------------------
代码:
(* % 2 = 0)---偶数
var * = *; -- 用于声明变量
var * = prompt("***"); ---------输入框 ,输入内容(*)输入提示(***)
document.write(""); -----在页面显示
console.log("*");----在页面控制器查看
number: 整数 ,小数,正数,负数都是number
NaN -- not a number -- 这不是一个数字
string: "" '' -- 只要有字符串参与的加法运算,都会变成字符串拼接运算
boolean:(布尔),表示逻辑运算中的结果为真或假 true 或 false
undefinded:未被初始化
parseInt() -- 将值转换为整数
parseFloat() -- 将值转换为小数
Number() -- 根据具体数据进行相应转换
运算符号:(+)加(-)减(*)乘(/)除(%)取余
&& || 短路与 短路或
& | 逻辑与 逻辑或
位运算符:
^ & |
--------------------------------------------------------------------
1.代码位置:
----------------------------
<script></script> -- 可以出现在页面上的任何位置
<script src="引入外部js文件"></script>
<a href="javascript:js代码"></a> -- 可以由a标签主导js的执行
-- <a href="javascript:void(0)"> -- 拿a为假链接
<xx on事件="js"> -- 为元素绑定指定的事件,通过事件触发js的执行
--------------------------------------------------------------------------------
2.输出语句:
-------------------
var * = * -- 用于声明变量
alert(""); -- 警告弹出框,仅确定
confirm(""); -- 选择弹出框,当用户点击确定或取消时,都会得到对应的点击结果
prompt(""); -- 提示弹出框
document.write(""); -- 在html文档中,书写一段内容
console.log(""); -- 在控制台进行内容输出,主要用于代码调试,控制器查看
\n -- 弹出框换行
例:<script>alert("!23");
confirm("是否注册?");
document.write("<div style='width:100px;height:100px;border:1px solid red'></div>");
document.write(123);
console.log("123123123132");
</script>
-------------------------------------------------------------------------------------
变量:可以变化的量
var -- 用于声明变量
初始化 -- 定义了但没有初始值
输入语句:
var a = 1; // 声明了一个变量a,同时为它赋值1
var b = "abc"; // 声明了一个变量b,同时为它赋值为"abc"
alert(a);
var a;
var a = prompt("请输入你的姓名:"); //声明一个变量a , 同时将输入得到的数据赋值给这个变量
console.log(c);
JS中,所有变量的数据类型是由值来决定的,在运算过程中一定要注意数据类型转换的问题
-------------------------------------------------------------------------------------------------
数据类型:只要是数据,都会有数据类型,js中使用typeof指令查看变量的数据类型
-----------------------------------------------------
number: 整数 ,小数,正数,负数都是number
NaN -- not a number -- 这不是一个数字
string: "" '' -- 只要有字符串参与的加法运算,都会变成字符串拼接运算
boolean:(布尔),表示逻辑运算中的结果为真或假 true 或 false
undefinded:未被初始化
Array,Object,null:以后讲
---------------------------------------------------------------
数据类型的转换:
--------------------------
显示转换:
parseInt() -- 将值转换为整数
parseFloat() -- 将值转换为小数
Number() -- 根据具体数据进行相应转换
隐式转换:
运算过程中,进行- * /的转换,且参与运算的值中都为数字组成的字符串(必须纯数字)
--------------------------------------------------------------------------------------------------------
运算符:**2 ---平方
--------------------------------
算术运算符:+ - * / %
比较运算符:> < >= <= == != === !==
赋值运算符:= += -= *= /= %=
单目运算符:++ --
三目运算符:布尔表达式 ? 值1:值2; -- 如果布尔表达式的结果为true,那么取值1为整个运算的结果,否则取值2为整个运算的结果
逻辑运算符:&& || !
&& : 并且 -- 多个条件必须同时成立
|| : 或者 -- 多个条件只要有一个条件成立
! : 取反
--------------------------------------------------------
分支语句: 在有条件选择的情况下,对代码进行条件性执行
单分支:仅当条件成立时,if子句才会执行
if(条件){
if子句
}
双分支:当条件成立时,执行if子句,否则执行else子句
if(条件){
if子句
}else{
else子句
}
多分支:
if(条件1){
}else if(条件2){
}else if(条件3){
}else{
}
-------------------------------------------------------------------------------
switch(aa){
case xx: -- switch块中提供的标识的可能取值
[default]:
[break]
}
注意:switch只能用于判断标识的固定取值,不能判断范围
if: 可以做单条件或多条件的判断,并且可以判断固定值及数据的范围
switch:只能做固定值的判断
---------------------------------------------------------------------------------
循环:
循环必须有开始及结束
循环必须要有条件
for(循环的起始;循环的条件;循环的条件迭代){
循环体
}
1.定义循环变量(循环的起始) -- 2.进行条件判断 -- true -- 执行循环体 -- 3.迭代循环变量
-- 进行条件判断 -- true -- 执行循环体 -- 迭代循环变量
-- 进行条件判断 -- true -- 执行循环体 -- 迭代循环变量
。。。。。。。。。-- false -- 循环结束
1.注意死循环 2.循环条件 3.循环值的迭代
---------------------------------------------------------------------------------------------------
Math:js内置对象,用于处理数学操作
Math.abs(xxx); -- 返回得到xxx的绝对值
Math.cbrt(x); -- 返回得到x的立方根
Math.sqrt(x); -- 返回得到x的平方根
Math.ceil(x); -- 返回最接近x的最大整数
Math.floor(x); -- 返回最接近x的最小整数
max(x, y, z, ..., n) 返回值最高的数字。
min(x, y, z, ..., n) 返回值最小的数字。
Math.pow(x,y) -- 返回x的y次幂
Math.round(x) -- 返回x的四舍五入值
Math.random() -- 得到0-1之间的随机小数,不包含1
----------------------------------------------------------------------------------
while: 一般用于构建未知循环次数的循环
for: 一般用于构建已知循环次数的循环
两者可以相互替换
var i = 1;
while(i >= 0){
console.log("00000");
i--;
}
--------------------------------------------------------------------------------
循环嵌套:
1.各层循环按自己的规则执行循环
2.各层循环中的continue或break都只会对自己的循环产生作用
3.执行中,外层控制轮数,内层控制每轮的次数
for(var i=1;i<=3;i++){
for(var j=1;j<=5;j++){
document.write("*");
}
if(i == 2){
break;
}
document.write("<br>");
}
-----------------------------------------------
对象:new -- 创建
new Array(); -- 创建了一个空的新数组
new Array(值1,值2,值3..) -- 在创建数组时,为该数组赋初始值
new Array(Number); -- 创建出一个只有初始长度,没有具体值的新数组
字面值:[]
length---数组长度
arguments.length == * -------- 判断数组是否有*个数
行rowCon
列colCon
-----------------------
数组的访问
下标 :
注意: 在js,数组不是定长的,可以在操作过程中,对已知数组的长度进行扩容,也可以访问已知数组中不存在的元素
*/
// var arr = new Array();//创建了一个空的数组对象
// var arr = new Array("a","b","c","d","e");
// var arr2 = new Array(1,2,"a","b","c");
// var arr = new Array("a");
//数组的遍历 :
for(var i=0;i<4;i++){
console.log(typeof i);
}
console.log("-----------");
//for..in : 遍历出数组中的下标值,注意,它的数据类型是string
for(var i in arr){
// console.log(arr[i]);
console.log(typeof i);
}
//for..of : 遍历出数组中的所有元素
for (var item of arr) {
console.log(typeof item);
}
----------------------------------------------------------------------
Array.isArray(obj) -- 判断obj是否为数组,返回true或false
// // var arr = [];
// // arr[0] = [];
// // arr[0][0] = 1;
------------------------------------------------------------
函数(方法):将可以完成某一功能的代码进行打包,后期需要使用该功能模块时进行调用
function 函数名(形式参数){
函数体;
[return]
}
function -- 函数声明
形式参数列表(形参)-- 在函数声明时,要求当外部调用函数时,必须按照声明规则传递给函数的参数列表
实际参数列表(实参)-- 在调用函数时,根据函数的形参要求,传递给函数的实际运算数据
return *-- 返回值* / 函数的结束
注意:函数必须通过调用执行
//求两数相加的和
// function add(a,b){
// var c = a + b;
// // console.log(c);
// return c;//当函数执行完成后,将c的运算结果作为整个函数的运行结果,返回给调用者
// }
// var a = add(12,14);
// console.log(a * 2);
-------------------------------------------------------------------------------------
js的函数中,形参和实参是不用一一对应的
如果实参比形参多,形参从左到右一一对应实参
如果实参比形参少,不够的形参会被赋undefined
arguments -- 专门用于管理函数中的参数的对象 ,这个对象在函数被调用时自动生成
重载:如果同一个作用域中有多个重名函数,那么可以通过参数的不同来区分这些函数
注意:正常的编码规范中,实参与形参应该对应
function getArea(){
if(arguments.length == 1){
return Math.PI * arguments[0] * arguments[0] ;
}else if(arguments.length == 2){
return arguments[0] * arguments[1];
}else if(arguments.length == 3){
return (arguments[0] + arguments[1]) * arguments[2] / 2;
}
return false;
}
console.log(getArea(5,6));
--------------------------------------------------------------------------------
/*
递归:函数自己调用自己,在递归中的函数必须给返回条件
*/
// function fun1(){
// alert("fun1");
// fun2();
// alert("0000")
// }
// function fun2(){
// alert("fun2");
// }
// fun1();
// var i = 1;
// function fun(){
// console.log("123");
// i++;
// if(i == 5){
// return ;
// }
// fun();
// }
// fun();
//求数的阶乘
//3! = 1*2*3 5! = 1*2 *3 *4*5
-----------------------------------------------------------------------------
//使用函数作为参数:
//回调函数
// function fun(t){
// if(typeof t == "function"){
// t();
// }else{
// console.log(t);
// }
// }
// function test(){
// alert("我是test函数");
// }
// fun(test);
//使用函数作为返回值:
// function fun(){
// function t(){
// alert("我被返回了");
// }
// return t;
// }
// var f = fun();
// f();
//匿名函数
// function fun(f){
// f();
// }
// fun(function(){
// alert("我是匿名函数")
// });
------------------------------------------------------------
抽像:抽出像的部分
女朋友
功能:这个对象可以完成的
陪你聊天
陪你吃饭
陪你看电影
属性:修饰这个对象
性别
年龄
身高
体重
具体:
迪丽热巴
性别:女
年龄:28
身高:172
体重:100
功能:
演电影
唱歌
参加真人秀
跳舞
*/
/*
万物皆对象
把大象放进冰箱要几个步骤
面向过程开发:开门 - 放 - 关门
面向对象开发:
大象 (体重,体积,走路)
冰箱 (门大小,容积,门可以打开/关闭)
人 (手可以操作冰箱门)
Object --
. -- 的
*/
//方式一:通过new Object()创建初始对象
var obj = new Object();//创建出了一个对象
obj.color = "red";
obj.size = "20";
obj.shape = "长方形";
obj.save = function(){
console.log("可以存放小物品");
}
obj.save();
// 方式二:通过字面值:
var gf = {
name:"迪丽热巴",
age:20,
hight:172,
weight:50,
sing:function(){
alert(this.name + "会唱歌");
}
};
for(var key in gf){
if(typeof gf[key] == "function"){
gf[key]();
}
}
---------------------------------------------------------
console.log(Number.MIN_VALUE);
var date = new Date();//获取机器当前时间
// // date.setFullYear(2020);
// // date.setMonth(12);
// // var year = date.getYear();//1900 1970
// var year = date.getFullYear();//公元纪年
// var month = date.getMonth();
// var d = date.getDate();
// var h = date.getHours();
// var m = date.getMinutes();
// var s = date.getSeconds();
// var ms = date.getMilliseconds();
// var day = date.getDay();
// if(s < 10){
// s = "0" + s;
// }
// console.log(year + "年" + ++month + "月" + d + "日 " + h +":" + m + ":" + s + " " + ms + " 星期" + day);
// var date = new Date(1000);//从1970年1月1日 00:00:00开始计时后多少毫秒所对应的时间
// console.log(date);
var yuandan = new Date(2023,0,1,2,30,59,567);
// console.log(yuandan);
var cha = yuandan - date;
console.log(cha);//获取两个时间节点之间的毫秒差
//1.做一个时钟,document.write写在页面上
//2.做一个倒计时,计算从现在到元旦还有多久,精确到秒
---------------------------------------------------------------------------