【无标题】

最新推荐文章于 2025-05-10 22:30:50 发布

莫默815

最新推荐文章于 2025-05-10 22:30:50 发布

阅读量280

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/qq_51114085/article/details/125900616

版权

文章目录

1、js基础

JS不区分单引号和双引号。
js是弱类型语言，定义用：“var”；
变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号。
起有意义的名字，最重要一点就是“见名知意”。
用于点击的实例

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
     </head>
     <body>
           <input type="text" /> <br />
           <!--<button οnclick="clickme()">点我</button>-->
           <button>点我</button>
           <script type="text/javascript">
                function.clikeMe(){
                     consle.log("dian")
                     alert("点我")
                }
           </script>
     </body>
</html>

在这里插入图片描述

2、DOM介绍：

dom：document object model文档对象模型
dom技术在JS里面作用：JS语言和Html/Xml标签之间沟通的一个桥梁。
为了方便javascript语言通过dom操作html比较方便，
把html标签的内容划分为各种节点：
文档节点(document)
元素节点也叫标签 getElementsByTagName
文本节点
属性节点 type=”text” name=”username”

注释节点
dom就是学习利用JS如何实现对Html标签增删改查。

documnet：是页面中的内置对象，内置对象简单理解就是已经new好的一个对象，对象的名字就叫document。

元素节点的获取：
document.getElementById( id属性值);
document.getElementsByTagName(“标签名”)；

PS：目前感觉最为重要的是.value的使用，这个是获取input中的值的方法
具体为 var ges = document.getElementById(‘rad’).value;

<!DOCTYPE html>
<html>
<!-- 页面的执行顺序，script中函数点击才触发，var赋值取值等加载完毕就触发-->
<!--window.οnlοad=function()是在页面加载完之后执行该操作-->
     <head>
           <meta charset="utf-8">
           <title></title>
     </head>
     <body>
           <table>
                <tr>
                     <td><img src="" /></td>
                     <td colSpan="3">购物简易计算器</td>
                </tr>
                <tr>
                     <td>第一个数</td>
                     <td colSpan="3">
                           <input type="text" id="num1Id" />
                     </td>
                </tr>
                <tr>
                     <td>第二个数</td>
                     <td colSpan="3">
                           <input type="text" id="num2Id" />
                     </td>
                </tr>
                <tr>
                     <td>
                           <input type="button" value=" + "  onclick="cal('+')" />
                     </td>
                     <td>
                           <input type="button" value=" - "  onclick="cal('-')" />
                     </td>
                     <td>
                           <input type="button" value=" * "  onclick="cal('*')" />
                     </td>
                     <td>
                           <input type="button" value=" / "  onclick="cal('/')" />
                     </td>
                </tr>
                <tr>
                     <td>计算结果</td>
                     <td colSpan="3">
                           <input type="text" id="resultId" />
                     </td>
                </tr>
           </table>
           <script type="text/javascript">
//              window.onload = function() {
//                         num1 =  document.getElementById('num1Id').value;
//                         num2 =  document.getElementById('num2Id').value;
//                   }
                     // 把变化的部分作为参数传递过来
                function cal(type) {
                     var num1 =  document.getElementById('num1Id').value;
                     var num2 =  document.getElementById('num2Id').value;
                     var result = 0;
                     result = eval(num1 + type + num2);
                     //                     switch(type) {
                     //                           case '+':
                     //                              result =  parseInt(num1)  + parseInt(num2);
                     //                           break;
                     //                           case '-':
                     //                              result =  parseInt(num1)  - parseInt(num2);
                     //                           break;
                     //                           case '*':
                     //                              result =  parseInt(num1)  * parseInt(num2);
                     //                           break;
                     //                           case '/':
                     //                              result =  parseInt(num1)  / parseInt(num2);
                     //                           break;
                     //                           default:
                     //                           break;
                     //                     }
                     var resultObj =  document.getElementById('resultId');
                     resultObj.value = result;
                }
           </script>
     </body>
</html>

一个较为重要的关于类型的图
在这里插入图片描述

3、关系运算符：

全等：===
不全等：!==
判断值是不是相等，还有类型是不是相等。

4、 String：

创建String对象有两种方式
1、var str1 = “hello js!”;
2、var str2 = new String(“hello js!”);
String属性：length
str1.length; // 9

String常用的方法：

1、大小写转换

str.toLowerCase();
str.toUpperCase();
var str = “Hello jS!”;
console.log(str.toLowerCase());//hello js!
console.log(str.toUpperCase());//HELLO JS！

