JS的基础语法

server/2024/9/30 2:09:31/

一、 JS的引入

1、 在标签内写js(内嵌)

  <body><!-- onclick是html的属性,是事件属性,在这里是鼠标点击事件属性值内部写的是js代码alert() 是js的弹窗函数--><button onclick="alert('警告!!!!')">按钮</button></body>

2、                     在文件使用<script>标签引入js

css写样式,需要把style标签写在head标签内

但是写js代码的script标签,可以写在html页面的任何位置,head标签内,body标签内都可,但是一般建议放在后面,越晚加载越好

    <script>alert("<script>标签内执行");</script>

3、 独立的js文件

1 创建一个后缀为.js的文件

2 文件内写js代码

3 在html文件内使用<script>标签引入该js文件

4 引入js文件的位置,在html中也是任意的

5 作为引入js文件的<script>标签,不能在其中间写js代码

  <body><!-- 引入js文件 --><script src="tk.js"></script></body>

二、JavaScript基本语法

1、 变量

  • 在JavaScript中，任何变量任何类型都用var关键字来声明，var是variable的缩写。

  • var是声明关键字，a是变量名，语句以分号结尾(其实可有可无)。

  • 这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中你不可以写"int int=1;"一样。

var a;

JavaScript的部分关键字：

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。

JavaScript是弱类型语言,声明时不需要设置变量的类型,赋值时就可以赋值任何类型

javascript">// 注释,与java中一样,单行注释
/*
多行注释
*/
/*** 文档注释*/
// ---------- 变量 --------------
// JavaScript是弱类型,变量声明不需要数据类型,直接用var
var a = 1;
// 将结果输出到控制台
console.log(a + 1);
a = "1";
console.log(a + 1);  
a = true;
console.log(a);  
a = new Date();
console.log(a);  

输出语句的用法

javascript"> //-------------- console.log输出语句  -----------// 输出console.log(a);// 输出时计算var a = 1;console.log(a + 1 - 1 + 2);var obj = new Object();// 创建对象console.log(obj) // 输出语句输出对象console.log("这是对象" + obj) // 这样直接拼接,对象会变成字符串,无法查看对象内部东西console.log("这是对象" , obj) // 这样通过,逗号拼接,可以查看对象内部东西

补充： let 局部变量,const 常量

// 3var是全局变量,let是局部变量,const常量
if(1>0){let lll = 1;var vvv = 1;lll++;vvv++;const ccc = 1;// ccc = 2;// 此行错误,常量不能再分配值
}
// console.log("let",lll); // 此行错误,lll是if内的局部变量,出了if不能用
console.log("vvv",vvv);

2、 基本数据类型[了解]

基本类型有五种

  • 数字(number)

  • 字符串(string)

  • 布尔型(boolean)

  • 未定义(undefined)

  • 空(null)

javascript"><script>     var x = 1; // number类型var x2 = 1.1; // number类型var y = "JavaScript"; // string类型var z = true; // boolean型// js有个函数,typeof(),这个函数可以返回变量的类型console.log(typeof x);console.log(typeof x2);console.log(typeof y);console.log(typeof z);console.log(typeof i); // undefined未定义</script>

变量有不同的类型,不同类型使用的作用不一样

  • number类型,数字,那就可以做算术,逻辑运算等 (后续运算时使用)

  • boolean类型,那就可以用于逻辑判断,分支语句,循环等 (后续分支循环时使用)

  • string类型,那就可以使用字符串的方法,对字符串操作(跟java中String操作很像)

    完整的string操作,可以查看APIJavaScript 字符串方法 (w3school.com.cn)

javascript">      var y = "Java-Script"; // string类型var j = y.charAt(0); // 根据下标找字符console.log(j);console.log(y.indexOf("a")); // 找到第一个指定字符的下标console.log(y.lastIndexOf("a")); // 找到最后一个指定字符的下标console.log(y.split("-")); // 根据指定字符,拆分字符串,返回字符串数组console.log(y.substring(5)); // 根据指定截取字符串,直到末尾console.log(y.substring(5, 8)); // 根据指定下标截取字符串,[begin,end)// length不是方法,是属性,调用时不用()console.log(y.length); // 获得字符串长度

