Web@前段基础部分@笔记03@JavaScript入门

最新推荐文章于 2024-08-14 10:08:54 发布
最新推荐文章于 2024-08-14 10:08:54 发布
阅读量152 收藏
点赞数
文章标签： js javascript java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38195893/article/details/109823955
版权

一、 JavaScript概述

1、JS作用

JS用于完成页面与用户的交互功能.

2、JS的特点

  1. JS不需要编译,由浏览器直接解释执行.

  2. js是弱类型语言,js变量声明不需要指明类型,不同类型的数据可以赋值给同一变量. 如：let a = true; a = "abc";

3、JS组成

ECMA Script js的基础语法

BOM(Brower Object Model) 浏览器对象模型

DOM(Document Object Model) 文档对象模型

JavaScript = ECMA + BOM + DOM

二、 JavaScript基础语法

2.1、JS脚本的3种引入方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-HTML引入JS</title>
</head>
<body>
<!--
    js代码的3种引入方式：
        1、内嵌方式
            <script type="text/javascript">
            </script>
​
            此代码可以放在页面的任何位置。
​
        2、外部方式
            <script src="js/myJs.js"></script>
​
            注：
                1、引入外部文件，标签不能写成单标签
                2、引入外部文件时，标签内不能写js代码。
​
        3、行内方式
            <input type="button" value="点我" onclick="alert('点我干嘛？')">
-->
​
<script type="text/javascript">
    document.write("内部引入方式"); //向页面输出文本
</script>
​
<script src="js/myJs.js"></script>
​
<input type="button" value="点我" onclick="alert('点我干嘛？')">
​
</body>
</html>

2.2、JS三种输出方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02-JS三种输出方式</title>
​
</head>
<body>
<!--
JS三种输出方式
    1. 浏览器弹框输出字符  它会阻塞程序执行。
    2. 输出html内容到页面
    3. 输出到浏览器控制台  开发人员专属语句。
 -->
<script>
    alert("弹框输出字符");
    document.write("输出内容到页面");
    console.log("输出到浏览器控制台");
</script>
</body>
</html>

2.3、JS变量声明

java是强类型语言，注重变量的定义，所以在java中定义变量类型的方式如下：

// 整型
int i = 1314;
// 浮点型
double d = 521.1314;
// 字符型
char c ='c';
// 字符串型
String str = "用心做教育";
//布尔型
boolean b = true;
// 常量
final Integer PI = 3.14;

js是弱类型语言，不注重变量的定义，所以在js中定义变量的类型方式如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03-JS变量声明</title>
​
</head>
<body>
<!--
    java中变量的声明：
        // String str = "用心做教育";
​
        // int i = 1314;
​
        // double d = 521.1314;
​
        // final Integer PI = 3.14;
​
        // boolean b = true;
​
    js中的数据类型：
        支持2种：
        1、常量
            使用const
        2、变量
            统一使用let声明变量，它看不出是什么类型，当赋值值时才知道是什么类型。
-->
<script>
    //常量
    const a = 10;
    //a = 20;
    console.log(a);  //使用变量名.log  可以自动补全代码
​
    //变量
    let b = 10;
    b = 20.5;
    b = "abc";
    console.log(b);
​
    let t = typeof b;
    console.log(t);
</script>
</body>
</html>

idea设置ES6的支持

2.4、JS数据类型

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04-JS数据类型</title>
​
</head>
<body>
<!--
    JS数据类型
        一、原始类型
            1. string 字符串类型
            2. number 数字 包括整数和小数类型
            3. boolean 布尔类型 值只有 true和false 两个
            4. object 对象为null
            5. undefined 变量未赋值
​
        二、引用类型(对象)
           所有对象都是继承object
-->
​
<script>
    let s = "abc";
    console.log(s);
    console.log(typeof s);  // string
​
    let n = 10;
    console.log(n);
    console.log(typeof n); // number
​
    let b = true;
    console.log(b);
    console.log(typeof b); // boolean
​
    let o = null;
    console.log(o);
    console.log(typeof o); //object
​
    let u ;
    console.log(u);
    console.log(typeof u); //undefined
​
    //创建一个数组对象类型
    let a = new Array("a","b",10);
    console.log(a);
    console.log(typeof a);
