关闭页面特效

前端学习之JavaScript用法总结

1|0一、JavaScript 基本功能


  • 能直接写入HTML输出流中

    <script>document.write("<h1>我是一级标题</h1>")</script>
  • 能对事件的反应

    <button type="button" onclick="alert('欢迎')">使劲点我</button>
  • 能改变HTML内容

    <p id="demo">JavaScript能改变HTML的内容</p> <script> function myFunction() { x = document.getElementById("demo");//找到元素 x.innerHTML = "Hello JavaScript";//改变内容 }//document.getElementByid("some id")是由DOM(Document Object Model)(文档对象模型)定义的,用于访问HTML元素的正式W3C标准 </script> <button type="button" onclick="myFunction()">点击这里</button>
  • 改变HTML图像

    <script> function changeImage() { element=document.getElementById("myimage")//都是用双引号 if (element.src.match("bulbon"))//检索img标签中的src属性值有没有包含bulbon这个字符串 { element.src="https://www.runoob.com/images/pic_bulboff.gif"; } else { element.src="https://www.runoob.com/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="https://www.runoob.com/images/pic_bulboff.gif" width="100" height="180"> <p>点击灯泡就可以打开或关闭这盏灯</p>
  • 能改变HTML样式,属于改变HTML属性的变种

    <p id="demo">JavaScript能改变HTML的样式</p> <script> function myfunction() { x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式 } </script> <button type="button" onclick="myfunction()">使劲点击我</button>
  • 用于验证用户的输入

    <p>请输入数字</p> <input id="demo" type="text"> <script> function myFunction() { var x=document.getElementById("demo").value; if(x==""||isNaN(x)) { alert("不是数字"); } } </script> <button type="button" onclick="myFunction()">点击这里</button>

2|0二、JavaScript 引入方法


浏览器会解释并执行位于<script></script>之间的JavaScript代码。

<script>alert('hello world')</script> //内部引入方式 <script src="myScript.js"></script> //外部导入方式,不能包含<script>标签

3|0三、JavaScript 输出


  • 使用window.alert()弹出警告框

    <script>window.alert(5+6);</script> <script>window.alert("5+6");</script> //注意二者区别
  • 使用document.write()方法将内容写到HTML文档中

    <script>document.write(Date());</script>
  • 如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖

    <p>我是标题标签</p> <button onclick="myFunction()">使劲戳我</button> <script> function myFunction() { document.write(Date()) } </script>
  • 使用innerHTML写入或获取HTML元素

    <p id="demo">hello world</p> <script> document.getElementById("demo").innerHTML="世界你好"; </script>
  • 使用console.log()写入到浏览器的控制台

    <script> a=5; b=6; c=a+b; console.log(c); </script> <p>浏览器使用F12来启用调试模式,在console菜单查看</p>

4|0四、JavaStript 语法


在编程中,一般固定不变的定值称为字面量,如1,2,3,123.456

4|14.1 JavaScript字面量(typeof)-值


  • 数字(Number)字面量:整数、小数、科学计数
3.14 1000 123e5
  • 字符串(String)字面量:单引号、双引号
  • 表达式字面量:用于计算,如5+6
  • 数组(Array)字面量:定义一个数组
var nums = [2,5,7,1,9]
  • 对象(Object)字面量:定义一个对象
var person = {firstName:"allen",lastName:"jin",age:18}
  • 函数(Function)字面量:定义一个函数
function myFunction(a,b){return a * b;}

4|24.2 JavaScript变量-名称


变量用于存储数据值,使用关键字var定义变量,使用等号为变量赋值。

<p id="demo"></p> <script> var length; length=4; document.getElementById("demo").innerHTML=length;

需求:假设y=5,计算x=y+2并显示结果

<p>假设y=5,计算x=y+2并显示结果</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var y=5; var x=y+2; var demoP=document.getElementById("demo"); demoP.innerHTML="x="+x; } </script>

4|34.3 JavaScript操作符


用算术运算符来计算值;

<p id="demo"></p> <script> document.getElementById("demo").innerHTML=(5+6)*10; </script>

用赋值运算符给变量赋值

<p id="demo"></p> <script> var x,y,z; x=5; y=6; z=(x+y)*10; document.getElementById("demo").innerHTML=z; </script>

注:关键字用于标识要执行的操作,语句用分号分隔,注释用//表示,对大小写敏感,使用Unicode字符集,驼峰法命名规则lastName。

4|44.3 JavaScript语句标识符


语句 描述
break 用于跳出循环。
catch 语句块,在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do ... while 执行一个语句块,在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时,可以将代码块执行指定的次数。
for ... in 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
function 定义一个函数
if ... else 用于基于不同的条件来执行不同的动作。
return 退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出(生成)错误 。
try 实现错误处理,与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时,执行语句块。

5|0五、JavaScript 常见的HTML事件


事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

6|0六、Javastript break和Continnue语句


  • break语句用于跳出循环

    <button onclick="myFunction()">我在这里</button> <p id="demo"></p> <script> function myFunction() { var x = "", i = 0; for (i = 0; i < 10; i++) { if (i == 3) { break; } x = x + "数字为" + i + "<hr>"; } document.getElementById("demo").innerHTML = x; } </script>
  • continue用于跳出循环中的一个迭代

    <button onclick="myFunction()">我在这里</button> <p id="demo"></p> <script> function myFunction() { var x = "", i = 0; for (i = 0; i < 10; i++) { if (i == 3) { continue; } x = x + "数字为" + i + "<hr>"; } document.getElementById("demo").innerHTML = x; } </script>

7|0七、undefined 和 null的区别


typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true // null和undefined的值相等,但类型不等

8|0八、JavaScript 类型


  • 类型转换

    Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。

  • 在JavaScript中有5种不同的数据类型:

    • string
    • number
    • boolean
    • object
    • function
  • 在JavaScript中有3中对象类型:

    • Object
    • Date
    • Array
  • 在JavaScript中有2个不包含任何值得数据类型:

    • ull
    • undefined

9|0九、typeof 操作符


  • NaN的数据类型是number
  • 数组(Array)的数据类型是object
  • 日期(Date)的数据类型为object
  • null的数据类型是object
  • 未定义变量的数据类型为underfined
  • 若对象是JavaScript Array或JavaScript Date,我们无法通过typeof来判断类型,因为返回都是object。
typeof "John" // 返回 string typeof 3.14 // 返回 number typeof NaN // 返回 number typeof false // 返回 boolean typeof [1,2,3,4] // 返回 object typeof {name:'John', age:34} // 返回 object typeof new Date() // 返回 object typeof function () {} // 返回 function typeof myCar // 返回 undefined (如果 myCar 没有声明) typeof null // 返回 object

10|0十、constructor属性


返回所有JavaScript变量的构造函数

"John".constructor // 返回函数 String() { [native code] } (3.14).constructor // 返回函数 Number() { [native code] } false.constructor // 返回函数 Boolean() { [native code] } [1,2,3,4].constructor // 返回函数 Array() { [native code] } {name:'John', age:34}.constructor // 返回函数 Object() { [native code] } new Date().constructor // 返回函数 Date() { [native code] } function () {}.constructor // 返回函数 Function(){ [native code] }

使用constructor属性来查看对象是否为数组(包含字符串"Array")

<p>判断是否为数组</p> <p id="demo"></p> <script> var nums = ['11', '22', '33', '44']; document.getElementById("demo").innerHTML = isArray(nums); function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; } </script>

