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. navicat for mysql 数据库备份与还原

    一, 首先设置, 备份保存路径 工具 -> 选项 点开 其他 -> 日志文件保存路径 二. 开始备份 备份分两种, 一种是以sql保存, 一种是保存为备份 SQL保存 右键点击你要备份的数 ...

  2. n皇后问题——关于斜线的编号

    题目大意:在n*n的棋盘中,放置n个皇后(同一行.同一列.同一斜线,只有一个皇后) 这道题是一道非常经典的dfs模板题,同一行.同一列的判断不是很难,但同一斜线有一定的难度,下面给出关于斜线编号的解决 ...

  3. Eclipse启动报错An internal error occurred during: "Initializing Java Tooling"

    Eclipse启动报错An internal error occurred during: "Initializing Java Tooling" 解决方案: 删除工作空间work ...

  4. vue不通过路由直接获取url中参数的方法示例

    vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...

  5. UValive4195 Heroes of Money and Magic

    斜率优化 想骂人了,马格吉最后调了半小时 TMD造数据的人是SB吧? 我写  while(scanf("%d%d",&n,&m)!=EOF&&n) ...

  6. 每天一个Linux命令 10

    文件处理命令:ln命令名称:ln 命令英文原意:link语法: ln -s [原文件] [目标文件] -s 创建软连接功能描述:生成链接文件 #ln -s /etc/issue /tmp/issue. ...

  7. micropython驱动sh1106点亮oled

    继上一帖给esp32刷入micropython之后,忍不住给以esp12e也刷了micropython 这里先说一下webrepl: 通过wifi可以和esp8266交互,以及便携的传输文件 首次使用 ...

  8. Bugku-CTF之flag在index里

      Day15 flag在index里 http://123.206.87.240:8005/post/      

  9. 【常见错误】Quartz常见错误

    1.集群之后把其中一个Quartz服务停了,其他的也不接手工作 问题描述 集群之后,A节点执行了大多数任务,B节点大部分时间处于空闲,停掉A节点,B节点也不会接手工作. 解决方式 修改Quartz的配 ...

  10. C# 线程 正确使用Thread.Join()停止方式

    /// <summary>        /// 停下线程        /// </summary>        private void MyStopTask()     ...