js笔记1

JavaScript入门(简称js)
脚本编程语言 特定的描述性语言 可以减少网页的规模,提高网页的浏览速度,丰富页面的功能
HTML 基本结构的创建 可以理解为骨架
CSS 进行美化 使页面更漂亮
JS 实现功能
JS浏览器自带,不需要额外的安装

页面使用JS的方法
使用

引用外部JS文件

可以在任何一个位置写javascript

JS变量 与其他程序设计语言相同,是用来临时存储信息
创建方法1 var x=1;
创建方法2 var x; x=1;弱数据类型 创建时候不区分
注:JS中的变量,区分类型,但没有int之类的关键词
JS调试 alert弹框调试 Console.log控制台输出调试
作用 观察变量值的变化规律 是否符合程序的设计目的

自定义函数 自定义函数是完成某一功能的代码段,可重复执行,方便管理和维护。
创建方法1 这种事函数声明 可以使用后定义
function fun1()
{代码片段
return ***}
创建方法2 这种叫做函数表达式 必须先定义后使用
var fun1=funtion(x){
return x+1;}
形参 定义时
实参 调用时
谁调用 谁得到return的值

数据类型及类型转换
定义时不区分 使用时区分
number 数字类型 整型浮点型都包括
string 字符串类型 必须放在单引号或者双引号中
boolean 布尔类型 只有true和false两种值
underline 未定义 一般指的是已经声明,但是没有赋值的变量 未被赋值 要避免 相当于一种错误
null 空对象类型 var a=null 和var a =""有区别
特殊类型
object 对象类型 在js常见的有window document array 等
NaN 是Number的一种特殊的类型 isNaN(),如果数字返回false,不是数字返回true(字符数字目前开来也是数字)是判断能不能转换的这个函数
类型转换 parseInt() parseFloat() Number() Boolean()
作用 强制类型转换 隐式类型转换(自动转换)
优先使用Num
parseInt 不进行四舍五入
Boolean

作用域
局部变量 在函数内部创建的变量,称为局部变量,其他函数不能使用。
全局变量 在函数外部创建的变量,称为全局变量,在函数之间可以共享使用。

运算符
比较运算符 用于比较两个值。结果是ture或者false
运算符范围 > >= != < <=
赋值运算符级别比><级别低
运算符优先级
1()
2++ –
3* / %
4 + -
5< <= >=
6 == !=等于 不等于
7&& 逻辑与
8|| 逻辑或
9?: 三目运算符
10= 赋值
三目运算符 根据不同的条件,执行不同的操作/返回不同的值
格式 条件?值1:值2
逻辑运算符 包含逻辑与,或,非等,其结果为true或false
格式 && and
|| or
! 非

程序控制语句
条件判断类控制语句
if else if else
多条件分支类控制语句演示
switch(x){
case 只能是一个数字: break
case :break
default:
} 不加break ,不会终止
循环类控制语句
for循环 while循环 do-while循环
内置函数
字符函数 substring substr charAt split length indexOf concat replace
日期函数 Date getDate getDay getMonth getFullYear getHours
getMinutes getSeconds
数学函数 Math.round max min abs
转化函数的 parseInt parseFloat Number Boolean

字符函数
substr(x,y) 截取从x开始的y位 起始位置 长度
console.log(所截取数据.substr(x,y));
substring(x,y)截取x开始y结束 算前不算后 不包括y 起始位置 结束位置
charAt (x) 获取x位置的数
x.length 获取x的长度
x.indexOf(j) 查找j在x里面第一次出现的位置
x.indexOf(j,k) 查找j在x里面,位置k之后出现的第一次的位置,位置顺序没有改变
var x=y.split(“j”); 以j作为分隔 将y作为数组存到x里面
y.concat(“aa”,“bb”);在y的基础上在输入aa,bb ,aa bb输入形式需要看y的形式 若y为数组则输入形式为数组 若为字符串则为字符串
y.replace(“a”, “b”); 将y中的第一个a替换为b 注:只替换第一个符合要求的字符串。

日期函数
var d1 = new Date(); 系统的时间
var d2 = new Date(“2020-2-17 10:58:58”);
console.log(d2.getDate()); 几号 17
console.log(d2.getMonth()); 几月1 因为月份从0开始console.log(d2.getMonth()+1); 2
console.log(d2.getFullYear()); 几年2020
console.log(d2.getHours()); 小时
console.log(d2.getMinutes()); 分钟
console.log(d2.getSeconds()); 秒
var n =d2.getTime()-d1.getTime();
getTime()用来获取毫秒数
console.log(parseInt(n/(24601000)));
2020-1-1 15:22 日期格式化
function fun_FmtDate(){
var d1 = new Date();
var yyyy,mm,dd,hh,mi,ss;
var time;
yyyy=d1.getFullYear();
mm=d1.getMonth()+1;
dd=d1.getDate();
hh=d1.getHours();
mi=d1.getMinutes();
ss=d1.getSeconds();
time=yyyy+"-"+mm+"-"+dd+"-"+hh+":"+mi+":"+ss;
return time;
}

