javascript需要进行编译吗,javascript必须掌握的内容

本文探讨了JavaScript的基础知识,包括安装需求、是否需编译、DOM/BOM、JavaScript与Java的区别,以及与HTML/CSS的交互。还介绍了jQuery、浏览器兼容性、面向对象编程、事件处理、原型链和数组操作等内容,包括如何在HTML中嵌入和调试JavaScript,以及常用的数组操作方法如push(),unshift(),splice()等。

本篇文章给大家谈谈javascript需要安装什么软件,以及javascript需要进行编译吗,希望对各位有所帮助,不要忘了收藏本站喔。

基础预热与语法

基础知识

html css 布局 + js 互动 三剑客
在这里插入图片描述
功能 性能 语言解释形式

sun 网景 公司

SE java 应用
ME 嵌入式
EE B/S

applet 响应程序 同 js
需要虚拟机 解析 applet(微软 矛盾)

OA办公系统 (网管运营)

js弱类型 基于对象
java强类型 面向对象
php 解释型 -->服务器端 php应用程序 —apache 模块
先下载 浏览器解析 脚本 无生命周期

js语言 原生
Dom + Bom ----> jquery

浏览器种类 兼容性

js运行
输入输出
html -->内联 外联 嵌入式 输入式 css -->js
如何使用js

变量
数据类型
运算符 表达式
流程控制
函数
对象(封装 继承 多态)
内置js对象 时间 数学 字符串 数组对象 (pdo mysql )
数组


js 如何运行

html 嵌入程序 js JScript(同一标准) VBScript applet

页面适用js 及输出

在这里插入图片描述

  • 默认 js脚本
    在这里插入图片描述在这里插入图片描述
  • 访问机制 出错 停止运行
  • web服务器访问 ≠ 直接打开浏览器解析访问
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
  • 错误调试
    注释调试法
    输出调试法

弹出 输出
在这里插入图片描述
在这里插入图片描述

  • 可多个 什么类型都可以
    在这里插入图片描述
    在这里插入图片描述
  • 字符串
  • 文档里任何地方都可以 (不在嵌套里)
    在这里插入图片描述
  • 从上到下 关联 (与php一样)(不要重名)
    在这里插入图片描述
    js 提取(规范好看)

php可以在html嵌套结构中写

在这里插入图片描述

  • js 不可以
    在这里插入图片描述
    在这里插入图片描述

  • 可读性 调用
    在这里插入图片描述

  • 运行时机 不同
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • html标签 添加事件
    在这里插入图片描述

    • 公用代码
      独立js文件
      在这里插入图片描述
      在这里插入图片描述
  • 多个文件 关系:关联

  • ck编辑器

  • 开源插件
    js引入

  • 关联 重复


在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述


在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

  • css js 功能 有重叠地方 注意搭配 代码优化 简洁
    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

在这里插入图片描述

  • 可以优化 匿名函数
    在这里插入图片描述
    在这里插入图片描述
  • 从头读到尾 所以用onload 加载完 脚本

在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

在这里插入图片描述

  • 顺序执行 规则
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

面向对象

在这里插入图片描述

  • 收音机 ---->原理 -----> 电路设计 ----> pcbloyout
  • 功能 -----> 按钮
  • 盒子 —>外表 ---->用户 ----->按钮
  • JQ的 (面向对象东西) —> show() animate() 不用关注细节
  • eg: Ie6 解决png问题 库
  • 老板 -->技术部主管 财务部主管 研发部主管 ---->通知 副总 ----> 部门经理 (上传下达)

在这里插入图片描述

  • 面试问题 常问

  • 对象抽象 ----> 核心 抽 --> 提取重点

  • eg : 人 特性 高矮胖瘦 家庭社会关系 性别

  • 员工管理系统 —> 特性提取 职位 男女 工资
    数据库 表单 —> 姓名 年龄 xxx xxx 数据库记录

  • 封装 只有 外表 包装内部 留有功能接口

  • 继承 class 父子 信息继承 ----> 形成新对象

  • 取系统/第三方 对象 —> 继承改写

  • 多重继承(多个爸爸) 多态 (父子同操作 各有不同)
    在这里插入图片描述

  • 区分 属性/方法 eg: li div 得index 属性
    在这里插入图片描述

  • 变量

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

