JavaScript基础(一)

server/2024/9/25 4:58:39/
htmledit_views">

JS介绍

html" title=javascript>javascript是一种运行在客户端(浏览器)的编程语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画等交互效果。

js可以写在html内部也可以写一个js文件再用script的src引进html文件中

内部:

html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 内联形式:通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('Javascript')
</script>
</body>
</html>

写在内部时,js代码写在<script></script>里面。

html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js"></script>
</body>
</html>

值得注意的是,script如果用来引入js文件,那么它内部的代码就不会起作用。 

注释

和C语言风格一样,注释采用//单行注释,/* */多行注释。快捷键ctrl+/

html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 注释</title>
</head>
<body>
<script>
/* 这种的是多行注释的语法 *//*
更常见的多行注释是这种写法
在些可以任意换行
多少行都可以
*/
document.write('Javascript')
</script>
</body>
</html>

输入输出语句

1.输入(prompt)

html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 输入输出</title>
</head>
<body>
<script>
// 1. 输入的任意数字,都会以弹窗形式展示
document.write('要输出的内容')
alert('要输出的内容');
// 2. 以弹窗形式提示用户输入姓名,注意这里的文字使用英文的引号
prompt('请输入您的姓名:')
</script>
</body>
</html>

prompt会生成一个弹窗,让用户键入输入内容,用来测试代码的。 

2.输入

输入有三种类型:alert,write,console.log()

alert:以弹窗的形式显示在网页中。

document.write():以文本形式显示在网页内,和写个<p>差不多

console.log():这个显示在检查中控制台中,用来给程序员测试用的。

变量

 JS变量思考

在讲变量前,我们先看个代码

html"><!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>let age = 18;let name = "Ashto";let flag = true;console.log(typeof age);console.log(typeof name);console.log(typeof flag);</script></body></html>

 

这是不是和Python很像,你可以认为number就是int,float组合,string就是str,布尔类型就是true和false,和python不同的是:js还拥有undefined和null(未定义类型和空类型)。 

上面的相似在编程语言中很常见,总共类型就那么多嘛,但是从上面代码可以看出Js其实是动态类型语言,这点和python很像。

动态类型:Python 和 JavaScript 都是动态类型的编程语言,这意味着你在编写代码时不需要事先声明变量的类型,类型会在运行时自动确定。

html"><!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>let age;age = 18;let name;name = 'Ashto';</script></body></html>

这里我们可以看到,我们可以先声明变量,但不同于C语言风格必须指明它的类型 ,这点使得js更加灵活。 

总的来说,我们已经可以看出,let是一种万金油的关键词,它让我们不用太过于考虑类型问题,形成了它弱类型的风格。同时,我们还听过var这个关键词,他也是用来声明变量的,他们有什么区别呢?

let 和 var 区别
在较旧的JavaScript,使用关键字 var 来声明变量 ,而不是 let
var 现在开发中一般不再使用它,只是我们可能再老版程序中看到它。
let 为了解决 var 的一些问题。
var 声明一些不合理的地方:
1 . 可以先使用 在声明 (不合理)
2 . var 声明过的变量可以重复声明(不合理)
3 . 比如变量提升、全局变量、没有块级作用域等等
结论:
var 就是个bug,别迷恋它了,以后声明变量我们统一使用 let 

变量命名规则 

这个和大部分编程语言很相似,都是驼峰命名法以及一些老生常谈的规则:

1.只能是字母、数字、下划线、$,且不能能数字开头
2 . 字母区分大小写,如 Age 和 age 是不同的变量
3 . JavaScript 内部已占用于单词(关键字或保留字)不允许使用
4 . 尽量保证变量具有一定的语义,见字知义 

常量

这个使用const关键词就可以了,一般在实际开发中都用常量,因为数据比较多。

html">// 常量: 也是一个容器用来保存的数据
const pi = 3.14
console.log(pi)
// 注意事项:
// 1. 常量里面的值是不允许修改的
pi = 3.141592653
console.log(pi)
// 2. 常量必须要初始化(声明常量的时候必须要赋值)
// const url

                                                                                                                                                     

数据类型

终于到数据类型了,这个我们在上面也讨论过,其实,js包括两部分数据类型:

基本数据类型 

都是老熟人吧?但或许我们会有个疑问:未定义和空类型有什么区别呢,这看起来好像都是没赋值的孤独变量名,他们的确都是“空值”的意思,但还是有很多区别滴。

在JavaScript中,nullundefined都是表示“空值”的概念,但它们之间存在一些关键的区别:

  1. 类型不同

    • undefined 是一个基本数据类型,其类型就是 undefined。当一个变量被声明但没有被赋予任何值时,其默认值就是 undefined
    • null 也是一个基本数据类型,但它的类型是 object(这是一个历史遗留问题,实际上它应该被视为表示“无值”的特殊值)。null 用来表示一个变量意在不指向任何对象。
  2. 含义不同

    • undefined 通常表示变量已被声明,但还没有被赋予任何值,或者访问一个并不存在的变量或对象属性时返回的值。
    • null 则更多地用于表示一个变量曾经指向一个对象,但现在没有指向任何对象,即它是被故意设置为空值的。
  3. 使用场景不同

    • undefined 可能出现在多种未预期的情况下,比如忘记初始化变量。
    • null 通常是有意使用的,表示一个变量的值应该是对象类型,但现在没有值或者不应有值。