数学函数
var n=16.6557
console.log(math.round(n)); 四舍五入取整 17
console.log(n.toFixed(2)); 保留两位小数
console.log(Math.min(2,6,77)); 2
console.log(Math.max(2,6,77)); 77
console.log(Math.abs(-3)); 3

数组
声明或创建一个不指定长度的数组,又称实例化创建
var arrayObj=new Array();
声明或创建一个数组并指定长度的数组
var arrayObj=new Array(5);
声明或创建一个带有默认值得数组
var arrayObj=new Array(2,4,“a”,“y”,8);
创建一个数组并赋值的简写,又称隐式创建数据
var arrayObj=[2,4,“a”,“y”,8];
数组赋值,字符下标,数组遍历
console.log(arrayObj[0]);
for(var i in arrayObj){
console.log(i); 专门针对于数组,集合框架的for
} 现在输出的是 0 1 2 3 4 5
应该改为
for(var i in arrayObj){
console.log(arrayObj[i]);
}
var i=0;
var n=arrayObj.length;
for(i;i<n;i++){
console.log(arrayObj[i]);
}还是用 上面的那个比这个好

什么是表单 表单的主要作用是客户端接收用户的信息,然后将数据递交给后台的程序来操控这些数据
JS做什么 设置或获取各种表单元素的值
示例:利用js给列表框等表单元素初始化
document.getElementById()按照元素的id来获取该元素
document.getElementById(“userName”).value=“imooc”;

刷新body中的内容 单选按钮 name用来分组 document.getElementsByName(); 按name来获取元素 elements 是复数 得到的是数组 男 女
function show1(){ var xb=document.getElementsByName("xb"); var xbText; if(xb[0].checked);{ xbText=xb[0].value;} }else{ xbText=xb[1].value; } alert(xbText); }

name给后台程序使用 id给js使用

function ymd(){ var yyyy=document.getElementById("yyyy"); for(var i=1999;i<=2019;i++){ yyyy.options.add(new Option(i,i));第一个i是值value 第二个i是名字 } } 年月日代码 年 月 日 函数 function ymd(){ var yyyy=document.getElementById("yyyy"); var mm=document.getElementById("mm"); var dd=document.getElementById("dd"); var date=new Date(); var year=parseInt(date.getFullYearr()); 解决年份变化问题 for(var i=1999;i<=year;i++){ yyyy.options.add(new Option(i,i)); } for(var i=1;i<=12;i++){ mm.options.add(new Option(i,i)); } for(var i=1;i<=31;i++){ dd.options.add(new Option(i,i)); } } 给列表框赋值,传递 表单元素 开始 结束值 function initSelect(object,start,end){ for(var i=start;i<=end;i++){ obj.options.add(new Option(i,i)); } 所以上面可以改成 var yyyy=document.getElementById("yyyy"); initSelect(yyyy,1999,year); } 实现中间年默认 var n=yyyy.length; yyyy.selectedIndex=Math.round(n/2);

yyyy.options.length=0;将yyyy列表框中的条目变为0

function selectYmd(){
var mm=document.getElementById(“mm”);
var dd=document.getElementById(“dd”);
var m=parseInt(mm.value);
var d=dayEnd;
if(m4||m6||m9||m11){
dayEnd=30;
}else if(m2){
dayEnd=28;
y=parseInt(yyyy.value);
if(y%4
0&&y%100!=0||y%400==0){
dayEnd=29;
}
}else{
dayEnd=31;
}
dd.options.length=0;
initSelect(dd,1,dayEnd);
}
οnchange="" 改变事件
以上为年月日三级联动

