JavaScript基本使用

最新推荐文章于 2024-03-10 10:14:03 发布

昱晟168

最新推荐文章于 2024-03-10 10:14:03 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_47267628/article/details/125289910

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.JavaScript的概念及功能

概念：

一门客户端脚本语言

运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎
脚本语言，不需要编译，直接就可以被浏览器解析执行了

功能

可以来增强用户和html页面的交互过程，可以来控制 html元素，让页面有一些动态的效果，增加用户的体验。

2.JavaScript发展史：

1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C--	，后来更名为：ScriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3. 1996年，微软抄袭JavaScript开发出JScript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

JavaScript

特点如下：

JavaScript是一种脚本语言，特点是简单、易学、易用，语法规则比较松散，能够快速完成程序的编写工作

JavaScript可以跨平台，它不依赖操作系统，仅需要浏览器的支持

javaScript支持面向对象，可以使JavaScript开发变得快捷和高效，降低开发成本

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

在这里插入图片描述

JavaScript组成部分的简单介绍如下：

ECMAScript：是JavaScript的核心。它规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准

DOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作

BOM：浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作

JavaSvript代码书写的方式

JavaScript代码的3种书写位置：

行内式：是将单行或少量的JavaScript代码写在HTML标签的事件属性中

内嵌式（嵌入式）：使用<script>标签包裹JavaScript代码，<script>标签可以写在<head>或<body>标签中

外部式（外链式）：将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签进行引入，适合JavaScript代码量比较多的情况。注意外部式的<script>标签内不可以编写JavaScript代码

JavaSvript书写的注意事项

在编写JavaScript代码时，需要注意基本的语法规则：

JavaScript严格区分大小写，在编写代码时一定注意大小写的正确性

JavaScript代码对空格、换行、缩进不敏感，一条语句可以分成多行书写

如果一条语句结束后，换行书写下一条语句，后面的分号可以省略

3.ECMASript：客户端脚本语言的标准

JavaSript入门

JavaScript代码中提供了输入和输出语句，可以在网页中实现用户交互效果。

常用的输入和输出语句如下所示：

alert(msg) ：浏览器弹出警告框

console.log(msg) ：浏览器控制台输出信息

prompt(msg)：浏览器弹出输入框，用户可以输入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    alert("警告框");//浏览器弹出警告框
    console.log("我看看");//浏览器控制台输出信息
    var pr = prompt("请输入信息：");//浏览器弹出输入框，用户可以输入内容，并且返回用户输入的内容
    document.write(pr);
  </script>
</head>
<body>
</body>
</html>

基本语法：

1.与html结合方式

内部JS：定义<script>,标签体内容就是JS代码
外部JS：定义<script>通过src属性引入外部的JS文件

注意点：

<script>可以定义在html页面的任何教子无方，但是定义的位置会影响执行顺序
<script>可以定义多个

alert(msg) ：浏览器弹出警告框，并且是注射式的输出函数，就是如果不点击确定就不能执行下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    alert("hello world");
  /*  注意的是script代码可以写在html的任意位置，定义的位置不同会影响执行效果
      一个html页面可以定义多个<script>标签
      alert是注射式的函数，就是不点击确定，下面的代码就不能被执行
    */
  </script>
  <script src="js/a.js"></script>
</head>
<body>
<input type="date"/>
</body>
</html>

2.注释：

单选注释：//注释内容
多选注释：/注释内容/

3.数据类型（面试）

原始数据类型（也就是基本数据类型）
1. number:数字。整数、小数、NaN（not a number）一个不是数字的数字类型
2. string:字符串：注意在JS中字符串可以用双引号和单引号引起，JS中没有字符的概念只有字符串。如：‘aa’ “aa” “a”
3. boolean:true和false
4. null:一个对象为空的占位符（对象为空）
5. undefined:未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
引用数据类型：对象

4.变量

变量是程序在内存中申请的一块用来存放数据的空间。例如，程序在内存中保存字符串“小明”和“小张”，如下图所示。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JciclxQZ-1655253447612)(D:\Typora笔记\Spring\MySql\图片\image-20211212213856333.png)]$

Java语言是强类型语言，面JavaScript是弱类型语言

强类型语言：在申请变量存储空间时，定义了空间将来存储的数据的类型，只能存储固定类型的数据
弱类型语言：在申请变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据

