JavaScript 01 入门基础

JavaScript需知

一、web网页标准

1.HTML是一种标记语言，用来结构化我们的网页内容并赋予内容，比如定义标题，段落，数据表，并且在页面中嵌入视频，图片。

2.CSS是一种样式规则语言，用来定义HTML标签中的样式，比如背景颜色，字体大小。

3.javascript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等等。

二、JavaScript概述及历史

1.JavaScript是弱类型语言也是脚本语言，没有类型声明，它的变量不必具有一个明确的类型，可能直接被浏览器识别。

2.JavaScript 最初被称为 LiveScript，由 Netscape（Netscape Communications Corporation，网景通信公司）公司的布兰登·艾奇（Brendan Eich，也是JavaScript 创始人 ）在 1995 年开发（这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。）。在 Netscape 与 Sun（一家互联网公司，全称为“Sun Microsystems”，现已被甲骨文公司收购）合作之后将其更名为了 JavaScript。

三、JavaScript的组成和使用

1.共有三大组成部分第一个是ECMAScript(JS的核心语法)，第二个是BOM (Browser Object Model): 浏览器对象模型，有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器(比如:弹出框、浏览器跳转、获取分辨率等 )。第三个是DOM (Document Object Model): 文档对象模型，有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素(比如:增加个 div，减少个 div，给div 换个位置等)。

2.JS嵌入方法(行内式，内嵌式，外部引用 js 文件)

• 行内式(<input type="button" value="Click Me!" οnclick="alert('Hellow World')">)；
• 内嵌式(<script>alert('Hello World')</script>)；
• 外部引用 js 文件(<script src="my.js【这里js文件的路径】"></script>)；

3.js输入输出语句(alter/prompt/confirm来源于window对象)

• alert(msg)  // 浏览器弹出框
• console.log(msg)  // 浏览器控制台打印输出信息
• prompt(info)  // 浏览器弹出输入框，用户可以输入
• confirm()

4.JS事件

• onclick          // 鼠标点击左键
• ondbclick        // 鼠标双击
• oncontextmenu    // 鼠标点击右键
• mousedown        // 鼠标按键被按下
• mouseup            // 松开鼠标按键
• onselect        // 文本被选中
• oncopy            // 元素内容被复制
• onmouseenter    // 鼠标移动到事件监听的元素内（不区分子元素）
• onmouseover      // 鼠标移动到有事件监听的元素或它的子元素内
• onmouseleave    // 鼠标离开元素外（不区分子元素）
• onmouseout      // 鼠标离开元素，或它的子元素外
• onfocus          // 获得鼠标焦点(点击input输入框)
• onblur          // 失去鼠标焦点（进入其他input输入框）
• onmousemove      // 鼠标移动
• onmouseup          // 鼠标弹起
• onmousedown

5.查找HTML DOM元素

• getElementById()
  
• <div id="new">This is new Element</div>
  <script>
     // 页面文档从上往下加载，需要将 script 代码写在下边
     var dom = document.getElementById('new');
     // 显示id为new的对象中内容
     console.log(dom);
     // 可以打印我们返回的元素对象，更好的查看里边的属性和方法
     console.dir(dom);  
  </script>
  

6.变量的使用

1.声明变量      var a;      a=10;

2.初始化变量   var a = 10; var name = ' momo '；

3.变量的命名规范

• 由字母、数字、下划线、$符号组成，不能以数字开头
• 不能是关键字和保留字，例如：for,while,this,name
• 区分大小写
• 变量名必须有意义
• 小驼峰命名法，如：myName
• 建议不要用$作为变量名

4.查看变量  

• alert(变量名)  // 弹出框显示    
• console.log(变量名)  // 控制台显示
• document.write(变量名)  // HTML 页面上显示

7.数据类型

1.数字类型 [ number ]     NaN  是非数字

2.字符串型[string]  var str= '这是个字符串';

3.布尔型 [ Boolean ] 只有两值   true 或 false ;

4.undefined 未定义   null 空值  

5.数组和对象

8.循环结构

• for循环    例:0加到100   var sum =0;for(var i = 1; i<=100; i++){sum+=i;}
• while循环  例:用while0加到100   var num=1; while(num<=100){console.log(num);num++;}
• do while 循环      do {// 循环体   } while(条件表达式)
• break 关键字用于直接跳出循环
• continue 关键字用于立即跳出本次循环，进入下一次循环

9.数组

1.创建数组

• var arr = new Array();
• var arr = [];
• var arr = [1, 2, 3, 'Pink', True];

2.访问数组元素

• var arr1 = ['张三', '李四', '王五', '淑芬'];
• // 索引号：   0       1      2      3
• console.log(arr1);  // 输出整个数组所有元素
• console.log(arr1[0]);  // 使用 数组名[索引号] 获取数组数组内指定元素的值

3.遍历数组

• arr= ['a', 'b', 'c', 'd'];
• for (var i = 0; i <= 3; i++) {
•    console.log(arr[i]);
• }

4.数组长度属性 length

• arr= ['a', 'b', 'c', 'd'];
• console.log(arr.length);  // 输出4
• 利用 length 添加新的数组元素
• arr = ["a", "b", "c", "d"];
  arr[arr.length] = 'e';
  console.log(arr[arr.length - 1]);  //输出结果e

10.函数

1.函数定义

• function 函数名( ) {
•     //JavaScript语句;
• }

2.函数的调用

• 标签元素.onclick = function(){
•    //js语句，函数要执行的内容
• }

3.带参函数

• function 函数名(参数1，参数2) {
•     //JavaScript语句;
• }
• 事件名＝"函数名( 参数1，参数2 )"

4.匿名函数(没有函数名)

• var fn = function(参数1，参数2) {
•     //JavaScript语句;
• }
• 事件名＝"fn( 参数1，参数2 )" ;

5.自执行函数(无需调用自动执行)

• ( function() {
•     //JavaScript语句;
• }() )

11.返回值

函数通过return将值返回调用它的地方

• function fn(){
•        return '你调用我了，我是fn';
•    }
•    var str = fn();//调用fn()得到值：你调用我了，我是fn，同时赋值给str
•    console.log(str);//你调用我了，我是fn