JavaScript_note1

参考文献《JavaWeb 从入门到精通》

1.JavaScript的语法

  • JavaScript区分大小写
  • 每行结尾的分号可有可无
  • 变量是弱类型的
  • 使用大括号标记代码块 与Java语言相同,JavaScript也是使用一对大括号标记代码块,被封装在打括号内的语句将顺序执行。
  • 注释 单行注释和多行注释。

2.JavaScript的关键字

3.JavaScript的数据类型

"数符布转空未定"

3.1.数值型(整型,浮点型)

整型

729                               //表示十进制的729
071                               //表示八进制的71
0x9405B                       //表示十六进制的9405B

浮点型

3.1415926                       //采用标准方法表示
1.6E3                              //采用科学记数法表示,代表1.6*10³

3.2.字符型 单引号字符型变量以及双引号字符型变量

'a'
'保护环境从我做起'
"b"
"系统公告:"

3.3.布尔值

3.4.转义字符

image.png

3.5.空值

3.6.未定义值

4.运算符

4.1.赋值运算符

4.2.算术运算符

4.3.比较运算字符

4.4.逻辑运算字符

4.5.条件云算符 即三目运算符,语法格式如下:

操作数?结果1:结果2

Demo:

var a=26;
var b=60;
var m=a>b?a:b    //m的值为60

4.6.字符串运算符 字符串运算符是用于两个字符型数据之间的运算符,除了比较运算符之外,还可以是+和+=运算符。 Demo:

<script language="javascript">
var a="One " + "world ";
a+="One Dream"
alert(a);
</script>

运行结果:

5.流程控制语句

5.1.if条件判断语句 Demo:(用if语句验证用户登录信息)

CSS文件:

<!--
body{
    FONT-SIZE: 9pt;
    margin-left:0px;
    SCROLLBAR-FACE-COLOR: #346633; 
    SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
    SCROLLBAR-SHADOW-COLOR: #fcfcfc; COLOR: #000000;
    SCROLLBAR-3DLIGHT-COLOR: #ececec;
    SCROLLBAR-ARROW-COLOR: #ffffff;
    SCROLLBAR-TRACK-COLOR: #ececec;
    SCROLLBAR-DARKSHADOW-COLOR: #999966;
    BACKGROUND-COLOR: #fcfcfc

}
a:hover {
    font-size: 9pt; color: #FF6600;
}
a {
    font-size: 9pt; text-decoration: none;  color: #676767;
    noline:expression(this.onfocus=this.blur);
}
td{
    font-size: 9pt; color: #000000;
    padding-left:5px;
}
.btn_grey {
    font-family: "宋体";  font-size: 9pt;color: #333333;  
    background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
    border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
    border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
}
input{
    font-family: "宋体";
    font-size: 9pt;
    color: #333333;
    border: 1px solid #999999;

}
hr{
    border-style:solid;
    height:1px;
    color:#CCCCCC;
}
-->

html文件:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="style.css" rel="stylesheet">
<script language="javascript">
    function check(){
        if(form1.user.value==""){               //判断用户名是否为空
            alert("请输入用户名!");form1.user.focus();return;
        }else if(form1.pwd.value==""){          //判断密码是否为空
            alert("请输入密码!");form1.pwd.focus();return;
        }else{
            form1.submit();                 //提交表单
        }
    }
</script>

</head>

<body>
  <center>
  <form name="form1" method="post" action="">
    <table width="221" border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF" bordercolordark="#CCCCCC" bordercolorlight="#FFFFFF">
      <tr>
        <td height="30" colspan="2" bgcolor="#eeeeee">用户登录</td>
      </tr>
      <tr>
        <td width="59" height="30">用户名:</td>
        <td width="162"><input name="user" type="text" id="user"></td>
      </tr>
      <tr>
        <td height="30">密&nbsp;&nbsp;码:</td>
        <td><input name="pwd" type="text" id="pwd"></td>
      </tr>
      <tr>
        <td height="30" colspan="2" align="center">
        <input name="Button" type="button" class="btn_grey" value="登录" onClick="check()">
          &nbsp;
        <input name="Submit2" type="reset" class="btn_grey" value="重置">
        </td>
      </tr>
    </table>
  </form>
  