​
</script>
</body>
</html>

2.5、JS运算符【记住不同点】

js与java的运算符基本一样，算数运算符、赋值运算符、逻辑运算符等等，不需要死记硬背，写程序会用就行：

1. 算数运算符
        + - * / % ++ -- 
2. 赋值运算符
        = += -= *= /= %=
3. 比较运算符
        > < >= <= == !=  js中 === !==
4. 逻辑运算符
        && || !
5. 三元（目）运算符
        表达式? 结果1: 结果2；

关注js与java区别的运算符

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-JS运算符</title>
​
</head>
<body>
​
<script>
    // 比较运算符
    let a = 10;
    let b = "10";
​
    console.log(a==b); //true  在js中，==比较值，不看类型
    console.log(a===b); //false  即比较类型，又比较值。
​
    console.log(a!==b); //true
</script>
</body>
</html>

2.6、JS流程控制语句

高级语言中的三种基本结构：顺序、分支、循环

① 条件判断

if(条件表达式){
    输出内容
}else if(条件表达){
    输出内容
}else{
    输出内容
}
​
switch(变量){
    case 1:
        输出内容
        break;
    case 2:
        输出内容
        break;  
    default:
        输出内容
        break;
}


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02-条件判断</title>
​
</head>
<body>
    <!-- 
        判断语句的条件, 在java中都必须是结果为boolean的表达式
     
        js中的任何类型,在判断条件,自动转换成boolean
            1. number
                非0为true, 0为false
            2. string
                非空串为true, 空串为false
            3. null
                false
            4. undefined
                false
     -->
    <script>
        let a = undefined;
        if(a){ // a==true
            console.log(true);
        }else{
            console.log(false);
        }
​
    </script>
</body>
</html>
② 循环语句

1. 普通for循环
        for(let i=0; i<10;i++){
        
        }
​
2. 增强for循环
        for(let e of arr){
        
        }
        
3. 索引for循环
        for(let index in arr){
        
        }
​
4. while循环
        while(条件表达式){
            内容
        }
        
5. do..while循环
        do{
            内容
        }while(条件);
        
6. break和continue
        break: 跳出整个循环
        continue：跳出本次循环,继续下次循环


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03-循环语句</title>
​
</head>
<body>
    <!-- 
     1. 普通for循环
        for(let i= 0; i<10; i++){
            需要执行的代码;
        }
     
     2. 增强for循环
             for(let element of array){
                 element表示被遍历对象/集合每个元素
             }
     
     3. 索引for循环
             for(let index in array){
                 index表示 对象/数组 索引
             }
​
     java中的数组：int[] arr = {1,2,3};
     let array = ["a","b","c"]; //js数组符号是中括号,不是大括号
    -->
    <script>
        let array = ["a","b","c"]; //js数组符号是中括号,不是大括号
        // 1. 普通for循环
        /*for(let i = 0; i<10; i++){
            console.log(i);
        }*/
        for(let i =0; i<array.length; i++){
            console.log(array[i]);
        }
​
        //2. 增强for循环
        for(let e of array){
            console.log(e);
        }
​
        // 3. 索引for循环
        for(let index in array){
            console.log(array[index]);
        }
​
    </script>
</body>
</html>

3、 JS函数【方法】

功能：JS的函数就是方法。

3.1、普通函数【重点】

语法

