JavaScript快速入门 有这一篇就够!

简介: JavaScript快速入门 有这一篇就够!

JavaScript概述


JavaScript的历史

JavaScript 原名其实叫 LiveScript,是由美国网景公司(Netscape)开发的一种用于对网页操作的脚本语言;LiveScript也是面向对象的的语言,后来Sun ( java )公司觉得可以利用LiveScript为java的普及做铺垫,于是和网景公司合作,将名字改为JavaScript;


脚本语言是指有某种解释器直接可以运行的,不需要编译,如sql,html,css,javaScript...

▐ Java和JavaScript

JavaScript和Java是两种不同的语言,虽然都带有java,但二者没有任何联系.

•  javaScript是嵌入在网页中,对网页进行各种操作的,是一种脚本语言,无需编译.

•  java是一种后端高级语言,是需要编译的.

JavaScript与CSS、HTML的关系

•  html是网页的基本内容  ( 标签,文本 )

•  css是网页外观 ( 样式 )

•  JavaScript是网页的行为,为网页添加各种的动态操作效果.

HTMLCSSJavaScript 也被称为前端三剑客.

▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂    

基本语法


▐ 脚本写在哪里 ?

javaScript脚本写在一组<script>标签 中,此标签可以放在head中或body中,但一般习惯放在head中,此外,还可以将脚本写在外部的 js文件中,在 html页面中导入外部的 js文件.

变量

•  声明变量用 var关键字

var name;

•  声明变量的同时对其赋值

var name = "LiMing" ;

这里使用var声明变量时无需指定类型,这里var的类型由值决定。

▐ 数据类型

•  数值型(number):包括整型数和浮点型数.

•  布尔型(boolean):true / false ( 判断时也可用0表示假,非0表示真,和C语言一样 )

 字符串型:使用单引号或双引号说明.

•  undefined类型:值不明确的,声明了一个变量却没有为变量初始化赋值.

•  Object类型:对象类型.

   js也是面向对象的语言,前期我们主要使用内置的对象,我们不自己定义对象

▐ 运算符

   特别注意在JavaScript中算术运算符 " + " 和 比较运算符  " === "


•  " = " 赋值运算    " == " 比较值是否相等     " === " 全等,值和类型都要相等.


•  " + " 既可以算术相加,也可以连接        


var a = 10;
var b = 5;
var c ="5";
      
//字符串数字可以参与算术运算
alert(a+b);//加法运算 15
alert(a+c);//连接 105
alert(a+c*1);//15 (如果想让字符串也进行算术运算,可以*1)
      
 
//  ==比较值是否相等  ===全等,值和类型都要相等
alert(b==c); //true
alert(b===c);//false (类型不同)

这里隐式的将 "5"转为数值类型 5

▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂  

函数


▐ 函数的声明和调用

1.    <script>
      //声明函数
      function test(){
        alert("你好");
      }
      //调用函数
      test();
    </script>

我们的函数也可以有参数列表和返回值

 function test(a,b){
  return a+b;
 }
alert(test(1,"8"));//18 这里+指连接

全局函数

•  alert   弹出框

•  confirm   确认对话框

•  prompt   输入对话框

•  typeof   返回参数数据类型

•  eval   将某个字符串当做js脚本运行

•  parseInt   将参数转为整数

•  parseFloat   将参数转为浮点数

对于parseIntparseFloat 如果参数是字符串数字,则转换为整数或浮点数,如果其中有非数字,则返回 NaN(Not a number)

    <script>
      alert("a");//弹出框显示:a
      
      //确认对话框 true/false
      var res = confirm("您确定要退出吗?")
      alert(res);//选择确定弹出true 取消则false
      
      //输入对话框
      var name=prompt("请输入姓名:");
      alert(name);//弹出输入内容,或null
      
      //typeof 返回参数数据类型
      var a = "1";
      alert(typeof(a));//弹出String
      
      //将参数转为整数,如参数是浮点数保留整数部分
      var b = "5";
      alert(5+parseInt(b));//10
 
      //将参数转为浮点数
      var a = "5.5";
      alert(5+parseFloat(a));//10.5
      
      //eval:可以将某个字符串当做js脚本运行
      var a =5;
      var s="alert(a)";
      eval(s);   //弹出框显示:5
    </script>