2、获取指定字符：

str.charAt(index) 返回指定位置的字符
index：字符位置
console.log(str.charAt(6));//j

3、查询指定字符串出现索引

str.indexOf(findstr, [index]);

str.indexOf(findstr);
str.indexOf(findstr,index);
str.indexOf(findstr,[index])

str.lastIndexOf(findstr, [index]);
使用说明：
findstr:查找的字符串
index:开始查找的位置索引，可以省略
返回findstr在x中出现的首字符位置索引，如果没有找到则返回-1
lastIndexOf:从后面找起

4、split() 方法用于把一个字符串分割成字符串数组。

x.split(separator,howmany)
separator : 字符串或正则表达式，从该参数指定的地方分割 stringObject
howmany:指定返回数组的最大长度，可以省略
返回分割后的字符串数组

5、 Boolean

Java中条件表达式必须返回布尔类型
2<3
JS中表达式可以是任意表达式。

1不是0，就是非空值，表示true。

NaN=Not a number

在JS里面一切表示空的值都是false，非空的值都是true。

6、Array对象：

创建数组对象
int[] array; String[] array;
var array1 = new Array();//创建一个空的数组
var array2 = new Array(7);//创建长度是7的数组
var array3 = new Array(100, “a”, true);
var array4 = [100, 200, 300];

获取数组元素的个数：length属性
var array1 = new Array(7);
console.log(array1.length);//7
var array2 = new Array(100, “a”, true);
console.log(array2.length);//3
//创建一个空数组
//数组长度是可变
var array = new Array();
array[0] = “232”;
console.log(array);//[“232”]
console.log(array.length);//1
array[1] = true;
console.log(array);//[“232”, true]
console.log(array.length);//2

//使用push和pop分别对应栈操作的入栈和出栈
var arr = new Array();
arr.push(“zhangsan”);
console.log(arr);//[“zhangsan”]
arr.push(false)
console.log(arr);//[“zhangsan”, false]
arr.push(45)
console.log(arr);//[“zhangsan”, false, 45]
//console.log(arr[2]);//45
console.log(arr.pop());//45
console.log(arr.pop());//false
console.log(arr.pop());//zhangsan
Math:数学相关操作
Math.PI Math.round(3.14)

7、eval:（用于含符号不好转变的简单运算）

console.log(eval(‘2+3’)); //5
eval(‘var x=10;var y=20;console.log(x*y);’); //200
inner，用于在页面输出相关信息，通常配合使用

var spanObj = document.getElementById(‘guess’);
spanObj.innerHTML=‘大了’

innerText 直接当成一个字符串展示
innerHtml 将内容当成html来解析

大了
spanObj.innerText=‘大了’；

例子

1、阶乘

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script>
                function calculateJieCheng(){
                     var  num1=document.getElementById("jiecheng").value;
                     var num =parseInt(num1);
                     var result = fac(num);
                     var temp =  document.getElementById("resultnum");
                     temp.innerText=num+"的阶乘是:"+result;
                }
                function fac(num){
                     if(num===1){
                           return 1;
                     }
                     else{
                           return num*fac(num-1);
                     }
                }
                
           </script>
     </head>
     <body>
           
<input type="text" id="jiecheng">
     <button onclick="calculateJieCheng()">计算阶乘</button>
     <span id="resultnum"></span>
     </body>
</html>

2、猜数字游戏：

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
     </head>
     <body>
           <input type="text" id="rad" value="" /><br />
           <input type="button" value="猜" onclick="guess()"  /><br />
           <!-- span一块小区域-->
           <span id="guess"></span>
           <script type="text/javascript">
                var random = parseInt(Math.random() * 10) + 1;
                console.log(random);
                function guess() {
                     var spanObj =  document.getElementById('guess');
                     var ges =  document.getElementById('rad').value;
                     var num = parseInt(ges);
                     if (num > random) {
//                                   spanObj.innerHTML = '<span  style="color:red">大了</span>';
                                     spanObj.innerHTML='<span  style="color: red;">大了</span>'
//                 spanObj.innerText='大了';
                     }
                     if (num < random) {
//                         spanObj.innerText='小了';
spanObj.innerHTML='<span style="color: red;">小了</span>'
                     }
                     if (num == random) {
//                         spanObj.innerText='猜对了';
spanObj.innerHTML='<span style="color: greenyellow;">猜对了</span>'
                      }
                }
           </script>
     </body>
</html>