JavaScript

最新推荐文章于 2024-10-18 11:12:30 发布
最新推荐文章于 2024-10-18 11:12:30 发布
阅读量382 收藏
点赞数
分类专栏： javascript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45020003/article/details/122091008
版权
本文详细介绍了JavaScript的基础语法，包括引入方式、变量、关系运算符、条件语句、数组、函数和对象的创建。同时，讲解了WebAPI中的DOM操作，如获取元素、事件处理和元素操作。此外，还涉及到了函数的arguments隐形参数和作用域的概念。通过对JavaScript基础知识的深入理解，有助于开发者更好地进行Web开发。
摘要由CSDN通过智能技术生成

文章目录

JavaScript语法基础

1.JavaScript引入方式

1.1 第一种方式

只需要在 head 标签中，或者在 body 标签中， 使用 script 标签 来书写 JavaScript 代码

1.2 第二种方式

使用 script 标签引入 单独的 JavaScript 代码文件

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

2.变量

数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function

简单数据类型说明默认值
Number数字型，包含整型和浮点型0
String字符串型“”
Boolean布尔值型false
Undefinedvar a;声明了变量a但是没有赋值，此时a=undefinedundefined
Nullvar a = null;声明了变量a为空值null
  • JS 中的定义变量格式：
    var 变量名;
    var 变量名 = 值;
var a = 12; 
var b = "abc";

注意：控制台输入js语句，一条语句可以不输入;分号，两条以上要输入;分号区分

  • 数字型Number
    -Infinity 负无穷
    Infinity 正无穷
    NaN 代表非数字
    isNaN()：用来判断一个变量是否为非数字的类型，非数字true,数字型false.
  • 布尔型Boolean
    布尔型和数字型相加的时候，true的值为1，false的值为0
console.log(true+1);  // 2
console.log(false+1); //1
  • Undefinded
    一个变量声明后没有赋值会有默认值undefined
var num;
console.log(num); // undefined
console.log("Hello"+num); // Helloundefined
console.log(1+num);// NaN
console.log(true+num); // NaN
  • Null
    一个变量声明并赋值为Null，里面存的值为空
var num = null;
console.log(num); // null
console.log("Hello"+num); // Hellonull
console.log(1+num); // 1
console.log(true+num); // 1

3.关系运算符

JavaScript 中的运算符和 Java 用法基本相同.
特殊的有：
==等于是简单的做字面值的比较

15 == '15'; // true

=== 除了做字面值的比较之外，还会比较两个变量的数据类型

15 == '15'; // fasle

4.条件语句

综合练习1：输入一个数字，判断是奇数还是偶数

var a = prompt(“请输入一个数字”);
if(isNaN(a)){
	alert("请输入一个数字");
	/*因为“hello%2 结果为NaN,所以要先判断输进来的是否是数字”*/
}else{
	if(a % 2 == 0){
	alert(`${a}`是一个偶数);
	}else{
	alert(`${a}`是一个奇数);
	}
}

在这里插入图片描述
在这里插入图片描述
综合练习2： 计算 5 的阶乘

var result = 1;
for (var i = 1; i <= 5; i++) {
    result *= i;
     }
console.log("result = " + result);

在这里插入图片描述

5.数组

5.1 创建数组
  1. 创建数组
  • 使用 new 关键字创建
    var arr = new Array();
  • 使用字面量方式创建 [常用]
    var arr = [];
    var arr2 = [1, 2, 'haha', false];
    注意：JS 的数组不要求元素是相同类型.
  1. 如果下标超出范围读取元素, 则结果为 undefined
console.log(arr[3]);   // undefined
console.log(arr[-1]);  // undefined
  1. 新增数组元素

1.通过修改length新增，相当于在末尾新增元素， 新增的元素默认值为 undefined

<script>
        var arr = [9, 5, 2, 7];
        arr.length = 6;
        console.log(arr);
        console.log(arr[4], arr[5]);
 </script>

2.通过下标新增：如下图，arr[0]，arr[1]，依然是undefined

<script>
     var arr = [];
	arr[2] = 10;
	console.log(arr);
 </script>

在这里插入图片描述

  1. a.push(x); 尾插元素
    a.pop(); 尾删
  1. a.unshift(x); 头插元素
    a.shift(); 头删

6.函数

6.1 函数的两种定义方式
  • 第一种：可以使用 function 关键字来定义函数
    使用的格式如下:
 function 函数名(形参列表){
 	 函数体
 }

在 JavaScript 语言中，如何定义带有返回值的函数？
答：只需要在函数体内直接使用 return 语句返回值即可！

 <script type="text/javascript">
        //定义一个无参函数
        //函数被调用了，才会执行
        function fun(){
            console.log("无参函数fun()被调用了");
        }
        //定义一个无参函数
        function fun2(a,b){
            console.log("有参函数fun2()被调用了 a->"+a+",b->"+b);
        }
        //定义一个有返回值的函数
        function sum(num1,num2) { 
            var result = num1 + num2; 
            return result;
         }
         console.log(sum(20,30));
    </script>