语法：

分为两步：声明变量和变量赋值

声明变量

var age;//声明一个名称为age的变量（）
变量赋值

age=10;//为age变量赋值
变量初始化

var age = 18;//声明变量的同时赋值

变量的注意点：

不声明变量，直接输出变量的值，控制台会报错。

不声明变量，只进行赋值，这个变量是全局变量，同时也是JS特性。

变量的命名规范

在对变量进行命名时，需要遵循变量的命名规范，具体如下：

由字母、数字、下划线和美元符号（$）组成

严格区分大小写

不能以数字开头

不能是关键字、保留字

要尽量做到“见其名知其意”

建议遵循驼峰命名法，首字母小写，后面的单词首字母大写

  <script>
    //定义变量
    var a=168;
    var b='a';
    document.write(a+"<br>");
    document.write(b+"<br>");


    //定义number类型
    var a=1;
    var b=1.68;
    var c=NaN;
    document.writeln(a+"<br>");
    document.writeln(b+"<br>");
    document.writeln(c+"<br>");

    //定义String类型
    var str1="haikang";
    var str2='明天';
    document.writeln(str1+"<br>")
    document.writeln(str2+"<br>")


    //定义boolean类型
    var bool1=true;
    var bool2=false;

    document.writeln(bool1+"<br>")
    document.writeln(bool2+"<br>")

    //定义null和undefined
    var obj1=null;
    var obj2=undefined;
    var obj3;
    document.write(obj1+"<br>")
    document.write(obj2+"<br>")
    document.write(obj3+"<br>")
    /**
     * 返回值：说明声明变量未赋值时，则赋值为undefined
     null
     undefined
     undefined
     */
  </script>

2.用typeof运算符来判断数据类型

注意：因为typeof运算符对于null值会返回Object，这是实际上是JavaScript最初实现中的一个错误，然后被ECMAScript沿用了，现在，null被认为是对象的占位符，从而解释了这一错误，但从技术上来说，它还是原始值

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

      /*
      * 注意typeof运算符用来判断类型的数据类型的
      * */

    //定义变量
    var a=168;
    var b='a';
    document.write(a+typeof(a)+"<br>");
    document.write(b+typeof(b)+"<br>");
    /*
        168     number
        a       string
     */


    //定义number类型
    var a=1;
    var b=1.68;
    var c=NaN;
    document.writeln(a+typeof(a)+"<br>");
    document.writeln(b+typeof(b)+"<br>");
    document.writeln(c+typeof(c)+"<br>");

    /*
     1       number
     1.68    number
     NaN     number
    * */


    //定义String类型
    var str1="haikang";
    var str2='明天';
    document.writeln(str1+typeof(str1)+"<br>")
    document.writeln(str2+typeof(str2)+"<br>")

      /*
         haikang   string
         明天       string
      * */


    //定义boolean类型
    var bool1=true;
    var bool2=false;

    document.writeln(bool1+typeof(bool1)+"<br>")
    document.writeln(bool2+typeof(bool2)+"<br>")

      /*
     true        boolean
     false       boolean
      * */

    //定义null和undefined（注意的重点）
    var obj1=null;
    var obj2=undefined;
    var obj3;
    document.write(obj1+typeof(obj1)+"<br>")
    document.write(obj2+typeof(obj2)+"<br>")
    document.write(obj3+typeof(obj3)+"<br>")
    /**
     * 返回值：说明声明变量未赋值时，则赋值为undefined
     null               object(一定要注意null的数据类型返回值是Object类型的)
     undefined          undefined
     undefined           undefined
     */
  </script>
</head>
<body>
</body>
</html>

5.运算符

1.一元运算符：只有一个运算数的运算符

一元运算符：只有一个运算数的运算符

++，–，+（正号），-（负号）

++（–）：自增（自减）

++（–）：在前，说明先自增（自减），再运算

++（–）：在后，说明先运算，再自增（自减）

+（——）：正负号：

注意在：JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型转换

其他类型转为：number

1.String转Number：先按照字面值转换（字面值就是String的是数字），

如果字面值不是数字则转为NaN（不是数字的数字，任意数字与NaN运算的结果都是NaN）

2.boolean转number：true转为1，false转为0

