JavaScript学习之快速入门

最新推荐文章于 2024-07-19 12:58:53 发布

._相依ゎ

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量171

点赞数

分类专栏： JavaScript 笔记文章标签： javascript 前端开发语言 java

本文链接：https://blog.csdn.net/qq_45596062/article/details/122424374

版权

笔记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

快速入门

1.内部标签引用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

    <!--内部标签引用-->
      <scipt> 
      	alert("Hello,World!");
      </scipt>
  
<body>

</body>
</html>

2.外部引入

abc.js

alert("Hello,World!");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

    <!--外部引入-->
    <script src="js/demo01.js"></script>
<body>

</body>
</html>

基本语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script>
    //1.定义变量   变量类型  变量名  变量值
    var score = 65;
    //2.条件控制
    if(score>60 && score<70){
      alert("60~70");
      }else if(score>70 && score<80){
      alert("70~80");
      }else{
      alert("other");
    }

    //console.log(score)  在浏览器的控制台打印变量
   /*
   * 多行注释
   * */

  </script>

</head>
<body>

</body>
</html>

数据类型

数值，文本，图形，音频，视频，，，

变量

var a = 1; //与java规则一致

number

js不区分小数或者整数number

123       //整数123
123.1     //浮点数123.1
1.23e3    //科学计数法
-99       //复数
NaN       //not a number
Infinity  //表示无限大

字符串

‘abc’ “abc”

正常字符串我们使用单引号，或者双引号包裹
注意转义字符串\

\' 转义
\n 换行
\t 空格
\u4e2d 中  
\x41   Ascll 字符

多行字符串编写

  //tab 上面 esc键下面
  var msg = `hello
  world
  你好
  你好lina

模板字符串

 //tab 上面 esc键下面  
let name = "lina";
  let age = 22;

  let msg = `你好呀,${name}`

  // console.log("msg"+msg);

字符串长度

var str = "student";
console.log(str.length)

字符串的可变性，不可变

console.log(student[0])
//输出为5，假设我们定义student[0]= 1
student[0] = 1;//从打印结果看我们会发现赋值成功
//此时输出
console.log(student[0])
//会发现，结果还是5，说明字符串的不可变性

大小写转换

//注意，这里是方法，不是属性了
console.log(student.toUpperCase())
cosole.log(studen.toLowerCase())

获取指令的下标 indexOf

//此时获取指令下边t,为1
console.log(student.indexOf('t'))

**获取长的字符串 substring **

//此时获取的字符串为tu,获取中间的字符串，包含前面不包含后面
console.log(student.substring(1,3)) //[ )

布尔值

true ,flase

逻辑运算

&& 两个都为真，结果为真

|| 两个一个为真，结果就为真

！  真即假   假即真

比较运算符！！！重要！

1.=
    
2.==  等于（类型不一样，值一样，也会判断为true）
    
3.===  绝对等于（类型一样，值一样，结果为true）

这是一个javascript的缺陷，坚持不要使用==比较

须知：

NaN===NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题

console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题

Math.abs(1/3-(1-2/3))<0.00000001

null 和 undefined

null:空
undefined:未定义

数组

数组（Array）可以包含任意的数据类型

java的数组必须是相同类型的对象，js中不需要这样

//为保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,6,,'hello',null,true];

 new Array(1,12,3,4,5,6,'hello');
arr[0]  //通过下标取值
arr[0] = 1 //通过下标赋值

取对象的值：


console.log(arr[2])
 3
console.log(arr[5])
 6
console.log(arr[8])
 null
console.log(arr[11])
 undefined

取数组下标：如果越界了就会：

undefined

1. 长度

arr.length

注意：假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

var arr = [1,2,3,4,5,6]
undefined
console.log(arr)
VM117:1 (6) [1, 2, 3, 4, 5, 6]
undefined
arr.length
6
arr[0] = 0
0
console.log(arr)
VM236:1 (6) [0, 2, 3, 4, 5, 6]0: 01: 22: 33: 44: 55: 6length: 6[[Prototype]]: Array(0)
undefined
arr.length = 10
10
console.log(arr)
VM325:1 (10) [0, 2, 3, 4, 5, 6, 空属性 × 4]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CLekWoe7-1641864937652)(C:\Users\22724\AppData\Roaming\Typora\typora-user-images\image-20211202143141041.png)]

2. indexOf

通过元素获得下标索引

arr.indexOf(2)
1

字符串的“1”和数字 1 是不同的

3.slice ()

可以截取Array的一部分，返回一个新数组，类似于String中的substring

//从头部截取
arr.slice(3)
(7) [4, 5, 6, 空属性 × 4]

//截取一个区间
arr.slice(1,5)
(4) [2, 3, 4, 5]

4.push(),pop()

//push从尾部压入
arr.push(1)
11
arr.push('a','b')
13
arr
(13) [0, 2, 3, 4, 5, 6, 空属性 × 4, 1, 'a', 'b']

//pop从尾部弹出
arr.pop
ƒ pop() { [native code] }
arr.pop()
'b'
arr
(12) [0, 2, 3, 4, 5, 6, 空属性 × 4, 1, 'a']

5.unshift() shiift()

//unshift()从头部压入
arr.unshift(5)
13
arr
(13) [5, 0, 2, 3, 4, 5, 6, 空属性 × 4, 1, 'a']

//shiift()从头部弹出
arr.shift()
5
arr
(12) [0, 2, 3, 4, 5, 6, 空属性 × 4, 1, 'a']
arr.shift()
0
arr
(11) [2, 3, 4, 5, 6, 空属性 × 4, 1, 'a']

6.排序 sort()

(11) [2, 3, 4, 5, 6, 空属性 × 4, 1, 'a']
arr.sort()
(11) [1, 2, 3, 4, 5, 6, 'a', 空属性 × 4]

7.元素反转 reverse()

(11) [1, 2, 3, 4, 5, 6, 'a', 空属性 × 4]
arr.reverse()
(11) [空属性 × 4, 'a', 6, 5, 4, 3, 2, 1]

8.替换 concat()

(11) [空属性 × 4, 'a', 6, 5, 4, 3, 2, 1]
arr.concat(13,14,520)
(14) [空属性 × 4, 'a', 6, 5, 4, 3, 2, 1, 13, 14, 520]
arr
(11) [空属性 × 4, 'a', 6, 5, 4, 3, 2, 1]

注意：concat() 并没有修改数组，只是会返回一个新的数组

9.连接符 join

//打印拼接数组，使用特定的字符串连接
(11) [空属性 × 4, 'a', 6, 5, 4, 3, 2, 1]
arr.join('-')
'----a-6-5-4-3-2-1'

10.多维数组

arr = [[1,2],[3,4],[5,6]];
arr[1][1]
4

对象

对象是大括号{ }，数组是中括号[ ]：
- 每个属性之间使用逗号隔开，最后一个不添加

    //Person person = new Person(1,2,3,4,5);
    var person = {
      name:"lina",
      age:22,
      tags:['ja','java','web','...']
      }

取对象的值

person.name
'lina'
person.age
22

严格检查格式

<!--
  //前提，idea需要设置支持ES6语法
  'use strict':代表严格检查模式，预防javascript随意性导致产生的一些问题
  必须写在Javascript的第一行
  局部变量建议使用let去定义
-->
<script>
  'use strict';
  //默认为全局变量
   let i = 1;
   //es6 let

</script>

._相依ゎ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习之快速入门

快速入门1.内部标签引用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head>  <scipt> alert("Hello,World!"); </scipt> <
复制链接

扫一扫