js基础和简单应用
本篇文章是我看过某位大神的观点之后,对js的基础略作总结并加以精简,对从未接触过js的同学有奇效
JavaScript 是属于网络的脚本语言!
这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JS与DOM的关系
浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
2. 文本节点:向用户展示的内容,如<li>里的内容JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。
简单应用实例:
JavaScript:写入 HTML 输出
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
JavaScript:对事件作出反应
<button type="button" onclick="alert('Welcome!')">点击这里</button>
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
onclick 事件是我们学到的众多事件之一。
JavaScript:改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
您会经常看到 document.getElementByID("id")。这个方法是 HTML DOM 中定义的。
JavaScript:改变 HTML 样式
改变 HTML 元素的样式,属于改变 HTML 属性的变种。
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
JavaScript:验证输入
JavaScript 常用于验证用户的输入。
if isNaN(x) {alert("Not Numeric")};
BOM对象(把浏览器的地址栏,历史记录,DOM等装在一个对象)
浏览器内部有JS解释器/引擎;在html里的JS代码会被引擎所执行,执行的结果是对DOM对象的操作(即是对节点树内的标签进行操作)
JS添加特效 : 无非就是用JS操作DOM对象
JS的引入方式
JS代码可在html中任意位置编写,但浏览器解析代码是从上到下的,需注意此时html是否已经解析该标签,能让JS能否获取该DOM对象,所以有时会把代码放到html的结束前,即是</html>前
直接在html中编写 :
<script type="text/javascript">
代码
</script>
通过外部引用进来 : <script type=text/javascript src=””></script>
为防止网页加载缓慢,也可以把非关键的JavaScript放到网页底部
变量的声明
var 变量名;变量名区分大小写;不用var声明会污染全局变量;变量名以字母、下划线、美元符号开头,后面部分可数字
函数 即 完成特定功能的代码段;
常用方法
输出语句到html中,使用document.write(“”)
Confire() :消息确认对话框;点击确认返回true
运算符问题
拼接运算符:+ , 如果是数字则相加,是字符则连接 ; 如2+3+‘love’+4+5 //输出5love45
逻辑运算符或 :返回为true的值 ; 如 :
var a = 1;
var b = false;
var d = (a || b); //d为1
逻辑运算符与 : 返回最后面的变量值
var a = 22;
var b=33;
alert(a && b); //输出33