【无标题】JavaScript入门

JS

1.JS引入方式

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title><!-- 内部脚本 --><!-- 运行时界面弹出警告框 hello JS --><script>alert('hello JS');</script><!-- 外部脚本 --><script src="../js/demo.js"></script></head><body><script>alert('hello JS');</script></body></html><script>alert('hello JS');</script>

2.JS基本语法

书写语法

  • 区分大小写：与java一样，变量名,函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

  • 注释：

单行注释：//

多行注释：/* */

  • 大括号代表代码块

 if(count==3){alert("111");}
输出语句

  • 使用window.alert()写入警告框

image-20250310163040430

  • 使用docment.write()写入HTML输出

  • 使用console.log()写入浏览器控制器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基本语法</title></head><body></body><script>// alert("js");​/* alertalert*/​window.alert("JS");document.write("js");console.log("js01");</script></html>
 

变量
 

  •  
    使用var关键字来声明变量
     
  •  
    JS是一门弱类型语言，变量可以存放不同类型的值
     
 

 var a=10;a="zhangsan";
 

  •  
    变量名需要遵守规则：
     
 

组成字符可以是任何字母，数字，下划线（_）或美元符号（$）
 

数字不能开头
 

建议使用骆峰命名
 

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量</title></head><body></body><script>var a=10;a="zhangsan";alert(a);​// 特点1：作用域比较大 全局变量// 特点2：可以重复定义 覆盖前一个{var x=1;var x="A";}alert(x);​​// let:局部变量 不能重复定义{let y=1;alert(y);}alert(y);​// const:常量 不能改变const p=3.14;p=3.15;alert(p);</script></html>
 

数据类型
 

JavaScript中分为：原始类型和引用类型
 

原始类型：
 

  1.  
    number：数字
     
  2.  
    string：字符串，单双引号都可
     
  3.  
    boolean：布尔。true，false
     
  4.  
    null：对象为空
     
  5.  
    undefined：当声明的变量为初始化时，该变量的默认值是undefined
     
 

使用typeof运算符可以获取数据类型
 

 
 

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据类型</title></head><body></body><script>// numberalert(typeof 3);alert(typeof 3.14);​// stringalert(typeof "A");alert(typeof 'hello');​// booleanalert(typeof true);alert(typeof false);​// objectalert(typeof null);​​// undefinedvar a;alert(typeof a);​​</script></html>
 

 

运算符
 

  •  
    算术运算符：+，-，*，/，%，++,--
     
  •  
    赋值运算符：=，+=，-=，*=，/=，%=
     
  •  
    比较运算符：>,<,>=,<=,!=,==,===
     
  •  
    逻辑运算符：&&，||，！
     
  •  
    三元运算符：条件表达式？true_value:false_value
     
 

==会进行类型转换，===不会进行类型转换
 

 var age=20;var _age="20";​alert(age==_age);//truealert(age===_age);//false
 

3.函数
 

介绍：函数（方法）是被设计为执行特定任务的代码块。
 

