这里写目录标题

  • 1、简介
  • 2、主要构成
  • 3、 JS特点
    • 1.脚本语言
    • 2.基于对象的语言
    • 3.事件驱动:
    • 4.简单性
    • 5.安全性
    • 6.跨平台性
    • 缺点
  • 4、JS 和java的区别
    • 区别1:公司不同,前身不同
    • 区别2:基于对象和面向对象
    • 区别3:变量类型强弱不同
  • 5、JS的引入方式
  • 6、算数运算符
  • 7、JS中的流程控制
    • 分支结构包括ifelse switch case
    • 循环结构包括 while dowhile for
  • 8、JS中函数的使用
    • 什么是JS的函数:
  • 9、数组的定义和使用
  • 10、JS中的对象
    • JS中的常用对象
    • Number的常用属性和方法
    • Date对象
    • Math对象
  • 11、事件
    • 常用事件演示
    • 按键事件
    • 事件使用
    • 表单事件:
    • 页面加载事件
  • 12、认识BOM和DOM
    • 什么是BOM
    • 什么是DOM
    • DOM和BOM的关系
    • window对象及常用方法
      • open和close方法
    • BOM中的其他常见对象
  • DOM编程学习,概念引入
    • 什么是DOM编程
    • 什么是document
    • document对象如何获取
    • 操作属性

1、简介

Javascript(简称js)是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。JavaScript 的正式名称是 “ECMAScript”。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 1996 年开始,已经出现在所有的 Netscape 和 Microsoft 浏览器中。ECMA-262 的开发始于 1996 年,在 1997 年 7 月,ECMA 会员大会采纳了它的首个版本。JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等

2、主要构成

一般程序员只需要了解三个模块就可以了

ECMAScript
是一种由欧洲计算机制造商协会(ECMA)通过ECMA-262标准化的脚本程序语言,简单点说,ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象。

DOM
把整个页面规划成由节点层构成的文档,它不与浏览器、平台、语言相关,为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象.DOM编程可以实现网页内容校验和动态变化的效果

BOM
是浏览器的一种特性,它可以对浏览器窗口进行访问和操作,例如移动、关闭窗口,调整窗口的大小,支持cookie等。BOM编程可以实现动态控制浏览器本身行为的效果

3、 JS特点

1.脚本语言

脚本语言是一种简单的程序,规模小,不需要编译,运行快,是由一些ASCII字符构成,可以使用任何一种文本编辑器编写。脚本语言是指在web浏览器内有解释器解释执行的编程语言,每次运行程序的时候,解释器会把程序代码翻译成可执行的格式。一些程序语言(如C、C++、Java等)都必须经过编译,将源代码编译成二进制的可执行文件之后才能运行,而脚本语言不需要事先编译,只要有一个与其相适应的解释器就可以执行。

2.基于对象的语言

面向对象有三大特点(封装,继承,多态)却一不可。通常"基于对象"是使用对象,但是无法利用现有的对象模板产生新的对象类型,也就是说"基于对象"没有继承的特点。没有了继承的概念也就无从谈论"多态"

3.事件驱动:

在网页中执行了某种操作的动作,被称为"事件"(Event),比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。

4.简单性

变量类型是采用弱类型,并未使用严格的数据类型。var a,b,c; a=123; b=“abc”; a=b;

5.安全性

JavaScript不能访问本地的硬盘,不能将数据存入到服务器上,不能对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互

6.跨平台性

JavaScript依赖于浏览器本身,与操作平台无关, 只要计算机安装了支持JavaScript 的浏览器(装有JavaScript解释器),JavaScript 程序就可以正确执行。

缺点

各种浏览器支持JavaScript的程度是不一样的,支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时,效果会有一定的差距,有时甚至会显示不出来。

4、JS 和java的区别

区别1:公司不同,前身不同

JavaScript是Netscape公司的产品,是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是Live Script;Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发; Java的前身是Oak语言。

区别2:基于对象和面向对象

JavaScript是脚本语言,是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用,但不支持继承和多态。Java是面向对象的,是一种真正的面向对象的语言,支持封装、继承和多态。

区别3:变量类型强弱不同

Java采用强类型变量检查,即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;JavaScript中是弱类型变量。统一采用var声明,可赋各种数据类型值

5、JS的引入方式



6、算数运算符





7、JS中的流程控制

分支结构包括ifelse switch case