function 函数名(参数列表){
   函数体;
   [return 返回值;] // 中括号意思表示内容可以省略....
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04-普通函数</title>
​
</head>
<body>
    <!--
        java中的方法：
            访问修饰符  返回值类型  方法名(参数列表){
                方法体
            }
​
        Js中的方法
            function 方法名(参数列表){  参数不需要定义类型
                方法体。
                如果有返回值，直接return.
            }
​
        定义方法的形式：
            1、无参无返回值
​
            2、无参有返回值
​
            3、有参有返回值
​
        注：
            1、方法如果有返回值，直接return
            2、js中没有方法重载
    -->
​
    <script >
        //1、无参无返回值
        function method1(){
            console.log("无参无返回值的方法");
        }
​
        //调用方法
        method1();
​
        //2、无参有返回值
        function method2(){
            return "无参有返回值的方法";
        }
​
        let result = method2();
        console.log(result);
​
        //3、有参有返回值
        function method3(a,b){
            return a+b;
        }
​
        let sum = method3(2, 3);
        console.log(sum);
​
​
        //js中没有方法重载
        /*function method4(a,b){
            return "aaaaaaaa";
        }*/
​
        function method4(a,b,c){
            return a+b+c;
        }
​
        let aa = method4(2,3);
        console.log(aa);
    </script>
</body>
</html>

3.2、匿名函数

通常与事件结合使用，咱们现在先来看一下语法。。。。

function (参数列表){
   函数体;
   [return 返回值;] // 中括号意思表示内容可以省略....
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05-匿名函数</title>
​
</head>
<body>
    <!--
        Js中的普通方法
            function 方法名(参数列表){  参数不需要定义类型
                方法体。
                如果有返回值，直接return.
            }
​
        匿名方法: 匿名方法其实是一个特殊的变量
            function (参数列表){
                方法体
                如果有返回值，直接return.
            }
    -->
    <script>
        //普通方法
        function method1(){
            console.log("无参无返回值的方法");
        }
​
        method1();
​
        //匿名方法
        let method2 = function(a,b){
            console.log("匿名方法"+ (a+b));
        }
​
        method2(2,3);
​
    </script>
</body>
</html>

四、 JS事件【重点】

事件(event)：JS可以监听用户的行为,并调用函数来完成用户交互功能.

js : 事件驱动型语言

网页中一切可以被检测到的行为 -> 事件

4.1、常用事件

1. 点击事件：

       1. onclick：单击事件

       2. ondblclick：双击事件 (double: 时间间隔很短两次单击)

2. 焦点事件

       1. onblur：失去焦点

       2. onfocus:元素获得焦点。​

3. 加载事件：

       1. onload：页面加载完成后立即发生。​

4. 鼠标事件：

       1. onmousedown  鼠标按钮被按下。

       2. onmouseup    鼠标按键被松开。

       3. onmousemove  鼠标被移动。

       4. onmouseover  鼠标移到某元素之上。

       5. onmouseout   鼠标从某元素移开。      

5. 键盘事件：

        1. onkeydown    某个键盘按键被按下。 

        2. onkeyup      某个键盘按键被松开。

        3. onkeypress   某个键盘按键被按下并松开。​

6. 改变事件

       1. onchange 域的内容被改变。​

7. 表单事件：

       1. onsubmit 提交按钮被点击。

4.2、事件绑定

将事件与html标签进行绑定，实现交互功能

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08-事件绑定</title>
​
</head>
<body>
<input type="button" value="普通函数" onclick="method1()"> <br>
<input type="button" value="匿名函数" id="bun"> <br>
​
<script>
​
    //普通方法
    function method1(){
        alert("调用了普通方法");
    }
​
    //根据id得到按钮对象。
    let input = document.getElementById("bun");
    //给标签元素绑定事件，并调用匿名方法
    input.onclick = function(){
        alert("调用了匿名方法");
    }
</script>
</body>
​
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08-事件绑定</title>
    <script>
​
        //普通方法
        function method1(){
            alert("调用了普通方法");
        }
​
        //页面加载完成后执行的事件
        //注：onload事件是唯一一个不用用户操作的事件。
        window.onload = function(){
            //根据id得到按钮对象。
            let input = document.getElementById("bun");
            //给标签元素绑定事件，并调用匿名方法
            input.onclick = function(){
                alert("调用了匿名方法");
            }
        }
    </script>
</head>
<body>
<input type="button" value="普通函数" onclick="method1()"> <br>
<input type="button" value="匿名函数" id="bun"> <br>
</body>
</html>

五、 JS常用内置对象【知道】

内置对象: js提供好的对象, 开发者直接可以创建对象,并使用

5.1、Array 对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>11-数组</title>
​
</head>
<body>
<!--
    java中的数组：
        int[] arr = new int[5];
​
        int[] arr = new int[]{12,32,15};
​
        int[] arr = {12,24,14,56};
​
​
数组
    查询手册完成:
        1. 创建数组
         let arr = new Array();
​
         let arr = new Array(5); //定义长度
​
         let arr = new Array("aa","bb","ccc");
​
         let arr = ["aa","bb",123,true]; //推荐
       2. 数组常用方法
​
          length 属性
​
          sort() 对数组的元素进行排序
-->
<script>
    let arr1 = new Array();
    console.log(arr1);
    console.log(arr1.length);
​
    let arr2 = new Array(5);
    console.log(arr2);
    console.log(arr2.length); // 5
​
    let arr3 = new Array("aa","bb",12,true);
    console.log(arr3);
    console.log(arr3.length);
​
    for(let e of arr3){
        console.log(e);
    }
​
    let arr4 = ["aa","bb",123,true]; //推荐
    arr4[5] = "dd";
    console.log(arr4);
    console.log(arr4.length);
    for(let e of arr4){
        console.log(e);
    }
​
    let arr5 = [1,9,6,5,3];
    console.log(arr5.sort());
​
​
    function sortNumber(a,b)
    {
        return b - a
    }
​
    var arr = new Array(6)
    arr[0] = 10
    arr[1] = 5
    arr[2] = 40
    arr[3] = 25
    arr[4] = 1000
    arr[5] = 1
​
    document.write(arr + "<br />")
    document.write(arr.sort(sortNumber))
</script>
​
</body>
</html>

5.2、Date 对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>12-日期</title>
​
</head>
<body>
<!--
    创建日期对象：
    var myDate=new Date()
​
    方法：
    getFullYear() 从 Date 对象以四位数字返回年份。
    getMonth() 从 Date 对象返回月份 (0 ~ 11)。
    getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
    getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
-->
​
<script>
    var myDate=new Date();
    console.log(myDate);
    console.log(myDate.toLocaleString());
    console.log(myDate.getFullYear()); // 2020
    console.log(myDate.getMonth()+1+"月"); // 11月
    console.log(myDate.getDate()+"日"); // 13日
    console.log(myDate.getTime()); // 毫秒
​
</script>
</body>
</html>

5.3、Math 对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>13-数学</title>
​
</head>
<body>
<body>
<!--
数学运算
    查询手册完成
    1. 四舍五入 round()
    2. 向下取整 floor()
    3. 向上取整 ceil()
    4. 产生随机数 random() ：返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1
​
​
-->
<script >
    let n = 1234.567
    //1. 四舍五入取整
    console.log(Math.round(n)); //1235
    //2. 向下取整
    console.log(Math.floor(n)); //1234
    //3. 向上取整
    console.log(Math.ceil(n)); // 1235
    //4. 产生随机数
    console.log(Math.random());
    //5. 产生 [1,10]的随机整数
    let m =Math.random()*10
    console.log(Math.ceil(m));
</script>
</body>
</html>

5.4、全局函数 （了解）

我们不需要通过任何对象，可以直接调用的就称为全局函数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>14-全局函数</title>
​
</head>
<body>
<!--
全局函数
    1. 字符串转为数字 
        parseFloat() 解析一个字符串并返回一个浮点数。
        parseInt() 解析一个字符串并返回一个整数。
​
    2. 对字符串编码和解码
        encodeURI() 把字符串编码为 URI。
        decodeURI() 解码某个编码的 URI。
​
    3. 把字符串当做js表达式来执行
        eval()  计算 JavaScript 字符串，并把它作为脚本代码来执行。
​
     4.   isNaN() 检查某个值是否是数字。是数字返回 false  不是数字返回true
-->
​
​
<script >
    let str1 = "123adsf";
    let result = parseInt(str1) + 4;
    console.log(result);
​
    let str2 = "123.1";
    let result2 = parseFloat(str2) + 4;
    console.log(result2);
​
    let s = encodeURI("张三"); // %E5%BC%A0%E4%B8%89
    console.log(s);
​
    let s2 = decodeURI(s); // 张三
    console.log(s2);
​
​
    let sum = eval("2*3");
    console.log(sum);
​
    console.log(isNaN("123")); //true
</script>
</body>
</html>

 

习惯12
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
爬虫入门到大牛笔记
12-02
爬虫技术是互联网数据获取的重要手段，从入门到精通，涉及多个层次的知识点。首先，爬虫的基本概念是自动抓取互联网信息的脚本或程序，它能够解决冷启动问题，构建搜索引擎，以及建立知识图谱。对于初学者，了解HTML...
javascript学习笔记
12-22
以上是对给定文件中JavaScript学习笔记的部分内容进行的详细解读，涵盖了JavaScript的基础知识、语法、数据类型、函数、对象、数组、DOM编程、AJAX以及JSON和jQuery的简介，旨在为初学者提供全面的入门指南。
前端数据显示undefined_前端面试中常见的几个问题
weixin_39701861的博客
12-03 4437
在前端很少有机会接触到算法，大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。下面这篇文章就给大家总结了在前端JS面试中常见的测试题问题，有需要的朋友们可以参考借鉴，下面来一起看看吧。学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题，这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。1、介绍js的...
JS 简介
qq_43547376的博客
06-18 110
JS简介 JS JavaScript 垄断了浏览器端脚本 NodeJS：2009年诞生，JavaScript的运行平台，让JavaScript的触角伸到了服务器端 ECMAScript是JavaScript的标准：1997年欧洲计算机制造商协会（ECMA）设置的 JavaScript体系： 1.语言核心 ECMASCript5,6,7,8,9 2.DOM 3.BOM JavaScript的语言风格和特性 类C语言的风格，简单好学 弱类型，繁文缛节少 J...
前端js如何判断值为undefined
wtfsb的博客
04-17 3470
直接if(id==undefined) 直接这样就行不要加引号
python基础:(第一章)01--注释、变量类型、标识符及关键字
du_lijun的博客
10-14 215
python基础一级目录 一级目录
JavaScript学习笔记 01、Javascript的基本知识
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-06 800
文章目录前言一、认识Javascript与ECMAScript二、JS的书写位置三、输出语句(alert、console.log)四、认识与学会处理异常4.1、介绍三种常见异常4.2、介绍REPL环境五、变量5.1、var与let区别5.2、介绍const5.3、定义的变量与命名5.4、js新特性：变量声明提升六、数据类型认识两种数据类型typeof运算符使用6.1、基本数据类型(五种)①number类型②string字符串介绍语法与属性常用方法substring()、substr()、slice()小总结
javascript学习笔记整理总汇
jiandan1127的博客
10-27 1343
一 JavaScript:简称JS 编程语言：可以将具体、实物化得实物抽象成代码的方式来描述 它是一种专为网页交互而设计的脚本语言。也是一种非常松散(弱类型)的面相对象的语言 交互：通过一些行为来展现后台所提供的数据 二 JS的组成部分： ECMAScript(ES)---描述了JS的语法和基本对象。目前用得最广泛的版本是ES5，下一代标准是ES6(ES2015) DOM(document obj...
JavaScript 学习笔记 总结
Jay17的博客
06-06 1129
JavaScript 学习笔记 总结
WEB前端入门——基础标签
m0_55446673的博客
11-30 628
web学习笔记
尚硅谷Web前端Promise教程从入门到精通——笔记
weixin_58325898的博客
09-03 770
文章参考尚硅谷的promsie教程，其中包括些个人理解，有需要的同学可以自取~ 内容包括：Promise属性，Promise工作流程，Promise相关API，async和await
vue入门demo详细笔记+项目.zip
11-23
Vue.js 是一款轻量级的前端JavaScript框架，以其易学易用、...通过深入学习和实践这个"vue入门demo详细笔记+项目"，开发者不仅能掌握Vue的基础，还能逐步建立起一套完整的前端开发流程，为今后的Web开发打下坚实基础。
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
10-17
Vue.js 是一款由华裔前Google工程师尤雨溪开发的轻量级前端JavaScript库，其主要功能是动态构建用户界面。Vue的特点在于遵循MVVM模式，代码简洁且运行效率高，适用于移动和PC端的开发。它借鉴了Angular的数据绑定...
学习目标：pythton基础-mysql数据库-python框架-简单Web-成功建站(含学习笔记).zip
02-24
在Web开发阶段，你将学习HTML、CSS和JavaScript基础知识，这些都是构建Web页面的基础。理解前端MVC框架，如React或Vue，可以提高网页交互性。结合Python的Flask或Django框架，你可以构建后端API，实现前后端交互，...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 263
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1095
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【无标题】
最新发布
weixin_42348009的博客
08-14 165
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 989
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 183
【代码】playwright链接本地浏览器，实现自动登录。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值