JavaScript 学习笔记（一）

学习之前，大概先自己问一下几个问题，也是不断自我提醒啊！

• JavaScript 是什么？
• JavaScript 有什么用？
• JavaScript 的学习是为了什么？

概念： JavaScript 是脚本语言，是一种轻量级的编程语言，是一门动态类型，面向对象的直译语言。

---

作用： 用来向HTML页面添加交互行为。

---

为什么学习： 理由太多了，移动端趋势？自己想多学习？而我最大理由还是最近公司需求不怎么多，需要找点事做，然后开始记录笔记...

---

学习的方式和工具：

• 直接在 W3Schhool JS 教程上 ，一步一步跟着走
• 直接看 慕课网 ，上面视频超多，补充一些遗漏的点。
• 工具是强大的 Sublime Text, 插件超多，超好用。

记录的目的： 是为了督促自己学习，以及备忘下自己怕忘记的知识点。

javaScript

一、JavaScript 涉入

1、JavaScript 使用

• HTML 中的脚本必须位于 标签之间。
• 脚本可被放置在 HTML 页面的 和 部分中。
• 当然也可以将 JavaScript 放到了页面代码的底部，这样就可以确保在

  元素创建之后再执行脚本。

2、JavaScript 输出

• document.getElementById(id)

    
        
    
    

        
 我在学习 JS 
        
Only Girl

        

    

• document.write()

        
 我在学习 JS 
        
Only You

        点击这里

        

    

但是像上述这样，在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

3、JavaScript 语句

• 对大小写敏感，注意区分使用
• 字符串可以是引号中的任意文本，但可以使用单引号或双引号

var test = "test again";
var test = 'test again';

• 注意 字符串的拼接，可以用 “+”，和 Swift 类似，但是如果把数字与字符串相加，结果将成为字符串。

4、JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等，而且对象都是拥有属性和方法的数据。

二、JavaScript HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。然后通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• 改变页面中的所有 HTML 元素
• 改变页面中的所有 HTML 属性
• 改变页面中的所有 CSS 样式
• 可以对页面中的所有事件做出反应

1、查找 HTML 元素

• 通过 id 查找

document.getElementById("demo");

• 通过标签名 查找

    

        
One PP
        
Two PP
    

    

2、 改变 HTML 内容

• 改变 HTML 内容

    
Hello World!
    

• 改变 HTML 属性
  此处是直接改变图片的src

3、 改变 CSS 样式

等待改变
点我改成红色

JavaScript 改变 HTML 元素的样式，其中style的属性有很多，详细的可以看看HTML DOM Style 对象参考手册。

需要额外注意的：

• 控制类名（className 属性）： 获取元素的class 属性，可以为网页内的某个元素指定一个 css 样式来更改外观
• 显示和隐藏（display属性）： 通过 display 属性设置显示（block）和隐藏（none）。

4、改变事件

这个想想也是最常用的，HTML 事件还是很多的:

• 当用户点击时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

详细可以看HTML DOM Event 对象参考手册, 记住两个小例子：

展示时间

    
         
        
    
    
          
        
必须是字母，当离开输入字段时，会触发将输入文本转换为大写的函数，// onchange 时调动函数
    

5、改变元素(节点)

• 创建新的 HTML 元素
• 删除已有的 HTML 元素

    

        
One
        
Two
        

    

---

学习笔记来源： W3Schhool JS 教程上 、 慕课网。