循环结构包括 while dowhile for

需求:给定月份输出季节
ifelse结构实现

<script>var i =5;if(i == 12 || i== 1 || i==2){alert("大约在冬季")}else if(i>=3 && i <=5){alert("春暖花开,草原上... ...")}else if(i>=6 && i <=8){alert("夏季来临,烧烤啤酒 ... ...")}else if(i>=9 && i <=11){alert("秋天到了,草原收获春天的... ...")}else{alert("草原上没有这月份")}
</script>

switch case结构实现

<script>var i =5;switch(i){case 1:case 2:case 12:alert("大约在冬季")break;case 3:case 4:case 5:alert("大约在春季")break;case 6:case 7:case 8:alert("大约在夏季")break;case 9:case 10:case 11:alert("大约在秋季")break;default:alert("无此月份")}
</script>

需求:循环求和 1-100
while结构实现

<script>var sum =0;var i =1;while(i<=100){sum+=i;i++;}alert(sum)
</script>

do-while结构实现

<script>var sum =0;var i =1;do{sum+=i;i++;}while(i<=100);alert(sum)
</script>

练习for循环 打印99乘法表

<script>//document.write 向页面增加内容for(var i =1;i<=9;i++){for(var j =1;j<=i;j++){document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")}document.write("<br/>")}
</script>

8、JS中函数的使用

什么是JS的函数:

类似于java中的方法,JS中也可以定义一些函数,java中的方法签名包含访问修饰符,返回值类型,方法名,参数列表,异常列表,但是JS中定义函数的语法相对简单很多,主要以function作为函数关键字,具备函数名和参数列表,但是没有访问修饰符也没有返回值类型关键字和异常列表




9、数组的定义和使用






数组中的常用方法

10、JS中的对象

JS中的常用对象

JS基于对象的脚本语言 ,有类和对象,但是没有封装,继承,多态,Java script 中有一些浏览器直接识别并使用的对象,常见的对象有 String对象,Math对象,Number对象,Date对象等等.
String和java中的String很类似,的常用方法有

Number的常用属性和方法



Date对象

Math对象

11、事件

什么是事件
事件是可以被 JavaScript 侦测到的行为
事件也是满足某些条件就可以触发指定的函数

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数

事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行


比如我们可以通过点击某个按钮,或者弹窗,什么的,就可以动态调取

可以用事件方式进行调用

刚刚属于单机事件

下面的是双击事件

常用事件演示

按键事件

事件使用

表单事件:

页面加载事件

12、认识BOM和DOM

什么是BOM

BOM是Browser Object Model的简写,即浏览器对象模型。
BOM有一系列对象组成,是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是window对象

什么是DOM

DOM是Document Object Model的简写,即文档对象模型。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。
DOM由一系列对象组成,是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是document对象

DOM和BOM的关系

DOM也是归BOM管的
BOM编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出…行为
DOM编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个对象中有很多关于操作文档的一些属性和方法,访问这些属性和方法的时候,我们就可以通过代码动态控制页面上显示的内容
BOM 是为了操作浏览器出现的 API,window 是其根对象。
DOM 是为了操作文档出现的 API,document 是其根对象

window对象及常用方法



open和close方法


BOM中的其他常见对象






DOM编程学习,概念引入

什么是DOM编程

简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.

什么是document

document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在。

document对象如何获取

document对象是window对象的一个成员属性,通过window.document来访问,当然也可以直接使用document,根据HTML代码结构特点,document对象本身是一种树形结构的文档对象



操作属性




