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. Unicode编码学习

    unicode基础知识 简单来说,** unicode 是字符集,utf-8,utf-16,utf-32是编码规则.** unicode 字符集: ttps://unicode-table.com/ ...

  2. 《linux就该这么学》第十节课：第8章iptables和firewalld

            网卡配置: 物理机:192.168.10.1/24 服务器:192.168.10.10/24 客户端:192.168.10.20/24         1.vim  /etc/sysc ...

  3. C语言进阶之路（二）----字符串操作常见模型

    1.while模型 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #includ ...

  4. hdu5517 二维树状数组

    题意是给了 n个二元组 m个三元组, 二元组可以和三元组 合并生成3元组,合并条件是<a,b> 与<c,d,e>合并成 <a,c,d> 前提是 b==e, 如果存在 ...

  5. Nginx技术研究系列7-Azure环境中Nginx高可用性和部署架构设计

    前几篇文章介绍了Nginx的应用.动态路由.配置.在实际生产环境部署时,我们需要同时考虑Nginx的高可用性和部署架构. Nginx自身不支持集群以保证自身的高可用性,商业版本的Nginx+推荐: T ...

  6. DRF之解析器源码解析

    解析器 RESTful一种API的命名风格,主要因为前后端分离开发出现前后端分离: 用户访问静态文件的服务器,数据全部由ajax请求给到 解析器的作用就是服务端接收客户端传过来的数据,把数据解析成自己 ...

  7. opencv学习之路（19）、直方图

    一.概述 二.一维灰度直方图 #include "opencv2/opencv.hpp" #include<iostream> using namespace cv; ...

  8. Codeforces Round #495 (Div. 2) D. Sonya and Matrix

    http://codeforces.com/contest/1004/problem/D 题意: 在n×m的方格中,选定一个点(x,y)作为中心点,该点的值为0,其余点的值为点到中心点的曼哈顿距离. ...

  9. 一个数组中两个数的和为N，找出这两个数字的下标

    分析,两个数字的和为N.那么这两个数字是否是唯一的呢?输出的下标是否是第一对出现的呢? 1,我们假设这两个数字是唯一的 和是唯一的,那么其中一个数字越大,另一个数字就越小.想到大小关系,我们就想到了排 ...

  10. Maven提示找不到dependency依赖包

    最近C盘爆炸,又重装了一下系统,打开之前创建的Maven项目,提示找不到仓库里的jar包了 我更新了Maven,重新加载都没用,我去系统盘查看的时候发现了这么一个情况: 我在装WIN10的时候用的是U ...