定义：JavaScript函数通过function关键字进行定义，语法为：
 

 function functionName(参数a,b){//要执行的代码}
 

 
注意：
 
  1.  
    形式参数不需要类型，因为Javascript是弱类型语言。
     
  2.  
    返回值也不需要定义类型，可以在函数内部直接使用return返回即可
     
 

 

调用：函数名称（实际参数列表）
 

定义方式二：
 

  var functionName=function(参数1，2...){return a+b;}
 

使用：
 

 

4.对象
 

JS对象：Array String JSON BOM DOM
 

Array
 

JavaScript中Array对象用于定义数组。
 

定义：
 

var 变量名=new Array(元素列表);//方式一    var arr= new Array(1,2,3,4);
var 变量名 = [元素列表];//方式二   var arr=[1,2,3,4];
 

访问：
 

arr[索引]=值;//   arr[10]="hello";
 

属性：
 

length:设置或返回数组中元素的数量
 

方法：
 

forEach():遍历数组中每个有值的元素，并调用异常传入的函数
 

push():将新元素添加到数组的末尾，并返回新的长度
 

splice():从数组中删除元素
 

 arr.forEach(function(e){console.log(e);})​// ES6 箭头函数：(...) => {...}  简化函数定义arr.forEach((e)=>{console.log(e);})​// push:添加元素到数组末尾arr.push(7,8,9);console.log(arr);​// splice:删除元素arr.splice(2,2);console.log(arr);
 

String
 

String字符串创建方法有两种：
 

 var 变量名=new Stirng("...");var 变量名="...";
 

属性：
 

length:字符串的长度
 

方法：
 

charAt():返回在指定位置大的字符
 

indexOf():检索字符串
 

trim():去除字符串两边的空格
 

substring():提取字符串中两个指定的索引号之间的字符
 

var str=new String("hello");
var str="hello";
// length
console.log(str.length);
// charAt
console.log(str.charAt(1));
// indexOf
console.log(str.indexOf("lo"));
// trim
var s=str.trim();
console.log(s);// substring(start,end)   开始索引，结束索引（含头不含尾）
console.log(s.substring(0,4));
 

JSON
 

自定义对象：
 

定义格式：
 

var 对象名{属性名1：属性值1,属性名2：属性值2,函数名称：function(形参列表){}
}
 

调用格式：
 

对象名.属性名; //consle.log(user.name);
对象名.函数名(); //user.eat();
 

var user={name:"Tom",age:10,gender:"male",eat:function(){alert("吃饭~");}}alert(user.name);user.eat();
 

JSON——基础语法：
 

定义：
 

 var 变量名='{"key1":value,"key2":value2}';var jsonstr='{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';
 

JSON字符串转为JS对象：
 

 var jsObject=JSON.parse(userStr);
 

JS对象转为JSON字符串：
 

 var jsonstr=JSON.stringify(jsObject);var jsonstr= '{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';alert(jsonstr.name);//undefined​// 将JSON字符串转为JS对象var obj=JSON.parse(jsonstr);alert(obj.name);​// 将JS对象转换为JSON字符串alert(JSON.stringify(obj));
 

BOM
 

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。
 

组成：
 

  •  
    Window：浏览器窗口对象
     
  •  
    Navigator：浏览器对象
     
  •  
    Screen：屏幕对象
     
  •  
    History：历史记录对象
     
  •  
    Location：地址栏对象
     
 

 
window
 
  •  
    介绍：浏览器窗口对象
     
  •  
    获取：直接使用window，其中window.可以省略。
     
     window.alert("Hello Window");alert("Hello Window");
     
  •  
    属性
     
    •  
      history:对history对象的只读引用。
       
    •  
      location：对于窗口或框架的Location对象。
       
    •  
      navigator：对Navigator对象的只读引用。
       
     
  •  
    方法：
     
    •  
      alert()：显示带一段消息和一个确认按钮的警告框
       
    •  
      confirm()：显示带一段消息以及确认按钮和取消按钮的对话框
       
    •  
      setInterval()：按钮指定的周期（以毫秒记）来调用函数或计算表达式
       
    •  
      setTimeout()：在指定的毫秒数后调用函数或计算表达式
       
     
 

 












本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.pswp.cn/web/87594.shtml


繁体地址，请注明出处：http://hk.pswp.cn/web/87594.shtml


如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！











相关文章










（JAVA）自建应用调用企业微信API接口，实现消息推送








（JAVA）自建应用调用企业微信API接口，实现消息推送




建议先简单了解企业微信开发者中心文档&#xff1a;开发前必读 - 文档 - 企业微信开发者中心 
了解一下企业微信调用接口的基础参数&#xff1a;基本概念介绍 - 文档 - 企业微信开发者中心 
本篇每个步骤都会跟着官网文档走&#xff0c;都会贴上相关链接&#xff0c;看完本篇文…




阅读更多...

















P/Invoke 在默认封送（marshalling）规则下，常见托管 ⇄ 非托管类型的对应关系








P/Invoke 在默认封送（marshalling）规则下，常见托管 ⇄ 非托管类型的对应关系




下表整理了 P/Invoke 在默认封送&#xff08;marshalling&#xff09;规则下&#xff0c;常见托管 ⇄ 非托管类型的对应关系。 内容主要依据微软官方 Marshalling Data with Platform Invoke 文档&#xff0c;并补充了常见指针&#xff0f;句柄用法与字符串缓冲区&#xff…




阅读更多...

















2.isaacsim4.2 教程-初识OmniGraph








2.isaacsim4.2 教程-初识OmniGraph




1. OmniGraph&#xff08;视觉编程&#xff09; 
OmniGraph 是 Omniverse 的可视化编程框架。它提供了一个图状结构&#xff0c;将 Omniverse 内多个系统的功能节点串联起来&#xff1b;同时也是一个计算框架&#xff0c;允许你编写高度自定义的节点&#xff0c;将自己的功能无…




阅读更多...

















MonoGame 游戏开发框架日记 -03








MonoGame 游戏开发框架日记 -03




第三章&#xff1a;创建类库
内容介绍
主要内容&#xff1a;创建Core类并编写
创建这个类主要是为了后续开发方便&#xff0c;并介绍游戏开发中的一种非常重要编程模式
单例模式&#xff0c;以及了解MonoGame基本图形渲染知识单例模式&#xff1a;
第一步我们得先了解什么是单例…




阅读更多...

















AES 256 CBC加密和解密








AES 256 CBC加密和解密




AES-256-CBC 是一种对称加密算法&#xff0c;使用 256位密钥 和 CBC&#xff08;Cipher Block Chaining&#xff09;模式。它的典型使用场景包括对敏感信息进行加密存储或传输。下面是 AES-256-CBC 的加密与解密的 Python 示例&#xff0c;使用 pycryptodome 库&#xff1a; &a…




阅读更多...

















Git 版本控制完全指南：从入门到精通








Git 版本控制完全指南：从入门到精通




Git 版本控制完全指南&#xff1a;从入门到精通 
作为当今最流行的分布式版本控制系统&#xff0c;Git 已经成为开发者必备的技能之一。无论你是独立开发者还是团队协作&#xff0c;Git 都能帮助你高效管理代码版本。本文将带你从零开始&#xff0c;逐步掌握 Git 的核心概念和常…




阅读更多...

















408第三季part2 - 计算机网络 - 计算机网络分层结构








408第三季part2 - 计算机网络 - 计算机网络分层结构




理解 PCI会放一些控制信息&#xff0c;源地址目的地址都在里面 
SDU是放的数据 
整个加起来是PDU 每一层的SDU都是上一层的PDU 看一看 也是简单看一看就行 网络层有时候也叫IP数据报 这里断点下载的意思就是&#xff0c;你下载东西的时候网络断了&#xff0c;再连回来的时候会接…




阅读更多...

















打开摄像头，服务器和客户端传输摄像头图像数据








打开摄像头，服务器和客户端传输摄像头图像数据




1&#xff1a;Camera Server 
主要功能&#xff0c;打开摄像头&#xff0c;接收客户端请求 接收到客户端请求“R”字符后开始传输摄像头图像。 
#include "mainwindow.h"
#include "ui_mainwindow.h"#include<QDebug>MainWindow::MainWindow(QWidget…




阅读更多...

















Android实现获取前台应用信息








Android实现获取前台应用信息




Android实现获取前台应用信息 
1.前言&#xff1a; 
之前需要获取在后台运行的App信息&#xff0c;比如包名、版本这些常规的&#xff0c;今天是讲解获取在前台的App信息&#xff0c;虽然App在前台&#xff0c;但是具体的信息可能不知道&#xff0c;今天就尝试获取一下&#xf…




阅读更多...

















快讯｜美团即时零售日订单已突破1.2亿，餐饮订单占比过亿








快讯｜美团即时零售日订单已突破1.2亿，餐饮订单占比过亿




据美团内网公布信息显示&#xff0c;截至22时54分&#xff0c;美团即时零售当日订单已经突破了1.2亿单&#xff0c;其中&#xff0c;餐饮订单已超过1亿单。 
值得注意的是&#xff0c;就在当晚20时45分&#xff0c;美团内网曾显示即时零售日订单突破了1亿。这也意味着&#xff…




阅读更多...

















pycharm2018配置gitee操作








pycharm2018配置gitee操作




一、gitee介绍及下载安装 
gitee介绍&#xff1a; gitee别名码云&#xff0c;是中国的一个代码托管平台&#xff0c;类似于GitHub&#xff0c;基于Git技术&#xff0c;提供远程仓库托管、协作功能和开源社区服务&#xff0c;优势包括访问速度快、本地化服务和政策合规git和gite…




阅读更多...

















数据结构——栈的讲解（超详细）








数据结构——栈的讲解（超详细）




数据结构——栈的讲解&#xff08;超详细&#xff09;-腾讯云开发者社区-腾讯云 #include"Stack.h"
void STInit(ST* ps)
{ps->arr  NULL;ps->capacity  ps->top  0;  //总空间个数和有用空间个数都初始化为0
}void STDestroy(ST* ps)
{if (ps -> arr)  …




阅读更多...

















MySQL允许root用户远程连接








MySQL允许root用户远程连接




注意&#xff1a;在实际生产环境中&#xff0c;允许root用户从任意主机&#xff08;‘%’&#xff09;连接存在安全风险&#xff0c;建议使用强密码并限制访问IP&#xff0c;或者创建具有必要权限的单独用户用于远程连接。MySQL 配置远程连接指南
1. 登录 MySQL 服务器
mysql -…




阅读更多...

















STM32的 syscalls.c 和 sysmem.c








STM32的 syscalls.c 和 sysmem.c




syscalls.c 是 STM32CubeIDE 自动生成的标准系统调用适配文件&#xff0c;用于裸机环境下支持 newlib 标准库&#xff08;如 printf, scanf, malloc&#xff09;的运行。这份文件提供了标准库运行所需的最小系统调用实现。现在我来逐段解析其作用&#xff0c;并补充你可能需要修…




阅读更多...

















Java零基础笔记01（JKD及开发工具IDEA安装配置）








Java零基础笔记01（JKD及开发工具IDEA安装配置）




1.Java简介 Java是一种广泛使用的计算机编程语言&#xff0c;由美国的Sun Microsystems公司&#xff08;Stanford University Network&#xff09;在1995年推出。Java以其跨平台、面向对象、安全性高等特点&#xff0c;广泛应用于企业级应用开发、移动应用开发等领域。2009年&a…




阅读更多...

















Spark SQL架构及高级用法








Spark SQL架构及高级用法




Spark SQL 架构概述 
架构核心组件 API层&#xff08;用户接口&#xff09; 输入方式&#xff1a;SQL查询&#xff1b;DataFrame/Dataset API。统一性&#xff1a; 所有接口最终转换为逻辑计划树&#xff08;Logical Plan&#xff09;&#xff0c;进入优化流程。  编译器层&…




阅读更多...

















【机器学习深度学习】什么是下游任务模型？








【机器学习深度学习】什么是下游任务模型？




目录 
前言 
一、什么是下游任务模型&#xff1f; 
二、为什么需要下游任务模型&#xff1f; 
三、下游任务模型都在干嘛&#xff1f; 
四、下游模型怎么训练出来的&#xff1f; 
五、图解理解&#xff1a;上游 vs 下游 
六、一个现实案例&#xff1a;BERT做情感分析 
原始数据…




阅读更多...

















补充：问题：CORS ，前后端访问跨域问题








补充：问题：CORS ，前后端访问跨域问题




补充&#xff1a;问题&#xff1a;CORS &#xff0c;前后端访问跨域问题 
我这边的解决方法是&#xff1a; myAxios.defaults.withCredentials  true; // 配置为true&#xff0c;表示前端向后端发送请求的时候&#xff0c;需要携带上凭证cookie整体的&#xff1a; 
import axio…




阅读更多...

















洛谷 P13014 [GESP202506 五级] 最大公因数-普及-








洛谷 P13014 [GESP202506 五级] 最大公因数-普及-




题目描述
对于两个正整数 a,ba,ba,b&#xff0c;他们的最大公因数记为 gcd⁡(a,b)\gcd(a,b)gcd(a,b)。对于 k>3k > 3k>3 个正整数 c1,c2,…,ckc_1,c_2,\dots,c_kc1​,c2​,…,ck​&#xff0c;他们的最大公因数为&#xff1a;
gcd⁡(c1,c2,…,ck)gcd⁡(gcd⁡(c1,c2,……




阅读更多...

















前端-CSS-day1








前端-CSS-day1




目录 
1、初识CSS 
2、CSS引入方式 
3、标签选择器 
4、类选择器 
5、id选择器 
6、通配符选择器 
7、画盒子 
8、字体大小 
9、字体粗细 
10、字体倾斜 
11、行高 
12、行高-垂直居中 
13、字体族 
14、font属性 
15、文本缩进 
16、文本对齐方式 
17、图片对齐方式 
18、文本…




阅读更多...


















最新文章


















Copyright @ 2022~2023