Javascript

狂神说Js视频学习笔记

本文主要是介绍狂神说Js视频学习笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. 什么是JavaScript

1.1 概述

JavaScript是一门世界上最流行的脚本语言

Java、JavaScript

1.2 历史

JavaScript的起源故事

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到es6版本~

但大部分浏览器还只停留在支持es5代码上！

开发环境——线上环境，版本不一致

关键字、变脸、流程控制、对象、数组、结构

2. 快速入门

2.1 引入JavaScript

1> 内部标签

<script>
	//...
</script>

2> 外部引入

abs.js

//....

test.html

<script src="abs.js"></script>

测试代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- script标签内， 写JavaScript代码 -->
    <!-- <script>
        alert('hello,world');
    </script> -->
    
    
    <!-- 外部引入 -->
    <!-- 注意：script，必须成对出现 -->
    <script src="js/qs.js"></script>

    
    <!-- 不用显示定义type，也默认就是javascript -->
    <script type="text/javascript">
    
    </script>

</head>

<body>


<!-- 这里也可以存放 -->
</body>
</html>

2.2 基本语法入门

<!-- JavaScript严格区分大小写！ -->
<script>
	// 1. 定义变量	变量类型		变量名 = 变量值;
	var num = 1;
	var score = "qinjiang";
	// 2. 条件控制
	if(score>60 && score<70){
		alert('60~70');
	}else if(score>70 && score<80){
		alert('70~80');
	}else{
		alert('other');

	// console.log(score) 在浏览器的控制台打印变量！	System.out.println(score)
	
	/*
		alt + shift + a 多行注释
	*/

浏览器必备调试须知：
在这里插入图片描述

2.3 数据类型

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

2.3.1 变量

var 王者荣耀 = ‘倔强青铜’;

2.3.1 number

js不区分小数和整数，Number

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

2.3.2 字符串（String）

‘abc’ “abc”

  • 正常字符串使用单引号或者双引号包裹
  • 注意转义字符 \
\'			// \'
\n			// n
\t
\u4e2d	\u#### 	Unicode字符
\x41		Asc11字符
  • 多行字符串编写
//反引号
var msg = 
	`hello
	world
	你好ya
	'你好'`
  • 模板字符串
// 反引号
let name = 'qinjiang';
let age = 3;
let msg = `你好呀，${name}`;  // 你好呀，qinjiang
  • 字符串长度
str.length
  • 字符串的可变性：不可变
    在这里插入图片描述
  • 大小写转换
// 注意： 这里是方法，不是属性
student.toUpperCase();
student.toLowerCase();
  • 查询字符首次出现的位置student.indexOf('t')
  • substring
// [a,b)
student.substring(1); // 从第一个字符串截取到最后一个字符串
student.substring(1,3)  // 从1到3  [1,3)

### 2.3.3 布尔值（Boolean）
true  ，  false
### 2.3.4 逻辑运算
```js
&&	两个都为真，结果为真
||	一个为真，结果为真
!	真即假，假即真

2.3.5 比较运算符

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

这是一个Js缺陷，坚持不要使用 == 比较
须知：

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

浮点数问题：

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

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

console.log(Math.abs(1/3-(1-2/3))<0.000000001);		// true

2.3.6 null、undefined

  • null 空
  • undefined 未定义

2.3.7 数组（array）

Java的数值必须是相同类型的对象~，Js中不需要这样！

// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,'hello',null,true];
new Array(1,2,3,4,'hello');
取数组下标：如果越界了，就会```undefined```

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

var arr = [1,2,3,4,5,6]; // 通过下标取值和赋值
arr[0]
arr[0] = 1
  • 长度
arr.length

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

  • indexOf，通过元素获取下标索引
arr.indexOf(2)  // 1

字符串的‘1’和数字1是不同的

  • slice() 截取Array的一部分，返回一个新数组，类似于String中的substring
  • push，pop
push：压入到数组尾部
pop： 弹出尾部的一个元素
  • unshift() ，shift() 头部
unshift：压入到头部
shift：弹出头部的一个元素
  • 排序sort()
['b','c','a']
arr.sort()
['a','b','c']
  • 元素反转 reverse()
['a','b','c']
arr.reverse();
['c','b','a']
  • concat() 拼接数组
['c','b','a']
arr.concat([1,2,3]);
['c','b','a',1,2,3];
arr
['c','b','a']

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

  • 连接符 jion()
    打印拼接数组，使用特定的字符串连接
['c','b','a']
arr.jion('-');
'c-b-a'
  • 多维数组
var arr = [[1,2],[3,4],['5','6']]'
console.log(arr[1][1]); // 4

数组：存储数据 （如何存，如何取，方法都可以自己实现！）

2.3.8 对象（Object）

若干个键值对

var 对象名{
	属性名: 属性值,
	属性名: 属性值,
	属性名: 属性值
}

// 定义了一个person对象，它有四个属性！
var person = {
	name: 'kuangshen',
	age: 3,
	email: '24736743@qq.com',
	score: 0
}

Js中的对象，（……）表示一个对象，键值对描述属性xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。
对象是大括号，数组是中括号

// 每个属性之间使用逗号隔开 最后一个不需要添加
// Person person = new Person(1,2,3,4,5);
var person = {
	name:'qinjiang',
	age:3,
	tags:['js','java','web','...']
}

取对象的值：

person.name
> 'qinjiang'
person.age
> 3

JavaScript中的所有的键都是字符串，值是任意对象！

  • 对象赋值
person.name = 'qinjiang'  // qinjiang
person.name;  // qinjiang
- **使用一个不存在的对象属性，不会报错！**
```js
person.haha;   // undefined
  • 动态的删减属性，通过delete删除对象的属性
delete person.name
true
person
- **动态的添加，直接给新的属性添加值即可**
```js
person.haha = 'haha'
'haha'
person
  • 判断属性值是否在这个对象中！ xxx in xxx！
'age' in person
true

'toString' in person
true
  • 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
## 2.4 严格检查模式
```js
<!-- 前提：IEDA 需要设置支持ES6语法
'use strict';  严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量都建议使用 let 去定义~
-->
<script>
	'use strict';
	// 全局变量
	i = 1; // undefined;
	// ES6 let
	let i = 1;
	console.log(i);  // 1

2.3.9 流程控制

var age = 3;
if( age>3 ){ 		// 第一个判断
	alert('haha');
}else if(age <5){		// 第二个判断
	alert('kuwa~');
}else{		// 否则，，
	alert('kuwa');
}
这篇关于狂神说Js视频学习笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航