JavaScript基础入门（1）

S0NeT

已于 2024-07-17 21:57:34 修改

阅读量451

点赞数 12

分类专栏： JavaScript基础前端网路安全基础入门文章标签： javascript 开发语言 ecmascript

于 2024-07-17 19:19:17 首次发布

本文链接：https://blog.csdn.net/qq_52957703/article/details/140477093

版权

网路安全基础入门同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

JavaScript基础

3 篇文章 0 订阅

订阅专栏

1.定义

JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，只需要通过浏览器来解析执行JavaScript代码。

其诞生于1995年，当时的主要目的是验证表单的数据是否合法。JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。

javaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

2.书写位置

1.内部

script标签写在</boby>上面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>

 <!-- 内部写法 -->
  <script>
    // 页面单行警示框
    alert('你好')
  </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>Document</title>
</head>

<body>
  <script src="./2.html"></script>
</body>

</html>

3.内联

vue会使用这种写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="alert('123S')">123S</button>
</body>

</html>

注：

shift+alt+a 多行注释

ctrl+/ 单行注释

结束符；可写可不写

3.输入输出

1.输出

三种方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    // 1.文档输出内容
    document.write('123')
    document.write('<h1>456</h1>')
    //2.页面警示框
    alert('789')
    // 3.控制台输出
    console.log('abc')
  </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>Document</title>
</head>

<body>

  <script>
    
    prompt('输入一串数字')
  </script>
</body>

</html>

4. 变量

1.定义

变量是用于存储信息的"容器"。

eg：let x=5; let y=6; let z=x+y;

这些字母被称为变量

2.使用

let

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let x = 5; let y = 6; let z = x + y;
    document.write(z)
  </script>

</body>

</html>

3.规范

不能用关键字命名

命名区分大小写

命名只能包含下划线，字面，数字，$,且数字不能开头

最好遵守小驼峰命名法

5.数组

let 数组名 =[数据1，数据2......]

和其他编程语言相似不赘述

这里补充一下，js数据不存在越界的问题，找不到的元素输出undefined。

6.常量

eg：

const a=123

7.数字类型

js是弱数据类型，只有赋值之后才知道是什么类型。

1.基本数字类型

数值型：number（凡是数字都是数值型，不区分整数和小数）

注：NaN代表一个计算错误，eg：字符串-数字=NaN

字符串：string（凡是引号包裹起来的内容全部都是字符串）

注：使用“ ” ，‘ ’ ，` ` (反引号）包裹的内容为字符串。

布尔：boolean（true、false）

未定义型：undefined

顾名思义就是未赋值

空：null

2.引用数据类型

object对象

类似于java中的类，可自行百度

3.如何检测数据类型

避免出现“2+2=22”的情况

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let num = 10
    console.log(typeof num)
  </script>
</body>

</html>

8.类型转换

prompt接受的数据类型默认为字符串，所以需要转换来满足不同的需要。

1.隐式转换

1. “+”号两边只要有一个是字符串，都会把另一个转成字符串

2. 除了+以外的算数运算符，-*/ 等都会把另外一个数据类型转换成数字类型

2.显示转换

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let str = '123'
    console.log(Number(str))
  </script>

</body>

</html>

此外parseInt转换为整数

parseFloat转换为浮点数