JavaScript学习（三）javaScript基础语法

技术2022-07-11 126

文章目录

基础知识变量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>

语法

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.016, SQL: 9