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%40&&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属性