javascript

zzzz11y

已于 2023-07-12 21:33:15 修改

阅读量340

点赞数

文章标签： javascript

于 2022-03-30 08:00:00 首次发布

本文链接：https://blog.csdn.net/zzzz11y/article/details/123834470

版权

javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a{font-size: 32px;text-decoration: underline;}
    </style>
    <script>
        function f() {
            document.getElementById("a").innerText="新浪";
        }
        window.onload=function(){
            var c=document.getElementById("b");
            c.onclick=function(){
                f();
            }
        }
    </script>
</head>
<body>
    <div id="a">搜狐</div> <br/>
    <button id="b">使用dom改变链接</button>
</body>
</html>

1、什么是JavaScript?

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型，基于原型的语言

2、基本特点

解释性语言；跨平台；基于对象；动态性

3、可以做什么

客户端表单验证
页面动态效果
动态改变页面内容

4、JavaScript的组成

a、核心语法(ECMAScript):是一种开放的、国际上广为接受的、标准的脚本语言规范，是一个描述，规定了脚本语言的所有属性、方法和对象的标准，主要描述以下内容语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象。
b、浏览器对象模型(BOM):是Browser Object Model的简称，提供独立于内容与浏览器窗口进行交互的对象，作用是将相关的元素组织包装起来，提供给程序设计人员使用，提高设计web页面的能力。BOM分层结构图如下：

c、文档对象模型（DOM)：是Document Object Model的简称，是HTML文档对象模型定义的一套标准方法，用来访问和操纵HTML文档，有W3C定义，DOM提供一组按树状结构组织的HTML文档，树状结构中的每一个对象称为一个节点，每一个对象都有一个或多个属性和方法，如下图所示：

5、脚本的基本结构

<script>
	//JavaScript 语句;
</script>

6、脚本执行原理

浏览器客户端与应用服务器端采用请求/响应模式进行交互

7、JavaScript常用的两种编程方式

a、所有代码写在网页的script标签中

<html>
<head>
<script>
for(var i=0;i<5;i++)
document.write("hello");
</script>
</head>
<body></body>
</html>

b、外链式：所有代码写在单独的JavaScript文件中，再在网页中引用

<html>
<head>
<script src="hello.js" type="">
</script>
</head>
<body></body>
</html>

hello.js文件

for(var i=0;i<5;i++)
document.write("hello");

8、JavaScript的基本语法

a、JavaScript输出，即JavaScript语句向浏览器发出命令，告诉浏览器该做什么

<script type="text/JavaScript">
	document.write("hello");
</script>

b、语句之间的分隔是分号（；），注意：分号是可选项，有时候看不到以分号隔开的
c、标识符：必须以下划线、字母或者美元符号开始，不能是关键字
d、JavaScript对大小写敏感
e、JavaScript会忽略掉多余的空格
f、代码不可以在单词之间换行
g、注释单行注释：// 多行注释：/* */

9、JavaScript变量的声明、赋值、使用

JavaScript是一种弱类型语言，没有明确的数据类型，也就是说，在声明变量时，不需要指定变量的类型，变量的类型有赋给变量的值决定，JS声明变量采用var声明。
var width=20;
var x,y,z=10;
X=88;//区分大小写，由于JS是一种弱类型语言，所以允许不声明变量直接使用，系统将自动声明该变量，但是比较容易出错，也很难查找拍错

10、JavaScript中的数据类型

