JS周结 day0817

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量886 收藏 8
点赞数 26
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75555400/article/details/141279799
版权

ok了家人们，今天这周学习了JavaScript，我们一起看一下吧

一.JavaScript概述

1.1 应用场景

JavaScript 用来做前端页面校验
JavaScript 可以实现网页的一些动画效果，例如：轮播图

1.2 JavaScript介绍

  1. JavaScript 是一门跨平台、基于对象的脚本语言，来控制网页行
    为的，它能使网页可交互。
  2. JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但
    是基础语法类似。
  3. JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于
    1997 年成为 ECMA 标准。
  4. ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015年)。
  5. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
    JavaScript 语言不需要编译，直接由各大浏览器解析运行。学习
    JavaScript 语言不需要单独安装软件，只需要浏览器即可。
        

1.3 JavaScript特点

脚本语言
浏览器分成两部分：渲染引擎和 JS 引擎。渲染引擎 : 用来解析 HTML 和
CSS, 俗称内核，例如 chrome 浏览器的 blink 。 JS 引擎：也称为 JS 解释
器。用来读取网页中的 JS 代码，对其处理后运行，例如 chrome 浏览
器的 V8 。浏览器本身并不会执行 JS 代码，而是通过内置 JavaScript 引
擎 ( 解释器 ) 来执行 JS 代码。 JS 引擎执行执行代码时逐行解释每一行源
码 ( 转换为机器语言 ) ，然后由计算机去执行，所以 JavaScript 语言归
为脚本语言，会逐行解释执行。
弱类型
JavaScript 中也有明确的数据类型，但是声明一个变量后它可以接收
任何类型的数据，并且会在程序执行过程中根据上下文自动转换类
型。

1.4 JavaScript的组成

二.JavaScript引入方式

2.1 内部脚本

  1. 将 JS代码定义在HTML页面中，JavaScript 代码必须位于 标签之间。
  2. 在 HTML 文档中可以在任意地方，放置任意数量的。
  3. 一般把脚本置于 元素的底部，可改善显示速度，因为脚本执行
    会拖慢显示。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    //第一种输出方式:弹出警告框
    alert("嘿嘿");
    //第二种输出方式:输出到页面上
    document.write("哈哈");
    //第三种输出方式:输出到浏览器到控制台上
    console.log("蚂蚁雅黑");
    </script>
</body>
</html>

2.2 外部脚本

  1. 将 JS 代码定义在外部 JS 文件中，通过标签引入到 HTML 页面中
  2. 标签要么用于定义内部脚本，要么用于引入外部js文件，不能混
    用
  3. 标签 不能自闭合 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    alert("嘿嘿");
</script>
<script src="js/demo01.js"></script>
</html>
//js文件代码

alert("哈哈");

三.JavaScript基础语法

3.1 JavaScript的书写语法

  • 区分大小写
  • 每行结尾的分号可有可无
  • 注释：单行注释：// 注释内容，多行注释：/* 注释内容 */

3.2 JavaScript的三种输出方式

  • 弹出警告框： window.alert("hello JS ~");

  • 输出数据到页面： document.write("hello JS ~");
  • 输出到浏览器控制台：console.log("hello JS ~");

 <script>
    //第一种输出方式:弹出警告框
    alert("嘿嘿");
    //第二种输出方式:输出到页面上
    document.write("哈哈");
    //第三种输出方式:输出到浏览器到控制台上
    console.log("蚂蚁雅黑");
    </script>

3.3 JavaScript定义变量

  • JavaScript 中用 var 关键字（variable 的缩写）来声明变量
  • JavaScript 是一门弱类型语言，变量可以存放不同类型的值
  • ES 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是 所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明
  • ES6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。 
  <script>
        //使用var关键字定义变量
        var a = 10;
        console.log(a);
        a = "hello";
        console.log(a);
        //使用let关键字定义变量  Es6   2015
        let b = 20;
        console.log(b);
        b = "world";
        console.log(b);
        //使用const关键字定义常量
        const c = 3.14;
        console.log(c);
        //TypeError: Assignment to constant variable
        c=3.1415926;
        console.log(c);
    </script>