在这里插入图片描述

  • 第二种
    使用格式如下var 函数名 = function(形参列表) { 函数体 }
   var f = function(){
            console.log("第二种定义方式");
   }
6.2 函数的隐形参数arguments

arguments就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数

var add = function() {
 var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
   }
    return sum; }
console.log(add(10, 20));            // 30
console.log(add(1, 2, 3, 4));        // 10
console.log(typeof add);             // function

在这里插入图片描述
6.3 作用域

  • 全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效.
  • 局部作用域/函数作用域: 在函数内部生效.
  • 创建变量时如果不写 var, 则得到一个全局变量.

7.对象

7.1 创建对象的3种方式
  • 方式一：使用 字面量 创建对象 [常用]
    使用{ } 创建对象
  var ob ={}; //创建一个空对象
         var student = {
             name : '大米',
             age : 18,
             height : 160,
             sayHello : function(){
                 console.log("Hello");
             }
         }
// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.age);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['name']);
// 3. 调用方法, 别忘记加上 () 
student.sayHello();

在这里插入图片描述

  • 方式二：使用 new Object 创建对象
var student = new Object(); // 和创建数组类似
 student.name='小米',
            student.sex = '男',
            student['height'] = 190,
            student.sayHello = function(){
                console.log("hello");
         }

在这里插入图片描述

  • 方式三：使用 构造函数 创建对象

前面的两种创建对象方式只能创建一个对象. 而使用构造函数可以很方便 的创建 多个对象.
基本语法：

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}
var obj = new 构造函数名(实参);

注意：

  • 在构造函数内部使用 this 关键字来表示当前正在构建的对象.
  • 构造函数的函数名首字母一般是大写的.
  • 构造函数的函数名可以是名词.
  • 构造函数不需要 return
  • 创建对象的时候必须使用 new 关键字.
 function Dog(name,type,sound){
             this.name = name;
             this.type = type;
             this.wang = function(){
                 console.log(sound);
             }
         }
         var wangcai = new Dog('旺财','中华田园犬','旺旺');
         var dahuang = new Dog('大黄','金毛','汪汪');
         var haha = new Dog('哈哈','二哈','嗷嗷');

在这里插入图片描述
理解这里的new关键字：

new 的执行过程:

  1. 先在内存中创建一个空的对象 { }
  2. this 指向刚才的空对象(将上一步的对象作为 this 的上下文)
  3. 执行构造函数的代码, 给对象创建属性和方法
  4. 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)

WebAPI

API参考文档

在搜索引擎中按照 “MDN + API 关键字” 的方式搜索, 也能快速找到需要的 API 文档.

1. DOM基本概念

重要概念:

  • 文档: 一个页面就是一个 文档, 使用 document 表示.
  • 元素: 页面中所有的标签都称为 元素. 使用 element 表示.
  • 节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.
1.1 获取元素
  • querySelector
    var element = document.querySelector(selectors);

① selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString 。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发SYNTAX_ERR 异常

② 表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.

③ 如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()

④ 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素

 <script type="text/javascript">
        //1.querySelector
        var e1 = document.querySelector('.box');
        console.log(e1);
        var e2 = document.querySelector('#id');
        console.log(e2);
        var e3 = document.querySelector('h3 span input');
        console.log(e3);
    </script>
</head>
<body>
    <div class="box">abc</div>
    <div id="id">def</div>
    <h3><span><input type="text"></span></h3>
</body>

在这里插入图片描述

  • querySelectorAll

例：选中所有div元素：

<div class="box">abc</div>
<div id="id">def</div>
<script>
    var elems = document.querySelectorAll('div');
	console.log(elems);
</script>
1.2 事件
  • 事件三要素
  1. 事件源: 哪个元素触发的
  2. 事件类型: 是点击, 选中, 还是修改?
  3. 事件处理程序: 进一步如何处理. 往往是一个回调函数.

示例：

<button id="btn">点我一下</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        alert("hello world");
   }
</script>
  • 按钮就是事件源.
  • 点击就是事件类型
  • function 这个匿名函数就是事件处理程序
  • 其中 btn.onclick = function() 这个操作称为 注册事件/绑定事件
1.3 操作元素
  1. 获取/修改元素内容
  • innerText
    Element.innerText 属性表示一个节点及其后代的“渲染”文本内容
  • innerHTML
    Element.innerHTML 属性设置或获取HTML语法表示的元素的后代
  1. 获取/修改元素属性
    我们可以在代码中直接通过这些属性来获取属性的值.
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    img.onclick = function () {
        if (img.src.lastIndexOf('rose.jpg') !== -1) {
            img.src = './rose2.png';
       } else {
            img.src = './rose.jpg';
       }
   }
</script>
  1. 表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改
