JavaScript基础

    xiaoxiao2026-03-04  11

    1、document.write:只是在Javascript中直接使用 document.write会在已有的html内容后面添加。如果您在文档加载后使用该方法,会覆盖整个文档。

    2、alert('This is test!') 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

    3、JS改变html内容:

    var x=document.getElementById("demo") //查找元素 x.innerHTML="Hello JavaScript";

    4、JavaScript的函数和事件:(1)、函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

    (2)、类似于document.write这样的语句,会在页面加载的时候执行,通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时,如果我们把JavaScript代码放入函数中,就可以在事件发生时调用该函数。在希望退出函数时,也可使用return语句

    (3)、事件:①onclick:当用户点击鼠标时调用  ②onload:当用户加载网页时调用  ③onunload:当用户离开界面时调用   ④onchange:当输入内容改变时调用    ⑤onmouseover:当用户的鼠标移动到HTML元素上时调用   ⑥onmouseout:当用户的鼠标移出HTML元素时调用  ⑦onmousedown:当鼠标按下时调用  ⑧onmouseup:当鼠标释放时调用 ⑨onfocus:当获取焦点时调用  ⑩onerror:在加载文档或图像发生错误时调用

    5、外部的JavaScript:通常我们可以把脚本保存到外部文件中,外部文件通常包含多个网页使用的代码,外部JavaScript文件的文件扩展名为.js,如需使用外部文件,请在<script>标签的"src"属性中设置该.js文件(在<head>或<body>中引用脚本文件都是可以的),需要注意的是外部脚本不能包含<script>标签

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

    6、JavaScript对大小写敏感:当编写JavaScript语句时,要留意是否关闭大小写切换键,函数getElementById与getElementbyID是不同的。

    7、JavaScript会忽略多余的空格,可以向脚本中添加空格来提高可读性,下面两行代码是等效的:

    var name="Hello"; var name = "Hello";

    8、JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

    9、JavaScript变量:JavaScript变量用于存放值,JavaScript变量均为对象,当声明一个变量时就创建了一个对象。变量可以使用短名称(比如x和y),也可以使用描述性更好的名称(比如age,sum),变量的命名要求如下:

    (1):变量必须以字母开头 (2):变量也能以$和_开头(不过不推荐) (3):变量名称对大小写敏感(即y和Y是不同的变量)

    通常我们使用var关键字来声明变量,且一条语句可以声明多个变量,用逗号隔开,通常声明的变量没有赋值时,他们实际上等于undefined,undefined这个值表示变量不含值,可以通过变量的值设置为null来清空变量,此时变量的值为null。声明一个变量赋值后,再次声明该变量,其值不会消失。

    <span style="font-size:10px;">var name="Gates", age=56, job="CEO";//声明多个变量 var carname;//此时carname的值为undefined var name="Volvo"; var name;//此时name的值依然是Volvo</span>

    局部JavaScript变量和全局JavaScript变量:在JavaScript函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问它(该变量的作用域是局部的),所以可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量,只要函数执行完毕,局部变量就会被删除。在函数外声明的变量是全局变量,网页上所有的脚本和函数都能访问它,全局变量会在页面关闭后删除,如果在函数中给尚未声明的变量赋值,那么该变量自动作为全局变量声明。

    10、JavaScript数据类型:JavaScript拥有动态类型,即相同的变量可以作为不同的类型

    <pre code_snippet_id="1832937" snippet_file_name="blog_20160816_5_6099007" name="code" class="javascript">var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill"; // x 为字符串

    (1)字符串String:当赋值字符串时,要用""或''包围这个值

    (2)数字Number:不能用引号包围,可以带小数点,也可以不带,如果前缀没0,则JavaScript会把数值常量解释为八进制数,如果前缀为0x,则解释为十六进制数

    ①属性:MAX VALUE(最大值)、MIN VALUE(最小值)、NEGATIVE INFINITIVE(负无穷大)、POSITIVE INFINITIVE(正无穷大)、NaN(非数字值)、prototype、constructor

    ②方法:toExponential()、toFixed(num)(将Number四舍五入为指定小数位数的数字)、toPrecision()、toString()、valueOf()

    ③数字创建:

    <pre name="code" class="java">var myNum=new Number(value); var myNum=Number(value);

    (3)布尔:只有两个值:true和false

    (4)数组:

    ①创建方式如下:

    <pre name="code" class="java">var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; var cars=new Array("Audi","BMW","Volvo"); var cars=["Audi","BMW","Volvo"];

    ②方法:concat():连接两个或更多的数组并返回结果

    <pre name="code" class="java">var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" var arr2 = new Array(3) arr2[0] = "James" arr2[1] = "Adrew" arr2[2] = "Martin" var arr3 = new Array(2) arr3[0] = "William" arr3[1] = "Franklin" document.write(arr.concat(arr2,arr3)) join():将数组中所有元素放入一个字符串中,可指定分隔符

    <pre name="code" class="java">var arr = new Array(3); arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join());//George,John,Thomas document.write("<br />"); document.write(arr.join("."))//George.John.Thomas pop():删除并返回数组的最后一个元素

    reverse():颠倒数组中元素的顺序

    shift():删除并返回数组的第一个元素

    sort(sortby):对数组进行排序,可规定排序顺序,sortby必须是函数

    function sortNumber(a,b) { return a - b } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber))//<span style="font-family: Consolas, "Courier New", Courier, monospace; font-size: 10px; background-color: rgb(245, 245, 245);">1,5,10,25,40,1000,直接调用sort()结果为</span><span style="font-family: Consolas, "Courier New", Courier, monospace; font-size: 10px; background-color: rgb(245, 245, 245);">1,10,1000,25,40,5</span>

    (5)对象:对象由{}分隔,在括号内部,对象的属性以名称和值对的形式来定义,属性由逗号分隔

    <span style="font-size:10px;">var person={firstname:"Bill", lastname:"Gates", id:5566};</span> 对象属性的两种寻址方式: <span style="font-size:10px;">name=person.lastname; name=person["lastname"];</span>

    (6)日期:

    ①创建:var myDate=new Date();

    ②方法:Date():返回当日的日期和时间

    getDate():从Date对象中返回一个月中的某一天(1-31)

    getDay():从Date对象中返回一周中的某一天(0-6)

    getMonth():从Date对象中返回月份

    getFullYear():从Date对象中返回四位数字年份

    getTime():返回自1970年1月1日至今的毫秒数

    (7)Math

    方法:abs(x):返回数的绝对值

    ceil(x):对数进行上舍入

    floor(x):对数进行下舍入

    max(x,y):返回x、y中的最高值

    min(x,y):返回x、y中的最低值

    random():返回0-1的随机数

    round():把数四舍五入为最接近的整数

    11、JavaScript运算符:

    (1)、算数运算符:

    加(+)减(-)乘(*)除(/)求余数(%)累加(++,x=y++为x=y,然后y在累加,x=++y为x=累加后的y,递减同理)递减(--)

    (2)、赋值运算符

    等于(=)加等于(+=,x+=y为x=x+y,以下同理)减等于(-=)乘等于(*=)除等于(/=)模等于(%=)

    (3)、比较运算符

    等于(==,5和'5',类型不同,但==返回true)全等(值和类型)(===,5和'5'返回false)不等于(!=)大于(>)小于(<)大于等于(>=)小于等于(<=)

    (4)、逻辑运算符

    和(&&)或(||)非(!)

    12、JavaScript语句:

    (1)、if else语句:if(){}else if(){}else{},只有当指定条件为true时该语句才会执行,大小写敏感,if要小写

    (2)、switch语句:switch语句用于基于不同的条件来执行不同的动作

    (3)、for循环语句:

    (4)、for/in循环语句:遍历对象的属性

    <span style="font-size:10px;">var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; }</span> (5)、while和do/while循环语句

    (6)、break语句用于跳出循环,只能用在循环和switch语句中,continue用于跳过循环中的一个迭代,只用用在循环中

    (7)、标签,在需要标记的JavaScript语句之前加上冒号。

    <span style="font-size:10px;">cars=["BMW","Volvo","Saab","Ford"]; list: { document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list; document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); }</span> (8)、异常语句try catch: <span style="font-size:10px;"><!DOCTYPE html> <html> <head> <script> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" οnclick="message()"> </body> </html></span>
    转载请注明原文地址: https://ju.6miu.com/read-1307618.html
    最新回复(0)