【无标题】JavaScript入门

发布于:2025-07-06 ⋅ 阅读:(12) ⋅ 点赞:(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. string:字符串,单双引号都可

  3. boolean:布尔。true,false

  4. null:对象为空

  5. undefined:当声明的变量为初始化时,该变量的默认值是undefined

使用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. 返回值也不需要定义类型,可以在函数内部直接使用return返回即可

调用:函数名称(实际参数列表)

定义方式二:

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

使用:


4.对象

JS对象:Array String JSON BOM DOM

Array

JavaScriptArray对象用于定义数组。

定义

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():在指定的毫秒数后调用函数或计算表达式


网站公告

今日签到

点亮在社区的每一天
去签到