首页 > 编程语言 >JavaScript学习 第一天

JavaScript学习 第一天

时间:2024-03-16 21:29:06浏览次数:29  
标签:console log 第一天 age JavaScript 学习 let 变量

一、什么是 JavaScript

(一)介绍

是一种运行在浏览器的编程语言,进行人机交互

(二)可以做什么

可以做网页特效,表单验证,进行数据交互,还有服务端编程node.js

(三)组成

由ECMAScript 和 Web APIs组成

其中Web APIs 由DOM 和 BOM 组成

ECMAScript : js基础语法知识

Web APIs :

DOM : 操作文档 对页面元素进行移动 改变大小 留言 添加删除按钮功能等

BOM : 操作浏览器 弹窗 检测窗口宽度 存储数据等

JavaScript资料网站:  http://developer.mozilla.org/zh-CN/docs/Web/JavaScript

二、JavaScript 书写位置

(一)内部 JavaScript

写在html文件里,两边用script标签包住,且规范写在</body>上面,因为得先有前面的html标签再有script标签进行操作,是有顺序的。

示例:弹出警示框显示你好

<body>
  <script>
    alert('你好')
  </script>
</body>

(二)外部 JavaScript

<body>
  <script src="start.js">不写内容</script>
</body>

(三)内联 JavaScript

目前不需要

(四)注释

单行注释:ctrl + /

多行注释:shift + alt + a

三、JavaScript 语法

(一)输出语法

1.document.write()
<body>
  <script>
  document.write('123')
  document.write('<h1>123<h1>')
  </script>
</body>
2.alert 弹出警告对话框
<body>
  <script>
    alert('你好')
  </script>
</body>
3.console.log()  调试使用
<body>
  <script>
    console.log('123')
  </script>
</body>

(二)输入语法

1.prompt()
<body>
  <script>
   prompt('请输入你的年龄: ')
  </script>
</body>

四、JavaScript 代码执行顺序

从上至下按顺序执行,但会优先执行 alert() 和prompt()

五、字面量

就是所有的能看到的元素是什么类型的数据

1000是数字

‘哈哈哈哈’是字符

[]数组 

{}对象

六、JavaScript 变量介绍

(一)变量是什么

变量是存储数据的容器

(二)变量的使用

1.先声明变量

let + 变量名

2.赋值

age = 18

<body>
  <script>
  let age
  age = 18
  console.log(age)
  </script>
</body>
3.声明赋值同时进行
 <script>
 let age = 18
  </script>

如果想改变age的值直接 age = 其他值就行 不用再写一遍let,会报错,因为声明过了。

(三)变量的本质

在计算机内存中开辟一块空间,通过变量名能找到那块儿空间

(四)变量的命名规范

1.不能用关键字

不能用let var 等

2.只能用下划线 字母 数字 $ 组成 数字不能开头

3.严格区分大小写

4.起名要有意义

5.遵顼小驼峰命名法

第一个单词字母小写 后面单词的首字母大写 useName

(五)let 和 var 的区别

基本不用var

var可以先使用再声明

var声明过的变量可以重复声明

而let不是 必须严格按顺序进行

<body>
  <script>
    var age
    console.log(age)
    age = 18
  </script>
</body>

七、JavaScript 数组

(一)语法

let 数组名 = [数据1,数据2,...,数据n]

和c语言一样

八、JavaScript 常量

(一)概念

使用const声明的变量 当这个变量永远不会改变的时候就可以使用常量const来声明(例如\prod),而不用let 具体使用规范和变量一致,const声明时必须指定值不能分开声明,而且常量不允许再次进行赋值。

<body>
  <script>
    const age = 18
  </script>
</body>

九、JavaScript 数据类型

(一)基本数据类型

包含 number数字型 string字符串型 boolean布尔型 underfined未定义型 null空类型

1.数字型 number

正数 负数 整数 小数 都算数字型