使用constructor属性来查看对象是否为日期(包含字符串"Date")

<p>判断是否为日期</p> <p id="demo"></p> <script> var myDate = new Date(); document.getElementById("demo").innerHTML = isDate(myDate); function isDate(myDate) { return myDate.constructor.toString().indexOf("Date") > -1; } </script>

11|0十一、date 日期对象


var obj=new Date()
方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

12|0十二、数据类型的转换


12|112.1 字符与数值


Number("3.14") // 返回 3.14 Number(" ") // 返回 0 Number("") // 返回 0 Number("99 88") // 返回 NaN,不是数字
方法 描述
parseFloat() 解析一个字符串,并返回一个浮点数。
parseInt() 解析一个字符串,并返回一个整数。

12|212.2 布尔值与数字


Number(false) // 返回 0 Number(true) // 返回 1

12|312.3 日期与数字


d = new Date(); Number(d) // 返回 1404568027739 d = new Date(); d.getTime() // 返回 1404568027739

12|412.4 不同的数值转换


false 0 "false" false
true 1 "true" true
0 0 "0" false
1 1 "1" true
"0" 0 "0" true
"000" 0 "000" true
"1" 1 "1" true
NaN NaN "NaN" false
Infinity Infinity "Infinity" true
-Infinity -Infinity "-Infinity" true
"" 0 "" false
"20" 20 "20" true
"Runoob" NaN "Runoob" true
[ ] 0 "" true
[20] 20 "20" true
[10,20] NaN "10,20" true
["Runoob"] NaN "Runoob" true
["Runoob","Google"] NaN "Runoob,Google" true
function(){} NaN "function(){}" true
NaN "[object Object]" true
null 0 "null" false
undefined NaN "undefined" false

