devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

新手小白学习JavsScript的第一天

作者：神奇cpp | 2024-07-12 07:35:20

赞

踩

新手小白学习JavsScript的第一天

        我是跟着黑马程序员进行学习的，如果看不懂我写的，可以直接在B站看黑马程序员，会把练习题单独放出来进行练习，进行巩固知识点。 

1.书写js的位置

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。

内部形式——写在<body>之间

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>demo</title>
  6.   </head>
  7.   <body>
  8.     <script>
  9.       alert("这是内部形式哦");
  10.     </script>
  11.   </body>
  12. </html>

外部形式——写在专门存放js的文件中，通过src路径将js文件引入html,书写的位置尽量写到文档末尾 </body> 前面

在index.js的代码如下

alert('这是外部形式哦')

 在html文件的代码如下

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>demo</title>
  6.   </head>
  7.   <body>
  8.     <script src="index.js"></script>
  9.     //注意，使用外部文件引入js文件时，script标签中不能写入其他的js代码
  10.     //<script src="index.js">
  11.         //alert('这里是不会显示的哦')
  12.     //</script>
  13.   </body>
  14. </html>

内联方式——就是写在html文件中的标签中（这里只是举个点击事件的例，后面会写alert等代码的用法）

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>demo</title>
  6.   </head>
  7.   <body>
  8.     <button onclick="alert('这是内联方式哦')">点击我</button>
  9.   </body>
  10. </html>

2.js的注释

js的注释有单行注释和多行注释

单行注释

        符号：//

        作用：//右边这一行的代码会被忽略

        快捷键：ctrl+/

多行注释

        符号：/* */

        作用：在/* */之间的所有内容都会被忽略

        快捷键：shift + alt + a

3.结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;

4.JS常见的输入输出语法

——输出语法

语法1：document.write('要输出的内容')，作用是向body输出内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         document.write('要输出的内容')
  11.          //如果输出的内容写的是标签，也会被解析成网页元素
  12.         document.write('<h1>加了标签输出内容</h1>')
  13.     </script>
  14. </body>
  15. </html>

语法2：alert（‘要输出的内容’），作用是页面弹出警告对话框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.        alert('要输出的内容')
  11.     </script>
  12. </body>
  13. </html>

语法3：console.log('要输出的内容')，作用是在控制台输出语法，程序员调试使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.        console.log('要输出的内容')
  11.     </script>
  12. </body>
  13. </html>

——输入语法

prompt('请输入您的姓名')，作用是显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.        prompt('请输入您的名字')
  11.     </script>
  12. </body>
  13. </html>

5.js代码执行顺序

按html文档流顺序执行js代码，alert（）和prompt() 会跳过页面渲染先被执行

6.字面量

在计算机科学中， 字面量 （literal）是在计算机中描述 事/物
比如：
我们工资是： 1000 此时 1000 就是 数字字面量
'工资' 是 字符串字面量
还有接下来我们学的 [] 数组字面量 {} 对象字面量 等等

7.变量

变量是计算机中用来 存储数据 的“ 容器 ”，它可以让计算机变得有记忆。 变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。 变量指的是容器而不是数据。
7.1变量的使用

变量的使用分为两步：变量的声明与变量的赋值

7.1.1 变量的声明

语法：声明关键字 变量名（标识符） 

声明关键字包括let,var，let 不允许多次声明一个变量。(const是声明常量，这三个都是声明关键字，只是声明的类型不同)

声明多个变量，中间用逗号隔开(为了可读性，并不推荐)

let age = 18,num = 20
7.1.2 变量的赋值
在变量名之后跟上一个“=”，然后是数值。 
  1. //声明一个变量
  2. let age
  3. //赋值,age是变量，18是字面量
  4. age = 18
  5. //输出age变量
  6. alert(age)

再简单点，在声明的同时完成赋值操作，这种操作也被称为变量初始化 

let age = 18
7.1.3 变量更新新值

直接给他一个不同的值来更新

  1. let age = 18
  2. age = 20
  3. alert(age)//此时age的数值已经更新为20
7.2 变量命名规则与规范
7.2.1规则
  • 不能使用关键字，比如If,let,var
  • 只能使用下划线，字母，数字，$组成，且数字不能开头
  • 字母严格区分大小写
7.2.2规范 
  • 起名要有意义
  • 遵守小驼峰命名法，第一个单词小写，后面每个单词首字母大写，比如userName
7.3关键字的拓展 

之前一直使用的是var进行声明变量，但是现在常见的还是用let声明变量。（var就是一个bug，别用了，以后统一使用let）

let——现在实际开发变量声明方式

var——以前的声明变量的方式，会有很多问题

const——类似于let，但是变量的值无法被修改

7.4数组的拓展
7.4.1数组的存储

一种将一组数据存储在单个变量名下的方式，按顺序保存，都有自己的编号，从0开始，数组可以存储任意类型的数据

  1. let arr = [数据1，数据2，数据3，....,数据n]
  2. //arr变量，[数据1，数据2，数据3，....,数据n]为数组字面量
7.4.2数组的取值 

