JavaScript学习笔记（一）

最新推荐文章于 2022-09-27 00:52:55 发布
最新推荐文章于 2022-09-27 00:52:55 发布
阅读量131 收藏
点赞数
分类专栏： Java学习 文章标签： javascript 编程语言 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zn0999/article/details/104336308
版权

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        div.one input{
            width:50px;
        }

        div.two{
            font-family: 宋体;
        }

        div.two input{

        }

        div.two span{
            display:inline-block;
            border:1px solid lightgray;
            width:120px;
            margin-bottom: 5px;
        }

        button#generate{
            width:80px;
            height: 30px;
        }

        textarea{
            width:100%;
            height: 150px;
            margin-top: 20px;
        }

    </style>

    <script>
        document.write("Hello JavaScript" + "<br>");
    </script>

    <script>
        document.write("第一段JavaScript");
    </script>
    <br>
    <script>
        document.write("第二段JavaScript");
    </script>
    <br>
    <script src = "hello.js"></script>

    <!--函数-->
    <script>
        function print(){
            document.write("这一句话由一个自定义函数打印！<br>")
        }
        print();
    </script>

    <script>
        function print(message){
            document.write(message);
        }
        print("第一句话");
        print("<br>");
        print("第二句话");
        document.write("<br>");
    </script>

    <script>
        function print(message) {
            document.write(message);
        }
        function calc(x,y) {
            return x + y;
        }
        var sum = calc(500,200);
        print(sum);
        document.write("<br>")
    </script>


    <script>
        function calc(){
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            num1 = parseFloat(num1);
            num2 = parseFloat(num2);
            var result= num1 + num2;
            document.getElementById("result").value=result;
        }
    </script>

    <script>
        function generate(){
            var province = $("province");
            var city = $("city");
            var county = $("county");
            var town = $("town");
            var village = $("village");
            var name = $("name");

            var result1 = province + "省" + city + "市" + county + "县" + town + "镇" + village + "村的" + name;
            document.getElementById("result1").value = result1;
            
            function $(id) {
                var value = document.getElementById(id).value;
                return value;
            }
        }
    </script>
    
    <script>
        function showHello() {
            alert("HelloWrold!")
        }
    </script>



</head>
<body>

<div class = "one">
<p>
<button onclick = "document.getElementById('text').style.display = 'none'">隐藏文本</button>
<button onclick = "document.getElementById('text').style.display = 'block'">显示文本</button>
<p id = "text">这是一段可以被JavaScript隐藏的文本</p>
</p>

<p>
    <input type = "text" id= "num1"> +
    <input type = "text" id= "num2"> =
    <input type = "text" id= "result">
    <input type = "button" value= "运算" onclick = "calc()">
</p>
</div>

<div class = "two">
    <span>省：</span><input type = "text" id = "province">
    <span>市：</span><input type = "text" id = "city">
    <br>
    <span>县：</span><input type = "text" id = "county">
    <span>镇：</span><input type = "text" id = "town">
    <br>
    <span>村：</span><input type = "text" id = "village">
    <span>姓名：</span><input type = "text" id = "name">
    <br>
    <div align = "center">
    <button id = "generate" onclick = "generate()">生成</button>
    <br>
    <textarea id = "result1"></textarea>
    </div>
</div>

<!--property是onclick,表示点击的时候触发-->
<!--value是showHello()，调用showHello()函数-->
<button onclick = "showHello()">点击一下</button>


</body>
</html>

hello.js



document.write("js文件里的JavaScript" + "<br>");

var x = 10;
document.write("变量x的值:" + x + "<br>");

y = 10;
document.write("没有var声明的变量y的值" + y + "<br>");

//alert(1);

//console.log("end");

//undefined数据类型
var z;
document.write("声明了吧，但没有赋值的变量z" + z + "<br>");

//Boolean
var t = true;
var f = false;
document.write("布尔值：" + t);
document.write("<br>");
document.write("布尔值：" + f + "<br>");

//Number
var a = 10;  //十进制
var b = 012;  //第一位是0，表示八进制
var c = 0xA;  //0x开头，表示16进制
var d = 3.14; //有小数点表示浮点数
var e = 3.14e2;  //使用e的幂表示科学计数法
document.write("十进制10的值：" + a + "<br>");
document.write("八进制012的值：" + b + "<br>");
document.write("十六进制0xA的值：" + c + "<br>");
document.write("浮点数3.14的值：" + d + "<br>");
document.write("科学计数法3.14e2的值：" + e + "<br>");

