走进JavaScript

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 + 1;};//第二种，这种方法使用了Functiong构造函数，把参数和函数体都作为字符串；
var cniao = new Function('x', 'return x + 1;');//第三种，右边的就是一个匿名函数，创建后又将该函数赋给了变量cniao
var cniao = function(x){return x + 1;};

匿名函数的创建

//这里创建了一个匿名函数（在第一个括号内），第二个括号用于调用该函数，并传入参数。
(function(x,y ){ alert(x + y); })(1,2);

有名函数可以自执行，函数名 + （）；自执行时 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 = 1; varb = 2;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来清空变量；

转载于:https://www.cnblogs.com/sgaogao/p/8111794.html

走进JavaScript相关推荐

走进javascript——不起眼的基础，值和分号
值有时我很想知道javascript解析引擎是如何区分一个变量的值,比如下面这段代码. var x = 'javascript'; //javascript x = "hello" ...
夜光带你走进JavaScript（五十八）擅长的领域
夜光序言: 人生旅途上,横竖都是路,决定今天的不是今天,而是昨天对人生的态度:决定明天的不是明天,而是今天对事业的作为.我们的今天由过去决定,我们的明天由今天决定~~ 正文: JavaScript 计 ...
夜光带你走进JavaScript（四十六）擅长的领域
夜光序言: 从一开始以为这个世界上只有自己,到明白自己的天赋其实只够做一个不错的普通人. 然后人就长大了正文: 事件冒泡或事件捕获? 事件传递有两种方式:冒泡与捕获. 事件传递定义了元素事件触发的顺 ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
雷哥带你走进Javascript
javascript复习笔记 -------------------------------------------- 1.概念 2.面向对象思想 3.作用认识 4.引入方式 5.执行顺序变量 1) ...
万字长文带你走进 JavaScript 的世界
1.1 概述 1.1.1 JavaScript JavaScript 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言.虽然它是作为开发 Web 页面的脚本语言而出名的,但是它也被用 ...
[JavaScript]走进 JAVASCRIPT 黑洞
建议使用let和const代替var 体验typeof var a = 'dust' console.log(typeof a) var b = 99 console.log(typeof b) va ...
走进JavaScript响应式编程(Reactive Programming)
或许"响应式布局"这个名单大家都听过或者都自己实现过,那么"响应式编程"是什么呢?下面我们来具体聊一聊. 我的理解从字面意思上我们可以大致理解为:所有的事件存 ...
同一个按钮绑定多个事件_带你走进JavaScript世界系列——事件处理程序之 IE 事件处理...
IE 事件处理程序 IE 实现了与 DOM 中类似的两个方法:attachEvent() 和 detachEvent() .这两个方法接收相同的两个参数:事件处理程序名称和事件处理程序函数.通过 at ...
第一章走进 JAVASCRIPT 黑洞——变量
1.变量提升代码执行之前需要进行一次解析,如果在变量使用var声明之前就使用它,不会报错,变量的值为undefined,即将变量使用var声明这一步提升到代码最前面执行,这就叫做变量提升. cons ...

走进JavaScript

走进JavaScript相关推荐

最新文章

热门文章