JavaScript 是弱数据类型语言 由赋的值才知道数据是什么类型 let num不知道num是什么类型,let num = 18 才是整数类型

Java 是强数据类型语言 int num 则num里面一定是整数数据

数字型可以进行加减乘除取余数操作 + - * / %

NaN :意思是最后得到的不是数据类型 比如用一个字符串减去2最后得到的就是这个类型,任何对NaN操作都会返回NaN

2.字符串型 string

用‘’ “” 或者`包裹的数据就是字符串型 推荐使用单引号

已经用单引号包含的一段话里面不能再加单引号了,但是可以加双引号 (外单内双 外双内单)

字符串拼接:用 + 号就能实现字符串的拼接

<body>
  <script>
    let useName = '我是'
    let person = '一个人'
    console.log(useName + person)
  </script>
</body>

字符和数字巧妙相连:

<body>
  <script>
    let useName = '我今年'
    console.log(useName + 18)
  </script>
</body>

模板字符串:用反引号和$加大括号来写`${}`

<body>
  <script>
    let name = '张三'
    let age = 18
    console.log(`大家好我叫${name}今年${age}岁了`)
  </script>
</body>
3.布尔型 boolean

真假 真是true 假是false

<body>
  <script>
  let zhende = true
  console.log(zhende)
  </script>
</body>
4.未定义类型 undefined

如果只声明变量不进行赋值,变量的默认值为undefined

4.空类型 null

null 和 undefined 的区别

undefined 是没有对变量进行赋值

而 null 是对变量赋值了 但是内容为空

<body>
  <script>
    console.log(undefined + 1)
    console.log(null + 1)
  </script>
</body>

第一句返回NaN 因为一个位置的东西加1 也不知道是什么返回不是数据类型

第二句返回数字1 因为空加数字1 结果为数字1

(二)检测数据类型

1.作为运算符

typeof x 常见

2.函数形式

typeof(x)

<body>
  <script>
   let name = '张三'
   console.log(typeof name)
  </script>
</body>

(三)类型转换

用prompt()储存让用户输入的数据会默认为字符串类型的变量,所以想用别的类型就需要转换

1.隐式转换

使用运算符,系统内部自动将数据类型进行转换。

+ 号旁边只要有一个是 字符串就会把另一个转换成字符串。

- / * 只要一边有数字类型就会把另一个转换成数字类型变量。

+ 也能将字符转换成数字型 +‘123’ 123就变成数字类型的了

2.显式转换

Number(str)转换成数字 严格注意大小写

<body>
  <script>
    let str = prompt('请输入你的年薪')
    console.log(Number(str))
    let str = Number(prompt('请输入你的年薪'))
    console.log(str)
    let str = +prompt('请输入你的年薪')
    console.log(str)
  </script>
</body>

parseInt()只要整数部分

parseInt(‘12px’) 结果是12

parseInt(‘12.34px’) 结果是12 只要整数

parseFloat(‘12.34px’)结果是12.34 可以是浮点数 里面前面不能加别的 例如‘abc12.34px’就不能识别了返回NaN

(四)引用数据类型

包含 object对象

十、JavaScript 常见错误

const 声明的时候后面没赋值

没声明就使用变量

变量 或 常量被多次赋值

LAST:小练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }

    table {
      margin: 0 auto;
      border-collapse: collapse;
      border: 1px solid black;
    }

    td,
    th {
      padding: 10px 20px;
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <h2>订单确认</h2>
  <script>
    let value = +prompt('请输入价格')
    let amount = +prompt('请输入数量')
    let address = prompt('请输入地址')
  let all = value * amount
    document.write(`
    <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>小米</td>
      <td>${value}</td>
      <td>${amount}</td>
      <td>${all}</td>
      <td>${address}</td>
    </tr>
  </table >
    `)
  </script>
</body>
</html>

标签:console,log,第一天,age,JavaScript,学习,let,变量
From: https://blog.csdn.net/qq_63342197/article/details/136701108

相关文章

  • 动态代理和反射的基本学习
    今天在跟着视频学习的时候发现老师讲的知识点都只简单的了解过但是没有深入学习,导致在跟着视频敲代码的时候完全不知道自己是在写什么东西。所以决定先把基础补一补再继续跟老师做项目。打算先把自定义注解的编写和解析学好,想要学号这一块,又涉及到了Aop和java中反射的学习,那么话......
  • 初级Android开发学习笔记(三)图形用户界面设计-按钮Button
      按钮Button及按钮处理事件        按钮Button用于处理人机交互的事件,在一般应用程序中常常会用到。由于按钮Button是文本标签TextView的子类,按钮Button继承了文本标签TextView所有的方法和属性。其继承关系如图所示。    按钮Button在程序设计......
  • 高架学习笔记之软件工程基础
    目录一、软件工程二、软件过程模型三、瀑布模型四、原型模型五、螺旋模型六、增量模型七、构建组装模型八、敏捷模型九、统一过程模型(RUP)十、软件能力成熟度模型一、软件工程    计算机刚刚投入实际使用时,软件基本上是在指定的计算机上由个人进行设计、使用以......
  • 编译实践学习 Part2
    本文以CCBY-SA4.0协议发布。闲话重写了Part1里因为手滑而删除的AST。LunarVimIDE,你值得拥有(代码传上了github(推荐https://mirror.ghproxy.com加速).KoopaIR遍历AST,然后根据KoopaIR语法输出字符串。发现std::ostringstream还挺好用。比如:constexprconst......
  • 政安晨:【深度学习处理实践】(八)—— 表示单词组的两种方法:集合和序列
    咱们接着这个系列的上一篇文章继续:政安晨:【深度学习处理实践】(七)——文本数据预处理https://blog.csdn.net/snowdenkeke/article/details/136697057机器学习模型如何表示单个单词,这是一个相对没有争议的问题:它是分类特征(来自预定义集合的值),我们知道如何处理。它应该被编码......
  • 机器学习 - PyTorch里的aggregation
    在PyTorch里,可以在tensor里找到min,max,mean,sum等aggregation值。直接上代码importtorchx=torch.arange(0,100,10)print(x)print(f"Minimum:{x.min()}")print(f"Minimum:{torch.min(x)}")print(f"Maximum:{x.max()}")print(f"Maxi......
  • ARM-V8基础知识学习笔记(一)
    参考文章:ARM官方文档ARMv8架构概述、相关技术文档以及ARMv8处理器简介ARMv8架构编程探索ARMv8架构与指令集.学习笔记 ARM异常等级:在ARMv8中,执行发生在四个异常级别之一。在AArch64中,异常级别决定了特权级别,类似于ARMv7中定义的特权级别。异常级别决定特权级别,因此在......
  • [算法学习笔记] 传递闭包
    DescriptionWarning:本文只介绍传递闭包在OI中的简单应用。传递闭包在OI中,一般用来处理图上点之间的连通性问题。它在图上体现在原图上任意两个直接或者间接可达的点都连边。在上图中,显然\(\{1,2\}\{2,3\}\{1,3\}\)均可达。在“传递闭包图”上如上三对点对都需要连边。......
  • 动手学习Deep learning-数据预处理
    数据预处理:importosos.makedirs(os.path.join('..','data'),exist_ok=True)#自动读取该代码文件的文件位置,并返回上级目录创建data文件data_file=os.path.join('..','data','house_tiny.csv')#创建CSV文件withopen(data_file,'w......
  • python学习1
    迭代器操作函数(迭代对象包括列表,元组,字典)1)sorted对列表排序2)reversed反向(但输出不是列表,需要进行数据类型转换)3)zip把多列表压缩为元组4)enumerate排序5)all布尔值所有为true才为true6)any有一个为true就为true7)next获取迭代器的下一个元素,迭代器与迭代对象不是一个概念8)fil......