//字符串  与java不同的，javascript中没有字符的概念，只有字符串，所以单引号和双引号，都用来表示字符串。
var x = 'hello';
var y = "java";
document.write("单引号的字符串" + x + "<br>");
document.write("双引号的字符串" + y + "<br>");

//动态类型  变量的类型是动态的，当值是整数的时候，就是Number类型，当值是字符串的时候，就是String类型
var x = 10;
document.write("此时x的值是" + x + "类型是数字（Number）<br>");
x = "hello";
document.write("此时x的值是" + x + "类型是字符串（String）<br>");

//typeof 进行变量类型判断
var x;
document.write('声明了但是为赋值的时候，类型是：' + typeof x);
document.write("<br>");
x = 10;
document.write("赋值10之后，类型是：" + typeof x);
document.write("<br>");
x = 5.1;
document.write("赋值5.1之后，类型是：" + typeof x);
document.write("<br>");
x = true;
document.write('赋值true之后，类型是：' + typeof x);
document.write("<br>");
x = "hell0";
document.write("赋值hello之后，类型是：" + typeof x);
document.write("<br>");

//javascript变量即便是基本类型，也是伪对象，所以他们都有属性和方法。
var a = "hello world!";
document.write("变量啊的类型是：" + typeof a);
document.write("<br>");
document.write("变量a的长度是：" + a.length + "<br>");

//转换为字符串
var a = 10;
document.write("数字" + a + "转换为字符串" + a.toString());
document.write("<br>");
var b = true;
document.write("布尔" + b + "转换为字符串" + b.toString());
document.write("<br>");
var c = "hello java";
document.write("字符串" + c + "转换为字符串" + c.toString());
document.write("<br>");

//Number转化为字符串有默认模式和基模式两种
var a = 10;
document.write("默认模式下，数字10转换为10进制" + a.toString());
document.write("<br>");
document.write("基模式下，数字10转换为2进制" + a.toString(2));
document.write("<br>");
document.write("基模式下，数字10转换为8进制" + a.toString(8));
document.write("<br>");
document.write("基模式下，数字10转化为16进制" + a.toString(16));
document.write("<br>");

//转换为数字
document.write("字符串\"10\"转换为数字的：" + parseInt("10"));
document.write("<br>");
document.write("字符串3.14转换为数字的：" + parseFloat("3.14"));
document.write("br");
document.write("字符串的10abc转换为数字的：" + parseInt("10abc"));
document.write("<br>");
document.write("字符串的helloworld转换为数字的：" + parseInt("helloworld"));  //NaN   not a number
document.write("<br>");

//转换为Boolean
// 使用内置函数Boolean() 转换为Boolean值
// 当转换字符串时：
// 非空即为true
// 当转换数字时：
// 非0即为true
// 当转换对象时：
// 非null即为true
document.write("空字符串''转换为布尔后的值：" + Boolean(""));
document.write("<br>");
document.write("非空字符串'helloworld'转换为布尔后的值：" + Boolean("helloworld"));
document.write("<br>");
document.write("数字0转换为布尔后的值：" + Boolean(0));
document.write("<br>");
document.write("数字3.14转换为布尔后的值：" + Boolean(3.14));
document.write("<br>");
document.write("空对象null转换为布尔后的值：" + Boolean(null));
document.write("<br>");
document.write("非空对象new Object()转化内布尔后的值：" + Boolean(new Object()));
document.write("<br>");

//Number()和parseInt()一样，都可以用来进行数字的转换
// 区别在于，当转换的内容包含非数字的时候，Number() 会返回NaN(Not a Number)
// parseInt() 要看情况，如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN
document.write(Number("123"));
document.write("<br>");
document.write(Number("123abc"));
document.write("<br>");
document.write(Number("abc123"));
document.write("<br>");
document.write(parseInt("123"));
document.write("<br>");
document.write(parseInt("123abc"));
document.write("<br>");
document.write(parseInt("abc123"));
document.write("<br>");

// String()和toString()一样都会返回字符串，区别在于对null的处理
// String()会返回字符串"null"
// toString() 就会报错，无法执行
var a = null;
document.write(String(a));
document.write("<br>");
document.write(a.toString());
document.write("<br>");
document.write("上一句报错，所以这一句不显示");


