博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端笔记4-1
阅读量:5262 次
发布时间:2019-06-14

本文共 3800 字,大约阅读时间需要 12 分钟。

1.js可以在<head><body>或外部,需要包裹在<script></script>中

2.js输出

   操纵HTML元素

1 2 

我的第一张网页

3

我的第一个段落

4 7 8

   写到文档输出

   document.write("<p>我的第一段js</p>")  ;

   注意: 

  请使用 document.write() 仅仅向文档输出写内容。

  如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

1 body> 2 

我的第一张网页

3

我的第一个段落

4 5 10

3.js语句

  区分大小写

  忽略多余空格

  折行:反斜杠\

document.write("Hello \World!");

4.js注释

 单行//

 多行/*  */

5.js数据类型

 字符串,数字,布尔,数组,对象,null,undefined

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

var x                // x 为 undefinedvar x = 6;           // x 为数字var x = "Bill";      // x 为字符串

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带

字符串可以使用单引号或双引号,可以在字符串中使用引号,只要不匹配包围字符串的引号即可

极大或极小的数字可以通过科学(指数)计数法来书写:

var y=123e5;      // 12300000var z=123e-5;     // 0.00123

js数组

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"];

数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。

js对象

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

var person={firstname : "Bill",lastname  : "Gates",id        :  5566};

空格和折行无关紧要。声明可横跨多行:

对象属性有两种寻址方式:

name=person.lastname;name=person["lastname"];

undefined和null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

声明变量类型

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

6.js对象

属性+方法

内建属性:length

内建方法:

txt.indexOf()txt.replace()txt.search()

创建js对象

var objectname-new Object();

7.js函数

语法:

function functionname(){这里是要执行的代码}

带参数的函数

function myFunction(var1,var2){这里是要执行的代码}

调用

myFunction(argument1,argument2)

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

带有返回值的参数

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

var x=myfunction2('Tom','CEO');

function myfunction(){   document.getElementById("demo").innerHTML=myfunction2('Tom','CEO');}function myfunction2(name,job){    alert("welcome"+name+",the"+job);    var x=5;    return x;}

 在您仅仅希望退出函数时 ,也可使用 return 语句。

8.js运算符

用于字符串的+符号

+ 运算符用于把文本值或字符串变量加起来(连接起来)。

如需把两个或多个字符串变量连接起来,请使用 + 运算符。

如果把数字与字符串相加,结果将成为字符串。

<script type="text/javascript">
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>

9.js比较和逻辑运算符

条件运算符

10.js  if...else语句 switch语句

         for for/in while do.while..       

1 var person={fname:"John",lname:"Doe",age:25};2 3 for (x in person)4 {5 txt=txt + person[x];6 }

11.break语句

break 语句可用于跳出循环。

break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):

continue语句

 continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。

js标签

 break 和 continue 语句仅仅是能够跳出代码块的语句

continue 语句(带有或不带标签引用)只能用在循环中。

break 语句(不带标签引用),只能用在循环或 switch 中。

通过标签引用,break 语句可用于跳出任何 JavaScript 代码块

标签语法:

label:语句

用法:break labelname;

        continue labelname;

12.JS错误

try...catch..语句

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

try{

//测试代码

}catch(){

//处理错误

}

1 function message(){ 2     try{ 3        alllert("welcome guest!"); 4     }catch(err){ 5        txt="there is an error on this page.\n\n"; 6        txt+="ERROR descriptio:"+err.message+"\n\n"; 7        txt+="click OK to continue.\n\n"; 8        alert(txt); 9     }10 

throw语句  允许自定义错误,常与try...catch...连用

1 function mine(){ 2      try{ 3         // alert("hi~"); 4         var x=document.getElementById("test").value; 5         if(x=="") 6             throw "empty"; 7         if (isNaN(x)) 8             throw "not a number"; 9         if (x>10) {
throw "too big";}10 if (x<5) {
throw "too small";}11 12 }catch(err){13 var y=document.getElementById("mess");14 y.innerHTML="Error "+err+".";15 }16 }17

My First Js

18

Please input number netween 5 and 10

19
20 21

13.表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

必填或必选项目

    
Email:

email

1  2  3  4      5  6  7 39 
40 Email:
41
42
43 44

 

转载于:https://www.cnblogs.com/jieyi/p/8366997.html

你可能感兴趣的文章
负载均衡策略
查看>>
微信智能开放平台
查看>>
ArcGIS Engine 中的绘制与编辑
查看>>
Oracle--通配符、Escape转义字符、模糊查询语句
查看>>
c# 文件笔记
查看>>
第一页 - 工具的使用(webstorm)
查看>>
Linux 进程资源用量监控和按用户设置进程限制
查看>>
IE浏览器整页截屏程序(二)
查看>>
D3.js 之 d3-shap 简介(转)
查看>>
制作满天星空
查看>>
类和结构
查看>>
CSS3选择器(二)之属性选择器
查看>>
adidas crazylight 2018 performance analysis review
查看>>
typeset shell 用法
查看>>
python 之 循环语句
查看>>
心得25--JDK新特性9-泛型1-加深介绍
查看>>
[转]ceph网络通信模块_以monitor模块为例
查看>>
HDOJ 1754 I Hate It(线段树基本操作)
查看>>
latex tree
查看>>
安装NVIDIA驱动时禁用自带nouveau驱动
查看>>