志达IT
做快乐程序员

javascript代码(好玩的js代码)

javascript代码

JavaScript是一种充溢惊喜的编程言语。许多人榜首次遇到JavaScript时,它通常是作为一种Web言语呈现的。一切干流浏览器都有一个JavaScript引擎;并且,还有一些流行的框架,如JQuery、Cash和Bootstrap等,它们能够协助简化网页规划;甚至还有用JavaScript编写的编程环境。它似乎在互联网上无处不在,但事实证明,它对于Electron等项目来说也是一种有用的言语。Electron是一个构建跨渠道桌面应用程序的开源工具包,它运用的言语就是JavaScript。
JavaScript言语的用途多到令人惊奇,它具有各式各样的库,而不仅仅是用于制造网站。它的基础知识非常简略把握,因而,它能够作为一个起点,助你跨出构建你幻想中的东西的榜首步。
装置JavaScript
随着你的JavaScript水平不断提高,你可能会发现自己需求高档的JavaScript库和运转时环境。不过,刚开始学习的时分,你是底子不需求装置JavaScript环境的。由于一切干流的Web浏览器都包括一个JavaScript引擎来运转代码。你能够运用自己喜爱的文本编辑器编写JavaScript,将其加载到Web浏览器中,接着你就能看到代码的作用。javascript
上手JavaScript
要编写你的榜首个JavaScript代码,请翻开你喜爱的文本编辑器,例如Atom或VSCode等。由于它是为Web开发的,所以JavaScript能够很好地与HTML配合运用。因而,咱们先来测验一些根本的HTML:
Nothinghere.
保存这个文件,然后在Web浏览器中翻开它。
要将JavaScript添加到这个简略的HTML页面,你能够创立一个JavaScript文件并在页面的中引用它,或许只需运用符号将JavaScript代码嵌入HTML中。在这个例子中,我嵌入了下面的代码:
Nothinghere.
在浏览器中从头加载页面。
如你所见,标签依然包括字符串”Nothinghere”,可是当它被渲染时,JavaScript会改变它,使其包括”Helloworld”。是的,JavaScript具有重建(或只是协助构建)网页的能力。
这个简略脚本中的JavaScript做了两件事。首先,它创立一个名为myvariable的变量,并将字符串”Helloworld!”放置其间。然后,它会在当时文档(浏览器呈现的网页)中搜索ID为example的一切HTML元素。当它找到example时,它运用了innerHTML属性将HTML元素的内容替换为myvariable的内容。
当然,咱们也能够不必自定义变量。由于,运用动态创立的内容来填充HTML元素也是简略的。例如,你能够运用当时时刻戳来填充它:
Dateandtimeappearshere.
从头加载页面,你就能够看到在呈现页面时生成的时刻戳。再从头加载几回,你能够观察到秒数会不断添加。
JavaScript语法
在编程中,语法syntax指的是怎么编写句子(或“行”)的规则。在JavaScript中,每行代码有必要以分号(;)结尾,以便运转代码的JavaScript引擎知道何时停止阅读。(LCTT译注:从有用角度看,此处的“有必要”其实是不正确的,大多数JS引擎都支持不加分号。Vue.js的作者尤雨溪认为“没有应该不应该,只要你自己喜爱不喜爱”,他同时表示,“Vue.js的代码全部不带分号”。详情能够查看他在知乎上对于此问题的回答。)
单词(或字符串strings)有必要用引号(”)括起来,而数字(或整数integers)则不必。
简直一切其他东西都是JavaScript言语的约好,例如变量、数组、条件句子、目标、函数等等。
在JavaScript中创立变量
变量是数据的容器。你能够将变量视为一个盒子,你在其间放置数据,以便与程序的其他部分共享它。要在JavaScript中创立变量,你能够选用关键字let和var中的一个,请根据你打算怎么运用变量来选择:var关键字用于创立一个供整个程序运用的变量,而let只为特定目的创立变量,通常在函数或循环的内部运用。(LCTT译注:还有const关键字,它用于创立一个常量。)
JavaScript内置的typeof函数能够协助你辨认变量包括的数据的类型。运用榜首个示例,你能够修正显现文本,来显现myvariable包括的数据的类型:
接着,你就会发现Web浏览器中显现出“string”字样,由于该变量包括的数据是”Helloworld!”。在myvariable中存储不同类型的数据(例如整数),浏览器就会把不同的数据类型打印到示例网页上。测验将myvariable的内容更改为你喜爱的数字,然后从头加载页面。
在JavaScript中创立函数
编程中的函数是独立的数据处理器。正是它们使编程得以模块化。由于函数的存在,程序员能够编写通用库,例如,调整图画巨细或计算时刻花费的库,以供其他和你一样的程序员在他们的代码中运用。
要创立一个函数,你能够为函数供给一个自定义名称,后边跟着用大括号括起来的、任意数量的代码。
下面是一个简略的网页,其间包括了一个剪裁过的图画,还有一个剖析图画并返回真实图画尺寸的按钮。在这个示例代码中,这个HTML元素运用了JavaScript的内置函数onclick来检测用户交互,它会触发一个名为get_size的自定义函数。详细代码如下:
保存这个文件,并将其加载到Web浏览器中以测验这段代码。
运用JavaScript的跨渠道应用程序
你能够从代码示例中看到,JavaScript和HTML严密协作,然后创立了有凝聚力的用户体验。这是JavaScript的一大优势。当你运用JavaScript编写代码时,你承继了现代计算中最常见的用户界面之一,而它与渠道无关,那就是Web浏览器。你的代码本质上是跨渠道的,因而你的应用程序,无论是简略的图画巨细剖析器仍是复杂的图画编辑器、视频游戏,或许你愿望的任何其他东西,都能够被一切人运用,无论是通过Web浏览器,仍是桌面(假如你同时供给了一个Electron应用)。
学习JavaScript既简略又有趣。网络上有许多网站供给了相关教程,还有超过一百万个JavaScript库可协助你与设备、外围设备、物联网、服务器、文件体系等进行交互。在你学习的过程中,请将咱们的JavaScript备忘单放在身边,以便记住语法和结构的细节。

