JavaScript入门

JavaScript

JavaScript入门_第1张图片

引入方式

JavaScript入门_第2张图片
JavaScript入门_第3张图片

基础语法

JavaScript入门_第4张图片

JavaScript入门_第5张图片

变量

JavaScript入门_第6张图片
和java区别不大

  • 特点:
    • var是全局变量
    • 可以重复定义
      JavaScript入门_第7张图片
      image.png

数据类型、运算符、流程控制符

JavaScript入门_第8张图片

image.png

JavaScript入门_第9张图片

= = = 和 = = 的区别 : = = 会类型转换而 = = = 不会 === 和 ==的区别: ==会类型转换而===不会 =====的区别:==会类型转换而===不会

JavaScript入门_第10张图片

  • 字符串转换为数字:parseInt

JavaScript入门_第11张图片

Js函数

JavaScript入门_第12张图片

  • 第一种创建函数的方式
    JavaScript入门_第13张图片

JavaScript入门_第14张图片

  • 第二种创建函数的方式 JavaScript入门_第15张图片

Js对象

JavaScript入门_第16张图片

Array

JavaScript入门_第17张图片

JavaScript入门_第18张图片

foreach() 和 for循环的区别:
前者是遍历数组中存在的元素
for是遍历数组所有的元素

特点:

  • array是可以在任意位置直接插入值的
    JavaScript入门_第19张图片

  • splice:从哪个位置开始删除,删几个元素

arr1.splice(0, 2)

JavaScript入门_第20张图片

String

JavaScript入门_第21张图片

JavaScript入门_第22张图片

trim:
JavaScript入门_第23张图片

image.png

Json

JavaScript入门_第24张图片

JavaScript入门_第25张图片

JavaScript入门_第26张图片

JavaScript入门_第27张图片

BOM

JavaScript入门_第28张图片

JavaScript入门_第29张图片

JavaScript入门_第30张图片

JavaScript入门_第31张图片

DOM

JavaScript入门_第32张图片

JavaScript入门_第33张图片

JavaScript入门_第34张图片

JavaScript入门_第35张图片

核心内容:获取html标签中的内容,对内容进行操作

js事件监听

JavaScript入门_第36张图片
JavaScript入门_第37张图片

JavaScript入门_第38张图片

JavaScript入门_第39张图片

DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Documenttitle>

head>

<body>

    <img src="../img/off.gif" id="light">

    <br>

    <br>

    <button type="button" name="lighton" onclick="lightButton()">

        

    button>

    <button type="button" name="lightoff" onclick="extinguish()">

        熄灭

    button>

<br>

    <input type="text" id="textname" value="ITCAST" onfocus="of()" onblur="ob()">

<br>

<br>

    <input type="checkbox" name="hobby">film

    <input type="checkbox" name="hobby">travel

    <input type="checkbox" name="hobby">game

    <br>

    <br>

    <button type="button"  onclick="choose()">

        ☑️

    button>

    <button type="button"  onclick="nochoose()">button>

body>

html>

  
  

<script>

    var light = document.getElementById("light");

    var bs = document.getElementsByName("hobby");

    var input = document.getElementById("textname")

    console.log(input.value)

    function lightButton(){

        light.src = "../img/on.gif";

    }

  

    function extinguish(){

        light.src = "../img/off.gif";

    }

  

    function choose(){

        for (let i = 0; i < bs.length; i++) {

            bs[i].checked = true;

        }

    }

  

    function nochoose(){

        for (let i = 0; i < bs.length; i++) {

            bs[i].checked = false;

        }

    }

  

    function of(){ //大写

        var input = document.getElementById("textname")

        input.value = input.value.toLowerCase();

    }

  

    function ob(){ //大写

        var input = document.getElementById("textname")

        input.value = input.value.toUpperCase();

    }

script>

你可能感兴趣的:(javascript,java,开发语言)