JavaScript

来源：互联网发布：java趣味编程100例编辑：程序博客网时间：2024/06/15 12:36

JavaScript

简介: JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

1.js构成: Dom:文档对象模型(HTML和XML的接口,API)

Bom:浏览器有关的模块
语法,数据类型:核心模块

2.js链接方式:

1) HTML内部:写在head/body标签中都可以,只是解析的时间不同

<script type=”text/javascript”>
alert(“这是一个测试”)
< /script>

注:type属性非必须

2)外部链接:建立JavaScript File文件,内部不用写<script>标签

用<script scr=”name.js”><script>链接到HTML,同样可以链接到head/body标签中

3. js代码规范

1)通常运算符 ( = + - */ ) 前后需要添加空格
var x = y + z;
2)代码缩进:通常使用 4 个空格符号来缩进代码块
3)语句规则:每行代码字符小于 80. 分号用来结束可执行JavaScript语句。由于函数声明不是一个可执行语句，所以不以分号结束.
4)对象定义规则:最后一个属性-值对后面不要添加逗号,以分号作为结束符号.

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

5)命名规则:驼峰法:单词拼接除第一个单词其余单词首字母大写.
eg : backgroundColor
注:Css和HTML中的 - 通常在 JavaScript 中被认为是减法，所以不允许使用
6) js乱码处理---js文件右下角GBK→UTF-8
7) Js语句和js变量都对大小写敏感
8) F12Google测试快捷键

4.js输出数据方式:

1)弹框:

   ①alert() 警告框(只有一个确认按钮字符串用双引号括起来)
   ②confirm() 确认框 (两个按钮确认+取消)
   ③prompt(“提示信息” , 默认值) 输入框/提示框

    <html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

  <script type="text/javascript">

     prompt("请输入年龄",18)

  </script>

</body>

</html>

2)页面内输出

document.write()

3)控制台输出(F12→console查看)

console.log()

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

   <script>

       document.write("hello world")

// 文档流输出

       console.log("zhanghuaqian")

//       控制台console输出

   </script>

</body>

</html>

5.js数据类型

String(“”) // 字符串可以使用单引号或双引号
Number() // 数字   可以带小数点，也可以不带, 极大或极小的数字可以通过科学（指数）计数法来书写
Boolean(true/false)   // 布尔
Array[]   //数组之间用逗号隔开,数组索引值从[0]开始,
Object{}  //对象属性以名称和值对的形式 (name : value) 来定义 ; 属性由逗号分隔 ; 空格和折行无关紧要声明可横跨多行
Function() //函数
Null //空值
Undefined // 未定义表示不含有值
注: Null与 undefined的区别:
        Null==undefined // true
        Null===undefined // false

6.变量 (存储数据的容器)

1) var 初始化变量/声明变量

注:•变量声明之后，该变量是空的（它没有值）

•变量必须以字母开头

•变量也能以 $ 和 _ 符号开头（不推荐这么做）

•变量名称对大小写敏感（y 和 Y 是不同的变量）

•向变量赋值时(用等号), 字符串带引号,数值不用引号

•可以在一条语句中声明很多变量,该语句以 var 开头，并使用逗号分隔变量

•如果重新声明 JavaScript 变量，该变量的值不会丢失

2)变量的作用域

全局变量:整个页面中作用

局部变量:只函数内部起作用

注:如果在定义变量时没有使用var初始化变量则认为是全局变量

3)变量的生命周期

局部变量:执行完成后自动销毁

全局变量:在页面关闭时销毁

注:尽量写成局部变量,否则会污染全局变量

7.js检测数据类型

1)typeof 操作符 : 查看 JavaScript 变量的数据类型

typeof "John" //返回 string

typeof 3.14                   //返回 number
typeof  NaN                   //返回 number
typeof false                  //返回 boolean
typeof  [1,2,3,4]              //返回 object
typeof  {name:'John', age:34}  //返回 object
typeof  new Date()            //返回 object
typeof  function () {}        //返回 function
typeof myCar                 // 返回 undefined
typeof null                  //返回 object

注:• NaN 的数据类型是 number

•   数组(Array)的数据类型是 object
•   日期(Date)的数据类型为 object
•   null 的数据类型是 object
•   未定义变量的数据类型为undefined

2)constructor属性 : 返回所有JavaScript 变量的构造函数

