学习之前,大概先自己问一下几个问题,也是不断自我提醒啊!
- JavaScript 是什么?
- JavaScript 有什么用?
- JavaScript 的学习是为了什么?
概念: JavaScript 是脚本语言,是一种轻量级的编程语言,是一门动态类型,面向对象的直译语言。
作用: 用来向HTML页面添加交互行为。
为什么学习: 理由太多了,移动端趋势?自己想多学习?而我最大理由还是最近公司需求不怎么多,需要找点事做,然后开始记录笔记...
学习的方式和工具:
- 直接在 W3Schhool JS 教程上 ,一步一步跟着走
- 直接看 慕课网 ,上面视频超多,补充一些遗漏的点。
- 工具是强大的 Sublime Text, 插件超多,超好用。
记录的目的: 是为了督促自己学习,以及备忘下自己怕忘记的知识点。
一、JavaScript 涉入
1、JavaScript 使用
- HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
- 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
- 当然也可以将 JavaScript 放到了页面代码的底部,这样就可以确保在
<p>
元素创建之后再执行脚本。
2、JavaScript 输出
- document.getElementById(id)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1> 我在学习 JS </h1>
<p id="demo">Only Girl</p>
<script>
document.getElementById("demo").innerHTML="Boy and Girl";
</script>
</body>
</html>
- document.write()
<script>
document.write("<p> 通过JS 写入段落 </p>");
</script>
<body>
<h1> 我在学习 JS </h1>
<p id="demo">Only You</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("<p> 通过JS 写入段落 </p>");
}
</script>
</body>
但是像上述这样,在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
3、JavaScript 语句
- 对大小写敏感,注意区分使用
- 字符串可以是引号中的任意文本,但可以使用单引号或双引号
var test = "test again";
var test = 'test again';
- 注意 字符串的拼接,可以用 “+”,和 Swift 类似,但是如果把数字与字符串相加,结果将成为字符串。
<script type="text/javascript">
x=5+5;
document.write(x); // 10
document.write("<br />"); // 换行
x="5"+"5";
document.write(x); // 55
document.write("<br />"); // 换行
x=5+"5";
document.write(x); // 55
document.write("<br />"); // 换行
x="5"+5;
document.write(x); // 55
document.write("<br />"); // 换行
</script>
4、JavaScript 对象
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等,而且对象都是拥有属性和方法的数据。
二、JavaScript HTML DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。然后通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- 改变页面中的所有 HTML 元素
- 改变页面中的所有 HTML 属性
- 改变页面中的所有 CSS 样式
- 可以对页面中的所有事件做出反应
1、查找 HTML 元素
- 通过 id 查找
document.getElementById("demo");
- 通过标签名 查找
<div id="main">
<p>One PP</p>
<p>Two PP</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write("Show" + y[1].innerHTML); // ShowTwo PP
</script>
2、 改变 HTML 内容
- 改变 HTML 内容
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
- 改变 HTML 属性
此处是直接改变图片的src
<img id="image" src="/Users/huanqiuyigou/Desktop/one.png"/>
<script>
document.getElementById("image").src=" /Users/huanqiuyigou/Desktop/two.png ";
</script>
3、 改变 CSS 样式
<h1 id="id1">等待改变</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">点我改成红色</button>
JavaScript 改变 HTML 元素的样式,其中style的属性有很多,详细的可以看看HTML DOM Style 对象参考手册。
需要额外注意的:
- 控制类名(className 属性): 获取元素的class 属性,可以为网页内的某个元素指定一个 css 样式来更改外观
- 显示和隐藏(display属性): 通过 display 属性设置显示(block)和隐藏(none)。
4、改变事件
这个想想也是最常用的,HTML 事件还是很多的:
- 当用户点击时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
详细可以看HTML DOM Event 对象参考手册, 记住两个小例子:
<button onclick="displayDate()">展示时间</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML= Date();
}
</script>
<p id="demo"></p>
<head>
<meta charset="UTF-8">
<script>
function myFunction()
{
var x=document.getElementById("input");
x.value=x.value.toUpperCase(); // 转换为 大写
}
</script>
</head>
<body>
<input type="text" id="input" onchange="myFunction()">
<p>必须是字母,当离开输入字段时,会触发将输入文本转换为大写的函数,// onchange 时调动函数</p>
</body>
5、改变元素(节点)
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
<div id="div1">
<p id="p1">One</p>
<p id="p2">Two</p>
</div>
<script>
// 建立某个节点
var para=document.createElement("p");
var node=document.createTextNode("Three");
para.appendChild(node);
// 增加到某一个具体的位置
var element=document.getElementById("div1");
element.appendChild(para);
</script>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
学习笔记来源: W3Schhool JS 教程上 、 慕课网。