01-JavaScript入门

最新推荐文章于 2024-09-11 15:33:18 发布

徐凤年..

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量60

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_75238496/article/details/127930279

版权

1.1 js三个组成部分

问题1：为什么要学习JavaScript?

一个前端网页主要由三门语言组成，他们之间是缺一不可的关系
- HTML：确定网页的结构
- CSS: 确定网页的样式
- JavaScript: 确定网页的行为(交互)
  - 众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而JavaScript则主要负责网页的行为（动态效果，交互事件等）。

总结：因为前端网页由三部分组成,HTML、CSS、JavaScript

问题2：JavaScript作用？

JavaScript作用:确定网页的行为交互
- 说人话：教网页做事请。

问题3：JavaScript三个组成部分？

ECMAScript - JavaScript的核心
- ECMAScript定义了JavaScript的语言规范
- JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
DOM - 文档对象模型
- 一套操作页面元素的API
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

BOM - 浏览器对象模型

一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
1.2 js三种书写位置

1-复习CSS代码的三种写法
1.行内样式：不推荐，因为不便于维护
- <h1 style="background: bisque">哈哈哈</h1>
2.内部样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐
- <style>.div{background: hotpink;}</style>
3.外部样式：写在css文件中，使用link导入
- <link rel="stylesheet" href="./01-css外联样式.css">
  - css外联样式的本质其实就是字符串替换将下方这行代码替换成对应文件的所有代码
JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
1.行内样式：不推荐，因为不便于维护
- <button onclick="window.alert('js行内写法')">欢迎来到黑马程序员</button>
2.内部样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
- <script >alert("这是JS内联样式")</script >
3.外部样式：写在js文件中，使用script的src属性导入
- <script src="./01-JS外联写法.js"></script>
3-细节注意点
1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的
2.如果script标签没有src属性则表示内联样式，如果有src属性则表示外联样式，外联样式JS代码只能写在 js文件中而不能写在script标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 2.js外部写法 -->
    <script src="./js外部.js"></script>
</head>
<body>

    <!-- 1.行内写法 -->
    <button onclick="alert('01-行内写法')">我是按钮</button>
    
    <!-- 2-内部写法  -->
    <script>
        alert('02-我是js内部写法')
    </script>

</body>
</html>

<!-- js三种书写位置(与css一致)
1.行内写法 : 写在标签行内
2.内部写法 : 写在script标签内部
3.外部写法 : 写在js外部文件中,使用script标签的src属性导入
    * 注意： 如果script标签写了src属性，就表示外部写法。此时内部的js代码不会执行。
-->

1.3 js两种注释写法

代码注释的作用：
- 1.理清思路，方便自己以后阅读代码
- 2.规范编程，方便以后别人接手代码便于维护

JS注释有两种写法

// 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少
- vscode快捷键 CTRL + /

/* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下

vscode快捷键 ALT + SHIFT + A

1.4-输入与输出语句

输出语句1 : 在网页弹出一个提示框，输出数据

//输出语句1:弹出一个提示框，通常用于提示用户，也可以用于调试
alert("hello world");

输出语句2：在控制台打印某个数据

//输出语句2:打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给程序员自己调试看的
console.log("欢迎大家来到黑马程序员");

输出语句3：将数据显示到网页

//输出语句3:将数据显示到网页，相当于给body添加内容
document.write("黑马程序员是中国最牛逼的IT培训机构");

输入语句1：在网页弹出一个输入框，让用户输入数据

//输入语句1：弹出一个输入框，可以用来输入数据
prompt("深圳的前端平均薪资是多少呀？");

输入语句2：在网页弹出一个确认框，让用户选择确认或取消

//输入语句1：弹出一个确认框，可以用来判断用户选择确认或取消
prompt("深圳的前端平均薪资是多少呀？");

02-数据类型

1.1-数据类型介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 本小节仅为帮助大家理解概念，不需要编写 */ 
        
        /* 
        1.为什么需要有数据类型？
            * 每一种编程语言都有自己的语法规则,在处理数据的时候,也会有自己的规则,不是任何数据都可以处理的。
        2.什么是数据类型？
            * js编译器在解析代码的时候,会产生各种不同的数据。 而不同的数据'运算'与'存储'方式都不同, 计算机需要对这些数据进行分类,称之为数据类型。
        */

        console.log( '123' )//打印  黑色 123
        console.log( 123 )//打印 蓝色 123
        console.log( 'true' )//打印 黑色 true
        console.log( true )//打印 蓝色 true
        console.log( '武汉前端' )//打印 武汉前端
        console.log( 武汉前端 )//程序报错 Uncaught ReferenceError: 武汉前端 is not defined
        
    </script>
</body>
</html>

1.2-五种基本数据类型

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      /*本小节学习目标 :  
          1. 掌握js五种基本类型语法  
          2. 掌握 string number boolean 类型作用 
      */

      //1. string类型 : 字符串 一切以  单引号''  双引号""  反引号``包起来的内容
      //作用 : 用于展示文本

      console.log("黑马程序员")
      console.log("武汉前端")
      console.log(`黑马颜值担当`)
      console.log('我"爱"前端')//嵌套字符串

      //2. number类型 : 数值 一切数学中的数字。
      //作用 : 用于数学计算

      console.log(123) //整数,默认正整数
      console.log(-123) //负数
      console.log(9.9) //小数
      console.log(Infinity) //特殊数值,无穷大

      //3. boolean类型 : 布尔 只有两个值 :  true(真)  false(假)
      //作用 : 用于条件判断  true:条件成立  false:条件不成立

      console.log(true)
      console.log(false)

      //4. undefined : 未定义  只有一个值 undefined
      console.log( undefined )

      //5. null : 空值  只有一个值 null
      console.log( null )
    </script>
  </body>
</html>

03-变量

问题1：为什么要学习变量？

需求：弹出一个输入框，让用户输入自己的年龄，我们如何拿到用户输入的数据，并且显示在网页呢？
- 使用变量就可以获取到用户输入的数据
问题2：变量的作用？
==将数据存储在内存中==
变量原理：内存中一块存储数据的空间
- 说人话：内存相当于现实世界中的大酒店，而变量相当于这个酒店中的一个小房间
问题3：变量原理

变量原理：内存中一块存储数据的空间
说人话：内存相当于现实世界中的大酒店，而变量相当于这个酒店中的一个小房间
1.1-变量声明/取值/赋值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>

//变量作用：在内存中存储数据

//1.声明变量：在内存中开辟一个空间
let age
//2.变量赋值
// = : 赋值运算符（把右边的数据放入左边的变量中）
age = 18
//3.变量取值：读取变量(容器)中存储的数据
document.write( age )

//变量可以在声明的时候赋值
let name = '班长'//等价于 (1) let name (2)name = '班长'
document.write( name )
</script>
</body>
</html>

1.2-常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        变量 :  值可以修改, 使用let声明
        常量 :  值不可以修改,使用const声明
            * 例如  let G = 9.8  let PI = 3.14 
        */ 
        
        //变量可以修改值
        let age = 18
        age = 19
        console.log(age)

        //常量不可以修改值
        const G = 9.8
        G = 10//程序报错
        console.log(G)
        
        
    </script>
</body>
</html>

over