JavaScript的作用：操作HTML元素，响应用户的操作，处理数据；

script标签的type或者language可以写也可以不写；

script标签防止位置：head结束之前或者body结束之后；

JS里面严格区分大小写！！！

JS可以通过元素的ID获取html元素，

document.getElementById("box").onclick = function(){

    alert('Hello JavaScript')

};

在上例中 onclic是点击事件；function(){}是函数；alert()是弹窗；

window.onload = function(){

    document.getElementById("box").onclick = function(){

        alert('这是一段JavaScript代码')

    };

};

window.onload的意思是当页面加载完成后，执行这段JavaScript代码，一个页面只能出现一次；

JS中的事件

鼠标事件：onclick 鼠标点击某个对象；onmouseover/onmouseenter 鼠标被移到某元素之上；

onmouseout/onmouseleave 鼠标从某元素移开； ondblclick 鼠标双击某个对象；

onmousedown 某个鼠标按键被按下；onmousemove鼠标被移动；onmouseup鼠标被松开；

表单事件

onblur 元素失去焦点；onfocus 元素获得焦点；onchange 用户改变域的内容；onreset重置按钮被点击；

键盘事件

onkeydown 键盘的键被按下；onkeypress 键盘的键被按下或按住；onkeyup 键盘的键被松开；

系统事件

onload 某个页面或图像被完成加载；onresize 窗口或框架被调整尺寸；onselect 文本被选中；

innerHTML / innerText

innerHTML 属性，设置或返回，表格行的开始和结束标签之间的 HTML。

<body>

    <div id="box"></div>

    <script>

        document.getElementById('box').onmouseover = function(){

             document.getElementById('box').innerText = '<p>这里写的是 innerHTML内容</p>'

};

    </script>

</body>

在JS中变量的定义可以是任意数字，字母，下划线（-），$,但是不能以数字开头；

事件里面的简单This

<body>

    <div id="box"></div>

    <script>

        var cniao = document.getElementById('box');

        cniao.onmouseover = function(){

            this.innerText = '<p>我是菜鸟</p>'

    }；

        cniao.onmouseout = function(){

            this.innerText = ' ';

    };

    </script>

</body>

JS在修改元素样式的时候，一般修改内部样式，还是上面的例子；

cniao.onmouseover = function(){

    this.style.background = 'red';

};

cniao.onmouseout = function(){

    this.style.background = 'green'

};

赋值与获取标签内容

<body>

    <p id = 'test'>

        这里面是要被读取与修改的内容

    </P>

    <script>

        var cniao = document.getElementById('test');

        cniao.onclick = fuction(){

       // this.innerHTML = "嘿嘿你被修改了"；

        alert(this.innerHTML)

};

    </script>

</body>

有名函数 / 匿名函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function；

function functionname(){

    被执行的代码块

};

函数的定义大致可以三种；

//第一种

function cniao(x){ return x + ;};

//第二种，这种方法使用了Functiong构造函数，把参数和函数体都作为字符串；

var cniao = new Function('x', 'return x + 1;');

//第三种，右边的就是一个匿名函数，创建后又将该函数赋给了变量cniao

var cniao = function(x){return x + ;};

匿名函数的创建

//这里创建了一个匿名函数（在第一个括号内），第二个括号用于调用该函数，并传入参数。

(function(x,y ){ alert(x + y); })(,);

有名函数可以自执行，函数名 + （）；自执行时 this 指向 window；

<body>

    <div id = "box"></div>

    <script>

        var cniao = document.getElementById('box');

        cniao.onclick = lniao;

        function lniao(){

            alert(this)

            this.style.width = '100px';

};

    lliao();

    </script>

</body>

读取标签属性

<body>

    <div id="box" class="cniao"></div>

    <script>

        var lniao = document.getElementById('box');

        lniao.onclick = function(){

            alert(this.className);   //class ==> className;

};

    </script>

</body>

拼接

<body>

    <script>

        var a = ; varb = ;

        alert( a + b + '我是新加入的菜鸟')；

    </script>

</body>

JavaScript的数据类型；

var a = 1；数字

var a = '1'；string字符串

var a = function(){}；函数

var a = false；布尔值

var arr=["字符串",true,1]；数组

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

var cniao={name:"sgg",  id:123}；

undefined 表示变量没有值（没定义）；

null 可以通过将变量的值设置为null来清空变量；