3.null和undefined转number是NaN

  <script>
     /*
     *  一元运算符：只有一个运算数的运算符
     *     ++，--，+（正号），-（负号）
     *        ++（--）：自增（自减）
     *          ++（--）：在前，说明先自增（自减），再运算
     *          ++（--）：在后，说明先运算，再自增（自减）
     *
     *        +（——）：正负号：
     *          注意在：JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型转换
     *          其他类型转为：number
     *              1.String转Number：先按照字面值转换（字面值就是String的是数字），
     *                如果字面值不是数字则转为NaN（不是数字的数字，任意数字与NaN运算的结果都是NaN）
     *
     *              2.boolean转number：true转为1，false转为0
     *
     *              3.null和undefined转number是NaN
     * */


    //String转number
     var str1="123";
     var str2="明天";
     var num=168;

     alert(str1+num);//返回的值是：123168；进行字符串的拼接
     document.write(str2+num);//返回的值是：明天168；进行字符串的拼接

     var str1="123";
     var str2="明天";
     var num=+168;

     alert(str1+num);//返回的值是：123168；进行字符串的拼接
     document.write(str2+num);//返回的值是：明天168；进行字符串的拼接

     //     +(正号)

     var num1=+"123";
     var num2=+"明天";
     var num=168;

     alert(num1+num);//返回的值是：291
     document.write(num2+num);//返回的值是：NaN


     //Boolean转number
     var flag1 = +true;
     var flag2 = +false;

     document.write(flag1+"<br>")
     document.write(flag2+"<br>")

  </script>

2.算数运算符：+ — * / %

3.赋值运算符

= += -= 等等

4.比较运算符：返回布尔值

>	>=	<	<=	==	===(全等于)

注意：===（全等于的比较）:是不会进行类型的转换的

 <script>
    /*
    * >	>=	<	<=	==	===(全等于)
    *
    * 比较运算符：
    *     比较方式：
    *       1.类型相同，直接比较
    *           number；类型直接比较
    *           String字符串：按照字典顺序比较，按位比较，直到得出大小
    *       2.类型不同，先进行类型转换，再比较
    *
    *       3.===全等于比较:在比较之前，先判断类型，如果类型不一样，则直接返回false
    * */

    document.write((168<888)+"<br>");
    document.write((168>"888")+"<br>");//先进行类型的转换，再比较
    document.write(("168"===168));//类型不同，直接返回false

    /**
     true
     false
     false
     */

  </script>

5.逻辑运算符：

  <script>
   /*
   * 逻辑运算符：
   *
   *    && ：  与（会出现短路现象）
   *    || ：  或（会出现短路现象）
   *    ！ ：   非
   *        其它类型转为boolean:
   *           1.number:0或NaN为假，其他为真
   *           2.String：除了空字符串（"" ），其他都是true
   *           3.null和undefined：返回false
   *           4.对象：返回true，前提是对象不为空（null或undefined）
   *
   * */

   var flag = true;
   alert(!flag);//返回false

   // 1.number:0或NaN为假，其他为真
   var num1 = 0;
   var num2 = NaN;
   var num3 = 1;

   document.write(!num1+"<br>")//true
   document.write(!!num2+"<br>")//false;注意！！返回的就是本身了
   document.write(!num3+"<br>")//false


   // 2.String：除了空字符串（"" ），其他都是true

   var str1 = "";
   var str2 = "haikang";

   document.write(!str1);//true
   document.write(!str2);//false

   document.write("<hr>");


   // 3.null和undefined：返回false

   var obj1 = null;
   var obj2 = undefined;
   var obj3;

   document.write(!obj1);//true
   document.write(!obj2);//true
   document.write(!obj3);//true

   document.write("<hr>");

   // 4.对象：返回true，前提是对象不为空（null或undefined）
   var date = new Date();
   document.write(!date);//false

   //判断对象是否为null
   if(date!=null){
     alert("123");
   }
   //简写
   if(date){
     alert("123");
   }
   //判断字符串是否为空和长度
   if(str1!=null&&str1.length>0){
     alert("123");
   }
   //简写
   if(str1){
     alert("123");
   }

  </script>

5.三元运算符：

语法：
	表达式	？值1 : 值2
	判断表达式是否成立，如果成立返回值1，否则返回值2
	

  <script>
    var num1=8;
    var num2=6;
    alert(num1>num2?8:6);//返回8
  </script>