"John".constructor             //返回函数String() { [native code] }
(3.14).constructor             //返回函数Number() { [native code] }
false.constructor              //返回函数 Boolean(){ [native code] }
[1,2,3,4].constructor          //返回函数Array()   { [native code] }
{name:'John', age:34}.constructor//返回函数 Object() { [native code] }
new Date().constructor          //返回函数Date() { [native code] }
function () {}.constructor      //返回函数Function(){ [native code] }

注:与typeof用法区别

8.js类型转换

parseInt() 强制转换为整数形式
parseFloat() 强制转化为浮点型(小数点型)
Number() 转化为数字
String() 转化为字符串
Boolean() 转化为布尔型

eg全局方法 String() 可以将布尔值转换为字符串。

String(false)        //返回"false"
String(true)         //返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString()     //返回"false"
true.toString()     //返回 "true"

9.js注释

   快捷键: ctrl+shift+/
   单行注释 : // 注释内容
   多行注释:   /*注释内容*/

10.js运算符

1)算术运算符

   + (连接/相加)   - 减   * 乘   / 除   % 取余 ++ 自加 -- 自减
注:++y与y++的区别:
       ++y:先自加后赋值
       y++:先赋值后自加

2)赋值运算符

= 右赋左
   x+=y → x=x+y
   x-=y → x=x-y
   x*=y → x=x*y
x/=y → x=x/y
x%=y → x=x%y

3)比较运算符(一般返回布尔值F/T)

    == 等于(值相等)
   === 绝对等于 (值和类型都相等)
  != 不等于(值)
  !== 绝对不等于(值或类型不等于)
   < 小于
> 大于
<= 小于等于
>= 大于等于

4)逻辑运算符

&&   and (与) 两边都为True返回True
||    or (或)   两边只要有一个True返回True
!     not (非)   True返回false

5) 条件运算符(也叫三目运算符)

(条件)?”条件成立输出的值”:”条件不成立输出的值”

11.条件语句

1)if语句

if (条件)
{
当条件为 true时执行的代码
}

注:请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

2）if…else 语句

if (条件)
{
当条件为 true时执行的代码
}
else
{
当条件不为 true时执行的代码
}

3) if…elseif ..else 语句

if (条件1)
         {
当条件 1为 true 时执行的代码
         }
else if (条件2)
         {
当条件 2为 true 时执行的代码
          }
else
         {
当条件 1和条件 2都不为 true 时执行的代码
         }

4) switch语句

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

注：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。使用 break 来阻止代码自动地向下一个 case 运行。使用 default 关键词来规定匹配不存在时做的事情.

13.循环语句

1)for 循环

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

注:语句 1 （代码块）开始前执行 starts.

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

2)while循环

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

3) do while 循环

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

注: 1)while循环和do while循环的区别:

while : 先判断后执行,条件不成立时循环停止

dowhile : 先执行后判断, 至少执行一次循环

2)break和continue的区别

break: 直接跳出循环

continue: 跳过当前循环,继续执行接下来的循环

14.js HTML DOM事件

onchange事件 :当用户改变输入字段的内同时触发
onclick事件:用户单击鼠标时触发
onfocus事件:获取焦点时触发
onblur事件:失去焦点时触发
onmouseover事件:鼠标悬浮时触发
onmouseout事件:鼠标离开时触发
onmousedown事件:鼠标点击时触发
onmouseup事件:鼠标松开时触发
onkeydown事件:按下键盘按钮时触发
onload事件:进入页面时触发
onunload事件:离开页面时触发

15.js函数

1)定义:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

2)函数声明:

function functionName(parameters) {
执行的代码
}

注:JavaScript对大小写敏感。关键词 function必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

3)函数调用方法

①直接调用

function myFunction() {
var x=5,

var y=x+1
}
myFunction(); // 返回6

②HTML标签内定义事件调用外部函数

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>调用函数</title>

</head>

<body>

<button onclick="show()">点击</button>

<!—单击事件触发函数show()-->

 <script>

     function show(){

         alert("这是一个基本函数")

 </script>

</body>

</html>

③js外部获取对象,定义事件,触发函数

    <!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<ul>

<li>111111</li>

<li>222222</li>

<li>333333</li>

</ul>

<script>

    var show=document.getElementsByTagName("li");

    for(var x=0;x<show.length;x++){

        show[x].onclick=function(){

            alert(this.innerHTML)

</script>

</body>

</html>

注:定义show[x]数组,遍历li标签

this指向函数执行时的当前对象

4)带返回值的函数

return: 在使用 return 语句时，函数会停止执行，并返回指定的值。

仅希望退出函数,也可使用return语句返回值为可选项.

function myFunction()
{
var x=5;
return x; // 返回值为5
}

5)带参函数调用及声明

   <!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>调用含参函数</title>

</head>

<body>

<script>

    function sum(x,y){ //形参

        var z=x+y;

        alert(z);

</script>

<button onclick="sum(3,5)">计算1</button><!--实参-->

</body>

</html>

注:变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

18.js HTML DOM

1)查找HTML元素方法

•通过 id 找到 HTML 元素 : document.getElementById("id名")
•通过标签名找到 HTML 元素 : document.getElementsByTagName("标签名")
•通过class找到 HTML 元素:document.getElementsByClassName("class名")

注:标签名和class名查找单个元素需加索引值[x],x从0开始代表第一个元素

2)改变HTML输出流: document.write()