3.4 JavaScript数据类型

原始类型
        
        number：数字（整数、小数、 NaN(Not a Number) ）
        string：字符、字符串，单双引皆可
        boolean：布尔。 true ， false
        null：对象为空
        undefined：当声明的变量未初始化时，该变量的默认值是
        undefined
引用类型
         就是对象。 Object Date 等
        使用 typeof 运算符可以获取数据类型 
 <script>
        //number：数字（整数、小数、NaN(Not a Number)
        let a = 3.14;
        console.log(a);
        console.log(typeof a);

        //string：字符、字符串，单双引皆可
        let b = "嘻嘻";
        console.log(b);
        console.log(typeof b);

         //boolean：布尔。true，false
         let c = true;
         console.log(c);
         console.log(typeof c);

         //null：对象为空
         let d = null;
         console.log(d);
         console.log(typeof d);

         //undefined：当声明的变量未初始化时，该变量的默认值是undefined
         let f;
         console.log(f);
         console.log(typeof f);

         //Object Date
         let date = new Date();//object
         console.log(date);
         console.log(typeof date);
    </script>

3.5 JavaScript运算符

  • 一元运算符：++，--
  • 算术运算符：+，-，*，/，%
  • 赋值运算符：=，+=，-=…
  • 关系运算符：>，<，>=，<=，!=，==，===…
  • 逻辑运算符：&&，||，!
  • 三元运算符：条件表达式 ? 值1 : 值2；

3.6 JavaScript全局函数

其他类型转换为数字： parseInt( 数值 ) ，将参数数值转换为整
数，从左向右解析，遇到非数值就停止解析。
如果字面值不是数字，则转为 NaN 。
Boolean类型转换为整数： Number() ， true 转为 1 ， false 转为 0
其他类型转为 boolean ： Boolean(value)
number ： 0 和 NaN 转为 false ，其他的数字转为 true
string ：空字符串转为 false ，其他字符串转为 true
null: 转为 false
undefined ：转为 false
在 JavaScript 中有全局函数概念：不归属任何对象，即可以理解
为不需要任何对象就可以调用的函数；注意：所有的全局函数都
可以使用浏览器窗口对象调用，即 window 对象调用，但可以省
略不写。 
 <script>
        //其他类型-->转为数字类型
        let a = "100";
        let num01 = parseInt(a);
        console.log(num01);
        
        let b = "200abc";
        let num02 = parseInt(b);
        console.log(num02);

        let c = "abc200"
        let num03 = parseInt(c);
        console.log(num03);

        //boolean类型转为整数(Number());
        let d = true;
        let num04 = Number(d);
        console.log(num04);

        let e = false;
        let num05 = Number(e);
        console.log(num05);

        //其他类型转为boolean类型(Boolean())
        let f = null;
        let num06 = Boolean(f);
        console.log(num06);

        let g = "hello";
        let num07 = Boolean(g);
        console.log(num07);
        
        let h = 0;
        let num08 = Boolean(h);
        console.log(num08);
  
    </script>

3.7 JavaScript流程控制语句

  • if
  • switch
  • for
  • while
  • do…while 
 <script>
    for(let i=1;i<=9;i++){
        for(let j=1;j<=i;j++){
            document.write(i+'*'+j+'='+i*j+"&nbsp&nbsp&nbsp&nbsp&nbsp")
        }
        document.write("<hr color='green'/>");
        
    }
    </script>

3.8 JavaScript函数(重点)

3.8.1 方式一
定义： JavaScript 函数通过 function 关键词进行定义
形式参数不需要类型。因为 JavaScript 是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用 return 返回即
   