用来描述不同的对象就是他们的区别,undefined它是指一个未赋值的变量,null侧重的是对象的概念,这也是我们即将讲解的引用数据类型。

不过在那之前,我们先补充点基本数据类型的知识:

Number:正数,负数,整数,小数.......

String:一般在HTML里写外双内单或者外单内双。

模板字符串
使用场景:
拼接字符串和变量

html">let age = 91
console.log('我今年' + age + '岁')
// 2. 模板字符串
console.log(`我今年${age}岁`)
// 3. 模板字符串里面的字符串可以换行

注意用上模板字符串的时候外面包着的可不是引号,而是`。

引用数据类型 

这不是基础内容的部分,不过还是可以看看的:

Object:包含键值对,键是字符串类型,值随意;

Function:函数,也是对象,js里的函数和其他语言大差不差,可以看看:

html">function addNumbers(num1, num2) {var sum = num1 + num2;return sum;
}

这就是一个最简单的加和函数。

Array:和数组差不多。 

总而言之,这是对象与函数部分的内容,在此仅作了解即可。

                                                                                                                                                                                                                                                                                                   

运算符

这个和大部分编程语言几乎一样,稍微看看:

就地运算符,特性也差不多,还有自增自减,就不说了,都是可以类比的。 

比较运算符也差不多,不过js有个===,这个和java的全等差不多,==是判断值是否相等,===判断值和类型是否相等。逻辑运算符也差不多,与(&&)或(\)非(!)。

                                                                                                                                                                                                                                                                                                                                                                                                   


http://www.ppmy.cn/server/32622.html

相关文章

SpringBoot+Vue项目学生读书笔记共享平台

一、前言介绍 本文从管理员、用户的功能要求出发&#xff0c;读书笔记共享平台系统中的功能模块主要是实现管理员;首页、个人中心、用户管理、笔记分享管理、个人笔记管理、管理员管理、交流互动、系统管理。用户:首页、个人中心、笔记分享管理、个人笔记管理、我的收藏管理。…

智能体可靠性的革命性提升,揭秘知识工程领域的参考架构新篇章

引言&#xff1a;知识工程的演变与重要性 知识工程&#xff08;Knowledge Engineering&#xff0c;KE&#xff09;是一个涉及激发、捕获、概念化和形式化知识以用于信息系统的过程。自计算机科学和人工智能&#xff08;AI&#xff09;历史以来&#xff0c;知识工程的工作流程因…

微服务之SpringCloud AlibabaSeata处理分布式事务

一、概述 1.1背景 一次业务操作需要跨多个数据源或需要跨多个系统进行远程调用&#xff0c;就会产生分布式事务问题 but 关系型数据库提供的能力是基于单机事务的&#xff0c;一旦遇到分布式事务场景&#xff0c;就需要通过更多其他技术手段来解决问题。 全局事务&#xff1a;…

数据库(MySQL)—— DQL语句(基本查询和条件查询)

数据库&#xff08;MySQL&#xff09;—— DQL语句&#xff08;基本查询和条件查询&#xff09; 什么是DQL语句基本查询查询多个字段字段设置别名去除重复记录 条件查询语法条件 我们今天进入MySQL的DQL语句的学习&#xff1a; 什么是DQL语句 MySQL中的DQL&#xff08;Data Q…

【源码阅读】Golang中的go-sql-driver库源码探究

文章目录 前言一、go-sql-driver/mysql1、驱动注册&#xff1a;sql.Register2、驱动实现&#xff1a;MysqlDriver3、RegisterDialContext 二、总结 前言 在上篇文章中我们知道&#xff0c;database/sql只是提供了驱动相关的接口&#xff0c;并没有相关的具体实现&#xff0c;具…

web3风格的网页怎么设计?分享几个,找找感觉。

web3风格的网站是指基于区块链技术和去中心化理念的网站设计风格。这种设计风格强调开放性、透明性和用户自治&#xff0c;体现了Web3的核心价值观。 以下是一些常见的Web3风格网站设计元素&#xff1a; 去中心化标志&#xff1a;在网站的设计中使用去中心化的标志&#xff0…

微信视频号挣钱新世界,日入3千指日可待,每天简单操作,新手快速上手

这个项目主要讲解如何通过微信视频号来赚钱。微信视频号是微信推出的一项短视频和直播功能&#xff0c;用户可以通过发布短视频或进行直播来吸引观众&#xff0c;进而通过广告、打赏、电商等方式实现盈利。 首先&#xff0c;我们需要了解视频号的发展现状。目前&#xff0c;微…

Unity开发微信小游戏(2)分享

目录 1.概述 2.代码 3.示例 4.个人作品 1.概述 这里我们能做有两件事&#xff1a; 1&#xff09;主动发起分享 2&#xff09;监听右上角分享&#xff08;...按钮&#xff0c;发朋友圈也在这里&#xff09; API&#xff1a;官方文档 2.代码 1&#xff09;主动发起分享&…