Js 入门【8.13、10.52】

是一种脚本语言、直接在页面使用 Js
Js 变量：与其他程序设计语言相同，是用来临时存储信息

创建方法 1：var x=1; var x=2,name="zhangsan"

创建方法 2：var x; x=1; 【弱数据类型】

小贴士：Js 中的变量，区分类型，但没有 int 之类的关键词
Js 调试：alert 弹框调试、console.log 控制台输出调试

作用：观察变量值的变化规律，是否符合程序设计的目的

示例：alert(flag);

consoLe.log(flag);

小贴士：先掌握熟练这两种方法，再学习其他调试方法

自定义函数

自定义函数是完成某一功能的代码段，可重复执行，方便管理和维护。
创建方法 1：这种是函数声明可以先使用后定义

function fun1 ( ){

代码片段

return *** ；}
创建方法 2：这种叫做函数表达式必须先定义后使用

var fun1=function(x){

return x+1; };

  <script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>
、、.js：
1、
function add(n1,n2){
    var n3;
    n3=n1+n2;
    return n3;
}
var num=add(13,14);
console.log(num);
2、
var num1=function(n1,n2){
    var n3=n1+n2;
    return n3;
}
/*alert(num1(13,14));*/
var n=num1(14,14);
alert(n);

数据类型及转换

number string boolean

underfined ：未定义，一般指的是已经声明，但是没有赋值的变量
null：空对象类型，var a=null，和 var a=""有区别；
特殊类型：object、NaN
object：对象类型，在 js 常见的有 window,document,array 等
NaN：是 Number 的一种特殊类型，isNaN() ，如果是数字返回 false，不是数字返回 true

// var str="123";
// console.log(str*1+1);
// console.log(parseInt(str));
var str1="abc";
if (!isNaN(str1)) {
    console.log(parseInt(str1));
}else{
    console.log("is error");
    str1=0;
}
console.log(str1);

var str=0; console.log(Boolean(str));

【0 是 false、非 0 是 true】
console.log(parseInt(str));
console.log(parseFloat(str));
console.log(Number(str));//优先
var str="123"; 【123 、123、 123】
var str="abv"; 【NaN、NaN、NaN】
var str="123a"; 【123、123、NaN】
var str="a123"; 【NaN、NaN、NaN】
var str="0123"; 【123 、123、 123】
var str="0123.154"; 【123 、123.154、 123.154】
var str=""; 【NaN、NaN、 0】 null 一样

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

<script type="text/javascript" src="index.js"></script>
</head>
var n=9;
function fun1(){
    var n1=5;//局部变量
    var n=12;//全局变量 n
    // console.log(n1);
}
function fun2(){
    n=n-1;
}
function fun3(){
    console.log(n);
    console.log(n1);
}
fun1();
fun2();
fun3();

运算符

比较运算符：用于比较两个值。结果是 true 或者 false
运算符范围：>、>=、!=、<、<=
实例 x<10 为 true //x=2
运算符优先级
var x=2;

var y=3;

var flag=x<10 && y<5;

console.log(flag); //true

程序控制语句

if else 语句 x>20.....
多条件控制语句：成绩分布段，优秀满分
循环语句：1+2+3+4+5+.....+100=5050

for while do...while

do{ sum=sum+i; i++;}while(i<=100)

字符函数

var str="48234444444555554";
console.log(str.substr(6,4));//起始位置，长度
console.log(str.substring(6,10));//起始位置,结束位置
var n=parseInt(str.charAt(16))
if(n%2==0){
consol.log("nv");
}else{
console.log("nan");
}
console.log(str.length);//获取长度
console.log(str.indexOf(1,4));//截取长度
/////////////////////////////////////////////
var str="aa,ttt,121,gg,kk,aa,bb";
var arr=str.split(",");
console.log(arr[0]);
console.log(str.concat(",55",",77",",00"));
console.log(arr.concat("55","77","00"));//数组长度扩大
console.log(str.replace("aa","imooc"))//只替换一个

日期函数

var d1=new Date();
var d2=new Date("2022-1-1");
console.log(d1.getDate());
console.log(d1.getMonth()+1);//从 0 开始，0-11
console.log(d1.getFullYear());
console.log(d1.getHours());
console.log(d1.getMinutes());
console.log(d1.getSeconds());
//距离 2022-1-1 元旦多少天
var n=d2.getTime()-d1.getTime();
console.log(parseInt(n/(24*3600*1000)));
//2021-8-13 15:58 日期格式化
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;
}
console.log(fun_FmtDate());

数学函数

