JavaScript基础

@月月鸟

什么是Javascript

• 是一门脚本语言， 是一门解释型语言， 是一门弱类型语言， 是一门基于对象的语言， 是一门动态的语言
• 动态页面：
  1.页面由Html+css+js组成
  2.向服务器发送请求，服务器上没有页面，是通过动态生成返回给客户端

Javascript的组成
1.ECMAscript标准—基础语法和基本对象
2.DOM Document Object Model 文档对象模型 ：描述了处理网页内容的方法和接口
3.BOM Browser Object Model 浏览器对象模型
Javascript能做什么
Js最初的目的：解决用户和服务器之间的交互问题
现在：js可以做特效，游戏，移动，服务器

基本语法

<script type="text/javascript">
    /* 当初JS标准打的火热  如果有浏览器不支持JS，那么后果就是代码会被认为普通文字展示在页面   */
    /* 所以为了让不支持的浏览器别瞎显示 所以放上了HTML注释 */
    /* 现在没这问题了 不支持的基本凉了 */
    <!--
    document.write("<h1>Hello World！</h1>");
	-->
</script>

引入方式

• 行内引入

借助于标签内置的事件属性，来实现。

常用的事件属性有：onclick 点击事件 onmouseover 鼠标悬浮事件 onblur 失去焦点事件

<input type="button" value="点我清除缓存" onclick="alert('清除成功！');" />

• 内部引入

在</body>上编写<script>标签(规范)，然后内部编写JS代码，有些时候行内和内部会结合使用。

<script type="text/javascript">
    document.write("<h1>Hello World！</h1>");
</script>

• 外部引入

在</body>上编写<script src=""> 标签，来引入外部的JS文件。 (*.js文件)

    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>

变量

Java中变量的组成：

• 变量的数据类型
• 变量名
• 变量值

// 先声明再赋值
int num;
num = 10;
// 声明并赋值
int num = 10;

JavaScript中变量的组成：

• 变量的数据类型
  • var (variable) 动态类型识别
• 变量名
  • 它由数字、字母、下划线、$等组成，但是数字不能开头
  • 见名知义
  • 采用小驼峰命名法
  • 也可以采用_连接命名法
• 变量值(单一类型的数据)

// 先声明再赋值
var num;
num = 10;
// 声明并赋值
var num = 10;

数据类型

Java中的数据类型：

• 基本数据类型
  • 数值类：byte 、 short 、int 、long、float、double
  • 非数值类：char、boolean
• 引用数据类型
  • 数组、类(String)、Enum枚举、接口…

JavaScript中的数据类型：

• undefined：未定义 如果一个变量没有赋值过它的类型就是undefined
• null：表示一个空值 它可以和undefined做相等判断
• number：表示数值，整数或浮点数
• boolean：表示真和假 true、false
• string：表示字符串 (单引号或双引号引起来的内容)
• object：表示对象类型 (因为历史原因，以前的bug，所以当你测试null类型的数据时显示的是object)

如果检验是什么类型的？

typeof

常用运算符

算术运算符

+  -  *  /  %  ++  --

关系/比较运算符

>  <  >= <= == !=  ===  !==

全等和==的区别？

• ==只比较内容
• ===不仅比较内容 还比较类型

var str1 = "12";
var num1 = 12;

alert(str1 === num1); // false
alert(str1 == num1); // true

赋值运算符

=  复合赋值：+=  -=  *=...

逻辑运算符

&&  ||   !

控制语句

选择结构：

• 基础if选择结构

  if(条件表达式){
      // 代码
  }
  

• if-else选择结构

  if(条件表达式){
      // 代码1
  }else{
      // 代码2
  }
  

• 多重if选择结构

  if(条件表达式1){
     // 代码1
  }else if(条件表达式2){
      // 代码2
  }else{
      // 代码3
  }
  

• 嵌套if选择结构

  if(条件表达式1){
      if(条件表达式2){
         
      }
  }
  

• switch选择结构

  switch(表达式){
      case 常量1:
      	break;
     	case 常量2:
     		break;
     	....
     	default:
     		break;
  }
  

循环结构：

• while循环

  while(循环条件){
      循环体
  }
  

• for循环

  for(初始化循环变量;循环条件;循环出口){
      循环体/循环操作
  }
  

循环控制关键字：

• break 结束循环
• continue 结束本次循环，进入下次循环

数组

// 1.
var arr = new Array(3);
arr[0] = "陈旭";
arr[1] = "梁涛";
arr[2] = "王莉莉";
// 2.
var arr = new Array("邓阔","邓文","邓武");
// 3.
// JSON(非常重要的文本格式 未来学)
var arr = ["豆涵","风力强","翻过墙"];

JavaScript的函数使用

函数：方法：功能

一系列代码组成的一个完整功能。

3.1 基本的系统函数使用

• 输出：alert(); 会弹出一个带有确定按钮的提示框
• 输入：prompt(); 会弹出一个带有输入框的提示框。

// 如果输入了 则返回输入的内容 否则为null
// p1：提示的内容  p2:输入框中默认的文本内容
var pwd = prompt("请输入您的密码：");
alert("您输入的是："+pwd);

• parseInt() 转换为整数
• parseFloat() 转换为小数

var num1 = prompt("请输入第一个整数：") - 0; // - 0也可以实现下方效果
var num2 = prompt("请输入第二个整数：") - 0;

// 转换为整数
// var num1 = parseInt(prompt("请输入第一个整数："));
// var num2 = parseInt(prompt("请输入第二个整数："));

/*var num1 = parseFloat(prompt("请输入第一个整数："));
			 var num2 = parseFloat(prompt("请输入第二个整数："));*/


// alert("两数的差为："+(num1 - num2));
// prompt()返回的类型是字符串  所以加号自动拼接
alert("两数的和为："+(num1 + num2));
			

自定义函数(方法)

方法的分类(按有返和无返等分类)：

• 无参无返

// function ： 函数/功能
function 方法名(){
    // 方法代码
}

// 无参无返
function method1(){
    alert("我是无参无返！");
}

// 方法需要调用
method1();

• 无参有返

function 方法名(){
    // 方法代码
    // 返回值
    return 返回值;
}

function method2(){
    alert("我是无参有返！");
    return "hehe";
}

var result = method2();
alert(result);

• 有参无返

function 方法名(形参列表){
    // 方法代码
}

function method3(name,age){
    alert("有参无返："+name+"："+age);
}
method3("xxx",12);

• 有参有返

function 方法名(形参列表){
    // 方法代码
    return 返回值;
}

function method4(name){
    alert("有参有返:"+name);
	return "xx";
}

函数的使用

/*function dianni(){
	alert(1);
}*/

var btn = document.getElementById("btn");
// 绑定事件
// 匿名函数 没有方法名  只能使用一次
/*btn.onclick = function(){
				alert(1);
			}*/

// 绑定事件  如果函数绑定写上小括号() 表示调用函数并返回结果 
// 如果只是写上方法名 这表示绑定函数
btn.onclick = dianni;
function dianni(){
    alert(2);
}

函数中的变量作用域

// 成员变量
var i = 11;

function method1(){
    // 局部变量
    var i = 10;
    alert(i);
}

function method2(){
    alert(i);
}

以上内容可能会有出入，仅供参考，部分出自转载，欢迎大家踊跃留言指正