内置对象


▐ Array数组

•  如何定义数组 ?  

var a =new Array();       //方式1
var b =new Array(1,2,3,4);//方式2
var c =[1,2,3,4,5];       //方式3

•  JavaScript语言定义数组时无需指定长度。

•  我们为数组添加值时不一定要按顺序添加。

var a =new Array();
  a[0]=0;
  a[1]=1;
  a[2]=2;
  a[5]=5;
console.log(a);

 注意:此时数组的长度是取决于最大索引,即数组长度为6

•  数组中的常用属性:

length           获取数组的长度

join               将数组转为字符串

reserve        逆序操作

var d =[1,2,3,4,5,6,7];
console.log(d.length); // 7
console.log(d.join("")); // 1234567
console.log(d.reverse()); // [7, 6, 5, 4, 3, 2, 1]

sort             使数组中的元素按照一定的顺序排列(对数字进行排序时需要调用排序函数)

var e =[2,5,1,6,3,4];
console.log(e.sort(numbersort));//在sort内部调用自定义的比较函数,每次传入两个值
//自定义对数字排序的比较函数
function numbersort(a,b){
    return a-b;
}

▐ String字符串

• 字符串中的方法相对简单,我们直接上代码:

      var s="abcdefg";
      console.log(s.length);
      console.log(s.charAt(2));
      console.log(s.indexOf("d"));//首次出现位置
      console.log(s.substring(0,4));//截取,不包含结束位置
      console.log(s.substr(1,4));//指定位置,截取几个字符

控制台输出结果

方法详解

 Date获取日期

1. var date =new Date();
2. console.log(date);

常用方法:

Math数学计算

常用方法:

▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂﹍▂  

事件

▐ 常用事件  

•  onclick       鼠标单击事件

•  ondblclick  鼠标双击事件

•  onfocus      聚焦事件 --- 当输入框获得鼠标焦点是触发事件

•  onblur         失焦事件 --- 当输入框失去鼠标焦点是触发事件

•  onmousemove    鼠标移入事件

•  omouseout        鼠标移出事件

•  onload                 当网页内容加载完毕后触发事件

•  onchange           当输入框/下拉框失去鼠标焦点且内容发生改变时触发事件

相关文章
|
2月前
|
存储 监控 JavaScript
Node.js 性能平台5分钟快速入门
首先,确保拥有阿里云账号并开通服务,以及一台可上网的服务器。然后,创建应用并记下App ID和App Secret。通过tnvm安装Node.js性能平台组件,包括alinode和agenthub,检查安装成功的方法是`which node`和`which agenthub`命令显示路径包含`.tnvm`。接着,启动agenthub,并在服务器上运行一个示例应用(demo.js),该应用模拟计算密集型任务。最后,通过阿里云控制台观察监控数据和执行诊断操作。注意,性能平台每分钟上传一次日志,可能需等待几分钟才能看到数据。详细部署指南可参考官方文档。
35 6
|
20天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
15 2
|
2天前
|
存储 JavaScript 前端开发
如何快速入门使用Vue.js
如何快速入门使用Vue.js
10 0
|
28天前
|
JavaScript 前端开发 Java
JavaScript快速入门
JavaScript快速入门
11 1
|
20天前
|
Web App开发 存储 JavaScript
JavaScript快速入门
JavaScript快速入门
10 0
|
2月前
|
JavaScript 前端开发 Java
JavaScript 快速入门手册
JavaScript 快速入门手册
|
2月前
|
JavaScript 前端开发 Java
JavaScript 快速入门手册
JavaScript 快速入门手册
22 0
|
2月前
|
JavaScript 前端开发
node.js 快速入门
node.js 快速入门
41 0
|
11月前
|
JavaScript
【JS】快速入门DOM
【JS】快速入门DOM
44 0
|
2月前
|
Web App开发 JavaScript 前端开发
【Node.js】大前端技能最通俗易懂的讲解 快速入门必看
【Node.js】大前端技能最通俗易懂的讲解 快速入门必看
43 0