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>
</head>
<body>
  <!-- <script>
    //内部脚本
     alert('Hello JS');
  </script> -->
  <!-- 外部脚本 -->
<script src="js/demo.js"></script>
</body>
</html>

2.JS基本语法
1）变量常量

点击查看代码 
<!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>
  

  <script>
    //1.声明变量
    // let a = 10;
    // a = "hello"
    // alert(a); //弹出框
    //2.声明常量
    const PI = 3.14;
    // PI = 5.0;
    console.log(PI);//控制台
  </script>
</body>
</html>

2）数据类型，模版字符串拼接

点击查看代码 
<!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>
  

  <script>
    // //1. 数据类型
    // alert(typeof 10); //number
    // alert(typeof 1.5); //number
    
    // alert(typeof true); //boolean
    // alert(typeof false); //boolean

    // alert(typeof "Hello");//string
    // alert(typeof 'JS'); //  string
    // alert(typeof `JavaScript`); //string

    // alert(typeof null); //object   空对象


    // let a ;///undefined
    // alert(typeof a); //undefined


    //2.模版字符串拼接
    let name = `TOM`;
    let age = 18;
    console.log(`我是${name},我今年${age}岁`);
    
    
  </script>
</body>
</html>

3）函数

点击查看代码 
<!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>
  

  <script>
//1.函数的定义 具名函数
// function add(a,b){
//   return a + b;
// }
// let result = add(10,20);
// console.log(result);
//2.函数的定义 匿名函数
//1)函数表达式
// let add = function(a,b){
//   return a + b;
// }
// let result = add(10,20);
// console.log(result);
// 2）箭头函数
let add = (a,b) => {
  return a + b;
}
let result = add(10,20);
console.log(result);
  </script>
</body>
</html>

4）自定义对象

点击查看代码 
<!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>
  

  <script>

//     //自定义对象
//     let user = {
//         name: "Tom",
//         age: 10,
//         gender: "男",
//         sing(){
// alert(this.name+`悠悠的唱着最炫的民族风`)
//          }
//     }
//     //调用对象名及方法
//     alert(user.name);
// user.sing();

//JSON
// let person = {
//   name:`itcast`,
//   age:18,
//   gender:`男`
// }
// alert(JSON.stringify(person));//js对象-->json字符串

let personJson = `{"name":"itcast","age":18,"gender":"男"}`;
alert(JSON.parse(personJson).name);//json字符串-->js对象

  </script>
</body>
</html>

5）DOM

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-DOM</title>
</head>
<body>

  <h1 id="title1">11111</h1>
  <h1>22222</h1>
  <h1>33333</h1>

  <script>
    //修改第一个文本内容
    document.querySelector('#title1').innerHTML = '我是修改后的内容';
  </script>
</body>
</html>
posted @ 2025-01-24 20:47  是好正义呀  阅读(37)  评论(0)    收藏  举报