3、 JSON类型[重点]

其实JSON类型是借鉴Java中的对象的思想.

JS中的引用类型其实就是JSON,全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。

JSON非常重要!!!!后期做项目,前后端交互用的数据格式就是JSON.

JSON表示一个对象,它主要作用/目的/应用场景: 存储数据

语法格式: {id:1,age:18,sex:true,name:"zs",phone:[110,120],child:{id:1,age:18}}

  • JSON对象使用大括号,{}

  • 大括号内,是键值对,键值对使用是冒号分割.{key:value}

  • 键正常写,值得写法区分数字,字符串,布尔值,数组,对象等

    • {id:18} 数字直接写

    • {name:"张三"} 字符串需要双引号

    • {sex:true} 布尔值直接写

    • {arr:[1,2,3]} 数组使用[]

    • {obj:{}} 对象使用{}

  • 大括号内,可以同时写多个键值对,中间使用逗号隔开

    • {id:18,name:"李四",sex:true}

javascript">      // json对象,引用类型var student = {id: 1,name: "小胡",sex: true,age: 18,score: [98, 99, 100],teacher: {id: 2,name: "邱哥",age: 18,},};// 取出对象的属性值// 对象.属性 其实是对象.keyconsole.log(student.id);console.log(student.name);console.log(student.sex);console.log(student.age);console.log(student.score);console.log(student.teacher);console.log(student.teacher.name);

4、 数组类型

数组是用来存储多个数据

  • 创建时可以是空数组,后面也可以继续赋值

  • 数组没有长度限制

  • 数组存储的类型没有限制

创建数组的语法

  • var 名字 = []

  • var 名字 = new Array()

取值赋值的语法

  • 数组名[下标]

javascript">   <script>// 创建数组var arr1 = []; // 空数组var arr2 = [1, 2, 3, 4]; // 创建数组,数组有值var arr3 = [1, "二", true, new Date()]; // 创建数组,数组有值,类型不固定var arr4 = new Array(); // 空数组var arr5 = new Array(1, "二", true);console.log(arr1);console.log(arr2);console.log(arr3);console.log(arr4);console.log(arr5);// 数组取值console.log(arr2[0]);console.log(arr2[4]); // 下标越界时,显示未定义// 赋值arr1[0] = 1;arr1[1] = "贰";console.log(arr1);</script>

除了以上基本数组操作之外,JS的数组还有一些方法可以调用

  • 详细可以参考文档JavaScript 数组方法 (w3school.com.cn)

  • JavaScript 数组参考手册 (w3school.com.cn) [读一遍这些方法,有印象]

javascript">    <script>      var arr6 = [1, 2, 3, 4];// length属性console.log(arr6.length);// toString,数组转字符串console.log(arr6.toString());// join,数组转字符串,以指定符号分割console.log(arr6.join(" - "));// pop() 方法从数组中删除最后一个元素,返回的是被删除的元素console.log(arr6.pop());console.log(arr6);// push() 方法（在数组结尾处）向数组添加一个新的元素：arr6.push(4);console.log(arr6);// ================for (var i = 0; i < arr6.length; i++) {console.log(arr6[i]);}</script>

3.5 日期类型

创建日期对象,

日期对象提供了方法可以获得/设置日期信息

详细信息查看文档JavaScript 日期 (w3school.com.cn),JavaScript 日期获取方法 (w3school.com.cn),JavaScript 日期设置方法 (w3school.com.cn)

javascript">    <script>// 创建日期对象var date = new Date(); // 当前时间console.log(date);
​// 创建时间时指定毫秒值,时间从1970/01/01 00:00:00var date2 = new Date(1000 * 60 * 60 * 24 * 40);console.log(date2);
​// 以指定年月日创建日期,月份特殊!!!一月是 0。十二月是11。var date3 = new Date(2022, 10, 13);console.log(date3);// 获得日期方法var year = date3.getFullYear(); // 获得年var month = date3.getMonth() + 1; // 获得月,0-11var day = date3.getDate(); // 获得日var week = date3.getDay(); // 周,0-6 周日是0,周一1,周六6console.log(year + "/" + month + "/" + day + "周" + week);
​// 设置日期date.setFullYear();
​// 按照本地日期格式输出日期var dateString = date.toLocaleString();console.log(dateString);</script>

