JavaScript学习(三)javaScript基础语法

    技术2022-07-11  117

    文章目录

    基础知识变量if语句函数定义输出内容alert消息对话框confirm 消息对话框prompt消息对话框打开新窗口关闭窗口 练习

    基础知识

    变量

    申明 var 变量名

    var 用来定义变量,这个用法在很多语言里都一样。

    命名 变量名必须使用字母、下划线或 $ 符号开头。由数字、字母、下划线、$ 符号组成。命名需要避免js的关键字和保留字。 使用 先申明,再赋值 var mychar; mychar="javascript"; 注意 变量名区分大小写。

    if语句

    所有语言的if语句都差不多,js也一样。

    函数定义

    function 函数名() { 函数内部实现 }

    function 是申明函数的关键字。

    例:

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>函数调用</title> <script type="text/javascript"> function contxt() //定义函数 { alert("哈哈,调用函数了!"); } </script> </head> <body> <form> <input type="button" value="点击我" onclick="contxt()" /> </form> </body> </html>

    输出内容

    直接输出字符串

    document.write("I love JavaScript");

    输出字符串变量内容

    var mystr="hello world!"; document.write(mystr); //直接写变量名,输出变量存储的内容。

    ”+“拼接输出

    var mystr="hello"; document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接

    输出后换行

    var mystr="hello"; document.write(mystr+"<br>");//输出hello后,输出一个换行符

    alert消息对话框

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>alert</title> <script type="text/javascript"> function rec(){ var mychar="I love JavaScript"; alert(mychar); } </script> </head> <body> <input name="button" type="button" onClick="rec()" value="点击我,弹出对话框" /> </body> </html>

    confirm 消息对话框

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>confirm</title> <script type="text/javascript"> function rec(){ var mymessage=confirm("你是女士吗?");; if(mymessage==true) { document.write("你是女士!"); } else { document.write("你是男士!"); } } </script> </head> <body> <input name="button" type="button" onClick="rec()" value="点击我,弹出确认对话框" /> </body> </html>

    语法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>confirm</title> <script type="text/javascript"> function rec(){ var mymessage=confirm("你是女士吗?");; if(mymessage==true) { document.write("你是女士!"); } else { document.write("你是男士!"); } } </script> </head> <body> <input name="button" type="button" onClick="rec()" value="点击我,弹出确认对话框" /> </body> </html>

    语法

    var isMeal = confirm("您是女士吗?");

    confirm()函数会触发一个弹窗,自带确定和取消按钮。这个函数有个bool类型的返回值,点击确定返回true,取消返回false。

    prompt消息对话框

    语法

    prompt(str1,str2); str1: 要显示在消息对话框中的文本,不可修改str2:文本框中的内容,可以修改 点击确定按钮,文本框中的内容将作为函数返回值点击取消按钮,将返回null <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>prompt</title> <script type="text/javascript"> function rec(){ var score = prompt("请输入您的成绩"); //score变量,用来存储用户输入的成绩值。 if(score>=90) { document.write("你很棒!"); } else if(score>=75) { document.write("不错吆!"); } else if(score>=60) { document.write("要加油!"); } else { document.write("要努力了!"); } } </script> </head> <body> <input name="button" type="button" onClick="rec()" value="点击我,对成绩做评价!" /> </body> </html>

    打开新窗口

    window.open([URL], [窗口名称], [参数字符串])

    URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。

    窗口名称:可选参数,被打开窗口的名称。

    窗口名称可为"_top"、"_blank"、"_self" _blank:在新窗口显示目标网页 _self:在当前窗口显示目标网页 _top:框架网页中在上部窗口中显示目标网页

    参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window.open</title> <script type="text/javascript"> function Wopen(){ window.open('http://www.baidu.com','_blank','width=400,height=600,top=100,left=0'); } </script> </head> <body> <input name="button" type="button" onClick="Wopen()" value="点击我,打开新窗口!" / > </body> </html>

    参数列表:

    关闭窗口

    window.close(); //关闭本窗口 <窗口对象>.close(); //关闭指定的窗口

    练习

    点击按钮,弹窗,选择确定打开新窗口

    <!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> function openWindow(){ var open=confirm("是否打开?"); if (open) { window.open('http://www.baidu.com','_blank','width=400,height=500,menubar=no,toolbar=no'); } } </script> </head> <body> <input type="button" value="新窗口打开网站" onclick="openWindow()" /> </body> </html>
    Processed: 0.015, SQL: 9