function functionName(参数1,参数2..){
 要执行的代码
}
function add(n, m){
 return n + m;
}
  调用：函数名称( 实际参数列表 ); 
let result = add(2,3);
 <script>

        function function01(){
            console.log("我xx你xxxx");
        }

        function function02(m,n){
            console.log("你x你m");
            return m*n;
        }
        
        function01();
        let num01 = function02(2,5);
        console.log(num01);
        
    </script>
3.8.2 方式二
定义格式 
var functionName = function (参数列表){
 要执行的代码
}
var add = function (a,b) {
 return a + b;
}
调用： JavaScript 中，函数调用可以传递任意个数参数 
let result = add(1,2,3);
 <script>
      
       let add=function(n,m){
           console.log(n+"..."+m);

           return n+m;
      }
       //调用函数
       let sum=add(2,3);
       console.log(sum);
3.8.3 注意事项
  • 匿名函数还可以作为另一个函数的参数传递
  • 在JavaScript中没有函数重载概念，如果存在函数名一样的函 数，后出现的函数就会覆盖之前的函数名
  • 在JavaScript中调用无参函数可以传递实参；调用有参函数可以 不传递实参.数据没有丢失会放到js的一个内置数组对象中 arguments

  <script>
       //匿名函数还可以作为另一个函数的参数传递
       function fn01(x){
           /*
              x=function(){
                  console.log("匿名函数...");
              }
          */
           console.log("fn01......");
           x();
      }
       
       fn01(function(){
           console.log("匿名函数...");
           
      });
       //在JavaScript中没有函数重载概念，如果存在函数名一
样的函数，
       //后出现的函数就会覆盖之前的函数名
       function fn02(){
           console.log("fn02..."); 
      }
       function fn02(a,b){
           console.log("fn02..."+a+"..."+b); 
      }
       fn02(10,20);//fn02...10...20
       fn02();//fn02...undefined...undefined
       //在JavaScript中调用无参函数可以传递实参；
       //调用有参函数可以不传递实参.数据没有丢失会放到js的一