6.特殊字符

//特殊语法：
    //1.语句以;结尾，如果一行只有一条语句”;“可以省略（不建议）；说明JS的结束是以”;“和回车符为标记，但是在一行中必须要写分号
    var a=3//不建议不写分号
    alert(a)//建议不写分号

    /**
     * 变量的定义使用var关键字，也可以不使用
     * 用var关键字：定义的变量是局部变量
     * 不用var关键字：定义的变量是全局变量（不建议使用）
     */
    function fun(){
        num3 = 4;
    }
    alert(num3);
    fun();//调用函数

    // 上述的方式不建议使用
    //正确使用方式

    var b;
    function fun(){
        b=4;
    }
    fun();
    alert(b);

7.流程控制语句

1.if  else

2.seitch:
	在java中，seitch语句可以接受的数据类型：byte,int,shor,char,枚举（1.5），String（1.7）
	
	在JS中，switch语句可以接受任意的原始数据类型
	
3.while

4.do...while

5.for



  <style>
    td {
      border : 1px solid;
    }
  </style>
  <script>
    var values = prompt();
    values=1;
    switch (values){
      case 1: document.write("number");
      break;
      case "string":document.write("string") ;
      break;
      case true:document.write("boolean") ;
      break;
      case null:document.write("null") ;
      break;
      case undefined : document.write("undefined") ;
      break;
    }

    //求1到100的和
    var num=1;
    var sum=0;
    while (num<=100){
      sum+=num;
      num++;
    }

    alert(sum);

    //求1到100
    var num1=1;
    var sum1=0;
    for (var i=1;i<=100;i++){
      sum1+=num1;
      num1++;
    }
    document.write(sum1);
    document.writeln("<br>");

    //九九乘法表
    document.writeln("<table align='center'>");

    for (var i=1;i<=9;i++){
      document.writeln("<tr>");
      for (var j=1;j<=i;j++){

        document.writeln("<td>");

        document.write(i+'*'+j+"="+(i*j)+"&nbsp;&nbsp;&nbsp;");

        document.writeln("</td>");
      }
      document.writeln("</tr>");
      // document.write("<br>");
    }
    document.writeln("</table>");
  </script>

基本对象：

Function：函数（方法）对象

创建
1. var fun = new Function(形式参数列表，方法体)；//了解
2. function 方法名称（形式参数列表）{方法体}//掌握
3. var 方法名=function(形式参数列表){方法体}//掌握
方法
属性

length:代表参数的个数
特点
1. 方法定义是形参的类型不用写，返回值类型也不用写
2. 方法是一个对象，如果定义名称相同的方法，会覆盖以前定义的
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（其实是一个数组），arguments,封闭所有的实际参数
调用
1. 方法名称（实际参数列表）

 <script>
    /*
    创建对象的三种方式
    1. var  方法名 = new Function(形式参数列表，方法体)；//了解
    2. function  方法名称（形式参数列表）{方法体}//掌握
    3. var 方法名=function(形式参数列表){方法体}//掌握
    */

    //var  方法名 = new Function(形式参数列表，方法体)；//了解
    var fun1 = new Function("a","b","alert(a);");
    fun1(3,4);//调用函数

    //2. Function  方法名称（形式参数列表）{方法体}//掌握
    function fun2(a,b){
        alert(a+b);
    }
    fun2(3,3);//调用函数

    //3. var 方法名=function(形式参数列表){方法体}//掌握
    var fun3 = function (a,b){
        alert(a+b);
    }
    fun3(5,3);//调用函数

    //3.属性length；代表参数的个数
    function fun4(a,b,c){
        // document.write(fun4.length);//查看参数的个数
    }
    fun4(1,2,5);

    //在JS中，方法的调用只与方法的名称有关，和参数列表无关
    function fun5(a,b){
        alert(a+b);
    }
    fun5(1,2,3);//在方法名中参数只有两个，传入的参数却是3个，说明与传入参数列表无关，只与方法名有关

    /**
     *  在方法声明中有一个隐藏的内置对象（其实是一个数组），arguments,封闭所有的实际参数
     *  如：求任意数的和
     */
    var sum = 0;
    function fun6(){
        for (let i = 0; i < arguments.length; i++) {
            sum+=arguments[i];
        }
        return sum;
    }
    fun6(1,2,3,5);
    document.write(sum)

  </script>

