【无标题】JavaScript入门

发布于：2025-07-06 ⋅ 阅读:(1350) ⋅ 点赞:(0)

JS

1.JS引入方式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>JS-引入方式</title>
     <!-- 内部脚本 -->
      <!-- 运行时界面弹出警告框 hello JS -->
      <script>
         alert('hello JS');
      </script>
      
      <!-- 外部脚本 -->
       <script src="../js/demo.js"></script>
 </head>
 <body>
     <script>
         alert('hello JS');
     </script>
 </body>
 </html>
 <script>
     alert('hello JS');
 </script>

2.JS基本语法

书写语法

  • 区分大小写：与java一样，变量名,函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

  • 注释：

单行注释：//

多行注释：/* */

  • 大括号代表代码块

 if(count==3){
     alert("111");
 }
输出语句

  • 使用window.alert()写入警告框

image-20250310163040430

  • 使用docment.write()写入HTML输出

  • 使用console.log()写入浏览器控制器


 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>JS基本语法</title>
 </head>
 <body>
     
 </body>
 <script>
     // alert("js");
 ​
     /* alert
      alert*/
 ​
      window.alert("JS");
      document.write("js");
      console.log("js01");
 </script>
 </html>


变量


    
 
  • 使用var关键字来声明变量
    • 
 
  • JS是一门弱类型语言，变量可以存放不同类型的值
    • 



 var a=10;
 a="zhangsan";


    
 
  • 变量名需要遵守规则：
    • 



组成字符可以是任何字母，数字，下划线（_）或美元符号（$）


数字不能开头


建议使用骆峰命名


 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>变量</title>
 </head>
 <body>
     
 </body>
 <script>
     var a=10;
     a="zhangsan";
     alert(a);
 ​
     // 特点1：作用域比较大 全局变量
     // 特点2：可以重复定义 覆盖前一个
     {
         var x=1;
         var x="A";
     }
     alert(x);
 ​
 ​
     // let:局部变量 不能重复定义
     {
         let y=1;
         alert(y);
     }
     alert(y);
 ​
     // const:常量 不能改变
     const p=3.14;
     p=3.15;
     alert(p);
 </script>
 </html>


数据类型


JavaScript中分为：原始类型和引用类型


原始类型：


    
 
  1. number：数字
    2. 
 
  2. string：字符串，单双引号都可
    3. 
 
  3. boolean：布尔。true，false
    4. 
 
  4. null：对象为空
    5. 
 
  5. undefined：当声明的变量为初始化时，该变量的默认值是undefined
    6. 



使用typeof运算符可以获取数据类型


 


<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>数据类型</title>
 </head>
 <body>
     
 </body>
 <script>
     // number
     alert(typeof 3);
     alert(typeof 3.14);
 ​
     // string
     alert(typeof "A");
     alert(typeof 'hello');
 ​
     // boolean
     alert(typeof true);
     alert(typeof false);
 ​
     // object
     alert(typeof null);
 ​
 ​
     // undefined
     var a;
     alert(typeof a);
 ​
 ​
 </script>
 </html>




运算符


    
 
  • 算术运算符：+，-，*，/，%，++,--
    • 
 
  • 赋值运算符：=，+=，-=，*=，/=，%=
    • 
 
  • 比较运算符：>,<,>=,<=,!=,==,===
    • 
 
  • 逻辑运算符：&&，||，！
    • 
 
  • 三元运算符：条件表达式？true_value:false_value
    • 



==会进行类型转换，===不会进行类型转换


 var age=20;
     var _age="20";
 ​
     alert(age==_age);//true
     alert(age===_age);//false


3.函数


介绍：函数（方法）是被设计为执行特定任务的代码块。


定义：JavaScript函数通过function关键字进行定义，语法为：


 function functionName(参数a,b){
 //要执行的代码
 }



 
注意：

 
    
  
  1. 形式参数不需要类型，因为Javascript是弱类型语言。
    2. 
  
  2. 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
    3. 
 




调用：函数名称（实际参数列表）


定义方式二：


  var functionName=function(参数1，2...){
             return a+b;
   }


使用：




4.对象


JS对象：Array String JSON BOM DOM


