前端基础之JavaScript

一、JavaScript的基础

JavaScript的语法

/* */多行注释

// 变量赋值默认以换行符作为结束符有分号就以分号作为符号

1.js的引入方式

直接写或者去导入文件就行

a.接写

　　　　alter("hello")

</script>

　　b导入文件

2.变量：

　 a.和之前一样，就是变化的量，声明变量用关键字var

var i；声明变量

　　 i= 10；声明变量然后赋值

　　 alter（i）弹出i的值

b.一行可以声明多个变量并且可以是不同类型

var name="lanbo" , age=21;

c.声明变量的时候可以不用var，但是如果不用var那他就是全局变量

d.变量命名规则：

　　　　首字符只能是字母，下划线$美元符三选一，余下的字符可以是下划线、这些都是区分大小写的，

比如X和x是两个变量

那这样，刚才被三个标记法差点给整懵，标记法也就是起的变量名

Camel标记法
  
  首字母是小写的，接下来的字母都是以大写字符开头

    var myFirstTest=1111 ，   mySecondTest=22222；

Pascal标记法

  首字母是大写的接下来的字母都是以大写的字符开头


    var   MyThirdTest=3333，   MyFouthTest=4444；

匈牙利类型标记法

在Pascal标记法前加一个小写的字符


 var   iMyThirdTest=3333，   MyFouthTest=4444；

3.常量和标识符

　　我们来了解一下称么是常量什么事标识符

　　 a.量：直接在程序中出现的数据值

　　 b.标识符：

　　 1.不以数字开头的字母、数字、下划线（_）美元符（$)组成

　　　　2.常用于表示函数、变量等的名称

　　 3.例如：_abc、abc、$abc、abc123是标识符，而1abc就不是标识符

　　　　 4.js的关键字是不允许做标识符的

4.数据类型

　　 a.数字类型（number）：

　　　　　　整数

　　　　　　浮点型：就是小数点

16进制和8进制

　　 b.字符串类型（string）：

　　　　　　比如 str="hello",带有引号的

　　 c.布尔值（boolean）：

　　　　　　true和false

　　　　　　用于javascript的控制语句

　　 d.Null&Undefined类型：

　　　　Undefined类型：

　　　　这个类型只有一个值，就是Undefined，当声明的变量没有初始化时，返回Undefined

函数没有明确的返回值是，返回值也是Undefined

　　　　Null:

　　　　这也是只有一个值得类型，表示尚未存在的对象，就是找不到返回对象时就返回null；

5.运算符

　　算数运算符

+　 - * / % ++ --

　　逻辑运算符

　　&& || !

赋值运算符

　　= += -= *= /=

　　比较运算符

> < >= <= != == ===（全等于） !==

　　字符串运算符

　　 + 连接，两边操作数有一个或两个是字符串就做连接运算

a.算数运算符：

. 自加自减

在这里我就举几个例子，大家自己在电脑上演示一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var i=10;
        console.log(i++);
        console.log(i);
          console.log(++i);
          console.log(i);
           console.log(i--);
           console.log(--i);
    </script>
</head>
<body>

b.单元运算符

- + 还有不同的意义

- 除了表示减号还可以表示负号

+除了表示加法运算还可以用于字符串连接

js是一门弱类型语言，比python还随便，可能有时候你出错了但是它并没有报错

c.比较运算符

> >= < <= != == === !==

用于控制语句

if (2>1){ console.log("good") }

NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据

如果比较的两个项一个是数字类型，一个是字符串类型的话，就会把这个类型转换为数字类型

如果都是字符串类型的话就直接比较第一个字符，若相等就比较第二个，以此类推

boolean和数字比较转换成数子

字符串和数字比较转换成字符串

运算数和字符串比较转换成字符串

元算数和数字比较转换成数字

如果某个运算数是 NaN，等号将返回 false，非等号将返回 true

null和undefined的值想等

这两个是不能转换成其他值的，

d.比较运算符

if（2>1 && [1,2]）{

console.log("条件与")

console.log(1 && 3); and的意思，就是第一个是对的那你也应该再往后面看一下，以后面的为标准
console.log(0 && 3);
console.log(0 || 3);
console.log(2 || 3);or满足一个就ok

6.流程控制
顺序结构（从上向下顺序执行）
比如星期一到星期六每天都是有顺序的，类似于这样的就叫做顺序结构

<script>
console.log("星期日"); 
console.log("星期一"); 
console.log("星期二");
 console.log("星期三"); 
console.log("星期四"); 
console.log("星期五"); 
console.log("星期六");
</script>


分支结构
 
if{
   语句1;
}
else{
语句2;
}
循环结构

var  x=(new Date()).getDay(); 
//获取今天的星期值，0为星期天     
 var y;      
if ((x==6) ||(x=0)){        
  y="周末"      }else{         
 y="工作日"      }     
 console.log(y);      
/*等价于     
 y="工作日"      
if ((x==6)||x==0){      y="周末"     
 }      
console.log(y);       */

if elif else结构

if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

var score=window.prompt("您的分数:");

if (score>90){
    ret="优秀";
}else if (score>80){
    ret="良";
}else if (score>60){
    ret="及格";
}else {
    ret = "不及格";

}
alert(ret);

View Code

switch-case结构

switch基本格式
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定义";
}

