前端笔记3 JS基础

最新推荐文章于 2024-01-20 18:14:24 发布

馬致远

最新推荐文章于 2024-01-20 18:14:24 发布

阅读量263

点赞数

分类专栏：前端阶段文章标签： JS

本文链接：https://blog.csdn.net/linyuancsdn/article/details/95938770

版权

前端阶段专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

JS基础知识
基础语法
事件

JS基础知识

JS 概念

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

基于对象

面向对象

JavaScript特点

向HTML页面中添加交互行为
脚本语言，语法和Java类似
解释性语言，边执行边解释

javaScript 和 java 的关系

java是Sun 公司于1995年5月推出的，并且很快成为当时最流行的编程语言，JavaScript之前的名称叫做livescript，是网景公司开发的，由于Netscape公司与Sun公司合作，带有 "Java" 的名字有助于这门新生语言的传播。Netscape高层也都是java的粉丝，所以也希望它看上去能够像Java，因此改名为JavaScript。

Java和JavaScript是两门不同的编程语言，他们没有任何的血缘关系。Javascript，它是运行在浏览器中的一种脚本语言，可以操作HTML，提供了一种运行时改变HTML的工具。而java则是一种编程语言，它是一种通过解释方式来执行的语言。JavaScript语言运行时由解释器直接执行，是一种按照顺序执行的过程语言，也可以理解为JavaScript是客户端脚本，直接由浏览器解释执行

java和JavaScript
1、就像京东和京东方的关系一样。
2、就像马云和马如云的关系一样。
3、就像雷锋和雷峰塔的关系一样
4、就像老婆和老婆饼的关系一样
5、就像北大和北大青鸟的关系一样
6、就像印度和印度尼西亚的关系一样
7、就像卡巴斯基和巴基斯坦一样有基巴关系
8、就像张三和张三丰的关系一样
9、就像周杰和周杰伦一样
10、就像菠萝和菠萝蜜的关系一样

组成

ECMA 基础语法

liveScript / javaScript
Jscript
微软和网景公司

ECMAScript 语法标准

DOM 文档对象模型

BOM 浏览器对象模型

html css javascript 之间对比

网页主要由三部分组成 :

html 是一座房子 (结构层- 决定网页的结构和内容（ “是什么”） )

css 房子的装饰 (表现层- 设定网页的表现样式（ “什么样子”） )

javascript 让房子住进人来 (行为层- 控制网页的行为（ “做什么”） )

基础语法

定义使用JS 的三种方式

内部使用JS的方式

<script type="text/javascript">
    // script 代码
</script>

可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

外部引入JS 文件的方式

 <script src="demo1.js" type="text/javascript"></script>

直接写在html 标签内部

<button onclick="javascript:alert('欢迎你');"></button>
// 含义是当点击按钮的时候 , 执行 JS的一个方法

基本输出语句

浏览器视窗打印

document.write("");

在浏览器的控制台打印

console.log("");

变量

和java定义变量的区别

java 强数据类型语言

JS 弱数据类型语言

强类型定义语言和弱类型定义语言

（1）强类型定义语言：强制数据类型定义的语言。也就是说，一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了。举个例子：如果你定义了一个整型变量a,那么程序根本不可能将a当作字符串类型处理。强类型定义语言是类型安全的语言。

（2）弱类型定义语言：数据类型可以被忽略的语言。它与强类型定义语言相反, 一个变量可以赋不同数据类型的值。

强类型定义语言在速度上可能略逊色于弱类型定义语言，但是强类型定义语言带来的严谨性能够有效的避免许多错误。另外，“这门语言是不是动态语言”与“这门语言是否类型安全”之间是完全没有联系的！
例如：
Python是动态语言，是强类型定义语言（类型安全的语言）; 
VBScript是动态语言，是弱类型定义语言（类型不安全的语言）;
JAVA是静态语言，是强类型定义语言（类型安全的语言）。

javaScript 变量的声明

a = 10;
a = "hello";
document.write(a);
//**********************************/
var a = 10;
a = "hello";

var 可以省略但是推荐在声明变量的时候添加上一个数据类型 var

方法的形参(强制省略 var)

同时声明多个变量, 并且直接赋值
var a,b,c = 10;

JS 中的数据类型