3)获取HTML内容:

inner.HTML // 获取包含子标签

inner.Text // 获取纯文本

value // 获取表单元素的值

4)改变HTML内容: (查找元素.获取值=赋值)

document.getElementById(“id名””).innerHTML=new HTML

5)改变HTML样式(CSS)

obj.style.样式名=样式值

document.getElementById(id).style.property=newstyle

注:样式名为驼峰式写法

6)改变HTML属性(标签内所写为属性)

①obj.属性名=属性值

document.getElementById(id).属性名=new value

②attribute方法
obj.getAttribute(“属性名”) // 获取属性
obj.setAttribute(“属性名” , ”属性值”) // 设置属性

17.js对象

1) 对象只是带有属性和方法的特殊数据类型。JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

2)访问对象的属性

对象名.属性名

var message="Hello World!";
var x=message.length;

// string对象的length属性,获取字符串的长度 , x=12

3)访问对象的方法

对象名.方法()

varmessage="Hello world!";
var x=message.toUpperCase();

// string对象的toUpperCase()方法将文本转换为大写

4)String对象

属性

描述

constructor

返回创建字符串属性的函数

length

返回字符串的长度

prototype

允许您向对象添加属性和方法

方法

描述

charAt()

返回指定索引位置的字符

charCodeAt()

返回指定索引位置字符的 Unicode值

concat()

连接两个或多个字符串，返回连接后的字符串

fromCharCode()

将 Unicode转换为字符串

indexOf()

返回字符串中检索指定字符第一次出现的位置

lastIndexOf()

返回字符串中检索指定字符最后一次出现的位置

localeCompare()

用本地特定的顺序来比较两个字符串

match()

找到一个或多个正则表达式的匹配

replace()

替换与正则表达式匹配的子串

search()

检索与正则表达式相匹配的值

slice()

提取字符串的片断，并在新的字符串中返回被提取的部分

split()

把字符串分割为子字符串数组

substr()

从起始索引号提取字符串中指定数目的字符

substring()

提取字符串中两个指定的索引号之间的字符

toLocaleLowerCase()

根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射

toLocaleUpperCase()

根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射

toLowerCase()

把字符串转换为小写

toString()

返回字符串对象值

toUpperCase()

把字符串转换为大写

trim()

移除字符串首尾空白

valueOf()

返回某个字符串对象的原始值

5)Date对象

new Date() 获取系统当前日期
getYear获取当前日期的年份
getDay获取当前日期的星期

6)Number对象

①js数字均为64位的浮点数类型,证书最多为15位,小数最多为17位

②转换进制:obj.toString(16) 转换为16进制

obj.toString(8) 转换为8进制

obj.toString(2) 转换为2进制

varmyNumber=128;
myNumber.toString(16);   // returns 80
myNumber.toString(8);    // returns 200
myNumber.toString(2);    // returns 10000000

③无穷大 : Infinity

④NAN :非数值型的特殊值 (not a number)

var x= 1000 / "Apple";
isNaN(x); // returns true
var y = 100 / "1000";
isNaN(y); // returns false

⑤数字方法: obj.toFixed() 保留小数点运算,n为保留的小数位数

7)Array[ ]对象

①Array.length 数组长度

②数组调用方法: 数组名[索引值] // 索引值从0开始,代表数组中第一个值

8)Object{}

①简单对象的调用方法: 对象名.键值名

var info={name=”zhangsan”, sex=”男”}
alert ( info.name+info.sex)

②复杂对象的调用: 对象名[索引值].键值名

var obj=[{a=1,b=2},{c=3,d=4}]
var[0].a //返回1

9)Math对象

   Math.PI 返回圆周率 π
   Math.round() 四舍五入返回整数
   Math.radom() 产生随机数(0,1)
   Math.ceil() 向上舍入
   Math.floor() 向下舍入

阅读全文

0 0