Array对象

创建
1. var arr = new Array(元素列表);
2. var arr = new Array(长度);
3. var arr = [元素列表];
方法

toString() 将数组转换为字符串，并返回结果

sort() 对数组的元素进行排序。

pop() 删除数组的最后一个元素，并返回该元素。
push() 将新元素添加到数组的末尾，并返回新的长度

join(参数) 将数组的所有元素连接成一个字符串。参数是指定分隔符的，默认是”，“
属性

length：数组中的长度
特点
1. JS中，数组元素的类型可变的
2. JS中，数组长度可变的

pop()	删除数组的最后一个元素，并返回该元素。
push()	将新元素添加到数组的末尾，并返回新的长度

 <script>
    /**
     * 创建
     1. var arr = new Array(元素列表);
     2. var arr = new Array(长度);
     3. var arr = [元素列表];
     */

    //方式一
    var arr1 = new Array(1,2,3);
    document.write(arr1);

    //方式二
    var arr2 = new Array(5);//注意当传入一个参数时，是指定数组的长度
    document.write(arr2);

    //方式三
    var arr3 = [1,2,3,5];
    document.write(arr3);

    //length：数组中的长度
    alert(arr3.length);

    /**
     * 特点
     1. JS中，数组元素的类型可变的
     2. JS中，数组长度可变的
     */

    var arr4 = Array(1,"a",true,null,undefined);
    document.write(arr4);
    document.write(arr4[6]);
  </script>

3.Date对象

  <script>
    /**
     * Date：日期对象
     *    1.创建
     *      var date = new Date();
     *
     *    2.方法：
     *      toLocaleString();返回当前date对象对应的时间本地字符串格式
     *      getTime()；获取毫秒值，返回当前日期对象描述的时间到1970年1月1日零点的毫秒值
     */
    //创建
    var date = new Date();
    document.write(date+"<br>");
    document.write(date.toLocaleDateString()+"<br>");
    document.write(date.toLocaleString()+"<br>");
    document.write(date.getTime());//获取毫秒值
  </script>

4.Math对象

  <script>

    /**
     * Math：数学对象
     *  1.创建：不需要创建直接Math.方法名()；使用
     *
     *  2.方法：
     *     random()	返回 0 到 1 之间的随机数。
     *     floor(x)	返回 x，向下舍入为最接近的整数。
     *     ceil(x)	返回 x，向上舍入为最接近的整数。
     * /

    /**
     * 需求：产生1到100的随机数
     */

     var sum = Math.floor((Math.random()*100))+1;
     // alert(sum);

    /**
     * 猜数字游戏：使用程序产生一个1到100的数字;给用户10次机会，输入数字进行猜算
     */
    var sum1 = Math.floor(Math.random()*100)+1;
    for (let i = 0; i < 10; i++) {
      var num=prompt("猜数字，范围是1到100：");
      if (sum1>num){
        alert("你猜小了");
      }else if (sum1<num){
        alert("你猜大了");
      }else if (sum1=num){
        alert("恭喜你猜对了");
        break;
      }
      else {
        alert("你都猜错了");
      }
    }

  </script>

5.RegExp

1.正则表达式的规则：

1.正则表达式的规则：
	1.单个字符
	 [abc] a,b或c (简单类)
	 [^abc] 任何字符；除了a,b或c (否定)
	 [a-zA-Z] a到z 或A到Z；两头的字母包括在内(范围)
	 [a-d[m-p]] a到d或m到p:[a-dm-p](并集)
	 [a-z&&[def]] d,e或f(交集)
	 [a-z&&[^bc]] a到z，除了b和c:[ad-z](减去)
	 [a-z&&[^m-p]] a到，而非m到p:[a-lq-z](减去)

	
	 1.  .是任何字符（与行结束符可能匹配也可能不匹配
	 2.  \d 数字 :[0-9]
	 3.  \D 非数字 [^0-9]
	 4.  \s 空白字符 [\t\n\x0B\f\r]
	 5.  \S 非空白字符 [^\s]
	 6.  \w 单词字符 [a-zA-Z_0-9](注意是：包括下划线”_”)
	 7.  \W 非单词字符 [^\w]


	2.Greedy 数量词
	 X? X,一次或一次也没有
	 X* X,零次或多次
	 X+ X,一次或多次
	 X{n} X,恰好n次
	 X{n,} X,至少n次
	 X{n,m} X,至少n次,但是不超过m次
	 
	 
	3.开头和结束
	 ^：开头
	 $：结束