View Code

二、JavaScript的对象

1.string对象

2.Array对象

3.Date对象

4.Math对象

5.function对象（重点）

6.BOM对象

7.DOM对象（后面会有具体的实例）

首先我们来看一下DOM节点，那什么是节点呢，HTML中的每一个成分都是一个节点，那什么又是每一个成分呢

在HTML中

整个文档就是一个文档节点

每一个标签又是一个元素节点

每一个文本又是一个文本节点

每一个属性又是一个属性节点

这么多的节点中document与element节点是重点

咱们前面不是老说父标签和子标签么

　那么在节点中他们的关系也是这样来称呼的，也会形成一个节点树，

在节点树中，顶端节点被称为根节点（根节点是没有父节点的，其他节点都有父节点）

同级节点被称为兄弟节点，一个节点可以拥有任意节点的子节点，同胞就是父节点相同

节点查找

直接查找结点

1.document.getElementById("idname")

2.document.getElementsByTagName("tagname")

3.document.getElementsByName("name")

4.document.getElementByClassName("name")

导航节点的属性

parentElement //父节点标签

children //所有子标签

firstElementchild //第一个子标签元素

lastElementchild //最后一个子标签

nextElementSibling //下一个兄弟标签元素

previousElementSibling //上一个兄弟标签

我刚刚才看到，兄弟们，JS中没有办法找到所有的兄弟标签，恕在下愚昧

a.创建节点

　　createElement(标签名) 例如

var a=document.crateElement("name")

a.setAttribute("type","text");

b.添加节点

追加一个子节点

somenode.appendChild("sex")

如果要把某个新添加的节点放到某个节点的前面就需要这样做

somenode.insertBefore( sex,某个节点)；

c.删除节点

获得要删除的元素

获得它的父元素

通过removechild（）方法删除

比如在我们练习的时候要删除一行内容，

这里多说一嘴，比如想删除表格中的一行，

d.替换节点：

somenode.replaceChild(newnode,某个节点)

节点属性操作

首先是文本节点的值： innerText innerHTML

attribute操作

elementNode.setAttribute(name,value)

element.getAttribute(属性名) 也可以直接这样写 elementNode.属性名这两种方法的效果是一样的

elementNode.removeAttribute("属性名");

5、关于class的操作：

elementNode.className
elementNode.classList.add
elementNode.classList.remove

DOM Event(事件)

这个我就直接粘贴了

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击。

onload:
  比如你的script标签本来在body里面，但是你偏偏要写在head里面，这个时候就可以用onload，，所以他只给body元素加
例如

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
         /*
              window.onload=function(){
                   var ele=document.getElementById("ppp");
                   ele.onclick=function(){
                   alert(123)
                };
             };
         
         */



          function fun() {
              var ele=document.getElementById("ppp");
               ele.onclick=function(){
                alert(123)
            };
          }

    </script>
</head>
<body onload="fun()">

<p id="ppp">hello p</p>

</body>
</html>

onsubmit事件
这个属性只能给from元素使用  当表单在提交时触发.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
我可以直接上例子吗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<form action="" id="submit">
    <p>姓名<input type="text" name="user" id="user"></p>
    <p>年龄<input type="text" name="age" id="age"></p>
    <input type="submit" >
</form>
<input type="text" id="test">


<script>
    var ele_form=document.getElementById("submit");
    var ele_user=document.getElementById("user");
    var ele_age=document.getElementById("age");

    ele_form.onsubmit=function (event) {
        var username=ele_user.value;
        var age=ele_age.value;

        alert(username);
        alert(age);

        // 两种阻止默认事件发生的方式

        // 方式1
        return false

        // 方式2
        // event.preventDefault()

    }
</script>
<script>
    var ele=document.getElementById("test")
    ele.onkeydown=function (e) {
        console.log(e.keyCode);

        if (e.keyCode==13){
            alert(666)
        }
    }
</script>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        window.onload=function(){
            //阻止表单提交方式1().
            //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.

             var ele=document.getElementById("form");
             ele.onsubmit=function(event) {
            //    alert("验证失败 表单不会提交!");
            //    return false;

            // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
             alert("验证失败 表单不会提交!");
             event.preventDefault();

    }

        };

    </script>
</head>
<body>

<form id="form">
            <input type="text"/>
            <input type="submit" value="点我!" />
</form>

</body>
</html>

View Code

三、DOM对象

四、实例练习

五、js扩展