数组名[下标]

  1. let names = ['小明','小红','小李','小米']
  2. names[0]//小明
  3. names[2]//小李
7.4.3数组的长度

数组中数据的个数，通过数组中的length属性获得

  1. let names = ['小明','小红','小李','小米']
  2. names[0]//小明
  3. names[2]//小李
  4. names.length//4

8.常量

当某个变量永远不会改变的时候，就可以使用const来声明，命名规范和变量一致。常量不允许重新赋值，声明的时候必须赋值（初始化）

  1. //以下方法是错误的，千万不能这么写哦
  2. const age =9.8
  3. age = 10
  4. console.log(age)//会报错

9.数据类型

js是弱数据类型，变量到底属于哪种类型，只有赋值之后，我们才能确认

9.1基本数据类型
  • number-数字型（包括正数，负数，小数等）
  • string-字符串型
  • boolean-布尔型
  • undefined-未定义型
  • null-空类型
9.1.1数字型 

js中优先级越高越先被执行，优先级相同时从左向右执行

  • 乘，除，取余（*，/,%）优先级相同
  • 加，减（+，-）优先级相同
  • （*，/,%）> （+，-）
  • 使用（）可以提升优先级

NaN代表是一个计算错误，他是一个不正确的或者一个未定义的数学操作所得到的结果 ,任何对NaN的操作都会返回NaN

console.log('老师'-2)  //NaN
9.2.2字符串型 

通过单引号('  ')，双引号("  "),或者反引号（`  `）包裹的数据都叫字符串

注意事项：单引号和双引号没有本质区别，推荐使用单引号，必要时可以使用转义字符\,输出单引号或双引号

 console.log("\'")//输出的是单引号

通过+运算符，连接字符串(作用是连接字符串与变量)，口诀：数字相加，字符相连

  1. console.log('无敌'+'暴暴龙') //无敌暴暴龙
  2. console.log(2+4) //6

``（反引号），在拼接变量时，用${}包住变量

  1. const age = 18
  2. console.log(`我的年纪刚满${age}岁~`)  //我的年纪刚满18岁~
 9.3.3布尔类型

有固定的两个值，分别为true和false,表示肯定的数据用true,表示否定的数据用false

  1. let isTrue = true
  2. let isFalse = false
  3. console.log(isTrue)    //true
  4. console.log(isFalse)   //false
9.3.4未定义类型 

只有一个值undefined,只声明，不赋值，变量的默认值为undefined，使用场景是在开发中声明一个变量，等待传送过来的数据，如果不知道这个数据是否传递过来，此时可以通过检测这个变量是不是undefined，就判断用户是否有数据传送过来。

  1. let age 
  2. document.write(age)//页面输出的是undefined
9.3.5空类型 

null仅仅是代表一个“无”，“空”或“值未知”的特殊值（使用场景，将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null）

null和undefined的区别：

  • undefined表示没有赋值
  • null表示赋值了，但是内容为空 
9.2 引用数据类型

object-对象

9.3检测数据类型

通过typeof关键字检测数据类型

语法1：typeof x(常用的写法) 

语法2： typeof(x)

  1. let age = 18
  2. console.log(typeof(age))  //number
  3. console.log(typeof age)   //number
9.4数据类型转换

使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，此时就需要是把一种数据类型的变量转换成我们需要的数据类型

9.4.1隐式转换(转换类型不明确，靠经验才能总结)

通过某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则：

  • + 号两边只有有一个是字符串，都会把另外一个转成字符串
  • 除了+以外的算数运算符，比如+，-，*，/等都会把数据转成数字类型

技巧：

  •  +号作为正号解析可以将基本数据类型转换成数字型（和number（）用法效果相同）
  • 任何数据和字符串相加结果都是字符串
  • 有字符串的加法 “” + 1 ，结果是 “1”
  •  减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 "" 转换为 0
  • null 经过数字转换之后会变为 0
  • undefined 经过数字转换之后会变为 NaN
  1.  console.log(11+11)//22
  2.  console.log("11"+11)//1111
  3.  console.log(11-11)//0
  4.  console.log("11"-11)//0
  5.  console.log(1*1)//1
  6.  console.log('1'*1)//1
  7.  console.log(typeof '123')//string
  8.  console.log(typeof +'123')//number，就是+号起作用，将'123'字符串转为数字型
  9.  console.log(+'11' + 11)//22
  10.  console.log(123+ +'123')//246
  11. console.log(''-1)//-1
  12.       console.log('pink'-1)//NaN
  13.       console.log(null+1)//1
  14.       console.log(undefined+1)//NaN
  15.       console.log(NaN+1)//NaN
9.4.2显型转换 
转换为数字型

Number(数据)——如果字符串内容里有非数字，转换结果失败时结果为NaN,即不是一个数字（NaN也是number类型的数据，代表非数字）

paresInt(数据)——只保留整数

parseFloat(数据)——可以保留小数

转换为字符型

String(数据)

变量.toString(进制)

目前第一天就学完咯，黑马程序员后面还有一些练习题，我会写在单独的一个文章里方便看，拜拜咯

  

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/813038?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号