个
       //内置数组对象中 arguments
       function fn03(){
           console.log("fn03...");
           for(let i=0;i<arguments.length;i++){
               console.log(arguments[i]);
          }

       fn03(2,3);
  </script>

四.JavaScript对象

4.1 数组对象Array

4.1.1 定义格式一
let arr=new Array(元素1,元素2...);
var myCars=new Array("Saab","Volvo","BMW");
4.1.2 定义格式二
var arr=[元素1,元素2...];
var myCars=["Saab","Volvo","BMW"];
4.1.3 常见属性和函数
push() ：向数组的末尾添加一个或更多元素，并返回新的长度。 
 <script>

        let arr = new Array(10,3.14,true,"Hello");
        for(let i =0;i<arr.length;i++){
            console.log(arr[i])
        }

        for(let num of arr){
            console.log(num);
        }

        let arr01 = new Array(10);
        console.log(arr01.length);
        
        
        let arr03 = new Array("雷军");

        console.log("---------------");

        let arr04 = new Array(10,3.14,"你好",true);
        // arr04[8]="雷军";
        // for(let i =0;i<arr04.length;i++){
        //     console.log(arr04[i]);
        // }

       let len=arr04.push("wdf","666");
       console.log(len);
       
        
    </script>

4.2 正则对象RegExp

  直接量：注意不要加引号 
var reg = /^正则表达式符号$/;
  创建 RegExp 对象 
var reg = new RegExp("^正则表达式符号$");
  方法
   
test(str)：判断指定字符串是否符合规则，返回 true或 false
  语法

   
^：表示开始
$：表示结束
[]:代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.:代表任意单个字符，除了换行和行结束符
\w:代表单词字符：字母、数字、下划线(_)，相当于 [A-Za-z0-9_]
\d:代表数字字符： 相当于 [0-9]
量词：
+:至少一个
*:零个或多个
?:零个或一个
{x}:x个
{m,}:至少m个
{m,n}:至少m个，最多n个
只能输入数字:
 ^[0-9]*$
6到16位的数字:
 ^\d{6,16}$
字母开头6-16位:
 ^[a-zA-Z][a-zA-Z0-9]{5,15}$
  <script>
        //正规表达式：校验字符串是否符合规范
        //1.创建正规表达式
        //let reg=new RegExp("^.{5}$");
        let reg = /^.{5}$/
        //2.校验
        let flag=reg.test("abcde");
        //3,处理
        if(flag){
            console.log("用户名校验成功！");
        }else{
            console.log("用户名校验失败！请重新输入");
        }
    </script>

4.3 String对象

定义 
let 变量名 = new String(s); //方式一
let str = new String("hello");
let 变量名 = s; //方式二
let str = "hello" ;
let str = 'hello';
属性 
length   字符串的长度

方法 
charAt() 返回在指定位置的字符
indexOf() 检索字符串
 <script>
    //创建对象的方式一(了解)
    let str01=new String("hello");
    console.log(str01);
    console.log(str01.toString());
    
    //创建对象的方式二
    let str02="world";
    console.log(str02);
    
    //属性  lenth 获取字符长度
    console.log(str02.length);

    //函数  charAt()  输入索引，返回字符
    let str04="helloworld";
    let s01=str04.charAt(5);
    console.log(s01);
    
    //函数 indexOf() 返回子字符串在该字符串第一次出现的索引
    console.log(str04.indexOf("llo"));
    console.log(str04.indexOf("abc"));
    
    
    </script>

4.4 自定义对象(重要)

格式 
let 对象名称 = {
 属性名称1:属性值1,
  属性名称2:属性值2,
  ...
  函数名称:function (形参列表){}
  ...
  };
实例 
 <script>
        let person={
            name:"zhangsan",
            age:23,
            eat:function(){
                //console.log(person.name+"..."+person.age+"...");
                console.log(this.name+"..."+this.age);
            }
        };
        //person.eat();

        console.log(person.name);
        console.log(person.age);
        console.log(person.eat());
        
    </script>

五，BOM对象-Windows

5.1 confile方法

 <script>
        //prompt()用户进行输入的对话框，返回用户输入的字符串
        // let b=window.prompt("请输入你的年龄");
        // let age=parseInt(b);
        // console.log(age);
        
        let c=window.confirm("你确定要删除吗?");
        if(c){
            console.log("删除的操作");
        }else{
            console.log("什么都不做");
        }
    </script>

5.2 prompt方法

        //prompt()用户进行输入的对话框，返回用户输入的字符串
       let b=window. Prompt("请输入你的年龄");
       let age=parseInt(b);
       console.log(age);

5.3 setInterval方法

 let desk=window.setInterval(function(){
           console.log("hello");
           window.clearInterval(desk);//用来清除计时器方法
         },3000);//不清除计时器一直执行

5.4 setTimeout方法

 let desk=window.setTimeout(function(){
            console.log("hello");
        },1000);//代码只执行一次

果粒陈爱写代码
关注
  • 26
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue笔记周结
相濡以沫不如相忘于江湖.
11-01 272
vue笔记周结 概述 实例化参数 指令 过滤-管道 动画 组件 一、Vue概述 了解 作者： 尤雨溪 (现任阿里巴巴Weex团队技术顾问)。 官网： cn.vuejs.org vue的定位： 是一个渐进式框架 前端三大mvvm框架 vue , react ,angular。 特点： 简单，上手简单 结合Angular指令与react组件思维 生态丰富(插件多)api文档完善 二、实例化参数 el:"#app" 选择目的标签 data：{} 指定数据 data(){return{}} 一个函数返回一
js学习周结
前端小白在前进的博客
05-29 132
正则表达式在js中的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &.
周结
weixin_43690534的博客
09-13 271
学习总结 本周学习到的内容   本周主要学习的知识是关于党课考试以及计算机二级的知识，这周感觉自己状态格外的不好，自己也不清楚是什么原因。我下周要快速的调过来，不能在一天天的什么都学不进去了。   对于这周的表现，我知道大致的原因，我感觉是最近相关的考试比较多，都需要准备，但是自己没有好好规划自己的时间，所以造成了自己无论学学哪一科都没有达到自己想要的结果。所以这周结束我就给自己做了个规划。什么时间学哪一科，争取让自己的效率达到最高。   这几天我买的英语书也到了，感觉这本书确实对自己很有用，我这周都有几天
node.js简短周结
前端小白在前进的博客
08-01 188
node.js实现注册，登录页面 app.js模块 var express = require('express') var path = require('path') var bodyParser = require('body-parser') var session = require('express-session') var router = require('./router') var app = express() app.use('/public/', express.stat
周结11
weixin_43690534的博客
03-16 815
周结11   这周的事情比较多，虽然事情多，但我感觉收获很大，尤其是对于老师的一些话感到触动很大。   对于这周主要是练习了一些算法题，但是由于补考和一系列的问题，对于算法的练习也不是很多，前几天，老师找我谈话，我也感觉到老师对于我不是很满意，和我说了一些关于我自身问题，老师说话很急，我感受到了老师想我可以快点进步，将自身的问题赶紧解决调，我反思了老师说的话，确实，我自身的问题很多，言语的表达以及...
周结-2019年中国网络视听发展研究报告（PPT全文）-2019.5-81页精品报告.pdf
04-24
周结-2019年中国网络视听发展研究报告（PPT全文）-2019.5-81页精品报告.pdf
临床专业毕业生实习总结.doc
11-20
临床专业毕业生实习总结.doc
员工工资结算管理系统
04-26
《员工工资结算管理系统详解》 在企业日常运营中，人力资源管理是至关重要的环节，而其中的工资结算更是关乎员工权益的核心部分。一个高效、准确的员工工资结算管理系统能够极大地提升人力资源部门的工作效率，减少...
学校领导述职报告范文.doc.doc
11-08
- 日清周结：建立了完善的日清周结制度，通过量化管理细化班级管理，提升学生自我管理和责任感。 - 德育活动：学校通过丰富的德育活动，如升旗仪式、新队员入队、国学经典诵读、体育活动等，潜移默化地进行爱国...
nodejs安装
a1241436267的博客
08-19 350
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
2024前端面试题-js篇
FormAda的博客
08-22 670
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 305
npm。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 551
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
galaxyJING的博客
08-21 305
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 983
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 1007
react详细自我学习笔记，内容包括JSX、Redux、Router等
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 801
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
cache数据库学习周结
05-18
本周我主要学习了Cache数据库的相关知识，并整理了以下的学习周结： 1. Cache数据库是一种高速缓存数据库，能够提高数据访问速度和性能。 2. Cache数据库采用内存存储，可以大大减少数据读写的时间，提高数据访问效率。 3. Cache数据库可以作为一个独立的数据库使用，也可以作为其他数据库的缓存层使用。 4. Cache数据库支持多种数据结构，包括字符串、哈希表、列表、集合、有序集合等。 5. Cache数据库支持持久化存储，可以将内存中的数据定期或实时写入磁盘中，以便数据不会丢失。 6. Cache数据库具有高可用性，可以通过主从复制、哨兵、集群等方式实现高可用性。 7. Cache数据库具有良好的扩展性，可以通过水平扩展和垂直扩展等方式实现扩展。 8. Cache数据库的应用场景包括高并发、高性能、实时性要求高的应用，如电商、游戏、社交等。 在学习过程中，我还实践了一些简单的Cache数据库操作，包括数据的增删改查、过期时间设置、事务处理等，加深了对Cache数据库的理解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值