JavaScript学习笔记1

鱼晚.

已于 2024-01-05 10:40:48 修改

阅读量855

点赞数 25

文章标签： javascript 学习笔记

于 2024-01-04 11:17:26 首次发布

本文链接：https://blog.csdn.net/m0_62146534/article/details/135378775

版权

javascript是一种运行在浏览器的编程语言，实现人机交互的效果。

JavaScript的组成：ECMAScript、DOM、BOM

作用： 1、网页特效（监听用户的一些行为让网页作出对应的反馈）

2、表单验证（针对表单数据的合法性进行判断）

3、数据交互（获取后台的数据，渲染到前端

4、服务端编程（node.js）

ECMAScript

规定了js基础语法核心知识，如：变量、分支语句、循环语句、对象等

Web APIs

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

JavaScript权威网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

也可以输入mdn进入网站学习JavaScript

JavaScript书写位置

1、内部JavaScript

直接写在HTML文件里，用script标签包住

script标签写在<body>上面，将JavaScript代码放在HTML页面的地步附近通常是最好的策略

<script>
    alert('狗蛋吃饭了吗')
</script>

2、外部JavaScript

代码写在js文件里

通过script标签，引入到html页面中

注：script标签中间无需写代码，否则会被忽略

外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读。

内联JavaScript

<body>
    <button onclick="alert('你好，世界')">好好学习，天天向上</button>
</body>

注释

单行注释快捷键：Ctrl+/

块注释快捷键：Ctrl+alt+a

输入和输出语法

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

语法二

alert('你好，小猪佩奇')

console.log('你好')

输入语句

prompt('输入语句语法')

<script>
    let name = prompt('输入名字')
    document.write(name)
</script>

计面量

“{}”对象字面量

“[ ]”数组字面量

“abcd'字符串字面量

变量

声明变量

变量的声明一般用let，let和var声明的区别是let不允许重复声明变量，但是var可以，老版本用var，现在一般不用了，因其有几处不合理之处。

<script>
    let name = '霍妗'
    let age = 30
    console.log(name)
    console.log(age)
//console.log(name,age)   得到的是同一个结果
</script>

交换变量

<script>
    
    let num1 = 20
    let num2 = 90
    let temp
    temp = num1
    num1 = num2
    num2 = temp
    console.log(num1,num2)
</script>

变量的本质

是程序在内存中申请的一块用来存放数据的小空间，命名只能有数字、字母、

下划线和$组成，使用驼峰命名法，且数字不能放在开头，字母严格区分大小写

数组

Array：将一组数据存储在单个变量名下

数组可以存储任意类型的数据

let 数组名 = [数据1，数据2，数据3……]

let arr[1,2,3,4,5]
console.log(arr[0])
//输出为1

使用”数组名.length"可以获取数组长度，修改数组里某个数据可用“数组名.[n] == 修改后的数据”

常量

使用const声明的变量是常量
const PI = 3.14

数据类型

基本数据类型：number 数字型 string 字符串型 boolean 布尔型 undefined 未定义类型

js是弱数据类型一言，Java是强数据类型语言，因为js里面小数、整数都属于数字型，而在C语言或者Java中，有专门的整型、字符型。

NAN（not a number）代表计算错误，它是一个不正确的或者一个未定义的数学操作所得到的结果。 NAN是粘性的，任何对NAN的操作都会返回NAN。

字符串类型

用单引号、双引号和反引号来包裹的数据都是字符串型，必要时使用转义字符\，可以输出单引号或双引号。单引号和双引号可以嵌套使用，但是必须成对出现。“+”可以拼接字符串
let str1 = 'apple'
let str2 = 'banana'
//拼接字符串
console.log('我是' + '一只小猪')
console.log(str1 + str2)
console.log('你好，小猪佩奇')
console.log("你好，葫芦娃")
console.log(`你好，程序猿`)
//使用转义字符时
console.log('你好，葡萄藤，你知道\'猪八戒\'吗')

模板字符串

使用场景：拼接字符串和变量

在没有它之前，拼接变量比较麻烦

语法

使用反引号

在英文输入模式下按键盘的tab键

内容拼接变量时，用${}包住变量
//模板字符串写法
let age = 90
document.write(`我今年${age}岁了`)

布尔类型（boolean）

let isHot = false
console.log(isHot)
//false

未定义类型（undefined）

只声明一个变量但是没有赋值
let age
console.log(age)
//undefined
如果我们不知道这个数据是否有传递过来，可以通过检测这个变量是不是undefined来判断

空类型（null）

let name = null
console.log(name)
//null

null和undefined的区别：undefined表示没有赋值，null表示赋值了，但是内容为空。

将来定义一个变量，里面存放的是一个对象，但对象还没有创建好的时候可以先给个null

console.log(undefinded + 1)   //NAN
console.log(null + 1)         //1

检测数据类型

1、作为运算符（typeof x）

let age = 30
console.log(typeof num)  //number
let apple = false
console.log(typeof apple)  //boolean
let banana = null
console.log(typeof banana)  //object

2、函数形式：typeof(x)

类型转换

从表单中、prompt取过来的值都默认是字符串类型，此时就不能直接进行简单的运算，此时需要转换变量的数据类型。

隐式转换

1、+两边只要有一个是字符串，都会把另一个转换成字符型

2、除了+以外的算术运算符，减、乘、除等都会把数据转成数字类型
3、任何数据和字符串相加结果都是字符串

4、+号作为正号解析可以转换成Number类型
console.log('小猪'+1)   //小猪1，使用+，把1变成了字符型
console.log(2-'2')     //0,减、乘、除则是会把字符型转为数字型
console.log('11'+11)    //1111
console.log(11-11)     //0
console.log('11'-11)    //0
console.log(typeof '123')    //string
console.log(typeof +'123')    //number
console.log(+'11'+11)    //22

显式转换

自己写代告诉系统该转成什么数据类型
let str = '123'
console.log(Number(str))    //123
console.log(Number('pink')    //NAN
转为数字型

Number（NAN也是数字类型的数据，代表非数据）
parseInt（只保留整数，无四舍五入）
parseFloat（可以保留小数）

要输入两个数字计算其和的时候，有一个需要注意的点，使用prompt获取输入的数字时，得到的是字符串，不能直接相加，在prompt前加一个+可以使获得的数据转换成数字型。
let num1 = +prompt('输入第一个数字')
let num1 = +prompt('输入第二个数字')
alert(`两个数相加的和为${num1+num2}`)

综合实例

//1、用户输入
let price = +prompt('请输入商品价格:')
let num = +prompt('请输入商品数量:')
let address = prompt('请输入收货地址:')

//2、计算总额
let total = price * num

//3、页面打印渲染,使用模板字符串连接

document.write(`
    <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>OPPO 1 加ace2v</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${address}</td>
    </table>

`

鱼晚.

关注

25
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
JavaScript学习笔记1

javascript是一种运行在浏览器的编程语言，实现人机交互的效果。JavaScript的组成：ECMAScript、DOM、BOM作用： 1、网页特效（监听用户的一些行为让网页作出对应的反馈）2、表单验证（针对表单数据的合法性进行判断）3、数据交互（获取后台的数据，渲染到前端4、服务端编程（node.js）
复制链接

扫一扫