Js学习

js学习

1.概念

js一种直译型脚本语言，一种动态语言、弱类型语言、支持内置类型。它的解释器被称为javascript引擎。它浏览器的一部分。用于客户端的脚本语言，最早是html网页上使用用来给HTML增加动态效果。
1995年，网景首次设计实现的 。因为网景跟sun合作的，因此才起名叫javascript，它除了语法风格跟java有点接近，其他跟java没有任何关系，目前js版权属于oracle公司。

2.作用

    1、嵌入文本到我们的HTML页面上
    2、对浏览器事件作出响应
    3、读写HTML
    4、在数据提交到服务器之前先做数据验证
    5、检测访客的浏览信息
    6、控制cookie
    7、基于nodeJs技术进行服务端的编程

3.语法

js可以有几种写法：
1、写在script标签内
<script type="text/javascript" >
var core=123;
document.write(core);
</script>
2、写在外部js文件里面
<script type="text/javascript" src="b.js">
</script>
vim b.js
var core=123;
document.write(core);
3.建议html、css、js分别写在不同的文件中，在html直接引入即可。

js数据类型

js基本的数据类型 ：数字类型，字符串型，布尔型，undefined，null,对象类型 数组;在使用时直接 var 变量名 =值
1、数字类型（Number）
    只有一种数字类型，数字 可以是小数 ，也可以是整数
    var core =123；
    document.write(core);//打印core

2、字符串型（string）
    字符串是存储字符的变量，用来表示文本的数据类型，程序中的字符串是包含单引号/双引号的，由单引号来界定我双引号中包含的字符串;
    var core ="123"；
    document.write(core);//打印core

3、布尔类型（boolean）
    一般是用在流程控制语句中，字符串和数字类型都是无穷多个，然而我们的布尔数据类型只有两个：true 和 false,这两个个值一般用于说明某个事物是真或者假,js一般用布尔类型来比较所得到的结果;
    var core =(1<3)；
    document.write(core);//打印core

4、null（空）
    null
    关键字null是一个特殊的值，它表示变量为空值，用来定义空的或者是不存在的引用。
    如果试图去引用一个没有定义的值，就会返回一个null。
    这里注意一点：null并不等于"" 或者0
    var exp=null;
    if(exp==null){
        alert("is null");
}
5、undefined（未定义）
    这个值表示变量不含有值，没有定义的值，或者被定义了一个不存在的属性值
    var core;
    document.write(core);//打印core
    ！null和undefined区别：
    null它表示一个变量被赋予一个空值，而undefined是表示变量还没有被赋值

运算符

用于执行程序代码运算，会针对一个以上操作数来进行    
    1、算术运算符
    +   -   *   /   %  ++  --       
    字符串拼接使用“+”
    var core = "ab"+"c";
    2、比较运算符 
    < > == ！= <= >= === 全等于：将数值以及数据类型一并比较
    ！==不全等于：将数值以及数据类型一并比较
    3、赋值运算符
    =   += -= *= /= %=
    a=a+2;==>a+=2
    a=a-2;==>a-=2
    a=a*2;==>a*=2
    a=a/2;==>a/=2
    a=a%2;==>a%=2   

    4、逻辑运算符
     &&  全真为真
    ||  一个为真就是真
    ！  取反

    5、三元运算符（三目运算符）
    表达式1?表达式2:表达式3
    当我的表达式1成立时  执行表达式2  否则执行表达式3
    var a=10,b=20;
    a > b ? alert("a大"):alert("b大");

数据类型间转换

1.查变量类型
var a=123;
document.write(typeof(a));
2.数据类型间转换
var a="123";
var b=parseInt(a);//字符串a转换为整数b
document.write(b);

条件语句

if语句
    if(条件){
        函数体
    }

    if else语句
    if(条件){
        函数体1
    }else{
        函数体2
    }

    if.....else if......else语句
    if(条件1){

    }else if(条件2){

    }else if(条件n){

    }else{

    }
    举例：
    var a=3;
    if(a>4){
    document.write("a>4");
    }else{
    document.write("a不大于4");
    }
    switch语句:多分支语句

    switch(变量){
        case a:
        .....
        break;
        case b:
        .....
        break;
        case c:
        ...
        break;
        ........
        default:
            ....
            break;
    }
    举例：
    var core=parseInt(window.prompt('input'));//键盘录入整形
    switch(core/10){
        case 9:
        document.write("优秀");
        break;
        case 8:
        document.write("一般");
        break;
        default:
            document.write("不行");
            break;
    }

    循环结构：
    1、while循环：先判断条件 当条件成立 再执行
    while(循环成立条件){
        ....
    }

    2do...while循环:不论条件成不成立 先执行一遍 再判断
    do{
        .....
    }while(循环成立条件)

    3、for循环
    4、for in循环

    continue：
    跳过当前循环，直接进入循环的下一个步骤

    break:
    结束循环

