JavaScript 基础入门:脚本嵌入、字符串处理与函数定义

作者:闭包旅人

时间:2026-10-22

浏览:544

本文系统梳理 JavaScript 基础语法,涵盖在 HTML 中创建脚本块、隐藏代码及链接外部文件的方法。详细解析字符串的搜索、替换、格式化(如大小写转换、字体样式)及数组的创建与排序。同时介绍警告框、确认框等交互方式,以及函数的定义、调用和页面加载后的执行逻辑,适合初学者快速掌握核心概念。

文章目录

JavaScript 基础与 HTML 嵌入

基础知识:HTML


JavaScript 就这么回事1:基础知识



1 创建脚本块



1: <script language="JavaScript">


2: JavaScript code goes here


3: </script>


2 隐藏脚本代码


1: <script language="JavaScript">


2: <!--


3: document.write("Hello");


4: // -->


5: </script>


在不支持JavaScript的浏览器中将不执行相关代码


3 浏览器不支持的时候显示


1: <noscript>


2: Hello to the non-JavaScript browser.


3: </noscript>



4 链接外部脚本文件


1: <script language="JavaScript" src="/"filename.js""></script>



5 注释脚本


1: // This is a comment


2: document.write("Hello"); // This is a comment


3: /*


4: All of this


5: is a comment


6: */



字符串处理与格式化

6 输出到浏览器


1: document.write("<strong>Hello</strong>");



7 定义变量


1: var myVariable = "some value";



8 字符串相加


1: var myString = "String1" + "String2";


9 字符串搜索


1: <script language="JavaScript">


2: <!--


3: var myVariable = "Hello there";


4: var therePlace = myVariable.search("there");


5: document.write(therePlace);


6: // -->


7: </script>



10 字符串替换



1: thisVar.replace("Monday","Friday");



11 格式化字串



1: <script language="JavaScript">


2: <!--


3: var myVariable = "Hello there";


4: document.write(myVariable.big() + "<br>");


5: document.write(myVariable.blink() + "<br>");


6: document.write(myVariable.bold() + "<br>");


7: document.write(myVariable.fixed() + "<br>");


8: document.write(myVariable.fontcolor("red") + "<br>");


9: document.write(myVariable.fontsize("18pt") + "<br>");


10: document.write(myVariable.italics() + "<br>");


11: document.write(myVariable.small() + "<br>");


12: document.write(myVariable.strike() + "<br>");


13: document.write(myVariable.sub() + "<br>");


14: document.write(myVariable.sup() + "<br>");


15: document.write(myVariable.toLowerCase() + "<br>");


16: document.write(myVariable.toUpperCase() + "<br>");


17:


18: var firstString = "My String";


19: var finalString = firstString.bold().toLowerCase().fontcolor("red");


20: // -->


21: </script>



数组操作与字符串分割

12 创建数组


1: <script language="JavaScript">


2: <!--


3: var myArray = new Array(5);


4: myArray[0] = "First Entry";


5: myArray[1] = "Second Entry";


6: myArray[2] = "Third Entry";


7: myArray[3] = "Fourth Entry";


8: myArray[4] = "Fifth Entry";


9: var anotherArray = new Array("First Entry","Second Entry","Third Entry","Fourth Entry","Fifth Entry");


10: // -->


11: </script>



13 数组排序


1: <script language="JavaScript">


2: <!--


3: var myArray = new Array(5);


4: myArray[0] = "z";


5: myArray[1] = "c";


6: myArray[2] = "d";


7: myArray[3] = "a";


8: myArray[4] = "q";


9: document.write(myArray.sort());


10: // -->


11: </script>





14 分割字符串



1: <script language="JavaScript">


2: <!--


3: var myVariable = "a,b,c,d";


4: var stringArray = myVariable.split(",");


5: document.write(stringArray[0]);


6: document.write(stringArray[1]);


7: document.write(stringArray[2]);


8: document.write(stringArray[3]);


9: // -->


10: </script>





用户交互与函数应用

15 弹出警告信息



1: <script language="JavaScript">


2: <!--


3: window.alert("Hello");


4: // -->


5: </script>





16 弹出确认框



1: <script language="JavaScript">


2: <!--


3: var result = window.confirm("Click OK to continue");


4: // -->


5: </script>





17 定义函数



1: <script language="JavaScript">


2: <!--


3: function multiple(number1,number2) {


4: var result = number1 * number2;


5: return result;


6: }


7: // -->


8: </script>





18 调用JS函数



1: <a href="#" onClick="functionName()">Link text</a>


2: <a href="/"javascript:functionName"()">Link text</a>





19 在页面加载完成后执行函数



1: <body onLoad="functionName();">


2: Body of the page


3: </body>




20 条件判断



1: <script>


2: <!--


3: var userChoice = window.confirm("Choose OK or Cancel");


4: var result = (userChoice == true) ? "OK" : "Cancel";


5: document.write(result);


6: // -->


7: </script>



1

234下一页阅读全文

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章