JavaScript基础

news2025/9/19 3:39:52

目录

数据类型

基本数据类型

引用数据类型

 变量

运算符

算数运算符

 赋值运算符

字符串连接符

关系运算符

 逻辑运算符

 三目运算符

分支语句

循环语句

流程控制语句

错误处理

函数

数组

对象

内置对象

String

RegExp

Math

Date

全局函数


简介: 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

作用:

                 1.与用户交互 

                 2.操作html标签 

                 3.操作css样式

                 4.业务处理

代码书写位置:

                        1.在script标签中书写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			console.log("你好世界");
		</script>
	</head>
	<body>
		
	</body>
</html>

                        2.在js文件中书写,通过link,使用script标签引入

                        3.在标签事件中引入

注释:都行

//
/**/

输出:

console.log("输出的内容");

数据类型

        js为弱类型语言,Java为强类型语言

        一律使用var定义,但是其中存储的值是有类型的

基本数据类型

        Undefined - - (未定义)

       Null- - (空的)因为从逻辑的角度null指向空对象指针,所以使用typeof关键字得到的数据 类型为  object

        Number - - (数字)

        Boolean- - (布尔值)

        String- - (字符串)

引用数据类型

Object与它的子类

        例:array(数组),function(函数),date(时间)

1,可以通过typeof关键字,获取数据的数据类型,null值的数据类型是Object

         typeof的用法:

                        typeof 值/变量名;

            var a1= "123";
			console.log(typeof a1);

 

2,所有基本数据类型的数据都可以作为boolean型使用

                         0,null,undefined,""对应的boolean型为false

特殊值:

null:空

undefined:未定义

NaN:是not a number的缩写,表示不是一个合法的数字.其类型为number.

 变量

语法:var 变量名 = 值;

例:

var a = 10;
var b = 10.1;
var c = true;
var d = "xx";
var e = 'a';
var f = null;
var g;
var h = function(){
console.log("自定义函数");
};
var i = [];
i[0] = 10;
var o = {"name":"张三","sex":"男","eat":function()
{console.log(this.name+"吃饭")}};//定义一个对象

运算符

算数运算符

+,-,*,/,%

注意:js中不分整数与小数,所以当10/3结果为3.33333循环

 赋值运算符

=,+=,-=,*=,/=,%=

字符串连接符

+

关系运算符

、>=、<=、== 、!=、===(绝对等于:值和类型都相同)

var a=10;
var c="10";
console.log(a==10);
console.log(a===c);

 逻辑运算符

&&      与

||        或

!         非

js中所有类型的变量都可以作为boolean型变量使用 0,null,undefined,""(空字符)都是false

&&当所有值为真,返回最后一个表达式的值.当表达式中有假返回第一个假的表达式

||当所有值为假,返回最后一个表达式的值,当有一个为真,返回第一个为真的表达式

var a = 1;
var b = true;
var c = "xx";
var d = 0;
console.log(a && b && c);
console.log(d && b && c);
a = 0;
b = false;
c = "";
d = 1;
console.log(a || b || c);
console.log(d || b || c)

 三目运算符

语法:var 变量名 = 条件表达式?值1:值2;

条件为true真,返回值1

条件为false假,返回值2

分支语句

if

switch

switch(n){
    case v1:
    代码1;
        break;
    case v2:
    代码2;
        break;
    case v3:
    代码3;
        break;
    ...
    case vN:
    代码N;
        break;
    default:
        代码M;
        break;
}

循环语句

while

do while

for

流程控制语句

break

continue             

  也可以使用标记,跳出多层循环

a: for(var i=0 ;i<10;i++){
	for (var j = 0 ; j < 10 ; j++) {
		for (var k = 0;k < 10; k++) {
			console.log(i*100+j*10+k);
			if(i==5){
			break a;
			}
		}
		
	}
}

错误处理

try{
	var c = new Array(9999999999);//会产生RangeError
}catch(RangeError){//
	console.log("超出范围")//出现错误执行的代码
}finally{
	console.log("必须执行的代码");//不管有没有错必须执行的代码
}

函数

由于是弱类型,不用写返回值类型,参数列表直接传值

语法1:

                 funation 方法名(形参列表){

                        方法体

                 }

function add(a,b){
	return a+b;
}

语法2

                var 变量名 = function(形参列表){

                        方法体

                 }

var sum = function(a,b){
	return a+b;
}

调用:

方法名(实参列表);//不接收返回值

var 变量名 = 方法名(实参列表);//接收返回值

数组

数组的定义

                方式1:var 数组名 = [];

                方式2:var 数组名 = new Array();

      1. 取值语法:数组名[下标]

       2 .改值语法:数组名[下标] = 值;

       3.尾部添加:数组名.push(值或其他数组); 

