JavaScript详解_网站策划_上海毫米网络优化公司

您的位置：上海毫米网络优化公司 > 业务范围 > 网站策划 >

一、什么是JavaScript？

JavaScript是一门跨平台、面向对象的脚本语言（不需要编译，直接解释运行即可），来控制网页的行为，它能使网页可交互

W3C标准：网页主要由三部分构成

结构：HTML
表现：CSS

行为：JavaScript

JavaScript和Java是完全不同的语言，不论是概念还是设计。但是在基础语法上类似。

JavaScript（简称：JS）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准。

ECMAScript 6（ES6）是最新的JavaScript版本（发布于2015年）

二、JavaScript的引入方式

1.内部脚本：将JS代码定义在HTML页面中

在HTML中，JavaScript代码必须位于与标签之间

提示：

在HTML文档中可以在任意地方，放置任意数量的

注意：

外部文件不能包含

三、JavaScript的基础语法

3.1 书写语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：单行注释：//注释内容多行注释：/*注释内容*/
大括号表示代码块
```
if(count == 3){
    alter(count);
} 
```

3.2 输出语句

3.3 变量

3.4 数据类型

JavaScript详解,第3张

3.5 运算符

3.6 流程控制语句

if判断
switch选择
for循环
while循环

do...while循环

3.7 函数

JavaScript详解,第6张

JavaScript详解,第7张

四、JavaScript对象

4.1 Array对象

JavaScript详解,第8张

4.2 String对象

JavaScript详解,第10张

trim():去除字符串前后两端的空白字符

4.3 自定义对象

JavaScript详解,第11张

五、 BOM对象

5.1 window对象

JavaScript详解,第14张

5.2 history对象

JavaScript详解,第16张

5.3 location对象

JavaScript详解,第17张

六、 DOM对象

JavaScript详解,第18张

JavaScript详解,第19张 JavaScript详解,第20张

JavaScript详解,第21张

修改 img 对象的 src 属性来改变图片

style:设置元素css样式
innerHTML：设置元素内容

通过将复选框（checkbox）元素对象的 checked 属性值设置为 true 来改变复选框的选中状态

七、事件监听

JavaScript详解,第22张

八、案例——表单验证

JavaScript详解,第24张

JavaScript详解,第25张 HTML源代码：

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.reg-content{
    padding: 30px;
    margin: 3px;
}
a, img {
    border: 0;
}
body {
    background-image: url("../imgs/reg_bg_min.jpg") ;
    text-align: center;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td, th {
    padding: 0;
    height: 90px;
}
.inputs{
    vertical-align: top;
}
.clear {
    clear: both;
}
.clear:before, .clear:after {
    content: "";
    display: table;
}
.clear:after {
    clear: both;
}
.form-div {
    background-color: rgba(255, 255, 255, 0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left:1050px;
    padding: 30px 0 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
}
.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
    width: 268px;
    margin: 10px;
    line-height: 20px;
    font-size: 16px;
}
.form-div input[type="checkbox"] {
    margin: 20px 0 20px 10px;
}
.form-div input[type="button"], .form-div input[type="submit"] {
    margin: 10px 20px 0 0;
}
.form-div table {
    margin: 0 auto;
    text-align: right;
    color: rgba(64, 64, 64, 1.00);
}
.form-div table img {
    vertical-align: middle;
    margin: 0 0 5px 0;
}
.footer {
    color: rgba(64, 64, 64, 1.00);
    font-size: 12px;
    margin-top: 30px;
}
.form-div .buttons {
    float: right;
}
input[type="text"], input[type="password"], input[type="email"] {
    border-radius: 8px;
    box-shadow: inset 0 2px 5px #eee;
    padding: 10px;
    border: 1px solid #D4D4D4;
    color: #333333;
    margin-top: 5px;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    border: 1px solid #50afeb;
    outline: none;
}
input[type="button"], input[type="submit"] {
    padding: 7px 15px;
    background-color: #3c6db0;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}
input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #5a88c8;
}
input[type="button"]:active, input[type="submit"]:active {
    background-color: #5a88c8;
}
.err_msg{
    color: red;
    padding-right: 170px;
}
#password_err,#tel_err{
    padding-right: 195px;
}
#reg_btn{
    margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}

九、正则表达式

JavaScript详解,第26张

武汉做网站的公司有哪些福州网站建设网络服务中国建筑网官网查询资源搜索引擎中国建设网站公众号小程序怎么做

上一篇：我让ChatGPT用CSS3画一个皮卡丘，还是自己画的可爱

下一篇：五、vue基础-指令之v-bind

用户名	用户名不太受欢迎
密码	密码格式有误
手机号	手机号格式有误