属性含义
valueinput 的值
disabled禁用
checked复选框会使用
selected下拉框会使用
typeinput 的类型(文本, 密码, 按钮, 文件等）

持续更新中…

一颗大米粒儿
关注
专栏目录
JavaScript事件基础
JiuMeilove的博客
04-28 2万+
JavaScript事件概述 JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测道德行为 简单的理解为:触发—响应机制 网页中国每个元素都可以产生某些可以触发JavaScript的事件,例如我们可以在用户点击某个按钮时产生一个事件然后去执行某些操作 JavaScript事件的三要素 JavaScript事件又三分部组成 事件源 被触发的对象 事件类型__如何触发/什么事件 事件处理器__通过一个函数赋值的方式完成 <body> <butto
javascript之Math
weixin_45441470的博客
03-21 2336
在javascript中Math是js的内置的对象，其中有很多属性和方法用来操作跟数学相关 属性Math.PI Math方法有： Math.random()---随机数 Math.ceil()--向上取整 Math.floor()--向下取整 Math.abs()--绝对值 Math.max()--最大值 Math.min()--最小值 Math.pow()--求次方 Math.sqrt()--开根号 Math.around()-四舍五入 Math.sin()--正弦 Math.c
Vulnerable Javascript library
笑到世界都狼狈的博客
06-25 1万+
首先说明一下，这个问题的由来：源于我们开发的项目送去上海检测，结果送检没通过，被打回来了，返回的结果有这么一条：Vulnerable Javascript library 然后字面翻译就是"脆弱的js"，对于小白的我来说，从来没遇到过这个问题，然后就赶紧百度，百度返回的结果是---------js插件库版本太低，升级就好了。 那么问题来了，项目中用到那么多插件，总不至于让我把所有的插件都升级一遍吧，这样可能会死人的。。。。。 接下来：我们部门做底层开发的同事安装了一下叫"nessus"的工具，帮我扫描
什么是JavaScript中的Web Workers？它们的作用是什么？
官方推荐
07-17 1万+
什么是JavaScript中的Web Workers？它们的作用是什么？
什么是JavaScript中的闭包（closure）？
热门推荐
官方推荐
07-08 1万+
什么是JavaScript中的闭包（closure）？
JavaScript的基本组成
晶谛-giserDev
08-28 3306
1、JavaScript的组成部分 JavaScript可以分为三个部分：ECMAScript标准、DOM、BOM。 ECMAScript标准 即JS的基本语法，JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。 DOM 即文档对象模型，Document Object Model，用于操作页面元素，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。 -BOM 即浏览器对象模型，Browser Ob
JavaScript基础
ccyzq的博客
12-22 3528
文章目录前言一、JavaScript简介二、JavaScript使用形式三、基本语法四、运算符五、流程控制六、函数 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 一、JavaScript简介 二、JavaScript使用形式 三、基本语法 四、运算符 五、流程控制 六、函数 ...
JavaScript快速入门
m0_62036548的博客
06-12 1082
JavaScript快速入门
初识JavaScript
微风洋洋的博客
02-10 1983
初识JavaScript会发生什么事呢
JavaScript基础篇
xiaofan
04-05 1976
JavaScript基础篇 1.JS引入方式 ①嵌入式 //单行注释 /* 多行注释 * / <script type="text/javascript"> alert("我是嵌入在页面内的JS") </script> ②外链式 <script type="text/javascript" src="js/1.js"</script> 1.js如下: alert("我是外部JS") ③行内式 <a href="javascript:alert(
javascript
02-10
JavaScript是一种广泛用于网页开发的脚本语言，它是实现Web前端交互功能的核心技术之一。在给定的文件内容中，我们可以提取到关于JavaScript的多个知识点： 1. JavaScript的变量类型：JavaScript中主要有几种基本的...
利用noesis.Javascript开源组件.Net中执行javascript脚本
10-26
标题中的“利用noesis.Javascript开源组件.Net中执行javascript脚本”是指在.NET环境中使用Noesis.Javascript这个开源库来运行JavaScript代码，并且允许JavaScript与C#代码进行交互。Noesis.Javascript组件使得...
ArcGis-for-javaScript最全中文API.pdf
06-28
ArcGIS JavaScript API 介绍与示例 ArcGIS JavaScript API 是 ESRI 提供的一种基于 JavaScript 的开发工具，允许开发者创建交互式的 Web 地图应用程序。本文将对 ArcGIS JavaScript API 进行详细的介绍，并提供多个...
VS2015安装证书，JavaScript_ProjectSystem.msi，JavaScript_LanguageService.msi
08-06
在这个场景中，我们关注的是VS2015的安装过程中涉及到的证书问题以及两个特定的组件：JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。 首先，关于“VS2015安装证书”，这通常是指安装过程中需要...
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码
12-11
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
JS-常用功能
最新发布
qq_40950398的博客
10-18 260
汇总一些常用的js功能
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 771
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 849
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 968
请联系我获取更详细的演示视频。
日本JavaScript函数教学课件详解：背景色与样式控制
本教学课件是关于日语版的JavaScript编程语言，专注于讲解函数这一核心概念。课程内容包括以下几个部分： 1. **函数基础**: - 函数定义：讲解了如何在JavaScript中使用`function`关键字来创建一个名为`f`的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值