2.正则表达式对象

1.对象创建

1.正则表达式创建

	var  reg = new RegExp(正则表达式);
	var  reg = /正则表达式/;

2.方法

compile	编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。

<script>
    //正则表达式对象的创建的两种方法
    var reg1 = new RegExp("\\w{6,15}");//\w的范围是：[a-zA-Z0-9];注意要写\\，因为在字符串中一个代表是\转义
    var reg2 = /^1[3578]{2}\d{8}/;
    // alert(reg1);
    // alert(reg2);

    //test()：方法是来检验正则表达式是否符合规则的
    var flog = reg1.test("明天");
    alert(flog);
    var flog2 =  reg2.test("138168168168");
    alert(flog2);
  </script>

6.Global对象（重点）

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名()

方法：

函数	描述
decodeURI()	解码 URI。
decodeURIComponent()	解码 URI 组件。功能更加强大
encodeURI()	对 URI 进行编码。
encodeURIComponent()	对 URI 组件进行编码。功能更加强大

Number()	将对象的值转换为数字。
parseFloat()	解析字符串并返回浮点数。
parseInt()	解析字符串并返回整数。
String()	将对象的值转换为字符串。

eval()	评估字符串并像脚本代码一样执行它。
isFinite()	确定值是否是有限的合法数。
isNaN()	确定值是否是非法数字。

  <script>
    /**方法
     * encodeURL():进行编码
     * decodeURL():进行解码
     *
     * encodeURLComponent():进行编码，功能更加强大
     * decodeURLComponent():进行解码，功能更加强大
     *
     *
     * parseInt():将字符串转为数字
     *  进行一个一个字符判断是否是数字，直到不是数字为止，将前面的数字部分转成number类型，
     *  如果开始就没有数字，直接返回NaN，NaN与任意数字操作还是NaN
     *
     *
     * isNaN()：判断一个值是否是NaN
     *  NaN是一个六亲不认的，连自己都不认，NaN参与的==比较全部是返回false，所有就需要使用到isNaN方法
     *
     *
     * eval()：将JavaScript字符串，并把它作为脚本代码来执行
     */

    var encode = encodeURI("明天");
    document.write(encode);//%E6%9C%88%E6%98%8E,说明是utf-8编码，两个汉字占六个字节
    // var decode = decodeURI(encode);
    // alert(decode);

    var encode1 = encodeURIComponent("明天");
    document.write(encode1);//%E6%9C%88%E6%98%8E,说明是utf-8编码，两个汉字占六个字节
    var decode1 = decodeURIComponent(encode1);
    alert(decode1);

    /**
     * parseInt():将字符串转为数字
     *  进行一个一个字符判断是否是数字，直到不是数字为止，将前面的数字部分转成number类型，
     *  如果开始就没有数字，直接返回NaN，NaN与任意数字操作还是NaN
     */
    var str = "123abc";
    var num = parseInt(str);
    document.writeln((num+1));//返回124

    var str1 = "a122abc";
    var num1 =parseInt(str1);
    alert(num1+1);//因为“a123abc”不是数字所有是NaN,NaN与任意数字进行操作还是NaN,返回NaN


    /**
     * isNaN()：判断一个值是否是NaN
     *  NaN是一个六亲不认的，连自己都不认，NaN参与的==比较全部是返回false，所有就需要使用到isNaN方法
     */
    var number1 = 123;
    var number2 = NaN;
    document.writeln(number1==NaN);//返回false
    document.writeln(number2==NaN);//返回false

    //所以要判断是否是NaN要乃至isNaN()方法
    document.writeln(isNaN(number1));//false
    document.writeln(isNaN(number2));//true


    //eval()：将JavaScript字符串，并把它作为脚本代码来执行
    var string = "alert('明天你好：')";
    eval(string);

  </script>

注意：gbk编码每个汉字占两个字节

utf-8编码每个汉字占三个字节

BOM

概念：Browser Object Model 浏览器对象模型

组成：

Window：窗口对象(重要点)

Navigator：浏览器对象

Screen：显示器屏幕对象