节点操作

#增删改查
    一、获取节点：
    1、通过id获取
    document.getElementById("id")
    节点.getElementById("id值")
    ！返回的是一个具体的节点

    2、通过标签名来获取节点
    getElementsByTagName("div")
    ！返回的是一个节点数组,即使只有一个

    3、通过标签的Name值来获取
    getElementsByName("标签的name值")
    !返回的是一个节点数组

    4、通过class值来获取节点
    getElementsByClassName("类名")
    !返回的是一个节点数组
    二、创建插入节点
    1、document.createElement("div")//创建一个元素节点
    2、document.createTextNode("文本文本")//创建一个文本节点

    被插入的节点.appendChild(创建的节点)//在节点后面添加

    父节点.insertBefore(创建的节点，被插入的节点)//在已知父节点的某个孩子前面添加内容
    改变文本内容：
    选中的元素.innerText='';//直接将HTML代码当做字符来处理
    选中的元素.innerHTML='';//可以识别HTML代码
    删除：直接设置为空（""）

    替换节点：
    父节点.replaceChild(新节点,老节点)

    克隆(复制节点)

    选中的元素.cloneNode(true/false):
    当clone参数为true的时候：选中元素里面所有懂得内容克隆
    当clone参数为false的时候：选中元素本身克隆

    删除节点：
    父节点.removeChild(子节点)

    节点的属性操作
    如何来获取属性：
        选中的元素.getAttribute("属性名")
    更改属性：
        选中的元素.setAttribute("属性名","新的属性值")
    新增属性
        选中的元素.setAttribute("原本没有的属性名","属性值")
    删除属性
        选中的元素.removeAttribute("属性名");

浏览器输出

#JavaScript 能够以不同方式“显示”数据：
1.使用 window.alert() 写入警告框
<script>
    window.alert(7 + 6);
</script>
2.使用 document.write() 写入 HTML 输出
<script>
　　document.write(7 + 6);
</script>
3.使用 innerHTML 写入 HTML 元素
<p id="demo"></p>
<script>
　　document.getElementById("demo").innerHTML = 7 + 6;
</script>
4.使用 console.log() 写入浏览器控制台
<script>
    console.log(7 + 6);
</script>

函数

1.js函数通过 function 关键词进行定义，其后是函数名和括号 (){}。

       1).函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

　　　  2).圆括号["()"]可包括由逗号分隔的参数;

　　　  3).由函数执行的代码被放置在花括号中：{}

2、函数分为：有名函数和匿名函数。

　　　 有名函数：function funct_name(参数1，参数2，参数3){　

　　　　要执行的代码
　　　}

　　　 匿名函数：function (参数1，参数2，参数3){　

　　　　要执行的代码
　　　}

3.构造函数：

　1)、在 js中，用 new 关键字来调用的函数，称为构造函数。

　2)、常用的构造函数： 
　　　　var arr = []; var arr = new Array();      

4.调用函数：

　　调用函数时【funct_name()】，一定加“()”；
　　<div class="box" onclick="funct_name()">点击</div>
   <script type="text/javascript">
    function  funct_name(){
        alert("111111");
    }
   </script>
5.自调用函数
   <div class="box2" id="box2"></div>
    <script type="text/javascript">
    (function() {
        document.getElementById("box2").innerHTML = "您好";
    })();
   </script>
6.返回函数
   <div class="box" id="box"></div>
   <script type="text/javascript">
    function funct_name(a, b) {
        return a * b;
    }
    var x = funct_name(9, 8);
    document.getElementById("box").innerHTML = x;
   </script>

js前后端交互

https://www.cnblogs.com/gengzhen/p/12356367.html

4.参考

https://blog.csdn.net/weixin_30917213/article/details/99330105?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=2