数据类型	含义
undefined	var width; 变量width没有初始值，将被赋予值undefined
null	表示一个空值，与undefined值相等
number	var iNum=23; //整数 var iNum=23.0; //浮点数
* NaN	不是一个数字
boolean	true和false
string	一组被引号（单引号或双引号）括起来的文本 - var string = “This is a string”;
引用数据类型	Object 数组, 对象

undefined 不明确的

强数据类型可以在不赋值的情况下赋默认值, int i; 默认 0

弱数据类型 var m , 根据实际值的类型来分配空间

typeof

使用typeof 查看一个变量的数据类型

a = 10;
console.log(typeof a);

String 字符串对象

对比java中的各种方法

// 可以设置字体的颜色, 粗细, 样式
var str = "Hello Script";
str.fontcolor("red"); 
// 相当于给 str 添加了一个外标签 <font color="red">str</font>

数组对象

// 定义方式1
var arr = new Array(3);
// 定义方式2
var arr = [元素1,元素2,...];

// 创建数组的语法格式
var arr = new Array(3);
arr[0] = 10;
arr[1] = "123";
arr[2] = new Object();
// var arr = [元素1,元素2,...];

length

var num = arr.length;
console.log(num);

join (和 string 字符串的 split 方法正好是相对应的)

var sarr = arr.join(",");
console.log(sarr);

push (数组长度可变 , 类似于java 中的集合)

var len = arr.push("宫骏腾");
console.log(len);

null

null  和 undefined
undefined 从 null 中 派生出来的一个类型
undefined == null  结果为 true

number

NaN 表示 not a number  也属于 number类型中的一个子类型

运算符

==  一般比较
===  严格比较
var n = 1;
var m = "1";
console.log(n == m);  // true
console.log(n === m); // false

流程控制

if 判断

if 判断中不仅仅可以填写布尔表达式 , 也可以填写各种数据类型

数据类型	真	假
number	非零	零
Object	非空	null
布尔	true	false
undefined		undefined

for in

var arr = ["a","b","c"];
// i 是下标
for(var i in arr){
    console.log(arr[i]);
}

案例

判断字符串数组中包含指定字符的字符串个数

var arr = ["America","Greece","britain","canada","china","egypt"];
/*
1- for 遍历数组 拿到每一个元素
2- 循环统计 查找下标  包含A 或 a
 */
var count = 0;
for(var i = 0 ; i< arr.length ; i++){
    console.log( arr[i]);
    if(arr[i].indexOf("A") != -1 || arr[i].indexOf("a") != -1 ){
        count ++;
    }
}
console.log("包含a或A的字符串的个数为"+count);

JS 函数

函数定义

完成特定功能的代码语句块

分类

系统函数
自定义函数

常见的系统函数

var m = "10";
var n = 20;
console.log(m + n);
console.log(parseInt(m) + n);
var h = "3.14";
console.log(parseFloat(h) + n);

自定义函数

语法

第一种定义的方式

function 函数名(参数列表){  函数体 }
- 参数列表  不能写类型(var a,var b)  应该为(a,b)
- 返回值 不需要写返回值类型 , 如果该方法有返回值 直接写 return 返回值
function fun_name(){
    console.log("第一种定义函数的方法");
}
fun_name();

第二种定义的方式

var f1 = function(){
    console.log("第二种定义函数的方法");
}
f1();

调用函数

函数名();

变量作用域

全局变量和局部变量

全局变量：函数外声明的变量，称为全局变量

局部变量：函数内部使用var声明的变量，称为局部变量

在JS中，只有函数作用域，没有块级作用域！！！也就是说，if/for等有{}的结构体，并不能具备自己的作用域, 如果该变量是定义在if或者for这样的代码块中，它在代码块之外是可见的。

术语“全局变量”指的是定义在所有函数之外的变量（也就是定义在全局代码中的变量），与之相对的是“局部变量”，所指的是在某个函数中定义的变量。其中，函数内的代码可以像访问自己的局部变量那样访问全局变量，反之则不行。

所以，函数外部不能访问函数内部局部变量（私有属性）。因为，函数内部的变量，在函数执行完毕以后，就会被释放掉

function f(){
    var a = 123;
}
console.log(a);  // a is not defined

for(var i = 0 ; i< 5; i++){ 
}
console.log(i);  // 5