3.6 运算符

算术运算 关系运算 逻辑运算 三目运算

以上这些运算操作,与java中操作基本一样

算术运算

名称运算符
加+
减-
乘*
除/
求余%
赋值=
加等+=
减等-=
除等/=
乘等*=
求余等%=
自增++
自减--
 <script>// ================算术运算=================// + - * / % ++ --console.log(1 + 1);console.log(1 + "1" + 1);console.log(1 - 1);console.log(1 * 10);console.log(10 / 2);console.log(10 / 3); // 除法,除不尽没有取整!@!!console.log(10 % 3);var a = 1;a++;console.log(a);var b = 1;//   var c = b++;var c = ++b;console.log(c);var d = 1;d += 1; // 等价于 d = d + 1console.log(d);</script>

关系运算

名称运算符
等于(内容相等即可)==
小于<
小于或等于<=
大于>
大于或等于>=
不等于!=
值和类型相同===
javascript">    <script>     // ================关系运算=================// > < >= <= == != ===// 关系运算的结果是布尔值: true / falseconsole.log(1 > 0);console.log(1 < 0);console.log(1 <= 0);console.log(1 >= 0);// == 判断[值]是否相等console.log("1 == 1   " + (1 == 1));console.log("1 == '1'  " + (1 == "1"));
​// === 判断[值]和[类型]是否都相等console.log("1 === '1'  " + (1 === "1"));console.log("1 === 1  " + (1 === 1));</script>

逻辑运算

名称运算符描述
与&&要求表达式左右两边的表达式同为true，整体结果才为true
或||要求表达式左右两边的表达式只要有一个为true，整体结果就为true
非！将布尔值取反操作
javascript"> <script>     // &&  || !// && 一错就错,全对才对,也有短路效果console.log(1 > 0 && 1 > 0);var a = 1;console.log(1 < 0 && a++ > 1);console.log("a = " + a);
​// || 一对就对,全错才错,也有短路效果console.log(1 < 0 || 1 > 0);var b = 1;console.log(1 > 0 || b++ > 0);console.log(b);
​// !取反console.log(!true);</script>

三目运算

javascript">    <script>      console.log("================三目运算=================");// 前面的表达式如果为true,就执行冒号左边// 如果前面的表达式为false,就执行冒号后边console.log(1 > 0 ? "111" : "000");</script>

3.7 分支

  • if

  • if-else

  • if-elseif-elseif-else

  • switch

javascript">    <script>var a = 1;if (a > 0) {console.log("a  >  0");}
​if (a < 0) {console.log("a < 0");} else {console.log("a > 0");}
​if (a > 0) {console.log("a > 0");} else if (a < 0) {console.log("a < 0");} else {console.log("a == 0");}
​// switchcase也一样...</script>

3.8 循环

  • while

  • dowhile

  • for

javascript">    <script>// 输出1-10var i = 1;while (i < 11) {console.log(i);i++;}
​// 输出100 110 ---200var j = 100;do {console.log(j);j += 10;} while (j <= 200);
​// 求和1-100var sum = 0;for (var k = 1; k <= 100; k++) {sum += k;}console.log("sum = " + sum);// 遍历数组</script>

3.9 函数(重点)

函数就是java中方法的概念,用来完成某些功能的.

定义函数的语法

function 函数名(参数1,参数2,...) {
// 执行代码
}
/*
1. function是固定,每个方法都需要设置
2. 没有定义返回值类型,也没有void
3. 函数名,见名知意
4. 参数直接写参数名,没有 数据类型,也没有var
5. 如果要返回数据,通过return 值;返回
*/
javascript">    <script>// 1 无参无返回值function fun1() {console.log("无参无返回值...");}// 调用方法,方法名直接调用fun1();
​// 2 有参无返回值function fun2(a) {console.log("fun2执行");console.log(a);}// 方法有参数,调用时不传参数,方法能执行,但是变量显示未定义// 方法有参数,调用时实参多于形参,方法能执行,多余的参数无意义fun2(10, 20);
​// 3 无参有返回值function fun3() {return 200;}
​var result = fun3();console.log(result);
​// 4 有参有返回值// 设计方法,传入2个参数,相加后返回</script>