var a1=[1,2,3,4];
var a2=new Array();
a2=[5,6,7,8];

a1.push(a2);

console.log(a1);
console.log(a1[4]);

当数组被当作值添加时,被添加的下标所对应的时被添加的数组

 

      4.  删除值:delete 数组名[下标];

                删除之后,此处的值会为空,还会占用下标

console.log(delete a1 [0])
console.log(a1)

     5.删除的返回值为布尔型

        获取长度:var 变量名 = 数组名.length;

对象

对象的定义

        方式1:{ },直接创建对象

var student = {
	"name":"巴尔",
	"sex":"女",
	"age":2500,
	"cook":function(){
		console.log(this.name+"做饭");	
	}
}

student.cook();//调用属性或方法

        方式2:构造器

function User (name,age){
	this.name = name;
	this.age = age;
	
	this.eat = function(){
		console.log(this.name + "干饭");
	}
}

var s1 = new User("布耶尔",500);//先new
s1.eat();//再调用

添加属性或方法:

使用prototype方法

function User (name,age){
	this.name = name;
	this.age = age;
	
	this.eat = function(){
		console.log(this.name + "干饭");
	}
}

User.prototype.sex="女";//添加属性,只能默认了是这个了
User.prototype.cook=function(){//添加函数
	console.log(this.name+this.sex+"做饭");
}

内置对象

类似与jdk提供的类

String

1.创建String对象
var str1 = "qwer";
var str2 = new String("java");

2.属性
 length属性获取当前字符串的长度
var len = str1.length;

3.常用函数
charAt : 获取str1中索引为3的字符(索引从0开始)
var c = str1.charAt(3);

indexOf: 获取str1中第一次出现"edu"的索引
var i = str1.indexOf("edu");

lastIndexOf: 获取str2中最后一个“o”的索引
var j = str2.lastIndexOf("o");

split :分隔字符串,将str1用"."分隔成多个字符串,存放到arr中
var arr = str1.split(".");

substring : 从str1字符串索引为4的位置开始截取,直到str1结束
var s1 = str1.substring(4);

从str1字符串索引为4的位置开始截取(包含),直到索引为9的位置(不包含)
var s2 = str1.substring(4,9);

substr:从str1字符串索引为4的位置开始截取(包含),一共截取5个字符
var s3 = str1.substr(4,5);

toUpperCase : 将str2所有字母都转大写
var s4 = str2.toUpperCase();

toLowerCase : 将str2所有字母都转小写
var s5 = str2.toLowerCase();

match : 判断str3字符串的格式是否匹配reg的规则,如果不匹配则返回值为null,正确
返回该值
var str3 = "1303030330"; //假设str3是用户在页面输入的手机号
var reg = "^1[3,5,7,8]\\d{9}$"; //手机号码的规则(正则表达式)
var b = str3.match(reg);

RegExp


var str = "1303030330";

// 一个RegExp对象就是一个正则规则,RegExp对象的test函数进行正则校验
var reg = new RegExp("^1[3578]\\d{9}$");

//test 函数:如果匹配返回true,不匹配返回false,匹配返回true
var b = reg.test(str);

正则表达式:

Math

        var e = Math.E;//获取e值

        var pi = Math.PI   ;//获取pi值 

随机数:      

   //random : 随机产生一个[0,1)小数
    var num = Math.random()

对数字简单处理: 


//round : 对参数进行四舍五入得到一个整数
var i = Math.round(num); //0-10

//floor:只舍不入,获取比参数小的最大整数
var j = Math.floor(num); //0-9


//ceil: 只入不舍,获取大于等于参数的最小整数
var k = Math.ceil(num);

// abs : 获取参数的绝对值
var m = Math.abs(-5);

//sqrt : 获取参数的平方根
var n = Math.sqrt(9);

Date

//1.创建Date对象:一个Date对象就表示一个时间,new Date()表示系统当前时间
var date = new Date();

//2. 函数
// set*: 设置当前日期的日期成分
date.setFullYear(2029);
date.setMonth(11);
date.setDate(28);

// get* : 从当前日期对象中获取 时间成分 (年月日时分秒毫秒星期)
var year = date.getYear()+1900; //获取年份,相对于1900年的偏移年份
var year2 = date.getFullYear(); //今夕是何年?
var month = date.getMonth()+1; //获取月份0-11
var d = date.getDate(); //获取日期
var hour = date.getHours(); //获取小时
var min = date.getMinutes(); //获取分钟
var sec = date.getSeconds(); //获取秒
var ms = date.getMilliseconds(); //获取毫秒
var day = date.getDay(); //获取星期
var timeStr = year+"年"+month+"月"+d+"日 "+hour+":"+min+":"+sec+" "+ms+"ms"+" 星期"+day;
console.log(timeStr);