13|0十三、RegExp正则


用于所有文本搜索和文本替换的操作,语法:/正则表达式主体/修饰符(可选)

  • search()方法使用正则表达式——文本搜索

    var str = "Visit Runoob!"; var n = str.search(/Runoob/i); var str = "Visit Runoob!"; var n = str.search("Runoob"); //字符串作为参数
  • replace()方法使用正则表达式——文本替换

    var str = document.getElementById("demo").innerHTML; var txt = str.replace(/microsoft/i,"Runoob"); var str = document.getElementById("demo").innerHTML; var txt = str.replace("Microsoft","Runoob");

13|113.1 正则表达式修饰符


修饰符可以在全局搜索中不区分大小写

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。

13|213.2 正则表达式模式


方括号用于查找某个范围内的字符:

表达式 描述
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符:

元字符 描述
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。

14|0十四、JavaScript 错误处理


  • try语句测试代码块的错误

  • catch语句处理错误

  • throw语句创建自定义错误

  • finally语句在try和catch语句之后,无论是否触发异常,该语句都会执行。

    try { ... //异常的抛出 } catch(e) { ... //异常的捕获与处理 } finally { ... //结束处理 }
    function myFunction() { var message, x; message = document.getElementById("p01"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "值是空的"; if(isNaN(x)) throw "值不是一个数字"; x = Number(x); if(x > 10) throw "太大"; if(x < 5) throw "太小"; } catch(err) { message.innerHTML = "错误: " + err + "."; } finally { document.getElementById("demo").value = ""; } }

15|0十五、JavaScript 严格模式


"use strict"指令只允许出现在脚本或函数的开头

  • 不允许使用未声明的变量

    "use strict"; x = 3.14; // 报错 (x 未定义)
  • 不允许删除变量或对象

    "use strict"; var x = 3.14; delete x; // 报错
  • 不允许删除函数

    "use strict"; function x(p1, p2) {}; delete x; // 报错
  • 不允许变量重名

    "use strict"; function x(p1, p1) {}; // 报错
  • 不允许使用转义字符

    "use strict"; var x = \010; // 报错
  • 不允许对只读属性赋值

    "use strict"; var obj = {}; Object.defineProperty(obj, "x", {value:0, writable:false}); obj.x = 3.14; // 报错
  • 不允许对一个使用getter()方法读取的属性进行赋值

    "use strict"; var obj = {get x() {return 0} }; obj.x = 3.14; // 报错
  • 变量名不能使用"eval"与"arguments"字符串

    "use strict"; var eval = 3.14; // 报错 "use strict"; var arguments = 3.14; // 报错
  • 由于一些安全原因,在作用域eval()创建的变量不能被调用

    "use strict"; eval ("var x = 2"); alert (x); // 报错
  • 禁止this关键字指向全局对象

    function f(){ return !this; } // 返回false,因为"this"指向全局对象,"!this"就是false function f(){ "use strict"; return !this; } // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。

__EOF__

作  者Mr. Xu
出  处https://www.cnblogs.com/XuChengNotes
关于博主:热爱生活,爱读书/旅游,喜欢技术,乐于专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   正在学习的Barry  阅读(223)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)
-->
点击右上角即可分享
微信分享提示