特殊的函数定义:匿名函数

javascript">      // 5 匿名函数,主要用于配合事件操作var obj = function () {console.log("匿名函数");};// 匿名函数可以改成箭头函数(类似java的lambda)btn.onclick = () => {console.log("yyyyy");}


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

相关文章

基于php的酒店管理系

基于php的酒店管理系

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…
阅读更多...
抖音上下边框中间视频效果怎么做

抖音上下边框中间视频效果怎么做

在抖音这个以短视频为主要内容的平台上&#xff0c;创作出既美观又富有信息量的视频至关重要。尤其是当我们手中的素材多为横屏拍摄&#xff0c;而抖音则以竖屏展示为主时&#xff0c;如何巧妙地处理这些素材&#xff0c;使它们更好地适应平台需求&#xff0c;成为了许多创作者…
阅读更多...
CUDA 参考文章

CUDA 参考文章

CUDA&#xff1a;NVCC编译过程和兼容性详解_nvcc把cuda代码转换成什么-CSDN博客https://blog.csdn.net/fb_help/article/details/80462853 1、CUDA&#xff1a;NVCC编译过程和兼容性详解 CUDA&#xff1a;NVCC编译过程和兼容性详解 https://codeyarns.com/2014/03/03/how-to-sp…
阅读更多...
Unity 热更新(HybridCLR+Addressable)-安装配置HybridCLR+Addressable

Unity 热更新(HybridCLR+Addressable)-安装配置HybridCLR+Addressable

一、安装HybridCLR 在https://hybridclr.doc.code-philosophy.com/官网中获取URL 下滑、复制链接在包管理器中下载 初始化&#xff0c;在unity菜单栏中点击HybridCLR下的Installer 安装成功后&#xff0c;会打印安装成功&#xff0c;并且会变成True 在Assets下创建文件夹&…
阅读更多...
HTB：Three[WriteUP]

HTB：Three[WriteUP]

使用OpenVPN连接并启动机器 1.How many TCP ports are open? 使用nmap对靶机进行扫描&#xff1a;nmap -sV 10.129.233.85 可见仅开启了 22、80 共2个端口 2.What is the domain of the email address provided in the "Contact" section of the website? 直接对…
阅读更多...
使用docker创建zabbix服务器

使用docker创建zabbix服务器

首先保证服务器已正常安装docker&#xff0c;然后执行下面这几个容器创建命令&#xff1a; #创建MySQL容器 docker run --name mysql-server -t --restartunless-stopped -e MYSQL_DATABASE"zabbix" -e MYSQL_USER"zabbix" -e MYSQL_PASSWORD"zabbix_…
阅读更多...
经典sql题（十二）UDTF之Explode炸裂函数

经典sql题（十二）UDTF之Explode炸裂函数

1. EXPLODE: UDTF 函数 1.1 功能说明 EXPLODE 函数 是Hive 中的一种用户定义的表函数&#xff08;UDTF&#xff09;&#xff0c;用于将数组或映射结构中的复杂的数据结构每个元素拆分为单独的行。这在处理复杂数据时非常有用&#xff0c;尤其是在需要将嵌套数据“打散”以便更…
阅读更多...
大数据是不是需要用很多ip

大数据是不是需要用很多ip

在当今信息爆炸的时代&#xff0c;大数据技术已成为推动各行业发展的重要驱动力。随着数据量的激增和处理需求的增加&#xff0c;IP地址的使用在大数据环境中显得尤为重要。本文将探讨大数据是否需要使用多个IP地址&#xff0c;以及背后的原因。 什么是大数据&#xff1f; 大…
阅读更多...
最新文章

Copyright @ 2022~2023