alert(1);
zn0999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document.getElementById
xx_yan的博客
03-28 2万+
var element = document.getElementById(id); 因为Id具有唯一性，所以这个方法用来查找页面中的某一个元素。 无Id元素的查找可以使用CSS选择器 querySelector() 参数 id 大小写敏感的字符串，指代被查找元素 返回值 elemnt 一个DOM中匹配id的Element对象。未查找到此id的Element时，返回null。 注意 get...
document.getElementById()方法使用
热门推荐
酣睡的熊㊣的技术博客
02-07 36万+
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一
document.getElementById()后面有没有.value有什么区别
tjmengqw的博客
08-13 2273
document.getElementById() 是获得元素； document.getElementById().value 是获得元素的值，假如这个元素事个type为text的input，它就会获得这个input点value值；
js 调用 命令行
暗淡亮点的博客
10-28 5475
function exec() {  var command=document.getElementById("txtCmd").value;          window.oldOnError = window.onerror;          window._command = command;          window.onerror = function (err) {     
document.getElementById()基本使用方法————JavaScript
qq_45657848的博客
09-27 4671
document.getElementById()基本使用方法————JavaScript。
javascript学习笔记
最新发布
11-24
JavaScript是一种广泛应用于网页和网络应用的编程语言，它在客户端运行，无需专门的编译步骤，而是由浏览器实时解释执行。这种解释型的特性使得JavaScript轻便且灵活，能够快速响应用户交互，提升Web应用程序的动态...
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
JavaScript学习笔记
06-23
本资源“JavaScript学习笔记”是为初学者精心准备的一份教程，旨在帮助你快速掌握JavaScript的基础知识，并解决在学习过程中可能遇到的问题。 1. **变量与数据类型**： JavaScript支持多种数据类型，包括基本类型...
Javascript学习笔记一 之 数据类型
10-28
在接触每一门编程语言之前，首先明白我们程序设计要处理的是数据，而数据又用数据类型将其区分。
document.getElementById的返回值…
弱智de克星
02-21 6340
由下图可以看到document.getElementByIdx_x的返回值类型是object; 而document.getElementByIdx_x.value的返回值类型是string，那么两个input的value相加就不是数值相加了。
document.getElementById 学习总结
bcbobo21cn的专栏
07-01 3万+
document.getElementById获取控件对象为空的解决方法   1.下面是一个简单的例子，页面加载时显示一段信息 代码如下:                   alert("hello!!!");                 在页面加载之前，会输出一些信息   执行后，确实是“在页面加载前，输出了信息”
document.getElementById详解
我的成长之路
12-15 3万+
注意： document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是 “ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才 是具体的值！   参考资料： 1. document . getElementById 的用法和 DHTML.CHM 的下载地址 http://blog.sin...
js中document.getElementById()用法
lyhmyway的专栏
03-03 6万+
dom标准里面的  获取当前文档中指定id的元素 if (document.getElementById("regjm").value != document.getElementById("regjm1").value ) {    alert("提示：请输入有效的认证码");    document.getElementById("regjm1").focus();    retur
JS中document.getElementById()用法
qq_47776903的博客
03-01 5326
getElementById 方法 返回具有指定 ID 属性值的第一个比如说有个网页中有个input 框的id叫FAX getElementById(FAX)就能得到这个input 框的对象,并使用input 框的所有属性和方法 这个是JS的一个方法，意思是通过控件ID取得元素的值，如一个form里包函text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。 <input type="text" id="FAX" name="F
Future.get()抛出ExecutionException或InterruptedException？
zn0999的博客
10-12 5095
ExecutionException和InterruptedException是两个非常不同的事情。 ExecutionException封装了正在执行的线程抛出的任何异常，所以如果线程是做某种IO导致抛出IOException异常的，那么它会被包装在一个ExecutionException中并被重新抛出。 InterruptedException不是任何出错的迹象。在那里给你一种让你的线程知道什么时候停止的方法，以便他们完成当前的工作并优雅地退出。假设我希望我的应用程序停止运行，但我不希望我的线程放弃他.
JavaScript-学习笔记.pdf
08-04
"JavaScript-学习笔记涵盖了JavaScript的基础和进阶知识，包括语言构成、语法要点以及实际应用中的关键概念。从JavaScript的起源和组成开始，介绍了JS书写的位置，强调了在HTML中嵌入脚本的重要性。接下来，详细讲解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值