function deleteSelect(){
var dd=document.getElementById(“dd”);
dd.options.remove(1);
for(i=0;i<dd.length;i++){
dd.options.remove(i); 会变成隔一个删一个 得变成
for(i=dd.length;i>=0;;i–){
dd.options.remove(0);
}
}

图片的切换


function initLogo(){
var logo=document.getElementById(“logo”);
for(i=1;i<=15;i++){
logo.options.add(new Option(i,i));
}
function selectLogo(){
var logo=document.getElementById(“logo”);
var n=logo.value;
var logoImg=document.getElementById(“LogoImg”);
logoImg.src=“image/headLogo/”+“n”+.gif"
}
}

function checkInterest(){
var interest=document.getElementsByName(“interest”);
for(i=0;i<interest.length;i++){
interest[i].checked=true;
}
function checkInterest1(){
var interest=document.getElementsByName(“interest”);
for(i=0;i<interest.length;i++){
interest[i].checked=false;
}
代码优化
var flag=true;
function checkInterest(){
var interest=document.getElementsByName(“interest”);
for(i=0;i<interest.length;i++){
interest[i].checked=flag;
}
if(flag=true){
document.getElementById(“btn1”).value=“全不选”;
}else{
document.getElementById(“btn1”).value=“全选”;
}
function checkInterest1(){
var interest=document.getElementsByName(“interest”);
for(i=0;i<interest.length;i++){
interest[i].checked=flag;
}
}

什么是事件 事件是指被程序发现的行为或发生的事情,而且他可能会被程序处理(在什么时候发生什么事情)
特点 js的事件,都是以on开头,有onclick,onchange,onload…
事件分类 键盘事件 鼠标事件 表单事件…
鼠标事件 onclick,ondblclick onmouseover onmouseout onmousedown
键盘事件 onkeydown onkeyup keypress
表单事件 onfoucs onsubmit onblur onblur onchange

DOM Document Object Model
文档对象模型
什么是DOM 将文档(页面)表现为结构化的表示方法,使每一个页面元素都是可操控,DOM将网页和脚本以及其他的编程语言联系了起来
特点 利用js控制页面中的所有元素,使页面更加“聪明”
分类 元素节点 属性节点 文本节点 元素title 文档标题
元素head 元素meta 属性charset(字符集)
文档 根元素HTML
元素body 元素a 文本 链接内容
属性 href
元素h1 文本 文本内容
常用DOM操作
getElementById 返回带有指定ID的元素
getElementsByTagName 返回包含带有指定标签名称的所有元素的 节点列表
getElementsByClassName 返回包含带有指定类名的所有元素的节点列表
getElementsByName 获取相同名称(name)的元素的节点列表
通过id name获取元素
通过标签名获取所有的标签
改变HTML属性,列如 改变img的src属性

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本火锅店点餐系统采用Java语言和Vue技术,框架采用SSM,搭配Mysql数据库,运行在Idea里,采用小程序模式。本火锅店点餐系统提供管理员、用户两种角色的服务。总的功能包括菜品的查询、菜品的购买、餐桌预定和订单管理。本系统可以帮助管理员更新菜品信息和管理订单信息,帮助用户实现在线的点餐方式,并可以实现餐桌预定。本系统采用成熟技术开发可以完成点餐管理的相关工作。 本系统的功能围绕用户、管理员两种权限设计。根据不同权限的不同需求设计出更符合用户要求的功能。本系统中管理员主要负责审核管理用户,发布分享新的菜品,审核用户的订餐信息和餐桌预定信息等,用户可以对需要的菜品进行购买、预定餐桌等。用户可以管理个人资料、查询菜品、在线点餐和预定餐桌、管理订单等,用户的个人资料是由管理员添加用户资料时产生,用户的订单内容由用户在购买菜品时产生,用户预定信息由用户在预定餐桌操作时产生。 本系统的功能设计为管理员、用户两部分。管理员为菜品管理、菜品分类管理、用户管理、订单管理等,用户的功能为查询菜品,在线点餐、预定餐桌、管理个人信息等。 管理员负责用户信息的删除和管理,用户的姓名和手机号都可以由管理员在此功能里看到。管理员可以对菜品的信息进行管理、审核。本功能可以实现菜品的定时更新和审核管理。本功能包括查询餐桌,也可以发布新的餐桌信息。管理员可以查询已预定的餐桌,并进行审核。管理员可以管理公告和系统的轮播图,可以安排活动。管理员可以对个人的资料进行修改和管理,管理员还可以在本功能里修改密码。管理员可以查询用户的订单,并完成菜品的安排。 当用户登录进系统后可以修改自己的资料,可以使自己信息的保持正确性。还可以修改密码。用户可以浏览所有的菜品,可以查看详细的菜品内容,也可以进行菜品的点餐。在本功能里用户可以进行点餐。用户可以浏览没有预定出去的餐桌,选择合适的餐桌可以进行预定。用户可以管理购物车里的菜品。用户可以管理自己的订单,在订单管理界面里也可以进行查询操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值