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. 57.搭建Vue环境

    nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3 cmd命令行: node -v //显示node版本 v6.1 ...

  2. nginx----------nginx日志详细分解

    1.客户端(用户)IP地址.如:上例中的 47.52.45.228 2.访问时间.如:上例中的 [03/Jan/2013:21:17:20 -0600] 3.请求方式(GET或者POST等).如:上例 ...

  3. CentOS 7 源码搭建LNMP环境

    搭建 LNMP 环境 源码包版本 :  CentOS Linux  7 nginx-1.15.1.tar.gz  mysql-boost-5.7.21.tar.gz  php-7.2.7.tar.gz ...

  4. 点火开关分为4个档位，分别是off，acc，IG-on，和ST

    off全车除了常火(如应急灯,时钟等的记忆功能)外,均不供电.acc 是附件档,部分车载附属设备供电,如视听系统,仪表灯,灯光等.也就是说,车停在哪里,发动机不转,除了空调不能用外,车内的设备基本都可 ...

  5. 因微信SSJD分享接口升级，分享变化

    4月25日发版发现的微信分享问题,已确认是腾讯微信开发团队更新的分享的策略,而我们未能收到通知依然沿用老代码造成的.目前已经解决,解决方案如下: 微信分享的shareUrl域名必须与当前环境的安全域名 ...

  6. 2018-2019-1 20189206 《Linux内核原理与分析》第九周作业

    #linux内核分析学习笔记 --第八章 进程的切换和系统的一般执行过程 学习目标:重点关注进程切换的过程,进程调度的时机,操作系统的基本构成以及一般的执行过程. 进程调度的时机 因为进程的调度只发生 ...

  7. 经典算法问题的java实现 （一）

    原文链接: http://liuqing-2010-07.iteye.com/blog/1396859   1.如何计算闰年(Leap Year)?   四年一闰:百年不闰:四百年再闰.   具体参照 ...

  8. python scrapy baidu image【转】

    原 https://github.com/vivianLL/baidupictures #!/usr/bin/env Python # coding=utf-8 #__author__ = 'leil ...

  9. adb shell 命令之----pm

    常用的用法: 查看已经安装的包: pm list packages 查看已经安装的包以及apk路径(-3:只看第三方应用: -s:只看系统应用) -f: see their associated fi ...

  10. eclipse安装插件配置Android开发环境

    安卓版本与sdk的对应   转载自: https://blog.csdn.net/cx776474961/article/details/79501740 最近学习Android开发,电脑已有开发we ...