学习之前，大概先自己问一下几个问题，也是不断自我提醒啊！
- JavaScript 是什么？
- JavaScript 有什么用？
- JavaScript 的学习是为了什么？
概念： JavaScript 是脚本语言，是一种轻量级的编程语言，是一门动态类型，面向对象的直译语言。
作用： 用来向HTML页面添加交互行为。
为什么学习： 理由太多了，移动端趋势？自己想多学习？而我最大理由还是最近公司需求不怎么多，需要找点事做，然后开始记录笔记...
学习的方式和工具：
- 直接在 W3Schhool JS 教程上 ，一步一步跟着走
- 直接看 慕课网 ，上面视频超多，补充一些遗漏的点。
- 工具是强大的 Sublime Text, 插件超多，超好用。
记录的目的： 是为了督促自己学习，以及备忘下自己怕忘记的知识点。
javaScript
一、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 教程上 、 慕课网。
网友评论