var n=16.654364;
console.log(Math.round(n));//取整数
console.log(n.toFixed(2));//保留两位小数
console.log(Math.min(2,6,81,1));//最小值
console.log(Math.max(2,6,81,1));//最大值
console.log(Math.abs(-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,5,1];
//数组赋值、字符下标、数组遍历
console.log(arrayObj[4]);
for(var str in arrayObj){
    console.log(arrayObj[str]);
}//用这个，快，方便
// var i=0;
// var n=arrayObj.length;
// for (i; i <n; i++) {
//  console.log(arrayObj[i]);
// }

JS 对表单元素进行设置

表单的主要作用是在客户端接收用户的信息，然后将数据递交给后台的程序来操控这些数据
JS 做什么：设置或获取各种表单元素的值
示例：利用 js 给列表框等表单元素初始化

1、用户名文本框

<body onload="show1()"><!--页面加载-->
    <form>
        <label>用户名</label>
            <input type="text" id="userName" name="userName" value="123"/>
            <input type="button" id="btn" onclick="show1()" value="btn"/>
    </form>
</body>
function show1(){
    //alert("123456");    document.getElementById("userName").value="imooc";
}

2、单选按钮用法

<form>
        <label>用户名</label>
            <input type="text" id="userName" name="userName" value="123"/><br>
            <input type="radio" name="xb" value="1" checked="checked">男<!--默认选中 -->
            <input type="radio" name="xb" value="0">女<br>
            <input type="button" id="btn" onclick="show1()" value="btn"/>
    </form>
</body>
function show1(){
    var xb=document.getElementsByName("xb");
    var xbText;
    if(xb[0].checked){
        xbText=xb[0].value;
    }else{
        xbText=xb[1].value;
    }
    alert(xbText);
}

3、列表框

年月日联动

<body onload="ymd()">
    <form>
        <select name="yyyy" id="yyyy" onchange="selectYmd()"></select>年
        <select name="mm" id="mm" onchange="selectYmd()"></select>月
        <select name="dd" id="dd"></select>日
        <input type="button" value="删除列表框条目" onclick="deleteSelect()" ><br>
        <!--通过序号改变头像-->
        <img id="logoImg" src="image/toolbar/1.png">
        <select id="logo" onchange="selectLogo()"></select>
    </form>
js：、、、、、、、、、、、、、、、、、、、
function ymd(){
    //获取 id=yyyy 的控件【表单元素】
    var yyyy=document.getElementById("yyyy");
    var mm=document.getElementById("mm");
    var dd=document.getElementById("dd");
    //动态年份更新
    var date=new Date();
    var year=parseInt(date.getFullYear());
    initSelect(yyyy,1999,year);
    initSelect(mm,1,12);
    initSelect(dd,1,31);
    //获取列表框长度
    var n=yyyy.length;
    //列表框选中某一条目、默认年份中间位置
    yyyy.selectedIndex=Math.round(n/2);
}
/*g 给列表框赋值，传递三个参数：表单元素，开始值，结束值 */
function initSelect(obj,start,end){
    for (var i = start; i<=end; i++) {
        obj.options.add(new Option(i,i));
    }
}
//动态获取闰月、闰年等月份关系
function selectYmd(){
    var yyyy=document.getElementById("yyyy");
    var mm=document.getElementById("mm");
    var dd=document.getElementById("dd");
    var m=parseInt(mm.value);
    var dayEnd;
    if(m==4 || m==6 || m==9 || m==11){
        dayEnd=30;
    }else if(m==2){
        dayEnd=28;
        y=parseInt(yyyy.value);
        if ((y%4==0&&y%100!=0) || y%400==0) {
            dayEnd=29;
        }
    }else{
        dayEnd=31;
    }
    //将某个列表框的条目数设置为 0，效果为删除
    dd.options.length=0;
    initSelect(dd,1,dayEnd);
}
//删除列表框的某一个条目。即：按索引号删除
function deleteSelect(){
    var dd=document.getElementById("dd");
    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;
    // alert(n);、测试、F12
    var logoImg=document.getElementById("logoImg");
    logoImg.src="image/toolbar/"+n+".png";
}

4、全选、全不选、反选【复选框】

<body >
    <form>
        <input type="checkbox" name="interest" value="1" /><label>游泳</label>
        <input type="checkbox" name="interest" value="2"/><label>爬山</label>
        <input type="checkbox" name="interest" value="3"/><label>看书</label>
        <input type="checkbox" name="interest" value="4"/><label>听歌</label>
        <input type="button" id="btn1" value="全选" onclick="checkInterest()">
        <input type="button" value="反选" onclick="checkInterest1()" >
    </form>
</body>
</html>
var flag=true;
function checkInterest(){
    var interest=document.getElementsByName("interest");
    for(i=0;i<interest.length;i++){
        interest[i].checked=flag;
    }
    if(flag){
        document.getElementById("btn1").value="全不选";
    }else{
        document.getElementById("btn1").value="全选";
    }
    flag=!flag;//开关变量
}
function checkInterest1(){
    var interest=document.getElementsByName("interest");
    for(i=0;i<interest.length;i++){
        interest[i].checked=!interest[i].checked;
        // console.log(interest[i].value);
    }
}