java复习前端篇——JavaScript

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

2.JS的引入方式:

  (1):页面内直接编写JS代码,JS代码需要使用<script></script>.
   (2):将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
    <script  type="text/javascript"  src="../js/check.js"> //这里面不写东西</script>。外部脚本不能包含 <script> 标签。

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 事件做出反应
                onclick=JavaScript
                    <h1 onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>
                    <h1 onclick="changetext(this)">请点击该文本</h1>

HTML 事件属性
                向 button 元素分配 onclick 事件:
                    <button onclick="displayDate()">点击这里</button>

使用 HTML DOM 来分配事件
                向 button 元素分配 onclick 事件:
                    <script>
       document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

    (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

原文地址:https://www.cnblogs.com/unrulywind/p/9141466.html

时间: 2024-08-01 00:56:23

java复习前端篇——JavaScript的相关文章

java复习前端篇——HTML

HTML:超文本标记语言(页面中可以包含图片.音乐.链接.程序等非文字元素,通过一组标签的形式描述事物的一门语言) HTML的结构标签:根标签:<html>.头标签:<head>.体标签:<body> HTML的字体标签:<font> 属性:color {字体颜色分为两种(1)英文单词设置:black,red,green,blue...(2)使用16进制数设置:#FFFFFF , #FFF} size{字体的大小} face{字体的样式} HTML的排版标签

java复习前端篇——Jquery

1.Jquery概述 轻量级的JS的类库.对JS进行封装.JQuery的作用:做页面的特效,页面异步操作.(使用时首先引入Jquery文件{注意版本}) 2.jq的入口函数 jq是等页面的DOM树绘制完成后进行执行.可以编写多个入口函数.而js的匿名函数,只能编写一个. 传统的JS的方式:页面加载的事件只能执行一次.    window.onload = function(){} Jquery原始写法    $(document).ready(function(){  // 在这里写你的代码..

Java复习第一天---Javascript的基本知识点

1.HelloWord: 2.基础语法: 3.嵌入HTML 借助window.onload事件在整个窗体载入完毕之后运行程序代码 4.事件驱动: 5.DOM操作 5.1 查找元素节点 5.1.1 依据id值 方法:document.getElementById(id值) 获取到的是一个元素节点 var bj = document.getElementById("bj"); alert(getText(bj)); 5.1.2 依据标签名 方法:document.getElementsBy

java复习web篇——servlet

1.Servlet Servlet的概述: 就是一个运行在WEB服务器上的小的Java程序,用来接收和响应从客户端发送过来的请求,通常使用HTTP协议.Servlet就是SUN公司提供的一个动态网页开发技术.2.5版本:基于配置式开发(web.xml)3.0版本:基于注解式开发Servlet的作用:    它会基于HTTP协议, 在服务器端接收客户端发出的请求, 然后进行相应的业务逻辑处理, 处理完了以后, 会向客户端返回一个响应 2.使用Servlet:    (1). 编写一个类      

java复习基础篇——代码执行顺序

代码块:在Java中,使用{}括起来的代码成为代码块 根据其位置和声明的不同,可以分为局部代码块:局部位置,用于限定变量的生命周期 构造代码块:在类中的成员位置,用{}括起来的代码.每次调用构造方法执行前,都会先执行构造代码块. 作用:可以把多个构造方法的共同代码放在一起. 静态代码块:在类中的成员位置,用{}括起来的代码,只不过它用static修饰 作用:一般是对类进行初始化 public class BlockTest { { System.out.println("444 BlockTes

java复习基础篇—-JVM内存结构(转)

主要内容如下: JVM启动流程 JVM基本结构 内存模型 编译和解释运行的概念 一.JVM启动流程: JVM启动时,是由java命令/javaw命令来启动的. 二.JVM基本结构: JVM基本结构图: <深入理解Java虚拟机(第二版)>中的描述是下面这个样子的: Java中的内存分配: Java程序在运行时,需要在内存中的分配空间.为了提高运算效率,就对数据进行了不同空间的划分,因为每一片区域都有特定的处理数据方式和内存管理方式. 具体划分为如下5个内存空间:(非常重要) 栈:存放局部变量

java复习基础篇——Mysql数据库

数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据进行增加,修改,删除及查询操作. mysql的dos窗口启动关闭命令:net start mysql和net stop mysql 登录命令:(1)mysql -u用户名 -p密码      (2)mysql --host=ip地址 --user=用户名 --password=密码 DOS操作数据乱码解决: 我们在dos命令行操作中文时,会报错ERROR 1366 (HY000): Inco

java复习汇总之面试篇

这些个人感觉都是基础,希望看的园友不要喷. 1.什么是servlet线程安全,如何解决? 2.spring事物管理,在项目中你是怎么管理事物的? 3.java中的有几种线程? 4.java有几种锁? 5.怎么理解java中的多态,项目中何时用到抽象类? 6.如何处理js,sql注入? 7.struts2拦截器的原理? 8.如何理解spring AOP? 11.java中常用的集合,在项目中用到时,有什么需要注意的? 12.如果优化项目中sql,为什么要那样优化? 13.java性能优化? 14.

[转]解读2014之前端篇:任性的颠覆式改变

http://www.infoq.com/cn/articles/2014-review-front-end-part 2014年,整个IT领域发生了许多深刻而又复杂的变化,InfoQ策划了“解读2014”年终技术盘点系列文章,希望能够给读者清晰地梳理出技术领域在这一年的发展变化,回顾过去,继续前行. 本篇是解读系列的前端篇,小编邀请到天猫前端团队的三七.铁军.不四.鬼道这四位专家来解读2014年前端领域最引人注目的几大热点. HTML5正式定稿,ECMAScript 6 规范从纸上走到现实 2