JavaScript入门篇笔记-原创手记-慕课网

认识JavaScript

JavaScript：

所有主流浏览器都支持JavaScript
目前，全世界大部分网页都使用JavaScript
它可以让网页呈现各种动态效果
做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具
易学性，从基础语法到使用DOM进行简单操作

如何写入JS代码：

// 写在script标签中
<script type="text/javascript">
document.write("引用JS文件!");
</script>

// 写在外部中 -> 文件名.js 
<script src="script.js"></script>

常见语法：

<script type="text/javascript">
  // 单行注释
  /*
  *  多行注释
  */
  document.write("I");
  document.write("love");
  document.write("JavaScript");
  var a = 123;  //  变量的声明和赋值
  if(a === 123){
    console.log("a等于123");
  } else {
    console.log("a不等于123")
  }
  function sum(a, b){  //  函数的声明
    return a + b;
  }
</script>

一些api（可以理解为自带的方法）：

<script type="text/javascript">
  document.write("I love JavaScript！");  // 直接打印
  
  var mynum = 30;
  alert(mynum);  //  弹出对话框
  
  var mymessage=confirm("你喜欢JavaScript吗?");  //  弹出自定义对话框
  if(mymessage==true)
  {   document.write("很好,加油!");   }
  else
  {  document.write("JS功能强大，要学习噢!");   }

  var myname=prompt("请输入你的姓名:");  //  弹出需输入的对话框
  if(myname!=null)
  {   alert("你好"+myname); }
  else
  {  alert("你好 my friend.");  }

window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')  //  打开新窗口

var mywin=window.open('http://www.imooc.com');  //  记下新窗口
mywin.close();  //  关闭新窗口
</script>

DOM（文档对象模型），三种常见的DOM节点：

元素节点：<html>、<body>、<p>等都是元素节点，即标签。
文本节点：向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本
属性节点：元素属性，如<a>标签的链接属性href="http://www.imooc.com"

document.getElementById(“id”)  //  获取ID为id的元素
// 除了getElementById通过ID获取元素，还有，
// getElementsByClassName(通过类名获得元素)
// getElementsByTagName(通过标签名获得元素)
// querySelector(通过选择器获得元素)
// querySelectorAll(通过选择器获得元素)

Object.innerHTML  // 获取Object的内容，Object是通过上述方法获得的元素

var mychar = document.getElementById("pcon");  //  改变元素样式
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";

Object.style.display = true | false(隐藏)  // 设置元素显示和隐藏

object.className = classname  //  获取设置元素的类名

更多API参考，可以查看MDN Document 接口