好玩的js代码

JavaScript有很多有用比如,它们能够做很多强大的工作,在今天的文中,咱们将分享一些JavaScript特别好用的代码,不管你是JavaScript新手仍是经验丰富的开发人员,学习些新东西总是好的。
期望能帮助您处理一些日常开发中遇到的JavaScript问题.
1.判别字符串是否为JSON格式
运用JSON.parse(str)进行判别,非JSON格式的它会报错,
所以要用trycatch正常的为true,异常的用false就能够判别是否为JSON格式javascript
functionisJSON_test(str){
if(typeofstr==’string’){
try{
varobj=JSON.parse(str);
console.log(‘转换成功:’+obj);
returntrue;
}catch(e){
console.log(‘error:’+str+’!!!’+e);
returnfalse;
}
}
console.log(‘Itisnotastring!’)
}
console.log(isJSON_test(‘[“1″,”2″]’));//true
console.log(isJSON_test(‘{name:”123”}’));//false
console.log(isJSON_test(‘aaaa’));//false
2、生成一个范围内的随机数
运用Math.random()函数能够轻松地在JavaScript中获取随机值。
可是某个范围内的随机数呢?没有规范的JavaScript函数。下面的函数能够用来处理这个问题。
constrandoms=(min,max)=>Math.floor(Math.random()*(max-min+1))+min;
3、切换布尔值
与其运用if句子来确定将布尔值设置为什么值,不如运用下面的函数。
consttoggle=(value)=>value=!value
4、字符串大写
这是一个十分基本的功用,经常被运用。咱们能够在这个函数中输入一个单词或一个完好的句子,只需它是一个字符串,能够让字母大写。
constcapitalize=(str)=>str.charAt(0).toUpperCase()+str.slice(1)
5、查看变量是否为数组
有几种办法能够查看变量是否为数组,但这是我的首选办法——洁净且易于了解。
constisArray=(arr)=>Array.isArray(arr)
6、从URL中提取主机名
这对于查看链接是外部的仍是内部的很有用。基于此,咱们能够为某些链接添加不同的行为或样式。
此函数也适用于包括端口号或查询字符串的URL。
constextractHostname=(url)=>{
lethostname=(url.indexOf(“//”)>-1)?url.split(‘/’)[2]:url.split(‘/’)[0]
//Removeportnumber.
hostname=hostname.split(‘:’)[0]
//Removequerystring.
hostname=hostname.split(‘?’)[0]
returnhostname
}
console.log(extractHostname(‘https://www.baidu.com/?tn=87135040_oem_dg’));//www.baidu.com
7、只允许正数
有时,咱们期望变量只包括正数。不必运用if句子来查看数字是否为负数,能够运用以下单行:
constgetPositiveNumber=(number)=>Math.max(number,0)
1
8、将文本复制到剪贴板
将文本复制到剪贴板是一个能够经过多种方法处理的问题。
constcopyTextToClipboard=async(text)=>{
awaitnavigator.clipboard.writeText(text)
}
9、获取一个月的天数
在没有任何外部库帮助的情况下在
JavaScript中处理日期有时会很苦楚。可是您是否知道有一个洁净简略的单行线能够帮助您获得一个月的天数?
constdaysInMonth=(month,year)=>newDate(year,month,0).getDate()
console.log(daysInMonth(2,2024));//29
console.log(daysInMonth(12,2022));//31
10、以一种很好的方法交流值
交流两个变量的值是你以前或许做过很多次的工作,履行此操作更简洁的办法,如下所示:
letpersonA=”Laura”
letpersonB=”John”
[personA,personB]=[personB,personA]
console.log(personA)//’John’
console.log(personB)//’Laura’
11、用一个空格替换多个空格
处理空格或许很烦人,空格最常见的问题之一是必须处理多个空格。走运的是,咱们能够用单个空格替换它们。
constreplaceSpaces=(str)=>str.replace(/\s\s+/g,”)
console.log(replaceSpaces(‘Toomanyspaces’));//’Toomanyspaces’
有时,咱们或许还想替换其他空白字符,例如制表符和换行符。咱们也能够在一行顶用一个空格替换它们。
constreplaceSpaces2=(str)=>str.replace(/\s\s+/g,”)
console.log(replaceSpaces2(‘too\nmany\twhitespaces\rinhere’));//’toomanywhitespacesinhere’
12、以随机顺序对数组的元素进行排序
有时,期望对数组的元素进行洗牌。例如,在洗牌时。没有规范的JavaScript函数能够为履行此操作。但它能够经过十分短但功用强大的代码行来完结。
constsortRandom=(arr)=>arr.sort(()=>Math.random()-0.5)
console.log(sortRandom([“Sometext”,2,true,4,94.12]));//[‘Sometext’,94.12,2,true,4]
console.log(sortRandom([1,2,3,4,5]));//[4,3,2,5,1]
13、查看两个目标是否相等
比较目标并查看它们是否相等,在大多数情况下,比较目标比只做objectA===objectB要复杂一些。可是,它能够在一行代码中完结。
这个函数的美好之处在于这个函数还能够查看两个以上的目标。
constisEqual=(…objects)=>objects.every(obj=>JSON.stringify(obj)===JSON.stringify(objects[0]))
console.log(isEqual({name:’Frank’,age:32},{name:’Frank’,age:32}));//true
console.log(isEqual({name:’Frank’,age:41},{name:’Frank’,age:32}));//false

赞(0)
未经允许不得转载:志达IT网站 » javascript代码(好玩的js代码)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

志达IT网站 每天分享编程和互联网的IT技术博客

登录/注册联系我们