1.JS的概述:

什么是JS:运行在浏览器端脚本语言,基于对象和事件驱动的语言,应用于客户端,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

JS的用途:使用JS提升用户的体验.使HTML动起来.

2.JS的引入方式:

(1):页面内直接编写JS代码,JS代码需要使用.

(2):将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.

。外部脚本不能包含

3.JS的组成:

(1)ECMAScript:JS的核心

基本语法

与 Java 一样,变量、函数名、运算符以及其他一切东西都是区分大小写的。

比如:变量 test 与变量 TEST 是不同的

弱类型语言,可以任意改变变量的类型,变量是弱类型的与 Java 和 C 不同,ECMAScript 中的变量无特定的类型,定义变量时只用 var 运算符,可以将它初始化为任意值。因此,可以随时改变变量所存数据的类型(尽量避免这样做)。

例子

var color = "red";

var num = 25;

var visible = true;

行代码结束可不加分号,就默认为换行,建议加上分号,最好的代码编写习惯是总加入分号,因为没有分号,有些浏览器就不能正确运行,不过根据 ECMAScript 标准,下面两行代码都是正确的:

var test1 = "red"

var test2 = "blue";

变量名可以包含数字,但是不能以数字开头

注释

单行注释    :    以双斜杠开头(//)

多行注释    :    以单斜杠和星号开头(/*),以星号和单斜杠结尾(*/)

js运算符:

一元运算符:++ --  与Java一致

逻辑运算符:&& || !or

算术运算符:+ - * / % 运算

+ 特点 :做的是拼接操作

- 特点 : 先把值转换成数值后再进行减法运算,转换后不是数值相减会出现NaN

关系运算符:

>   <      >=    <=    ==    !=

== 和 ===的区别,前者比较的是数值,后者不仅比较值而且还比较数据类型

三元运算符

值?表达式1:表达式1

如果值为true,整个表达式取表达式1的值,如果值为false,整个表达式取表达式2值。

赋值运算符

*=、+=、-=、/=、%=

以上赋值运算符与java中操作一样

逗号运算符

var a=1, b=2;

逗号运算符可以在一条语句中执行多个运算

声明变量

var关键字

var i = 10;

var i =  "wangbadan";

var i = true;

var i = null;

......

js流程控制语句:

if条件

格式 :if(条件){语句}else{语句}

在java中if语句后面的条件必须是true/false值,而在javascript 中我们描述true/false有多种方式,所以要注意与java中的区别

switch语句

While与do-while

for循环

js类型

原始类型

string:字符及字符串都看做为字符类型

number:数值类型

boolean:逻辑类型

null

undefined:变量未初始化

引用类型:

对象类型.对象类型默认值是null.

类型判断:

typeof()

类型转换:

toString():转传成字符串

parseInt(值):转换成数字类型

parseFloat(值):转换成浮点类型

Boolean(值):值转换成Boolean类型

Number(值):值转换成Number类型

(2)DOM:Document Object Model   文档对象模型DOM:就是将文档加载到内存,形成树形结构, 从而操作树形结构就可以改变HTML的样子.

Document :文档对象.代表的是加载到内存中的整个的文档.

Element :元素对象.代表文档中的每个元素(标签)

Attribute:属性对象.代表元素上的属性.

Document,Element,Attribute统称为Node(节点)

DOM基本操作:1.获取元素:

document.getElementById()     通过ID获得元素

document.getElementsByName()    通过name属性获得元素

document.getElementsByTagName();    通过标签名获得元素

2.创建元素:

document.createElement();  创建元素

var para=document.createElement("p");

document.createTextNode();   创建文本节点

var node=document.createTextNode("这是新段落。");

3.添加元素:

element.appendChild(); 在最后添加一个节点

element.insertBefore();  在某个元素之前插入一个节点

4.  删除元素:

element.removeChild();  如需删除 HTML 元素,您必须首先获得该元素的父元素:

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

如果能够在不引用父元素的情况下删除某个元素,就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

5.修改元素:

elementNode.setAttribute(name,value)

参数 描述

name 必需。规定要设置的属性名。

value 必需。规定要设置的属性值。

说明:  该方法把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。

6. 改变 HTML

改变 HTML 内容:document.getElementById(id).innerHTML=new HTML

改变 HTML 属性:document.getElementById(id).attribute=new value

7.改变 CSS

document.getElementById(id).style.property=new style

8. 事件

对 HTML 事件做出反应

οnclick=JavaScript

请点击该文本

请点击该文本

HTML 事件属性

向 button 元素分配 onclick 事件:

点击这里

使用 HTML DOM 来分配事件

向 button 元素分配 onclick 事件:

document.getElementById("myBtn").οnclick=function(){displayDate()};

(3)BOM:Browser Object Model  浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

Window:窗口对象

alert();     显示带有一段消息和一个确认按钮的警告框      alert("文本")

confirm();    弹出一个确认对话框   confirm("文本")

open();     打开一个新窗口

prompt();    显示可提示用户输入的对话框     prompt("文本","默认值")

设置定时的方法

* setInterval(); :每隔多少毫秒执行某个表达式.     * setInterval(“change()”,5000);

* setTimeout(); :隔多少毫秒执行一个该表达式.    * setTimeout(“change()”,5000);

清除定时的方法 clearInterval();

(1) clearInterval(id_of_setinterval)

var int=self.setInterval("clock()",50)

window.clearInterval(int);

(2)clearTimeout();

clearTimeout(setTimeout_variable)

t=setTimeout("timedCount()",1000)

clearTimeout(t)

Navigator:浏览器对象

Screen:屏幕对象

History:历史对象   go();   加载history 列表中的某个具体页面

Location:路径对象    href:   设置或者返回完整的URL

4.JS函数的定义和创建:

创建

function 函数名(参数){

函数体;

}

//默认返回值为true。

* window.onload = function(){

}

var 函数名 = new Function(参数(函数体))

var 函数名 = function(参数) {

函数体

}

js函数参数问题: 参数无数据类型,调用时不用按照方法里的参数规定来

js函数返回值问题:

(1) 如果有返回值可以用return

(2)有返回值不用声明返回值类型

注:没有方法重载,可以用arguments模拟

(3) 如果没有返回值就返回undefined

什么是java前端绑定事件_java复习前端篇——JavaScript相关推荐

  1. java nio 写事件_Java NIO

    java Nio Selector 选择器 Buffer 缓冲器 Channel 通道 Selector是NIO的核心,是channel的管理者,通过执行select()阻塞方式,监听是否有chann ...

  2. java 双击触发事件_java鼠标双击事件怎么实现

    很多人都学习过java,但是你知道java鼠标双击事件怎么实现吗,跟着学习啦小编一起学习ava鼠标双击事件. java鼠标双击事件的实现方法 鼠标的单双击事件在很多时候对我们帮助很大,但是在JAVA中 ...

  3. java和前端哪个好学_java和前端哪个难学?

    不是同一样东西,无法比较. Java 和 JavaScript 哪个难学? 前端 和 后端 哪个难学? 问Java 和 前端哪个难学, 就像在问牛排和中餐哪个好吃一样.Java 是门编程语言,前端是一 ...

  4. java 过滤js事件_java中的过滤器与监听器

    过滤器: Filter本身并不生成请求和响应对象,只是提供过滤功能. Filter能够在Servlet被调用之前检查Request对象,并修改Request Header和Request内容:在Ser ...

  5. java按钮添加事件_java中添加按钮并添加响应事件的方法(推荐)

    关于java容器,面板等自行百度学一下吧 private button loginbtn = new button("登陆"); final static jframe buyer ...

  6. java swing 删除事件_java swing清除事件队列

    是否可以以标准方式执行此操作? 这是场景. >开始在EDT中做一些昂贵的事情(EDT被阻止,直到昂贵的操作结束). >当EDT被阻止时,用户继续单击/拖动鼠标按钮.所有鼠标操作都记录在某处 ...

  7. java button click事件_java处理按钮点击事件的方法

    java处理按钮点击事件的方法 发布时间:2020-09-17 07:17:02 来源:脚本之家 阅读:70 作者:jingxian 不同的事件源可以产生不同类别的事件.例如,按钮可以发送一个Acti ...

  8. java中action事件_Java中,()接口可以处理ActionEvent事件_学小易找答案

    [单选题]Test中已定义Public float m(float a,float b),在类Test中增加()方法将会编译错误 [单选题]如下代码,()可以使成员变量m被函数fun()直接访问 cl ...

  9. java与前端的区别_java与前端的区别

    java与前端的区别 1.web前端,主要是给网站做静态页面的,也就是说你平时浏览的网站所看到的页面基本都出自web前端,不过网站版面可以是美工出图. 2.web前端需要掌握的技术有:DIV+CSS, ...

最新文章

  1. 洛谷P1315 观光公交
  2. 学习笔记-小甲鱼Python3学习第十五讲:字符串:格式化
  3. python-常见数据类型及其方法
  4. 从落后的传统WAN转向SD-WAN—Vecloud
  5. AJAX:Getting Started
  6. 为什么晚结婚的离婚率低?与这个对于我们的启示。
  7. CountDownLatch的理解和使用 多线程同步器
  8. SparkStreaming基础
  9. ZZULIOJ 1101: 逆序数字(函数专题)
  10. iOS开发中,应用内直接跳转到Appstore
  11. 教你编写高性能的mysql语法
  12. 毕业设计python数据分析_毕业设计:爬虫及数据分析
  13. Arduino 结构语法详解(含示例)二
  14. 2023-2028年中国压铸机行业发展前景与投资趋势分析报告
  15. Andriod Studio 连接华为手机调试
  16. 神码AI黑科技,人工智能写作的发展空间有目共睹
  17. 2021-06-21解决列表查询很慢的优化SQL定位查询慢原因优化
  18. android编译ijkplayer,android studio 3.0 集成ijkplayer
  19. 隐形眼镜长期使用不当,易引发巨柱状敏感性结膜炎!
  20. python爬虫:关于解决request.get和点击查看网页源代码的内容不同的问题//及大神版js加密参数获取教程指路

热门文章

  1. 皮一皮:不能太自信。。。
  2. 皮一皮:这这这..太真实了...
  3. 存在多个不同注册中心的时候,如何平滑的统一注册中心?
  4. 如何写出安全的、基本功能完善的Bash脚本
  5. 每日一皮:这翻译...真辛苦老外看纪录片纯靠脑补 ...
  6. 8月最新阿里技术栈架构资料
  7. 一文学会Maven的版本发布
  8. 优雅处理你的Java异常
  9. python emoji 表情处理过滤
  10. 聚类常见距离及python实现