History：历史记录对象

Location：地址栏对象

Window：窗口对象

1.与弹出框有关的方法

alert()	显示带有一段消息和一个确认按钮的警告框。

confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框，关闭返回true，取消返回false

prompt()	显示可提示用户输入的对话框。

2.与打开关闭有关的方法

open()	打开一个新的浏览器窗口或查找一个已命名的窗口，调用完成后返回一个新的window对象

close()	关闭浏览器窗口,谁调用该方法就关闭谁。

3.定时器有两组方法

setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式，有两个参数，一个是代码，另一个是毫秒值
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

clearInterval()	取消由 setInterval() 设置的 timeout。d
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

<button  id="openBtn">打开新的窗口</button>
<button  id="closeBtn">关闭新的窗口</button>
<script>
  /*
  * window窗口：
  *   1.创建
  *
  *   2.方法：
  *       1.与弹出框有关的方法
  *           alert()  ：显示带有一段消息和一个确认按钮的警告框
  *           confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
  *               如果用户点击确定按钮，则方法返回true
  *               如果用户点击取消按钮，则方法返回false
  *           prompt()：显示可以提示用户输入的对话框
  *               返回值：获取用户输入的植
  *
  *
  *        2.与打开关闭有关的方法
  *            open()：打开一个新浏览器窗口
  *                 返回一个新window对象
  *             close()：关闭浏览器窗口，特点是谁调用关谁
  *
  *        3.与定时器有关的方式
  *             setTimeOut()：指定的毫秒值后调用函数或计算表达式;只会执行一次
  *                 参数：
  *                         1.JS代码或者方法对象
  *                         2.毫秒值
  *              clearTimeOut()：取消由setTimeOut()方法设置的timeout
  *
  *             setInterval()：按照指定的周期（以毫秒计算）来调用函数或计算表达式
  *                 参数：
  *                         1.JS代码或者方法对象
  *                         2.毫秒值
  *
  *                clearInterval()	取消由 setInterval() 设置的 timeout。
  *
  *
  *    3.属性
  *
  *    4.特点：
  *         window对象不需要创建可以直接window使用，widow方法名();
  *         window引用可以省略，方法名()
  * */

  /**
   *
   * 特点：
   * window对象不需要创建可以直接window使用，widow方法名();
   * window引用可以省略，方法名()
   */

  alert("可以省略window引用，直接方法名调用");
  window.alert("使用window引用调用方法");


  //confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
  var b = confirm("请你输入想好了");
  document.writeln(b);

  //prompt()：显示可以提示用户输入的对话框

  var username = prompt("请你输入用户名");
  document.write(username);


  /**
   * open()：打开一个新浏览器窗口
   *    返回一个新window对象
   *
   * close()：关闭浏览器窗口，
   *    特点是谁调用关谁
   *
   */

  var newWindow;

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

  openBtn.onclick=function fun(){
      newWindow = open("https://www.w3school.com.cn/");
  }

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

  closeBtn.onclick=function fun(){
      newWindow.close();
  }

</script>

轮播图的练习：

<body>
    <img src="img/banner_1.jpg" width="100%" id="ban1"/>
<script>

    /**
     *  分析：
     *      1.在页面上使用img标签展示图片
     *      2.定义一个方法，修改图片对象的src属性
     *      3.定义一个定时器，每隔3秒调用方法一次
     */

    var ban1 = document.getElementById("ban1");
    var flag = 1;

    function fun(){
        if (flag==1){
            ban1.src="img/banner_1.jpg";
            flag=2;
        }else if (flag==2){
            ban1.src="img/banner_2.jpg";
            flag=3;
        }else {
            ban1.src="img/banner_3.jpg";
            flag=1;
        }
    }

    setInterval(fun,3000);

</script>

DOM

DOM功能：控制html文档的内容

代码：获取页面标签（元素）对象，Element

document.getElementById("Id值");//通过元素的id获取元素对象

操作Element对象：

修改属性值：
1. 明确获取的对象是哪个
2. 查看API文档，找到其中的哪些属性可以设置
修改标签体内容：innerHTML

<body>
<!--
    一定注意：Html与Script代码的顺序关系

    DOM入门：
    代码：document.getElementById("ID值");
    操作对象：
       修改属性值：
           1.明确获取的对象是哪个一个？
           2.查看API文档，找到其中的哪些属性可以设置
       修改标签体内容：
            属性：innerHTML