走进JavaScript的更多相关文章

  1. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

  2. 走进javascript——不起眼的基础，值和分号

    值 有时我很想知道javascript解析引擎是如何区分一个变量的值,比如下面这段代码. var x = 'javascript'; //javascript x = "hello" ...

  3. 走进javascript——类型

    ECMAScript语言类型对应于使用ECMAScript语言的ECMAScript程序员直接操作的值.ECMAScript语言类型有以下几种Undefined,Null,Boolean,String ...

  4. 走进javascript——数组的那些事

    Array构造器 如果参数只有一个并且是Number类型,那么就是指定数组的长度,但不能是NaN,如果是多个会被当做参数列表. new Array(12) // (12) [undefined × 1 ...

  5. 走进JavaScript——重拾对象

    创建对象 Object构造器的参数如果为空或null.undefined将返回一个空的Object对象,如果为其他值则调用相应的构造器,如 new Object() // Object {} new ...

  6. 走进javascript——重拾数组

    Array构造器 如果参数只有一个并且是Number类型,那么就是指定数组的长度,但不能是NaN,如果是多个会被当做参数列表. new Array(12) // (12) [undefined × 1 ...

  7. 走进javascript——它是什么？

    javascript不是什么 如<把时间当作朋友>的作者所说,"有些时候,有些事物,从反面描述比从正面描述更为容易.如若先仔细说清楚这本书不是什么,之后,至于它究竟是什么,很可能 ...

  8. 雷哥带你走进Javascript

    javascript复习笔记--------------------------------------------1.概念2.面向对象思想3.作用认识4.引入方式5.执行顺序 变量 1)声明方式 x ...

  9. 走进javascript——解开switch之谜

    很早以前就觉得switch很怪异,或者说一直没太理解它,它怪异就怪异在非要给每个语句加上break;不然后面的语句就算不符合条件还是会执行,比如以下这段代码 var num = 2; switch(n ...

随机推荐

  1. Linux. 计划任务 时间格式

    Linux. 计划任务 时间格式 在linux中执行指令:cat /etc/crontab 结果,如下图所示: 结果一目了然,不多说. 如有问题,欢迎纠正!!! 如有转载,请标明源处:https:// ...

  2. C#：特性

    #define IsText//添加一个宏,接触注释 using System; using System.Collections.Generic; using System.Diagnostics; ...

  3. OpenStack-RabbitMQ-获取vm、磁盘、网络设备的状态变化

    需求 及时知道vm,硬盘,镜像,网络设备.负载均衡器状态变化 分析 Dashboard中也是通过定时使用ajax调用API来获取虚拟机的状态信息的定时轮训的方式过于被动 解决方案 共用rabbitmq ...

  4. noip2016海港

    题目描述 Description 小K是一个海港的海关工作人员,每天都有许多船只到达海港,船上通常有很多来自不同国家的乘客. 小K对这些到达海港的船只非常感兴趣,他按照时间记录下了到达海港的每一艘船只 ...

  5. linux tail命令及其它日志查看命令的用法

    当日志文件存储日志很大时,我们就不能用vi直接进去查看日志,需要Linux的命令去完成我们的查看任务. Log位置: /var/log/message 系统启动后的信息和错误日志,是Red Hat L ...

  6. codeforces 982B Bus of Characters

    题意: 有n排座位,每排有两个座位,每排座位的宽度都不一样. 有2 * n个人要上车,如果是内向的人,那么它会选择一排两个都是空位并且宽度最小的一排去坐: 如果是外向的人,会选择一排座位已经有人坐的, ...

  7. [openjudge-贪心]装箱问题

    题目描述 描述 一个工厂制造的产品形状都是长方体,它们的高度都是h,长和宽都相等,一共有六个型号,他们的长宽分别为1*1, 2*2, 3*3, 4*4, 5*5, 6*6.这些产品通常使用一个 6*6 ...

  8. 在 Tomcat 中自定义 404 页面（简单配置）

      打开 Tomcat 中的 web.xml,(tomcat/conf/web.xml) 添加如下代码: <error-page>  <error-code>404</e ...

  9. hello2 source anaylis

    首先,我们先来看一看这一段的整体代码, 代码如下: @WebServlet("/greeting") public class GreetingServlet extends Ht ...

  10. 论文笔记【二】Making Sense of Word Embeddings

    摘要 1.作者提出了一种新的简单有效的方法,用于学习词义嵌入word sense embedding 2.传统的两种方法:(1)直接从语料库中学习词义:(2)依赖词汇资源的语义库 研究方法的创新点:通 ...