在这里插入图片描述

  • 事件-方法 this方法属于谁
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
  • 是一个全局变量同时是 一个windows属性
    在这里插入图片描述
  • 全局函数 方法WINDOWS.
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
抽奖功能
  • input div

json 支持

在这里插入图片描述

  • 自动补全 应用
    在这里插入图片描述在这里插入图片描述在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

使用$.extend()方法来自定义工具函数

语法:
(function($){
    $.extend({
        "函数名": function(参数){
            ……
        }
    });
})(jQuery);



jQuery.extend( [ deep ], target, [ object1 ], [ objectN ] )

描述:合并两个或更多的对象的内容汇集成到第一个对象。

		deep:如果是true,合并成为递归(又叫做深拷贝)Python解释器的安装步骤。

		target:一个对象,如果附加的对象被传递给这个方法将那么它将接收新的属性,如果它是唯一的参数将扩展 jQuery 的命名空间。

		object1:一个对象,它包含额外的属性合并到第一个参数

		objectN:包含额外的属性合并到第一个参数


(
    function(){}
)() 是 JavaScript 立即执行函数,这种语法在高级开发中经常用到。
所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法
parent() 方法返回被选元素的直接父元素。

DOM 树:该方法只沿着 DOM 树向上遍历单一层级。
next() 方法返回被选元素的后一个同级元素。

同级元素是共享相同父元素的元素。

注意:该方法只返回一个元素。

DOM 树:该方法沿着 DOM 元素的后一个同级元素向前遍历。

往数组添加一条数据:array.unshift({});

往数组添加一条数据:array.unshift({});

字符串转数组

let string = “12345,56789”
string.split(’,’) // [‘12345’,‘56789’]

数组转字符串

let array = [“123”,“456”]
array.join(",") // “‘123’,‘456’”

数组元素删除

let array = [‘123’,‘456’]
// 删除起始下标为1,长度为1的一个值,len设置的1,如果为0,则数组不变
array.splice(1,1) // [‘123’]

// 替换起始下标为1,长度为1的一个值为‘ttt’,len设置的1
array.splice(1,1,‘ttt’) // [‘123’,‘ttt’]

长度0位添加一个元素
// 表示在下标为1处添加一项’ttt’
array.splice(1,0,‘ttt’)
//[‘123’,‘ttt’,‘456’]
// 数组是否包含某个元素
arr.indexOf(某元素):未找到则返回-1

数组更新
push() 新增到最后一个
pop() 删除最后一个
shift() 删除前一个
unshift() 新增到第一个
splice()删除所有
sort()
reverse()第一个和最后一个交换

nameList: [{name: '张三'},{name: '李四'},{name: '王五'}]
_this.nameList.push({
	name: '编码'
});

2.filter()、concat() slice()

改变数组,建立新数组

			for(var j = 0; j < res .length; j++) {
					console.log('1111');
			}

js扩展运算符 spread …

//将一个数组转为用逗号分隔的参数序列

//该运算符主要用于函数调用

function push(array, ...items) {
  array.push(...items);
}



 function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

//扩展运算符取代apply方法的一个实际的例子,应用Math.max方法,简化求出一个数组最大元素的写法。
// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);


//通过push函数,将一个数组添加到另一个数组的尾部
// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
//合并数组
// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]



扩展运算符将字符串转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]


 


JS数组添加元素的三种方式
1、push() 结尾添加

  数组.push(元素)

参数	描述
newelement1	必需。要添加到数组的第一个元素。
newelement2	可选。要添加到数组的第二个元素。
newelementX	可选。可添加多个元素。
2、unshift() 头部添加

  数组.unshift(元素)

参数	描述
newelement1	必需。向数组添加的第一个元素。
newelement2	可选。向数组添加的第二个元素。
newelementX	可选。可添加若干个元素。
3、splice() 方法向/从数组指定位置添加/删除项目,然后返回被删除的项目。

  

参数	描述
index	必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。


 

[active==index ? 'iconzu--2':'iconzu--1']   :class






评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值