虽然JS是一种弱类型语言，但有时也需要监测变量的具体数据类型（通过typeof运算符）
在JS中，提供常用的基本数据类型：undefined(未定义类型），null(空类型），number(数值类型），string(字符串类型），boolean(布尔类型）
。var width;//变量未赋值，将被赋予值undefined
。值undefined实际上是值null派生来的，所以alert(bull==undefined);//为ture

11、逻辑控制语句

a、条件结构

if(表达式){JS语句1;}
else {JS语句2；}

//switch可以用于字符串
switch(表达式){
case 值1：JS语句1;break;
case 值2：JS语句2;break;
case 值3：JS语句3;break;
default：JS语句n;break;
}

b、循环结构

for(初始化;条件;增量或减量){
JS语句;}

while(条件){
JS语句;}

do{
JS语句;
}while(条件);

c、中断循环
break:可以立即退出整个循环
continue:退出当前循环，进入下一轮循环

12、JavaScript中的类型转换

转换成数字：xxx*1.0
转换成字符串：xxx+“”
提取字符串中的整数：parseInt(); 例：parseInt(“123zhang”)结果为123
提取字符串中的浮点数：parseFloat();
执行用字符串表示的一段JS代码：eval 例：eval(“1+1”)结果为2
转换为字符型：String();
转换为数值型：Number(）;
转换为布尔型：Boolean();
注意:
parseInt(“abc123”) 结果为NaN
parseFloat(“abc123.123”) 结果为NaN
Number(“123.123aa”)结果为NaN

13、JS中常用的输入/输出

a、警告（alert)
格式：alert("提示信息“）
b、提示（prompt)
格式：prompt(“提示信息”,"输入框的默认信息“）；

14、程序调试

a、防止阻塞的方法

把所有js代码放在body的最后
添加window.onload事件，表示网页加载完毕之后执行的操作、

b、发生错误时阻塞：用alert()的阻塞特征，可以对错误进行调试

15、JS中常用的表单验证

a、控制内容长度

<p>控件内容长度限制</p >
<form name=a onsubmit="return test()">
   <textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符！">
   </textarea><br />
    <input type="submit" name="Submit" value="check">
</form>
<script language="JavaScript">
    function test(){
        if(document.a.b.value.length>50){
            alert("不能超过50个字符！");
            document.a.b.focus();
            return false;
        }
    }
</script>

b、检查时间大小

    <script>
        function test(){

            var aa=document.getElementById("id2");
            var obj1=aa.value.replace(/-/g,"/");
            var data1=new Date(Date.parse(obj1));
            var data2=new Date();
            if(data1>data2){
                alert("不能大于当前的时间");
                return false;
            }
        }
    </script>

c、屏蔽关键字

<script type="text/javascript">
        function test(){
            var obj=document.querySelector("input[type=text]");
            if((obj.value.indexOf("****")!=-1)||(obj.value.indexOf("￥￥￥")!=-1)){
                alert("屏蔽关键字");
                return false;
            }
            console.log("执行成功");
        }
    </script>

d、两次输入密码是否相同

<script type="text/javascript">
        function check()
        {
            with(document.all){
                if(input1.value!=input2.value)
                {
                    alert("密码不一致");
                    input1.value = "";
                    input2.value = "";
                }
                else {
                    alert("密码一致");
                    document.forms[0].submit();
                }
            }
        }
    </script>

e、表单项不能为空

<script language="JavaScript">
    function check5(){
        if(document.a.b.value==""){
            alert('用户名不能为空！');
            document.a.b.focus();
            return false;
       }
    }
</script>

16、JS的高级应用

a、数组、集合的创建和使用

数组：一组数据的集合，数组中的每一个数据叫做一个元素，数组元素可以是任意类型。数组的数据类型是对象
隐式创建数组 var arr=[“小明”,1,5,true];
直接实例化，通过构造函数Array()创建 var arr=new Array(“小明”,1,5,true);
length属性，用于返回数组中的元素个数，返回值为整型
join()方法，通过一个指定的分隔符把数组元素放在一个字符串中
sort()方法用于对数组的元素进行排序，括号类要是没有参数则按字母顺序或者每个数字的第一位进行排序，若是有参数则按其他标准进行排序 var arr=[1,4,23,56,8,32]; var de=arr.sort(function(a,b){return b-a});
pop()移除数组元素的最后一项
push()数组末尾添加一个或多个元素

17、二级级联

下拉列表框使用select和option两个标签共同创建，在HTML DOW中，select对象代表HTML表单中的一个下拉列表框，也称下拉菜单；option对象代表HTML表单中下拉列表框中的y一个选项。
在HTML表单中，select标签出现一次，一个select对象就会被创建，option标签出现一次，一个option对象就会被创建

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>级联效果</title>
    <style>
        body{text-align: center;}
    </style>
</head>
<body>
    <form style="margin-top: 100px;border-color: black;">
        <tr>
            <td>
                姓名：<input type="text"/>
            </td>
            <br/><br/>
            <td>
                性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女
            </td><br/><br/>
            <td>
                兴趣爱好：<input type="checkbox"/>打球<input type="checkbox"/>唱歌<input type="checkbox"/>画画
            </td><br/><br/>
            <td>
                电子邮件：<input type="text"/>
            </td><br/><br/>
            <td>
                现居住地：<select id="province" onchange="changeCity()" style="width:100px;height: 22px">
                    <option>--选择省份--</option>
                </select>
                <select id="city" style="width: 100px;height: 22px;" >
                    <option>--选择城市--</option>
                </select>
            </td><br/><br/>
            <td><input type="reset" value="恢复" style="margin-left: 35px"/><input type="submit"  style="margin-left: 70px"/></td>
        </tr>
    </form>


    <script type="text/javascript">
        var cityList=new Array();
        cityList['广东省']=['广州','惠州','汕头','珠海','佛山','中山','东莞'];
        cityList['河南省']=['郑州','洛阳','开封','安阳','南阳',',周口'];
        cityList['河北省']=['石家庄','邯郸','保定','张家口','沧州'];
        cityList['湖南省']=['长沙','常德','益阳','郴州','湘西','湘潭'];
        cityList['浙江省']=['温州','杭州','宁波','嘉兴','绍兴','金华','舟山','台州','丽水'];
        function changeCity() {
            var pro=document.getElementById("province").value;
            var ci=document.getElementById("city");
            ci.options.length=1;
            for(var i in cityList){
                if(i==pro){
                    for(var j in cityList[i]){
                        ci.add(new Option(cityList[i][j],cityList[i][j]),null);
                    }
                }
            }
        }

        function allCity() {
            var pro=document.getElementById("province");
            for(var i in cityList){
                pro.add(new Option(i,i),null);
            }
        }
        window.onload=allCity;
    </script>

</body>
</html>

zzzz11y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript

javascript<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #a{font-size: 32px;text-decoration: underline;} </style> <script>
复制链接

扫一扫