var 声明函数级声明

function f(){
	// var a = 123;  方法之后的a 
    a = 123;  // 不写var  a提升为 全局变量
}
f();
console.log(a); // 123

let 声明块级作用域

for(let i = 0 ; i< 5; i++){
    console.log(i);
}
console.log(i);  // ReferenceError: i is not defined

const 常量 (constant)

const i = 10;
i = 1;  // invalid assignment to const `i'
console.log(i);

变量声明和使用的顺序

console.log(m); // undefined 也是一个数据类型
var m = 10;
/**********相当于**************/
var m;
console.log(m);
m = 10;

console.log(m); // m is not defined

以上两个案例得出结论

这个函数内被声明的所有变量所有变量都会被移动（或者说提升）到函数最开始的地方。

另外，需要注意，被提升的只有变量的声明，这意味着，只有函数体内声明的这些变量在该函数执行开始时就存在，而与之相关的赋值操作并不会被提升，它还在原来的位置上。

函数中的变量有优先加载权

var a = "out";
function f(){
	//  函数自动 声明 var a;
    console.log(a);  // undefined
    var a = "in";
}
f();

启发 ==> 我们可以手动提升变量声明的位置，这样一来代码就不会被js的提升行为所混淆了。

函数的参数以及调用

function add(a,b,c){
    console.log("三个参数的函数");
}
function add(a,b){
    console.log("两个参数的函数");
}
// add(1,2);   // 两个参数的函数
add(1,2,3);     // 两个参数的函数

结论 JS 没有方法重载 , 后写的方法会覆盖掉之前的同名方法

arguments 内置对象

function add(a,b,c){
    // 每一个函数都有一个 内置对象 arguments (数组对象)
    // 动态的确定 该函数实际调用的时候 传递的具体参数的个数
    console.log(arguments);
    console.log("三个参数的函数");
}
add(1,2);     // 两个参数的函数

函数的声明和调用顺序也可以不同

对象

js 对象的四种创建方式

鲁迅先生孔乙己回香豆(回字有四种写法有五种,回,囬,回,逥 )

程序员互相看不起 (程序员鄙视链) 程序员会攀比和卖弄

但是也要有可以卖弄的资本, 而学习的深入程度, 就是最重要的一点!

// 第一种创建方式
//  var person = {};  // 属性: 值
var person = {name:"张三",age:20};
console.log(person.name);

// 第二种方式
var obj = new Object();
// 添加属性
obj.name = "张三";
console.log(obj.name);

// 第三种  使用构造函数创建对象
function Person(name ,age){
    this.name = name ;
    this.age = age;
}
var per = new Person("李四",30);
console.log(per.name);

// 使用工厂模式
function createPerson(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return o;
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');

原型

闭包

事件

什么是事件

事件的三要素

1.事件源（你是要对什么东西进行操作）

2.事件（你要做什么实现所要的交互效果）

3.处理函数（在事件进行后你要目标变成什么样子）

我关空调

事件源 - 空调

事件 - 关闭空调(遥控器点击关闭按钮)

事件函数 - 执行关闭空调的一系列操作(发送红外线)

网页进行各种处理

事件源 - 网页中的各个标签

事件 - 点击双击鼠标指向

事件处理函数 - 可以对内容进行操作

事件分类

页面事件

页面事件
onload	一张页面或一幅图像完成加载。

鼠标事件

鼠标事件
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开。
onmouseover	鼠标移到某元素之上。
onmouseout	鼠标从某元素移开。
onmousemove	鼠标被移动。

键盘事件

键盘事件
onkeydown	某个键盘按键被按下。
onkeyup	某个键盘按键被松开。
onkeypress	某个键盘按键被按下并松开。

焦点事件

焦点事件
onblur	元素失去焦点
onfocus	元素获得焦点

表单事件

表单事件
onsubmit	提交按钮被点击
onreset	重置按钮被点击

下拉菜单切换事件

下拉菜单切换事件
onchange	用户改变域的内容

事件案例

每次点击按钮 ,都会在控制台打印数字

<body>
    <button onclick="javascript:f1()">你敢点我一下试试</button>
    <script>
        var count = 0;
        function f1(){
            count++;
            console.log(count);
        }
    </script>
</body>