全局函数

简介:通过全局对象Functions调用全局函数,Functions没有名称,因此全局函数可以直接调用

//parseInt:将字符串转换成整数数值
var s1 = "123";
var m = parseInt(s1);

//parseFloat:将字符串转换成小数数值
var s2 = "3.14";
var n = parseFloat(s2);
var url = "http://www.baidu.com/?param=中华有我";

//encodeURI : 对网址的参数部分进行编码(特殊符号和中文
var newUrl = encodeURI(url);

//decodeURI:对编码后的网址进行解码
var url2 = decodeURI(newUrl);

//escape:对字符串中的特殊和中文进行编码
var str1 = "My name is 赵日天";

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/5355.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nginx虚拟主机与域名解析

文章目录一、域名、dns、ip地址之间的关系二、浏览器、nginx与http协议三、虚拟主机原理四、域名解析与泛解析1.公网ip解析2.内网ip解析五、域名解析相关企业项目实战技术架构1.多用户二级域名2.短网址3.httpDNS一、域名、dns、ip地址之间的关系 域名代表了一个公司、一个人或…

C语言之文件的使用(下)

目录 前言 一、文件的随机读写 1.如何进行随机读写 2.相关函数&#xff08;含例子&#xff09; 1.fseek函数 2.ftell函数 3.rewind函数 二、文件读取结束的判定 1.判定结束的相关函数 1.feof函数 2.ferror函数 2.不同类型文件 1.文本文件和二进制文件 2.不同文件的所判断的返回…

win10怎么安装iis

在win10系统桌面&#xff0c;点击开始菜单里的设置图标。 win10怎么安装iis 在Windows设置界面&#xff0c; 点击应用。 win10怎么安装iis 在应用界面&#xff0c;点击【程序和功能】。 win10怎么安装iis 在程序管理界面&#xff0c;点击启用或关闭Windows功能。 win10怎…

Python采集剧本杀店家数据信息,做可视化演示

前言 哈喽啊&#xff0c;友友们 有喜欢玩桌游或者剧本杀的吗 其实我自己对这个不太感兴趣哈哈&#xff0c;但是也玩过 正好又有朋友约着出去&#xff0c;就是不知道哪家店更值得去 所以趁着还有几天就用python来采集一些 店家的数据信息 并做个可视化演示吧 环境使用: P…

如何利用Dpabi,AFNI,FSL软件计算种子点的功能连接?

种子点功能连接方法基本概念和实现 种子点的功能连接基本概念功能连接在数据处理里的具体应用如何使用 Dpabi, AFNI 和 FSL 计算种子点功能连接呢?选择种子点利用DPABI软件进行种子点的功能连接利用AFNI (3dNetCorr)进行种子点的功能连接利用FSL (fslmeants + fsl_glm)进行…

Linux常用命令详解

系列文章目录 Linux 环境搭建以及xshell远程连接_crazy_xieyi的博客-CSDN博客 ls 该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其他信息。 常用选项&#xff1a; -a 列出目录下的所有文件&#xff0c;包括以. 开头的隐含文件。-d 将目录…

探花交友_第1章_项目介绍以及实现登录功能_第2节_项目介绍

探花交友_第1章_项目介绍以及实现登录功能_第2节_项目介绍 文章目录探花交友_第1章_项目介绍以及实现登录功能_第2节_项目介绍2、项目介绍2.1、项目背景2.2、市场分析2.3、目标用户群体2.4、技术方案2.5、技术架构2.6、技术解决方案2.7、技术亮点2.8、开发方式2.9、基础环境功能…

[附源码]计算机毕业设计JAVA博客系统设计

[附源码]计算机毕业设计JAVA博客系统设计 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis M…

自适应,响应式以及图片的性能优化(响应式图片)

自适应:最常见的就是淘宝无限适配[移动端]rem单位 index.js 2.0 mirrors / amfe / lib-flexible GitCode 可以将这个淘宝无限适配的index.js引入自己的文件中 (它的核心原理就是改变html的font-size的字体大小) 响应式:一个url可以响应多端 响应式最常见的就是媒体查询 …

这款键盘你真的要考虑一下!——Keychron K3测评

家人们&#xff01;这款键盘你真的要考虑一下&#xff01;&#xff01;&#xff01; 如果你是一名程序员&#xff0c;每天在键盘上一顿噼里啪啦&#xff1b;如果你是职场人士&#xff0c;需要长期码字&#xff1b;如果你是游戏爱好者&#xff0c;对键盘有着极致追求&#xff0…