</center>

</body>
</html>

运行结果:

5.2.switch多分支语句

Demo:

<script language="javascript">
var now=new Date();         //获取系统日期
var day=now.getDay();       //获取星期
var week;
switch (day){
    case 1:
        week="星期一";
        break;
    case 2:
        week="星期二";
        break;
    case 3:
        week="星期三";
        break;
    case 4:
        week="星期四";
        break;
    case 5:
        week="星期五";
        break;
    case 6:
        week="星期六";
        break;
    default:
        week="星期日";
       break;
}
document.write("今天是"+week); //输出中文的星期
</script>

运行结果:

image.png

5.3.for循环语句 5.4.while循环语句 5.5.do...while循环语句 5.6.break与continue语句

6.函数

基本语法如下:

function functionName([parameter 1, parameter 2,...]){
        statements;
        [return expression;]
}

7.Window对象的open()方法

Demo:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>

function openWin(){
    myWindow=window.open("","","width=531,height=402,top=50,left=20");
        myWindow.document.write("<p>这是'我的窗口'</p>");
        myWindow.focus();

}
function openWin1(){
    window.open("","","width=531,height=402,top=50,left=20");

}
</script>
</head>

<body>

<input type="button" value="打开窗口1" onclick="openWin()" />

<input type="button" value="打开窗口2" onclick="openWin1()" />

<input type="button" value="警告" onclick="window.alert('警告窗口');" />

<input type="button" value="打开窗口3" onclick="window.open("","","width=531,height=402,top=50,left=20");" />
</body>
</html>

运行结果:

image.png

注意区分四个按钮的代码表达,其中前三个按钮可以正常执行逻辑,但最后一个按钮不可 !

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏nimomeng的自我进阶

《Objective-C基础教程》笔记

1.xcode中,oc的.m文件代表message,指的是Objective-C的一个主要特性。 2.NS前缀的来历要追溯到次公局包还被成为NextStep,...

792
来自专栏Golang语言社区

JS基础(下)

事件DOM Event 更多事件请查询h3c htmldom参考手册 event onclick() :当点击时 onfocus() :获得焦点时 ;当...

4287
来自专栏LIN_ZONE

javascript对象序列化(对象与JSON字符串的互换)

前一段时间用到h5的本地存储---需要把某个js对象存储在浏览器的本地存储中,用到了javascript对象的序列化与反序列化

712
来自专栏Crossin的编程教室

【编程课堂】文本包装 textwrap

欢迎回到编程课堂,本周我们将了解一个与文字处理相关的模块—— textwrap,依照惯例,此处应该有一思考题: 现在有一文本文件 ‘abc.txt’,有 100...

34010
来自专栏IMWeb前端团队

【译】使用箭头函数精简你的 Vue 模块

本文作者:IMWeb ShiJianwen 原文出处:IMWeb社区 未经同意,禁止转载 原文链接:https://dotdev.co/clean-...

2638
来自专栏LIN_ZONE

javascript基础重点

1.在javascript中使用 == 比较,会自动转换数据类型再比较,有时候会 得到非常诡异的结果;一般情况下使用 === 比较,它不会自动转换数据类型,如果...

892
来自专栏绿巨人专栏

TypeScript中的怪语法

1153
来自专栏偏前端工程师的驿站

JS魔法堂:剖析源码理解Promises/A规范

一、前言                                 Promises/A是由CommonJS组织制定的异步模式编程规范,有不少库已根据该规...

23910
来自专栏IMWeb前端团队

20个例子入门Q.js

本文希望通过20个简单的例子让没用过Q.js的同学快速掌握其基本用法 1. 新建实例 html代码: <div id="demo" q-text="msg"><...

2217
来自专栏向治洪

Swift 4.0 新特性

WWDC 2017 带来了很多惊喜,在这次大会上,Swift 4 也伴随着 Xcode 9 测试版来到了我们的面前,虽然正式版要8月底9月初才会公布,但很多强大...

2269

扫码关注云+社区

领取腾讯云代金券