JavaScript(JS)笔录

JavaScript(JS)

简介:

• NetScape(网景)公司提供,专门嵌入在浏览器中执行的脚本语言

• JS运行在浏览器中,负责实现网页中的动画效果

• 实现表单校验等功能

特点:

• JS--直译式的语言(边解释边执行,没有编译过程)

  —— java ——>编写时XX.java ——>编译成XX.class ——>运行class文件

  —— JS ——>编写时html ,js文件,直接运行 ,没有编译过程

• JS--基于对现象的语言(没有类的概念,没有编译过程)

  —— JS中有对象(内置对象、自定义对象)

• JS--弱类型的语言(Java-强类型)

• java中: 变量一但声明,就属于固定的数据类型,数据类型不能改变

   String s = “abc”;
   int i = 2;

• JS 中: 变量不区分类型,可以指向任意数据类型(所有的数据类型都用 var 表示)

   var v = 100;     
   v = “abc”;    
   v = true;   
   v = [];  
   v = function(){} 

优势:

• JS具有良好的交互性

• JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)

• JS具有跨平台性(JS 浏览器)

  —— JS语言是跨平台的,因为有浏览器,但是浏览器不跨平台

  —— java语言是跨平台的,因为有虚拟机,但是虚拟机不跨平台

JS的书写方式(HTML)

JS工程、文件

创建Web静态工程(Static Web Project)

在script标签内部书写Js代码

• head或者body标签内部添加script标签

• 在script标签内部直接书写JS代码

<script type="text/javascript"> alert("在html中引入JS代码方式一"); </script>

通过script*标签引入外部的JS文件

• head或者body标签内部添加script标签

• 通过script标签引入外部的JS文件 (src引入)

<script src="demo.js"></script>

• 在引入js文件的Script标签内部不要书写JS代码

<script src="demo.js"> alert(111); /*代码不会执行*/ </script>

• 引入JS文件的script标签不能自闭,会导致文件引入失败

<script src="demo.js"/> /*这里不能加/自闭*/

</script>

• JS文件中 声明一个变量 用document.write(); 输出到浏览器上

  var v = “方式二”;

  document.write(v);

在元素上直接书写JS代码

• onclick属性用于给当前元素绑定点击事件(点击元素就会触发事件,执行函数)

<input type="button" value="你好~" onclick="alert('你好朋友!!!')"/>

• console.log(); 输出在浏览器中的控制面板 console 页面上 ( F12 )

<input type="button" value="不好~" onclick="console.log(new Date())"/>

JavaScript(JS)语法

基本数据类型

数值类型(number)

• 在JS中,所有的数值在底层都是浮点型, 需要时,处理和显示的过程中会自动转换成整形

—— alert(3.2+2.8); 结果是6,而不是6.0,自动由底层浮点型转换成整形

—— 特殊值: Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)

字符串类型(string)

• 在JS中,字符串类型属于基本数据类型,字符串常量可以使用单引号或者双引号引起来

• string 首字母小写

—— var s =“Hello”;

—— var s =’Hello’;

• JS中字符串类型有对应的包装对象(String),在需要时会自动和包装类进行转换

 var s = "Hello Js";    //基本数据类型
 console.log( typeof s);   //这里用typeof输出看类型    s输出string
 ​
 var s1 = new String("hello Js");    //复杂数据类型   创建对象  (对象.调用)
 console.log( typeof s1)  //这里用typeof输出看类型   s1输出object
 ​
 /* s 和 s1 都可以当做对象 来调用函数 */
 console.log( s.valueOf());   //  在需要的时候,s是基本数据类型,会自动转换成对象 进行调用
 console.log( s1.valueOf());

布尔类型(boolean)

• 布尔类型的值有两个

  ——true

  ——false

undefined类型

• 值只有一个(undefined)表示变量未定义

  ——变量未定义(不是指变量没有声明)

• 指明了变量,但没有为变量赋值,该变量的值就是undefined

 var x;
 alert( x ); // undefined

复杂数据类型

• 主要指对象(JS的内置对象、自定义的对象、函数、数组)

• 复杂的数据类型Object

变量声明(var)

• JS中通过var关键字声明变量

• 声明的变量不区分类型,可以指向任意数据

 var x = 100;
 x = "abc"  
 x = "abc";
 x = [1,2,3,];
 x = function(){}
 x = new Object();
 x = {};

JS运算符

• JS和Java中的运算符大致相同

 算术运算符: +，-，*，/，%，++，--
 赋值运算符: =，+=，-=，*=，/=，%=
 比较运算符: ==，!=，>，>=，<，<=
 位运算符: & ， |
 逻辑运算符: && ，||   ( false && 表达式, true || 表达式 )
 前置逻辑运算符: ! (not)
 三元运算符: 表达式 ? 表达式 : 表达式

JS语句

• JS中的语句和Java中的语句也大致相同

if分支结构

• if分支结构用于基于不同的条件来执行不同的动作

• prompt( 参数1, 参数2 )函数:在页面上弹出一个消息输入框

  • 参数1: 接收的参数1是在弹框中显示的提示内容;

  • 参数2: 输入框中的默认值,可修改;

  • 用户输入的内容,会作为函数的返回值直接返回;

 var score = prompt("");
 if (条件 1) {
   条件1成立(当条件1为true时执行的代码)
 } else if (条件 2) {
   条件2成立(当条件2为true时执行的代码)
 } else {
   以上条件都不成立(当条件 1 和 条件 2 都不为 true 时执行的代码)
 }

switch语句

• 选择要执行的多个代码块之一

  switch (n) {
   case 1:
         执行代码块 1
         break;
   case 2:
         执行代码块 2
         break;    
   ...
   default:
         与 case 1 和 case 2  不同时执行的代码
  }

设置表达式n(通常是一个变量)

for循环语句

• 循环代码块一定的次数

for (语句1 ; 语句 2 ; 语句3) {
		被执行的代码块
}

while循环

在指定条件为真时循环执行代码块

JS中while循环也分为while和do while循环

- while (条件) {
- 		需要执行的代码
- }

JS数组

JS数组的声明方式一:

• 声明一个空数组,长度为零

var arr1 = [] ;

• 声明一个数组,并为数组设置初始值

var arrr2 = [“Hello”, 111, false, new Object() ] ;

JS数组的声明方式二:

Array 对象用于在单个的变量中存储多个值。

• 声明一个空数组,长度为零

var arr3 = new Array () ;

• 声明一个数组,并为数组设置初始值

var arrr4 = new Array ( “Hello”, 111, false, new Object() ) ;

数组中的细节问题:

• JS中的数组可以存储任意类型的数据

• JS中的数组长度是可以被任意改变的

var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100

JS函数

• 函数就是一个具有功能的代码块,可反复调用

• 函数:包裹在花括号中的代码块,前面使用关键词 function

JS中声明函数的方式:

function 函数名称([参数列表]) {
  	函数体
}
---------------------------------------------------------------------
var 变量名/函数名 = function ([参数列表]){
		函数体
}

• 调用函数:函数名称( [参数列表] );