【B/S】JS(3)

JS:JavaScript是属于网络的脚本语言, 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。主要使网页有交互,和HTML一样属于前端编程语言(运行在客户端)。

JavaScript不仅可以在前端使用,node.js平台可以让JavaScript具有服务端编程语言能力

 

js代码的位置(head中):

第一种方式:js代码写在<script>标签中。

    type="text/javascript"(可不写)   :javascript代码,现在所有的浏览器都会把<script>标签中的内容当成JS来执行

<script type="text/javascript">

  alert("hello world");//提示框,打印一句话

  console.debug("哈哈");//firefox和google浏览器中使用F12打开开发者工具,选中控制台面板(console)

</script>

 

第二种方式:将js代码作为a标签的href属性值运行,当我们点击这个a标签的时候就会执行js代码。javascript:代码

<a href="javascript:alert('你好')">点击</a>

 

第三中方式:将js代码放在一个独立js文件中,然后通过<script src="hello.js"></script>

      src:制定外部js文件的路径

<script type="rext/javascript" src="hello.js"></script>

 

js变量

<script type=text/javascript>

  //javascript声明变量统一使用“var”;

  //语法:var 变量名=任何值;

  //声明变量,没有赋值。(默认值为“undefined”);

  var username;

  username = "枫棂";

  username = 100;

  console.debug(username);

</script>

注意:

1. js中没有char类型,所以'a'也是一个字符串

2. var a="2";

  var b="你好";

  console.debug(a*b);//NaN:not a number不是一个数字。a非数字,会自动将类型转换为数值2,b非数字,但无啊把这个字符串转换为数值,不会报错,返回NaN;

3. js中任何值都有“真假性”,也就是说任何值都可以代表“真”或“假”

  false,0,"",'',NaN,undefined,null都是“假”;其他值都是真。所以if(值)中,这个值为真,就继续,若为假,就中断。

 

函数:

将脚本编写为函数,就可以避免页面载入时执行该脚本

函数包含着一些代码,这些代码可以多次被调用。

function showWord(){

  for(var i=0;i<10;i++){
    console.debug("你好"+i);

  }

}

直接调用函数:

showWord();

间接调用:

<a href="javascript:showWord();">点击我</a>

 

//函数中形参直接写参数名即可,不要写var

function getSum(num1,num2){

  return num1+num2;  //不需要定义返回值的类型,直接返回值即可

}

var sum=getSum(5,1);

console.debug(sum);

 

//document.write 文本内容打印到网页中

for(var i=1;i<9;i++){
  document.write("-----------------------");

  document.write("<br/>");

}

 

//定义一个验证表单函数

function validateForm(){

  //getElementById方法,通过id属性获取页面中的一个元素

  var inputOBbject = document.getElementById("username");//获取了页面中id为username的标签对象

  var v= inputObject.value;

  

  //判断用户名是否有输入

  if(v.length==0){

    alert("请输入用户名");

    return;  //终止代码继续向后执行

  }

 

  //通过代码提交表单

  var formMaple = document.userForm;//获取到了名字为userForm表单对象

  formMaple.submit();

}

 

<form action="" name="userForm">

  用户名:<input type="text" name="username" id="username" /><br />

  密&emsp;码:<input type="password" name="userpsword" id="userpsword"/><br />

  //onclick点击后执行某段代码

  <input type="button" value="提交" onclick="validateForm()" />

</form>

posted @ 2017-03-09 17:30  枫棂叶澜  阅读(246)  评论(0编辑  收藏  举报