Array


JavaScript中Array对象用于定义数组。


定义：


var 变量名=new Array(元素列表);//方式一    var arr= new Array(1,2,3,4);
var 变量名 = [元素列表];//方式二   var arr=[1,2,3,4];


访问：


arr[索引]=值;//   arr[10]="hello";


属性：


length:设置或返回数组中元素的数量


方法：


forEach():遍历数组中每个有值的元素，并调用异常传入的函数


push():将新元素添加到数组的末尾，并返回新的长度


splice():从数组中删除元素


 arr.forEach(function(e){
       console.log(e);
 })
 ​
 // ES6 箭头函数：(...) => {...}  简化函数定义
 arr.forEach((e)=>{
       console.log(e);
 })
 ​
 // push:添加元素到数组末尾
 arr.push(7,8,9);
 console.log(arr);
 ​
 // splice:删除元素
 arr.splice(2,2);
 console.log(arr);


String


String字符串创建方法有两种：


 var 变量名=new Stirng("...");
 var 变量名="...";


属性：


length:字符串的长度


方法：


charAt():返回在指定位置大的字符


indexOf():检索字符串


trim():去除字符串两边的空格


substring():提取字符串中两个指定的索引号之间的字符


var str=new String("hello");
var str="hello";
// length
console.log(str.length);
// charAt
console.log(str.charAt(1));
// indexOf
console.log(str.indexOf("lo"));
// trim
var s=str.trim();
console.log(s);

// substring(start,end)   开始索引，结束索引（含头不含尾）
console.log(s.substring(0,4));


JSON


自定义对象：


定义格式：


var 对象名{
    属性名1：属性值1,
    属性名2：属性值2,
    函数名称：function(形参列表){}
}


调用格式：


对象名.属性名; //consle.log(user.name);
对象名.函数名(); //user.eat();


var user={
            name:"Tom",
            age:10,
            gender:"male",
            eat:function(){
                alert("吃饭~");
            }

        }
        alert(user.name);
        user.eat();


JSON——基础语法：


定义：


 var 变量名='{"key1":value,"key2":value2}';
 var jsonstr='{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';


JSON字符串转为JS对象：


 var jsObject=JSON.parse(userStr);


JS对象转为JSON字符串：


 var jsonstr=JSON.stringify(jsObject);
  var jsonstr= '{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';
         alert(jsonstr.name);//undefined
 ​
         // 将JSON字符串转为JS对象
         var obj=JSON.parse(jsonstr);
         alert(obj.name);
 ​
         // 将JS对象转换为JSON字符串
         alert(JSON.stringify(obj));


BOM


概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。


组成：


    
 
  • Window：浏览器窗口对象
    • 
 
  • Navigator：浏览器对象
    • 
 
  • Screen：屏幕对象
    • 
 
  • History：历史记录对象
    • 
 
  • Location：地址栏对象
    • 




 
window

 
    
  
  • 介绍：浏览器窗口对象
    • 
  
  • 获取：直接使用window，其中window.可以省略。
     
     window.alert("Hello Window");
 alert("Hello Window");
    • 
  
  • 属性
    
   
      
    
    • history:对history对象的只读引用。
      • 
    
    • location：对于窗口或框架的Location对象。
      • 
    
    • navigator：对Navigator对象的只读引用。
      • 
   
    • 
  
  • 方法：
    
   
      
    
    • alert()：显示带一段消息和一个确认按钮的警告框
      • 
    
    • confirm()：显示带一段消息以及确认按钮和取消按钮的对话框
      • 
    
    • setInterval()：按钮指定的周期（以毫秒记）来调用函数或计算表达式
      • 
    
    • setTimeout()：在指定的毫秒数后调用函数或计算表达式
      • 
   
    • 
 





                        
                        

                        

                            
                            
                        

                        
                        

                            

                            
                        

                            

                                
                            

                        

                    


                



            


            

                
                

    

        

            网站公告
        

    

    

        
        
    



                

    

        

            今日签到
        

    

    

        
点亮在社区的每一天

        
        去签到
    



                

    

        

            热门文章
        

    

    

        
        

        

    

    
    
    


    



                

    

        

            最新发布