这篇博客介绍了JavaScript的基础语法，特别是if分支结构。内容包括如何计算两个数的和，JS与HTML文件的引用方式，如本地和远程服务器引入。还讲解了当前浏览器窗口、文档的操作，以及变量定义、对象方法、数组操作等基础知识。重点讨论了字符串的substring()和replace()方法以及各种运算符和比较逻辑，最后提到了条件控制语句if的应用。
计算两个数的和，js和html在同一目录下
// 文件名：add.js
function add(a, b) {
return a+b;
}
<head>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
<input type="button" name="bt" value="计算和" onclick="alert(add(100, 200))">
</body>
script src引入的方式
-
本地引入：相对引入
-
远程引入：从远程服务器引入
在远程服务器上执行：
php -S 0.0.0.0:8090快速简单的启用服务器Tab，在页面上自动移动焦点。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="2.1.js"></script> </head> <body> <input type="button" name="bt" value="onfocus" onfocus="javascript:alert(123)"> <a href="javascript:alert(123)">欢迎</a> </body> </html>window当前浏览器的窗口ducument当前文档<body> <script>window.alert('Windows表示当前的浏览器窗口，.表示在当前使用的对象中调用的方法')</script> <!-- .的含义：表示在当前使用的对象中调用方法 --> </body><script>document.write("这是中文，需要UTF-8编码。")</script> <br> <script>document.write("document.write,在当前文档中去写")</script><p id="demo" onclick="cg()">这是p标签</p> <script> function cg() { document.getElementById('demo').innerHTML="document.getElementById('demo')选择指定的对象，innerHTML将对应的内容修改了" } </script><!-- 在开发者工具的Console终端 --> <script> console.log("Catch me if you can.") </script>综合练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="2.1.js"></script> </head> <body> <input type="button" value="onfocus me" onfocus="javascript:alert('按Tab键可以在页面上移动焦点')"> <script>window.alert("Window表示当前的浏览器窗口")</script> <p id="rewrite" onclick="change()">点我,重写页面</p> <script> function change() { document.write("document.write，在当前文档中去写") } </script> <p>ALPHA</p> <p>BRAVO</p> <p id="demo" onclick="cg()">CHARLE</p> <script> function cg() { document.getElementById('demo').innerHTML="document.getElementById('demo')选择id为demo的标签，innerHTML将对应内容修改了" } </script> <script> console.log("congratulations") </script> </body> </html>变量定义：
<script> // 无参函数，在调用时不需要给参数 function printDate() { alert(Date()); } </script> <input type="button" value="打印时间" onclick="printDate()"> <!-- 有参函数，在调用时需要赋值参数 --><script> var str1 = "123"; var str2 = "456"; var num1 = 123; var num2 = 456; // 左右两边是字符串，拼接 alert(str1+str2); // 左右是数字，相加 alert(num1 + num2); </script><script> function add(a, b) { alert(a + b); } </script> <input type="button" value="字符串与数字相加，将数字自动转换为字符串" onclick="add('str',1)"><script> // 将id为num1标签的值赋值给变量num1 // var num1 = document.getElementById("num1").value; // var num2 = document.getElementById("num2").value; // echo(num1); // echo(num2); function add(num1, num2) { return num1 + num2 } </script> <input type="text" name="num1" id="num1"> + <input type="text" name="num2" id="num2"> <input type="button" name="=" value="result" onclick="alert(add(parseFloat(document.getElementById('num1').value),parseFloat(document.getElementById('num2').value)))"><p id="result">结果</p> <script> var result = add(123, 456) document.getElementById('result').innerHTML=result; function add(a, b) { return a + b; } </script>对象，在使用对象的属性的时候，需要
对象名.属性<script> // 4个属性 var car = {name:'BYD', date:"20201118", id:4110090115, color:"red"}; console.log(car.id); alert(car.color); </script>do是car对象的方法，在定义方法时需要通过函数的方式来表达
<script> // 4个属性 var car = {name:'BYD', date:"20201118", id:4110090115, color:"red", // dosomething是car对象的方法，在定义方法时需要通过函数的方式来表达 // dosomething去调用run()，但是js只认识 dosomething，后面的run()可以省略 // 在定义方法时函数名可以省略 dosomething: function run() { document.write("车可以跑"); }, info: function() { // this当前自身对象 return this.name + "的id是" + this.id; } }; console.log(car.id); alert(car.color); var information = car.info(); alert(information); car.dosomething(); </script><script> // 4个属性 var car = { add: function plus(a, b) { return a + b; } }; document.write("<br>"+car.add(123, 456)); </script><script> var car = {name:'BYD', date:"20201118", id:4110090115, color:"red", info: function() { // this当前自身对象 return this.name + "的id是" + this.id; } } // 通过下标的方式取属性值 document.write(car["name"]); // 方法没有return,调用会显示undefined document.write(car.info()); </script><script> // Object，O是大写 var person = new Object(); person.name = "张三"; person.age = 200; person.gender = True; person.famliyClass = "木樨地"; var person = {name:"张三", age:200, gender:True, famliyClass:"木樨地" } </script>没做出来的
<body> <p id="demo">hhh</p> <script> // Object，O是大写 var person = {name:"张三", age:200, gender:True, famliyClass:"木樨地" }; // delete person.age; document.getElementById("demo").innerHTML = person.name + "is " + person.age + "years old"; </script> </body><script> var test = [123,"name",true]; // 数组下标越界 document.write(test[3]); // test数组的length方法，数组长度 document.write(test.length); // 最后一个元素的下标 document.write(test[test.length-1]); // 将数组转换成字符串 document.write(test.toString()); </script>数组的添加删除
<script> var test = [123,"name",true]; test.push("push to add") document.write(test.toString()); // test.pop("pop to out"); // document.write(test.toString()); </script><script> var string = "icqpentester"; // 字符串长度计算 document.write(string.length); var substr = string.substring(1, 8); document.write(substr); // 不要下标为2以前的 // substr(n)：将下标为n以前的元素排除掉，只返回后面的元素 var substr2 = string.substr(2); document.write(substr2) </script><script> var string = "icqpentester"; // 转大写 var str3 = string.toUpperCase(); document.write(str3); // 转小写 var str4 = string.toLowerCase(); document.write(str4); </script><script> // var gender = 1024; // JS中任何数据对象均有toString()的方法，除了对象以外 // document.write(gender.toString()); var fox = {name:"angle", age:5}; document.write(fox.toString()); document.write(fox.name.toString()); document.write(fox.age.toString()); </script><script> var string = "icqpentester"; // 找到指定元素的下标 document.write(string.indexOf("e")); </script><script> var string = "icqpentester"; // 将匹配到的首次出现的元素替换掉 var str = string.replace("e","E"); document.write(str); </script>重点：
substring():substring() 提取字符串的某个部分，并在新字符串中返回被提取的部分。replace():方法用另一个值替换在字符串中指定的值。<p id="demo"></p> <script> var str = "Apple, Banana, Mango"; var res = str.substring(7, 13); document.getElementById("demo").innerHTML = res; </script><p id="demo">请访问hackthebox</p> <script> function myFunc() { var str = document.getElementById("demo").innerHTML; var txt = str.replace("hackthebox", "Baidu"); document.getElementById("demo").innerHTML = txt; } </script> <button onclick="myFunc()">试一试</button>运算符：
<script> var a = 12.3; var b = 0; document.write(a/b); // infinity </script><script> var a = 19; var b = 7.0; document.write(a%b); </script><script> var a = 19; var c = a++; document.write(c); document.write(a); </script><script> var a = 19; var c = ++a; document.write(c); document.write(a); </script><script> var b = 7.0; var d = b--; document.write(d); document.write(b); </script><script> var b = 7.0; var d = --b; document.write(d); document.write(b); </script><script> // 先定义，后使用 var b = 1; b += 2; document.write(b); </script><script> // 先定义，后使用 var a = 4, b = 1; // b += a; // document.write(b); b -= a; document.write(b); </script><script> var a = 2, b = 3; // b *= 3; // b %= 9; b /= 9; document.write(b); </script><script> var a = 1; var b = 2; var c = "Youtube"; document.write(a + b + c); // 3Youtube document.write(a + (b + c)); // 12Youtube </script>比较运算符
=赋值==等于（数值相同，但是类型可以不相同）===恒等于（数值相同，类型相同）!=不等于> < >= <=逻辑运算符
&& and与|| or或! not非的关系(1>0)&&(1===1) (1>0)||(1>1) !(1>0) !(1=2)条件控制
- if 是否
<script> if ((1 >= 0)||(1 == "1.0")) { alert("True"); } else { alert("False"); } </script><script> var age = 51; if (age > 50) { document.write("半身已入土 "); alert("50知天命"); } else if(age < 18) { document.write("天才黑客少年"); } else { document.write("年轻人"); } </script><script> var num = 7; switch (num) { case 1: alert("周一"); break; case 2: alert("周二"); break; case 3: alert("周三"); break; case 4: alert("周四"); break; case 5: alert("周五"); break; default: alert("睡大觉"); break; } </script><script> var a = 10; var b = 20; a > b ? document.write("a大"):document.write("b大"); </script>
扫一扫
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