用python实现提高自己博客访问量

文章目录前言1、整体逻辑2、代码实现前言 你还在为自己博客的访问量不高而烦恼吗&#xff1f;我教你如何提高访问量 我发现CSDN上&#xff0c;自己点击自己的博客&#xff0c;可以增加访问量&#xff0c;但是在一定时间内点击同一篇博客&#xff0c;访问量无法再次增加&#x…

Vue3 - <script setup> 单文件组件语法糖的使用教程示例 (SFC)

概念 它是在 单文件组件 (SFC) 中使用组合式 API 的编译时语法糖&#xff0c;解决 vue3 中 setup() 需要繁琐将声明的变量、函数以及 import 引入的内容通过 return 向外暴露&#xff0c;才能在<template> 使用的问题。 小示例 是不是感觉似懂非懂&#xff1f;先来看个…

【蓝桥杯Web】第十四届蓝桥杯(Web 应用开发)模拟赛 1 期-大学组 | 精品题解

&#x1f4d1; 目录&#x1f53d; 前言1️⃣ 数据类型检测2️⃣ 渐变色背景生成器3️⃣ 水果叠叠乐4️⃣ element-ui 组件二次封装5️⃣ http 模块应用6️⃣ 新课上线啦7️⃣ 成语学习8️⃣ 学海无涯9️⃣ 逃离二向箔&#x1f51f; 梅楼封的一天&#x1f53c; 结语&#x1f53d…

Qt编写4K/8K大分辨率播放器(8K占用1%CPU)

一、前言 在经过多种内核的洗礼以后&#xff0c;逐渐对不同内核的不同音视频文件和视频流进行大量的对比测试&#xff0c;比如测试对各种格式的支持性&#xff0c;对各种网络流的支持程度&#xff0c;在同一个地址下占用的CPU/GPU资源比对&#xff0c;最终发现播放器这块mpv优…

【数据结构】单链表(不带头结点)基本操作的实现(C语言)

&#x1f680; 作者简介&#xff1a;一名在后端领域学习&#xff0c;并渴望能够学有所成的追梦人。 &#x1f40c; 个人主页&#xff1a;蜗牛牛啊 &#x1f525; 系列专栏&#xff1a;&#x1f6f9;初出茅庐C语言、&#x1f6f4;数据结构 &#x1f4d5; 学习格言&#xff1a;博…

阿里巴巴任庚:数字城市建设的“两核三转和四横五纵”

阿里巴巴集团副总裁 阿里云智能中国区总裁 任庚 推进数字中国建设是党和国家制定的重要战略&#xff0c;是以数字化转型整体驱动生产方式、生活方式和治理方式的变革&#xff1b;数字城市建设是数字中国建设的重要组成部分&#xff0c;是数字中国建设的先行实践&#xff0c;准确…

【Turtle合集】火遍抖音的五款魔法阵终于被我找到了(初代萌王,童年的小樱回来了)

导语 ​ 小编在昨天看了一个非常好玩的充电器&#xff0c;就是魔法阵充电器。这种感觉&#xff0c;完全是满满的中二气 息啊。魔法阵开启&#xff01;哈哈哈&#xff08;感觉有点儿幼稚&#xff0c;但是还挺有趣的&#xff09; ​ 魔法阵一直都出现在小说、动漫、电影、电视…

MySQL-无锁读

快照 快照是一个指定时间点的数据表示&#xff0c;也就是&#xff0c;在指定时间点的数据版本&#xff0c;即使其他事务对源数据版本做出修改&#xff0c;快照对应的数据版本也不会发生变化&#xff0c;主要是用于事务隔离级别中提供一致性读。 一致性读 一致性读是指一个读…

Chrome调试工具和Emmet语法

调试工具的使用&#xff1a; 打开页面&#xff0c;鼠标"右击"检查&#xff1a; Ctrl滚轮可以放大开发工具代码的大小&#xff1a; 右边CSS样式可以改变数值&#xff08;左右箭头或者直接输入&#xff09;和查看颜色&#xff0c;以此来即时改变网页的元素设置 Ctr…

【C】语言文件操作(二)

&#x1f648;个人主页&#xff1a; 阿伟t &#x1f449;系列专栏&#xff1a;【C语言–大佬之路】 &#x1f388;今日心语&#xff1a;越忙&#xff0c;越要沉住气&#xff01; 继【C】语言文件操作&#xff08;一&#xff09;中我们详细地介绍了文件的顺序读写等一系列函数&…