-->

    <img src="img/on.gif" id="img"/>

    <h1 id="haikang">您好：海康！</h1>

    <script>
        /**
         * 修改属性值
         *      1.明确获取的对象是哪个一个？
         *      2.查看API文档，找到其中的哪些属性可以设置
         */

        //1.明确获取的对象是哪个一个？
        var myImg = document.getElementById("img");

        alert("我要改变图片了：");

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

        /**
         * 修改标签体内容：
         *   属性：innerHTML
         */

        var haikang = document.getElementById("haikang");
        alert("我要改变内容了");
        haikang.innerHTML="我的家！";
    </script>

1.事件（重要点）

功能：某些组件被执行了某些操作后，触发某些代码的执行。

如何绑定事件

直接在html标签上，指定事件的属性（操作），属性就是JS代码
通过JS获取元素对象，指定事件属性，设置一个函数

鼠标事件	事件说明
onclick	鼠标单击时触发此事件
ondblclick	鼠标双击时触发此事件
onmousedown	鼠标按下时触发此事件
onmouseup	鼠标弹起时触发此事件
onmouseover	鼠标移动到某个设置了此事件的元素上时触发此事件
onmousemove	鼠标移动时触发此事件
onmouseout	鼠标从某个设置了此事件的元素上离开时触发此事件

<!--绑定点击事件的方式一：与html没有解耦合-->

<img src="img/off.gif" id="myImg" onclick="alert('看看了');">

<!--方式二-->
<img src="img/rose.jpg" id="myRose" width="200px" height="200px">

<img src="img/on.gif" id="myON"/>

<script>
  /*
  * 通过ID获取img对象
  * */
  var rose = document.getElementById("myRose");
  rose.onclick=function  fun() {
    alert("我是rose");
  }


  var myON = document.getElementById("myON");
  function fun2(a,b){
      alert("ON");
      // document.writeln(a+b);
  }
  myON.onclick=fun2(1,2);//注意这种方式打开页面时就调用完成函数的调用
  myON.onclick=fun2;//这种方式是点击才调用函数
</script>

事件的练习关灯泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="img/off.gif" id="off"/>

<script>
  //获取图片对象
  var myId = document.getElementById("off");

  //绑定点击事件
  // var onclick = myId.onclick;

  //定义标记：flag=1是开，反之是关
  var flag=0;

  myId.onclick=function fun(){
    // myId.src="img/off.gif";
    if (flag==0){
      myId.src="img/on.gif";
      // alert(111)
      flag=1;
    }

    else {
      // document.writeln(flag);
      myId.src="img/off.gif";
      // alert(222)
      flag=0;
    }
    // document.writeln(flag)
  }


</script>
</body>
</html>

单词：

script：脚本剧本

alert：警告

console：安慰慰问

srcipt的基本数据类型

number：数字

String：字符串

boolean：布尔值

null：空

undefined：未阐明的未限定的

document：文档文件

solid：实线实心

Communications link failure ：通信失败

Communications：通信交流

failure：失败

function：功能函数因变量宴会;

sort：种类排序

time：时间

random：随机任意

floor：地面

ceil：天花板

RegExp：正则表达式

Greedy：量词

global：全球

decode：解码

encode：编码

component：成分组成部分

parse：语法分析

eval：评价

DOM

element:元素

document.getElementById(“Id值”);

inner：内容

innerHTML：修改标签内容

event:事件

BOM

window对象中的方法：

alert:警告
confirm：证实确认
prompt：敏捷的迅速的立刻的准时的
open:打开
close：关闭
interval：间隔
timeout：超时

onload：装载

昱晟168

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JavaScript基本使用

概念：一门客户端脚本语言功能可以来增强用户和html页面的交互过程，可以来控制 html元素，让页面有一些动态的效果，增加用户的体验。JavaScript特点如下：JavaScript是一种脚本语言，特点是简单、易学、易用，语法规则比较松散，能够快速完成程序的编写工作JavaScript可以跨平台，它不依赖操作系统，仅需要浏览器的支持javaScript支持面向对象，可以使JavaScript开发变得快捷和高效，降低开发成本JavaScript = ECMAScript + JavaScript自己特有的
复制链接

扫一扫