Javascript的简单介绍,只作为个人笔记,不作为知识参考,如果想要学习,请找其他文章相关推荐

  1. 简单介绍一些关于 Kaggle 比赛的知识

    简单介绍一些关于 Kaggle 比赛的知识 转自: https://www.zhihu.com/question/23987009/answer/29371981 作者:匿名用户 链接:https:/ ...

  2. 【JS基础-1】JavaScript语言简单介绍(语法、变量、数组、流程控制语句、函数、对象和事件)

    目录 1 JS概述 2 在HTML中引入JS代码 2.1 内部引用 2.2 外部引用 2.3 功能演示:修改标签内容 2.3.1 内部引用 2.3.2 外部引用 3 JS变量 3.1 变量名的命名规则 ...

  3. javascript设计模式简单介绍之【工厂模式】

    工厂模式分为两种,一种是简单工厂模式.另一种称之为工厂模式. 简单工厂模式是使用一个外部的单体或者静态方法来生成实例. 而工厂模式使用子类来决定内部成员要实现那个具体的类的实例. 工厂模式要求被具体实 ...

  4. 简单介绍一下“前向安全”的知识(从零开始学区块链 137)

    这几天在研究如何保障数据可溯源,想从前向安全的方法中得到点启发,顺便把前向安全的知识发出来供大家参考 1997年,Anderson提出了前向安全数字签名的概念.前向安全的签名把公钥的生存期划分为很多时 ...

  5. 简单介绍RESTful风格

    文章目录 前言 一.RESTful风格是什么? 二.搭建环境: 1. get.html 2. post.html 3. Controller.java 三.@PathVariable简单介绍 前言 学 ...

  6. python中pickle模块的用法_Python中json模块和pickle模块的简单介绍(附示例)

    本篇文章给大家带来的内容是关于Python中json模块和pickle模块的简单介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Python中的json模块和pickl ...

  7. php有lambda表达式吗,Python中lambda表达式的简单介绍(附示例)

    本篇文章给大家带来的内容是关于Python中lambda表达式的简单介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一:匿名函数的定义 lambda parameter ...

  8. java过滤器应用实例_Servlet过滤器Filter的简单介绍(附示例)

    本篇文章给大家带来的内容是关于Servlet过滤器Filter的简单介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 特点 1)Filter是依赖于Servlet容器,属 ...

  9. python shelve模块_Python中shelve模块的简单介绍(附示例)

    本篇文章给大家带来的内容是关于Python中shelve模块的简单介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. shelve:对象持久化的保存的模块,将对象保存到文件 ...

  10. python学习笔记(一)Python 简单介绍

    Python学习笔记(一)Python 简单介绍 Python介绍 Python简介 Python应用领域 Python是解释型的语⾔ 编译和解释的区别是什么? 编译型vs解释型 编译型 解释型 Py ...

最新文章

  1. idea创建包怎么让包分层_干货 | 通勤包怎么选?我推荐这6只
  2. 探索javascript----获得节点计算后样式
  3. eclipse开发java程序,断点调试
  4. 技术情报局(笛卡尔树)
  5. FileSystemMap:与文件系统交互的自然方法
  6. 4.线性和卷积——边界问题、解决边界方法和Matlab实战_3
  7. 如何把开源项目发布到Jcenter
  8. eclipse html自动编译器,Eclipse+WxWidgets开发环境搭建
  9. 微软 CEO 纳德拉痛失爱子
  10. pyinstaller打包tensorflow+python程序成.exe各种坑(持续添加)
  11. mysql最多多少slave_MySQL5.7主从,单slave多master
  12. Atitit 学习一项技术的方法总结 目录 1. 自己动手实现学习法 1 2. 七步学习法 —— 如何高效学习一项技能 1 3. 如何快速学习一项技能-十步学习法 - HugoLester - 博客
  13. Mac环境下安装JDK
  14. 使用nssm注册 windows服务
  15. MySQL第七章之后的
  16. CentOS7服务器安装GPU显卡驱动和CUDA简单方法
  17. 永中office属于职称计算机吗,永中office
  18. Nginx配置天地图缓存
  19. iOS 第四天之ViewController
  20. 程序员福利:当编程语言都变成女孩子

热门文章

  1. 【E-DEEC】基于matlab增强的分布式能源有效集群(E-DEEC)【含Matlab源码 1566期】
  2. 【优化算法】头脑风暴优化算法(BSO)【含Matlab源码 497期】
  3. 【路径规划】基于matlab遗传结合模拟退火算法仓库拣货小车最优路径规划【含Matlab源码 649期】
  4. 【电路仿真】基于matlab simulink三相半波可控整流电路【含Matlab源码 331期】
  5. 硕士转行学python_0基础转行编程学习Python是最快的途径吗?
  6. linux安装kafka_巨杉Tech | 基于Kafka+Spark+SequoiaDB实时处理架构快速实战
  7. 蓝牙hci主要作用是什么_我的“我”是您的“您”:为什么为HCI精调Deixis很困难
  8. php设置input时间格式,input[type='date']自定义样式与日历校验功能
  9. MATLAB遍历文件夹
  10. pyqt5 显示更新进度条_python如何通过pyqt5实现进度条