zoukankan      html  css  js  c++  java
  • 原生js基础入门

    一、基础语法

    1、js语法嵌入页面的方式

    HTML中的脚本必须位于标签之间,脚本可放置在body和head中

    1.行间事件(主要用于事件)

    <input type="button" value="按钮" onclick="alert('被点击了')">
    

    2.页面script标签

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("box1").style.background = "red"
        }
    </script>
    

    3.外部引入

    <script type="text/javascript" src="js/main.js"></script>
    

    2、注释

    我们可以添加注释对js进行解释,或者提高代码的可读性

    • 单行注释://
    • 多行注释:/* */

    3、变量

    变量命名

    • 变量可以使用端名称(比如x和y)也可以使用描述性更好的名称(age,name,sum)
    • 变量必须以字幕开头
    • 变量也能以$和_开头(不推荐)
    • 变量名称对大小写严格区别

    声明变量:var

    • js中可以变量可以先声明在赋值
    • 也可以在声明的时候赋值
    • 也可以同时声明多个或者多都赋值
    • 声明未赋值会打印:undefined(区别于null)
    var name; //声明不赋值
    var age = 18; //声明时赋值
    var id = 1, text = "js基础" // 同时声明多个
    

    4、数类类型

    字符串、数字、布尔、Null、undifined、数组

    js也是一门弱类型语言,类似于python,所以定义变量时也不需要声明类型

    number:数字类型

    • var y = 3;

    string 字符串类型

    • var str = "javascript";

    boolean 布尔类型

    • var status =true or false;

    undefined 类型:只定义没赋值

    • var status;

    null 类型:类似python中的None

    • var status = null;

    arry 数组类型

    • 数组类似python中的list,也可以通过下表取值
    • length属性:获取数组的长度:
    • pop():删除最后一个值,并返回和pyhton一样
    • push(): 像数组最后添加一个元素,类似python中的append
    // 执行代码
    //创建数组 Array
    var data_array = Array("html", "css", "js");
    //一样可以通过下标取值,可以for遍历得到下标
    console.log(data_array[0]);
    //通过length获取数组长度
    console.log(data_array.length);
    //pop()方法从数组删除最后一个元素并返回,和python中一样
    data_array.pop();
    console.log("删除之后:", data_array);
    //push 方法把元素添加到数组最后一个位置
    data_array.push("javascript");
    console.log("添加之后:", data_array)
    

    5、运算符

    • 算数运算符:++ 、-- 、** 、// 、%
    • 赋值运算符:=、+=、*=、/=、%=
    • 条件运算符: == 、=== 、> 、>= 、< 、<= 、!=(不管类型,只管值) 、!==(值和类型必须都不等)
    • 逻辑运算符:&&(且)、||(或)、!(否)

    6、条件语句

    通过条件来控制程序的走向、就需要用到条件语句/

    1、if语句:if(条件){逻辑}

    2、else if语句:else if(条件){逻辑}

    3、else语句:else{逻辑}

    var age = 19;
    if (age > 18) {
        console.log("大于18")
    } else if (age === 18) {
        console.log("等于18")
    }else {
        console.log("小于18")
    }
    

    4、switch语句

    switch(表达式){
        case n1:
            代码块
            break;
        case n2:
            代码块
            break;
        case n3:
            代码块
            break;
        default:
            默认代码块
    }
    
    • 计算一次switch表达式
    • 把表达式的值与每个case的值进行对比
    • 如果存在匹配,则执行关联代码
    • 遇到break关键词,会跳出switch语句
    • case匹配都不存在时,会执行default的代码
    • 案例:
    var a = 5, b = 7;
    switch (b-a) {
        case 6:
            console.log("等于6");
            break;
        case 7:
            console.log("等于7");
            break;
        default:
            console.log("不等于6 7 ")
    }
    

    7、函数

    定义函数的关键词function,函数内的代码块、包裹在花括号中:

    // 定义函数:关键字+函数名+参数+{代码块},
    // 细节和python一样:
    // 1、参数定义和形式
    // 2、return 返回值
    function func(param1, param2 = 3) {
        console.log(param1);
        console.log(param2);
        return param1 + param2
    }
    // 调用
    var sum = func(55);
    console.log(sum)
    

    8、对象

    创建对象:对象用花括号分割,在括号内部,类似python中字典, 也时key:value形式,value接收任意类型数据,包括函数

    1、创建方式一:

    // new Object 初始化一个字典
    // 然后可以像python中一样添加键值对
    obj_1 = new Object();
    obj_1["name"] = "张三";
    console.log(obj_1)
    
    

    2、创建方式二:

    直接定义变量接收花括号{}

    // 对象中可以接收任意类型,包括函数,
    // 跟python字段非常相似。
    // js中的key 可以不不加引号。
    // 操作属性,可以和python中一样用[],也可以直接点出来,而python是get()方法
    var obj_2 = {
        name: "李四",
        age: 16,
        gender: "男",
        sum: function (var1) {
            console.log(var1+12)
        }
    };
    // 调用
    console.log(obj_2.sum(20))
    

    9、 循环

    主要分为三种: while(条件)、for(语句1,语句2,语句3)、 for (i in iteration)==遍历

    1、while循环

    和python基本一样,基本不用。for更省代码

    while(条件语句){
        循环体
    }
    

    案例循环打印1-5

    var a = 1;
    while (a<=5){
        console.log(a);
        a++;
    }
    

    2、for循环

    一般都用for循环来取代while循环

    for(语句1,语句2,语句3){
        循环题
    }
    
    • 语句1:在循环开始之前执行
    • 语句2:循环条件,成立则执行循环体
    • 语句3:每一轮循环执行之后执行的语句

    案例循环打印1-5

    // 注意三个语句要用分号分割,不是逗号
    for (i = 1; i <= 5; i++) {
        console.log(i)
    }
    

    3、for遍历

    for(i in Array("a","b","c"){
        循环体
    }
    
    • 遍历和python中的遍历一样
    • 需要注意的是遍历数组,遍历出来的 i 不是元素,是元素的下标, 一样可以根据下标取值
    • 遍历对象,遍历出来的是属性,可以通过[属性]获取值,但是不能点属性出来,因为遍历出来的是字符串
     // 遍历数组
    var list_data = Array("a","b","c");
    for (i in list_data){
        console.log(i);   // 下标
        console.log(list_data[i])
    }
    
    
    
    // 遍历对象
    var obj_2 = {
        name: "李四",
        age: 16,
        gender: "男",
        sum: function (var1) {
            console.log(var1 + 12)
        }
    };
    for (i in obj_2){
        console.log(i); // 属性,也就是key
        // console.log(obj_2.i)  不能点i了
        console.log(obj_2[i])
    }
    

    二、js页面操作

    1、DOM简介

    通过HTML DOM,js可访问HTML文档的所有元素

    当页面子被加载时,游览器会创建页面的文档对象模型(Document Object Model)

    HTML DOM 模型会呗构造成树结构

    节点树中的节点彼此拥有层级关系

    • 父(parent)、子(chidren)、同胞(sibliing)、等术语用于描述这些关系,父节点拥有子节点,同级节点称为同胞或兄弟姐妹

    通过可编程的对象模型,js获得了足够的能力来动态创建HTML

    • 如何改变HTML元素的内容(innerHTML)
    • 如何改变HTML元素的css样式(style)
    • 如何添加或删除HTML元素
    • 如何对HTML DOM事件做处反应

    2、获取页面标签

    1、获取标签的方式

    通常通过javascript操作HTML元素,可以使用内置对象document的提供的三种方法找到该标签

    // 1、通过id属性
    document.getElementById("id")
    
    // 2、通过标签名
    // 返回的时一个数组
    document.getElementsByTagName("div")
    
    // 3、通过类属性名称
    // 返回一个数组
    document.getElementsByClassName("class")
    

    2、获取标签注意的问题

    当我们在head标签中 或 js文件中 直接写js代码获取页面元素时,会报错元素不存在

    是因为,代码是从上往下执行的,加载js代码时,html还没加载,导致无法找到元素

    解决办法

    方法一:把js代码带在body标签 元素最后面,这样元素加载完,在执行代码就能找到元素了

    方法二:js代码加入 window.onliad = function(){} js代码放在函数内,这样就会等html页面加载完在执行js

    // 加入windos.onload 就会等页面加载完在执行js
    window.onload = function () {
        document.getElementById("box1").style.background="red";
    };
    

    3、操作标签内容---子集

    • innerHTML 属性
      • 获取元素的子集的最简单的方法时使用innerHTML属性,innerHTML属性对与获取或替换HTML元素的内容很有用
    • 读取节点文子集
    
    <div id="box3">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    
    # 读取的是整体ul,只有文本时,就等于文本读取
    window.onload = function () {
        console.log(document.getElementById("box3").innerHTML)
    };
    
    • 写入节点文本
    // 注意会把元素子节点先清空在赋值
    window.onload = function () {
        document.getElementById("box3").innerHTML="box33333333333";
    };
    
    • 仅获取元素下文本或子元素文本- innerText
    window.onload = function () {
        console.log(document.getElementById("box3").innerTEXT)
    };
    

    4、修改标签属性

    • 操作属性的方法

      • element.属性名 = "属性值" ;
    • 案例-修改input type属性值

    //html 
    输入框:<input type="text" name="user" id="user">
    
    // js 修改type为 button
    document.getElementById("user").type = "button";
    document.getElementById("user").value = "按钮";
    

    5、事件操作

    主要就是触发鼠标事件后的一系列捕捉,及捕捉后的操作,后面学到jquery操作这些更加方便简单,原生js仅稍微介绍一下。。。

    //html
    <div id="box2" >box2</div>
    
    // click, 程序自动触发click事件,操作元素更换背景颜色,
    // 不能接收回调函数
    ele = document.getElementById("box2");
        ele.click(
            ele.style.background = "red",
            console.log("自动化触发变更颜色")
        );
    
    //onclick 程序没有自动触发,激发点击事件时触发
    // 可以接收回调函数
    ele.onclick = function () {
        this.style.background = "cyan";
        console.log("主动点击变色")
    }
    
  • 相关阅读:
    RE
    【LeetCode】198. House Robber
    【LeetCode】053. Maximum Subarray
    【LeetCode】152. Maximum Product Subarray
    【LeetCode】238.Product of Array Except Self
    【LeetCode】042 Trapping Rain Water
    【LeetCode】011 Container With Most Water
    【LeetCode】004. Median of Two Sorted Arrays
    【LeetCode】454 4Sum II
    【LeetCode】259 3Sum Smaller
  • 原文地址:https://www.cnblogs.com/jiangmingbai/p/12986474.html
Copyright © 2011-2022 走看看